Filters
CSS filter and backdrop-filter utility classes - blur, brightness, contrast, grayscale, invert, saturate, sepia, and opacity filters with 0–100 intensity scales.
Filter utilities
Apply visual effects with .{effect}-{value}. Each filter effect generates classes from 0 to 100 in steps of 10.
<img class="blur-30" src="photo.jpg">
<img class="grayscale-100" src="photo.jpg">
<img class="brightness-50" src="photo.jpg">
<img class="spia-80" src="photo.jpg">Available effects
| Effect | Class pattern | CSS property | Scale |
|---|---|---|---|
| Blur | .blur-{0–100} | filter: blur() | 0em – 4.5em |
| Brightness | .brightness-{0–100} | filter: brightness() | 0 – 1 (also 210–200 for 1.1–2) |
| Contrast | .contraste-{0–100} | filter: contrast() | 0% – 100% |
| Grayscale | .grayscale-{0–100} | filter: grayscale() | 0% – 100% |
| Invert | .invert-{0–100} | filter: invert() | 0% – 100% |
| Opacity | .opacity-{0–100} | filter: opacity() | 0% – 100% |
| Saturate | .saturate-{0–100} | filter: saturate() | 0% – 100% |
| Sepia | .spia-{0–100} | filter: sepia() | 0% – 100% |
Backdrop filter
Apply the same effects as a backdrop-filter with the .backdrop-{effect}-{value} pattern. Useful for frosted-glass effects on overlays.
<!-- Frosted glass overlay -->
<div class="backdrop-blur-30 bg-white bg-opacity-50">
Frosted content
</div>
<div class="backdrop-grayscale-100">
Grayscale backdrop
</div>Gradients
Background gradient utilities are generated for all theme color combinations. Use .gradient-{color1}-{color2} for two-color gradients or .gradient-{color1}-{color2}-{color3} for three-color gradients.
Preview
primary -> success
danger -> warning
primary -> purple -> pink
<!-- Two-color gradient -->
<div class="gradient-primary-success">...</div>
<!-- Three-color gradient -->
<div class="gradient-primary-purple-pink">...</div>
All combinations. Gradients are generated for every pair and triple of colors in $theme-colors. With 18 theme colors, this produces thousands of gradient utilities automatically.