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
Blur
Combine brightness with blur for hero media treatments
Opacity
Use bundled opacity utilities for simpler dimming