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.


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

Looking to contribute?

Learn CSS on Codecademy