Prev Next

CSS Opacity

The opacity property sets the transparency of an element. Values range from 0.0 (fully transparent) to 1.0 (fully opaque). Adjusting opacity can create subtle overlays, faded effects, or highlight elements by making backgrounds semi-transparent, contributing to dynamic and modern UI designs.

Key Topics

  • Semi-transparent Backgrounds
  • Fade-in and Fade-out Effects
  • Layering Elements

Example

opacity: 0.5; makes an element 50% transparent.

.overlay {
    background: black;
    opacity: 0.7;
    color: #fff;
    padding: 20px;
}

Explanation: The semi-transparent black overlay allows underlying content to show through slightly, adding depth or focusing user attention.

Key Takeaways

  • Visual Interest: Opacity adds depth and layering effects.
  • Focus: Highlight important elements by making others translucent.
  • Subtlety: Use opacity for smooth transitions or hover states.
Prev Next