Filters

CSS filter effects for visual transformations. Apply blur, brightness, contrast, and other effects to elements or their backdrops.

Blur

Gaussian blur effect. Use for glassmorphism, focus effects, or softening images.

blur-none

blur-xs

blur-sm

blur-md

blur-lg

blur-xl

blur-2xl

blur-3xl

Backdrop Blur (Glassmorphism)

Apply blur to the area behind an element for frosted glass effects.

backdrop-blur-sm

backdrop-blur-md

backdrop-blur-lg

backdrop-blur-xl

Brightness

Adjust brightness. Values below 100 darken, above 100 brighten.

brightness-0

brightness-25

brightness-50

brightness-75

brightness-100

brightness-125

brightness-150

brightness-200

Contrast

Adjust contrast. Values below 100 reduce contrast, above 100 increase it.

contrast-0

contrast-25

contrast-50

contrast-75

contrast-100

contrast-125

contrast-150

contrast-200

Grayscale & Sepia

Remove color (grayscale) or apply vintage toning (sepia).

grayscale-50

grayscale-100

sepia-50

sepia-100

Saturation

Adjust color saturation. Values below 100 desaturate, above 100 oversaturate.

saturate-0

saturate-50

saturate-100

saturate-150

saturate-200

Hue Rotation

Rotate all colors around the color wheel by the specified angle.

hue-rotate-0

hue-rotate-15

hue-rotate-30

hue-rotate-60

hue-rotate-90

hue-rotate-180

Invert

Invert colors. Useful for monochrome graphics that need to flip between themes.

invert

Combined Filters

Multiple filters can be combined for complex effects.

blur + brightness

grayscale + contrast

sepia + saturate

hue + brightness