Skip to main content

​
Overview

Color effect utilities apply grayscale, invert, or sepia through the filter property, plus filter-none to reset inherited filters. They are ideal for inactive states, editorial tone, and quick dramatic treatments.
ClassFilter (CSS)Usage
.filter-nonefilter: none;Clear inherited filters on the element
.grayscalefilter: grayscale(1);Full grayscale
.grayscale-50filter: grayscale(0.5);Partial desaturation
.invertfilter: invert(1);Full color inversion
.invert-50filter: invert(0.5);Partial inversion
.sepiafilter: sepia(1);Full sepia tone
.sepia-50filter: sepia(0.5);Light sepia warmth

​
Example

​
Markup

<img alt="Toned media" class="sepia-50 rounded-xl" src="editorial.jpg"/>

​
Best Practices

  • Use filter-none to reset a filter chain when a nested asset should stay untouched.
  • Use grayscale helpers for muted previews or inactive image states.
  • Use invert helpers cautiously on artwork and icons so contrast remains readable.
  • Use sepia on editorial or archival treatments where warmth is intentional.

Saturate

Reintroduce or reduce intensity around grayscale and sepia treatments

Hue Rotate

Shift color families instead of flattening them

Drop Shadow

Layer alpha-aware shadow after the color treatment

Filters Overview

Review the full shipped filter surface