Overview
Brightness utilities are bundled and work well for hero media, image overlays, and quick tonal corrections when the source asset should stay unchanged.| Class | Filter (CSS) | Usage |
|---|---|---|
.brightness-75 | filter: brightness(0.75); | Noticeably dimmed media |
.brightness-90 | filter: brightness(0.9); | Slight dim for backgrounds behind text |
.brightness-100 | filter: brightness(1); | Neutral / no change (matches preview scale) |
.brightness-110 | filter: brightness(1.1); | Light lift |
.brightness-125 | filter: brightness(1.25); | Stronger lift; use sparingly |
Example
Markup
Best Practices
- Reduce brightness for background media behind text.
- Increase brightness sparingly to avoid washed-out visuals.
- Pair brightness with contrast carefully so images stay readable.
- Prefer opacity alone when you only need a simple dimming effect.
Related Utilities
Contrast
Tune contrast alongside brightness
Saturate
Adjust color intensity after brightness changes