Utilities
Filters
Blur, grayscale, invert and sepia filters, plus backdrop blur.
24classes
0variant classes
2properties
Live example
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs font-mono text-center">
<div><div class="h-20 rounded-xl bg-gradient-to-br from-rose-500 via-amber-400 to-sky-500"></div><p class="mt-1">none</p></div>
<div><div class="h-20 rounded-xl bg-gradient-to-br from-rose-500 via-amber-400 to-sky-500 grayscale"></div><p class="mt-1">grayscale</p></div>
<div><div class="h-20 rounded-xl bg-gradient-to-br from-rose-500 via-amber-400 to-sky-500 sepia"></div><p class="mt-1">sepia</p></div>
<div><div class="h-20 rounded-xl bg-gradient-to-br from-rose-500 via-amber-400 to-sky-500 blur-sm"></div><p class="mt-1">blur-sm</p></div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | not generated | 0 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | not generated | 0 |
Filter 14
Variants: none
| Class | CSS |
|---|---|
blur-none | filter: none; |
blur-xs | filter: blur(4px); |
blur-sm | filter: blur(8px); |
blur | filter: blur(8px); |
blur-md | filter: blur(12px); |
blur-lg | filter: blur(16px); |
blur-xl | filter: blur(24px); |
blur-2xl | filter: blur(40px); |
blur-3xl | filter: blur(64px); |
grayscale | filter: grayscale(100%); |
grayscale-0 | filter: grayscale(0); |
invert | filter: invert(100%); |
sepia | filter: sepia(100%); |
filter-none | filter: none; |
Backdrop filter 10
Variants: none
| Class | CSS |
|---|---|
backdrop-blur-none | -webkit-backdrop-filter: none; backdrop-filter: none; |
backdrop-blur-xs | -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); |
backdrop-blur-sm | -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); |
backdrop-blur | -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); |
backdrop-blur-md | -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); |
backdrop-blur-lg | -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); |
backdrop-blur-xl | -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); |
backdrop-blur-2xl | -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); |
backdrop-blur-3xl | -webkit-backdrop-filter: blur(64px); backdrop-filter: blur(64px); |
backdrop-filter-none | -webkit-backdrop-filter: none; backdrop-filter: none; |