Home » Learn » CSS Tutorial » CSS Opacity / Transparency

CSS Opacity / Transparency

The opacity property sets how see-through an element is. The value goes from 0 (invisible) to 1 (fully visible).

.a { opacity: 1; }
.b { opacity: 0.6; }
.c { opacity: 0.3; }
Output in the browser
1
0.6
0.3

opacity or rgba?

opacity makes the whole element transparent, including its text and children. If you want only the background transparent, use an rgba() colour.

.box1 { opacity: 0.5; }                         /* text also fades */
.box2 { background: rgba(30, 136, 229, 0.5); }    /* only background fades */
Output in the browser
opacity 0.5 (text also fades)
rgba background (text stays solid)

Fade effect on hover

img { opacity: 0.7; transition: opacity 0.3s; }
img:hover { opacity: 1; }
Note: An element with opacity: 0 is invisible, but it still takes space and can still be clicked. To remove it fully, use display: none.

Summary

  • opacity: 0 to 1 controls transparency of the whole element.
  • Use rgba() to fade only a colour.
  • Next: CSS Images.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.