opacity()

Anonymous contributor's avatar
Anonymous contributor
Published Jul 13, 2021Updated Nov 26, 2023
Contribute to Docs

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

Syntax

filter: opacity(<value>);

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%);
}

Comparison between a original image and the image with opacity filter

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

All contributors

Contribute to Docs

Learn CSS on Codecademy