What does the CSS filter property do?

The CSS filter property applies graphical effects — blur, colour and tone adjustments — to an element before it is drawn. You chain functions like blur(5px) brightness(110%) contrast(120%) saturate(140%) hue-rotate(30deg), and the browser composites them in order. It works on images, videos, backgrounds and any HTML element, and is GPU-accelerated in modern browsers.

Does the filter change my actual image file?

No. A CSS filter is purely a display effect — the underlying image bytes are untouched, which is why the same source can render differently on different pages. If you want a real filtered file, use the "Download PNG" button: it re-draws the image through an HTML canvas with the same filter applied, producing a new PNG with the effect baked into the pixels.

In what order are the filter functions applied?

Filters are applied left to right, and order matters. brightness(150%) blur(4px) brightens first then blurs the brightened result, while blur(4px) brightness(150%) blurs first. This playground always emits a consistent order so your copied CSS is predictable, but you can reorder the functions by hand afterwards for different looks.

How do I convert these values to Tailwind CSS?

Click "Copy Tailwind" to get arbitrary-value utility classes such as blur-[4px] brightness-[1.1] contrast-[1.2] saturate-[1.4]. Tailwind expresses brightness, contrast and saturate as multipliers (1 = 100%), so the tool divides the percentage by 100 for you. hue-rotate keeps degrees and blur keeps pixels.

Which browsers support CSS filters?

All current versions of Chrome, Edge, Firefox and Safari fully support the standard filter functions used here. Support has been stable for years, so no vendor prefix is needed for production. The drop-shadow and url() SVG filters have a few edge-case differences, but blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert and opacity are universally safe.

Completely. The image is read with the browser FileReader API, rendered as a local data URL, and every slider, preview, preset and PNG export happens on your device. Nothing is uploaded, and your saved presets live only in this browser via localStorage.

CSS Filter Playground

The CSS Filter Playground lets you dial in image effects visually instead of guessing numbers in a stylesheet. Load your own photo (or the built-in sample), drag the sliders for blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert and opacity, and the preview updates in real time. When the look is right, copy it as a plain filter value, a complete CSS rule, or Tailwind utility classes — or download a PNG with the effect permanently baked into the pixels. It’s built for front-end developers tuning a hero banner, designers mocking up a duotone treatment, and anyone who wants a photo filter without opening a heavyweight image editor.

How it works

The CSS filter property accepts a space-separated chain of functions that the browser composites in order, left to right. This tool maps one slider to each common function and rebuilds the chain on every change, only including a function when it differs from its no-op value — so brightness(100%) and blur(0px) are omitted automatically and your output stays clean. The live preview simply sets that string as the filter style on the image element, which is why it is instant and GPU-accelerated.

The Download PNG button does something the preview can’t: it re-draws your image onto an HTML canvas, sets the canvas context’s filter to the same string, and exports the result. Because the canvas rasterises the effect, the downloaded file contains real filtered pixels you can use anywhere — not just a CSS hint. The before/after split overlays the untouched original clipped to a draggable divider so you can judge the effect honestly, and saved presets let you name a look once and reapply it to any image later. Everything — file reading, canvas export, and preset storage — runs locally in your browser with no network calls.

Example

Suppose you want a moody, cinematic banner. Start with the Noir quick look (full grayscale, contrast pushed to 135%, brightness eased to 95%), then nudge contrast down a touch for less crush. The tool emits:

.filtered {
  filter: brightness(95%) contrast(135%) grayscale(100%);
}

For a warm vintage photo instead, set sepia to 45%, saturate to 130%, and add a small hue-rotate(350deg) — the playground produces the exact chain, and the Tailwind copy gives you brightness-[0.95] contrast-[1.35] grayscale-[1] for utility-first projects. Double-click any slider to zero out just that one effect while keeping the rest, and the value always reads back in the same predictable order every time.