opacity()
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%);}
The first image on the left is the original, and the image on the right has the opacity
filter set to 50%
.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours