Overview
Brightness utilities are bundled and work well for hero media, image overlays, and quick tonal corrections when the source asset should stay unchanged.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