CSS Opacity

1 min read Log in to track progress

opacity makes an entire element — including its children and text — partially transparent, from 0 (invisible) to 1 (fully opaque).

CSS

.faded {
  opacity: 0.5;
}

This differs from setting a transparent color (rgba()/hsla() alpha) in an important way: opacity fades the whole element as one unit (background, border, text, children all fade together), while an alpha color only fades that one property, leaving text and children fully opaque.

CSS

.a { opacity: 0.4; }                       /* text fades too */
.b { background: rgba(79, 70, 229, 0.4); } /* only the background fades */

A common pattern: fade an element on hover as a lightweight interactive cue, paired with a transition for smoothness:

CSS

.thumbnail {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.thumbnail:hover {
  opacity: 0.85;
}