CSS Filter Playground

Stack CSS filter functions on a live preview. Useful for hover treatments, muted states, and quick photo adjustments without opening an image editor.

Tip

Filters run in the browser on the painted element. Great for UI polish; not a replacement for proper image exports when you need print-quality color management.

Blur (0px)

Brightness (100%)

Contrast (100%)

Grayscale (0%)

Hue Rotate (0deg)

Invert (0%)

Opacity (100%)

Saturate (100%)

Sepia (0%)

filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%);

CSS filter functions

The filter property applies one or more graphical effects. Typical jobs: dim a disabled card, blur a modal backdrop sibling, or shift a hero image toward grayscale on hover.

Basic adjustments

brightness(%): overall lightness
contrast(%): separation between lights and darks
saturate(%): color intensity
opacity(%): transparency (often better handled with the opacity property alone)

Color transforms

grayscale(%): desaturate toward gray
sepia(%): warm brown tone
invert(%): invert channels
hue-rotate(deg): shift hues around the wheel

Effects

blur(px): Gaussian blur
drop-shadow(): shadow that follows non-rectangular alpha
url(): reference an SVG filter

Handy combinations

Vintage: sepia(0.4) contrast(1.1)
Punchy: contrast(1.2) saturate(1.15)
Soft focus: blur(2px) brightness(1.05)
Tint shift: hue-rotate(30deg) saturate(1.1)

Performance notes

Prefer modest blur radii. Animate filters sparingly on large full-bleed images. When a filter will change often, will-change: filter can help—but remove it when idle so memory stays tidy.

Frequently asked questions

Can I combine multiple filters?

Yes. Space-separate functions on one filter property. Order matters—later filters run on the result of earlier ones.

How do filters affect performance?

Modern browsers often GPU-accelerate filters, but stacking many heavy ones (especially large blurs) can still tax mobile GPUs. Test on target devices if filters animate.

Can CSS filters be animated?

Yes, with transitions or keyframe animations. Short transitions on hover (grayscale to color, slight brightness) are common and usually cheap.

What about older browsers?

Filter support is strong in current browsers. For legacy clients, keep the unfiltered image readable and treat filters as progressive enhancement.

Is backdrop-filter the same as filter?

No. filter affects the element itself. backdrop-filter blurs or tints what shows through behind a semi-transparent element (for example frosted glass panels).