opacity()

Controls how much of the background is visible through the element it is applied to.

Syntax

filter: opacity(<value>);

Copy to clipboard
Copy to clipboard

Here the required <value> can be one of the following:

• Number value: 0, 1
• Percentage value: 25%, 50%

Note: Value defaults to 1 or 100%, leaving the element unchanged. A value of 0 and 0% will be completely transparent. Negative values and values greater than 1 or 100% are not allowed.

Example 1

Set the opacity of our element to 50%:

.banner-image {
  filter: opacity(50%);
}

Copy to clipboard
Copy to clipboard

The first image on the left is the original, and the image on the right has the opacity filter set to 50%.