effects
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).
opacity: <number> (0 to 1) | <percentage>Common values
| Value | Effect |
|---|---|
| 1 | Fully opaque |
| 0 | Fully transparent but still occupies space |
| 0.5 | Half transparent |
| 0% | Percentage form of 0 |
| 60% | Percentage form for 0.6 |
Examples
.disabled { opacity: 0.5; pointer-events: none; }Dimmed and non-interactive control
.fade-in { opacity: 0; transition: opacity .3s; } .fade-in.show { opacity: 1; }Fade transition triggered by a class
.overlay { background: black; opacity: .6; }Semi-transparent modal backdrop
Gotcha
opacity affects children too and creates a new stacking context; for background-only transparency, use rgba/hsla instead.
Related properties
color
Sets the foreground text color and inherits by default. Modern browsers support oklch() and color(display-p3) for wider-gamut design systems.
background
Shorthand for all background-* properties, letting you set color, image, position, size, and repeat in one declaration. Resets any background properties you do not specify to their initial values.
transition
Shorthand that animates changes to specified CSS properties over a duration. It is the simplest way to add polish to hover, focus, and state changes.
z-index
Sets the stack order of positioned elements along the z-axis. Higher values are drawn in front of lower ones within the same stacking context.
box-shadow
Adds one or more shadows around an element's box. Multiple comma-separated shadows layer to create depth, glow, or inset effects.