CSS Opacity

Subject: css

CSS Opacity

The opacity property in CSS is used to control the transparency level of an element. It accepts values from 0 (completely transparent) to 1 (fully opaque). This property is commonly used for hover effects, overlays, or background fading.

Syntax

🚀 Try it in Compiler
  • value: A number between 0.0 (fully transparent) and 1.0 (fully visible)

Example: Using Opacity on Elements

🚀 Try it in Compiler

Use Cases for opacity

  • Creating hover or fade-in effects
  • Making background overlays
  • Softening UI elements without hiding them
  • Styling disabled or inactive sections

Tip: Opacity Affects Child Elements

When opacity is applied to a parent, all child elements inherit the same transparency level.

To avoid this, use rgba() or hsla() for background colors instead of opacity.

Example:

🚀 Try it in Compiler

Key Takeaways

  • opacity ranges from 0 (fully transparent) to 1 (fully opaque).
  • It affects the entire element and its children.
  • Use transition for smooth fading effects.
  • Prefer rgba() or hsla() when only background transparency is needed.
  • Useful in overlays, modals, buttons, and image effects.
Next: CSS Flexbox Introduction