Filters & Backdrop

CSS filter= and backdrop= attrs. Apply blur, grayscale, sepia, brightness, contrast, and more to any element or its background.

Blur filters

filter="blur-*"

blur-sm

blur

blur-md

blur-lg

<img filter="blur-sm" />
<div filter="blur-lg">…</div>

Color filters

grayscale · sepia · invert

grayscale

sepia

sepia-50

invert

<img filter="grayscale" />
<div filter="sepia">…</div>
<div filter="invert">…</div>

Brightness & contrast

brightness-up

brightness-down

contrast-up

saturate

<div filter="brightness-up">brighter</div>
<div filter="contrast-up">more contrast</div>
<div filter="saturate">saturated</div>

Combo presets

vintage

cold

warm

matte

<img filter="vintage" />
<img filter="cold" />
<img filter="warm" />
<img filter="cinema" />

Backdrop filter

backdrop= on overlay elements

backdrop="blur"

<!-- Frosted glass overlay -->
<div backdrop="blur" style="border:1px solid rgba(255,255,255,0.2)">
  Frosted overlay
</div>

<!-- Dark overlay -->
<div backdrop="dark">…</div>

<!-- Saturated blur -->
<div backdrop="saturate">…</div>

All values

<!-- filter= -->
filter="blur-sm|blur|blur-md|blur-lg|blur-xl"
filter="grayscale|grayscale-50|sepia|sepia-50|invert"
filter="brightness-up|brightness-down|contrast-up|contrast-down"
filter="saturate|desaturate|hue-90|hue-180|hue-270"
filter="drop-shadow|drop-shadow-color"
filter="vintage|cold|warm|matte|cinema"

<!-- backdrop= -->
backdrop="blur-sm|blur|blur-lg|blur-xl"
backdrop="brightness|dark|contrast|saturate|invert"