CSS Filter Playground

Stack and adjust CSS filter effects (blur, brightness, contrast, hue-rotate, etc.) with live image preview.

Tested tool guide Tested browser tools Checked August 15, 2026

What CSS Filter Playground does, with a checked example

CSS Filter Playground lets you build a CSS filter value by stacking individual filter functions - blur, brightness, contrast, hue-rotate, grayscale, saturate, sepia, invert, opacity, drop-shadow - each with its own slider, and see the combined effect applied live to a sample image in the browser. As you add, adjust, or reorder functions it rewrites the filter: declaration to match, so what's on screen is exactly the CSS you'd paste into a stylesheet. The part people miss: filter functions apply in the order they're listed, left to right, so the same functions with the same values can render differently once reordered.

Worked example

A concrete input and expected output from the current implementation.

Input

Stack, in this order: blur 4px, then brightness 120%, then contrast 90%, then hue-rotate 30deg

Expected output

filter: blur(4px) brightness(120%) contrast(90%) hue-rotate(30deg);

The tool joins the active functions in the order they were added, using the unit each function expects - px for blur, percentages for brightness and contrast, degrees for hue-rotate.

How the result is produced

An ordered filter stack, not one value

You pick filter functions from a fixed set - blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow - and add each to an ordered stack with its own numeric control. The tool concatenates the active entries into a single filter declaration in stack order, the same way the CSS filter property composes multiple functions.

Live preview, real browser rendering

Every slider change updates the sample image's inline filter style immediately, using the browser's own filter rendering rather than a server round trip or precomputed preview, so the preview shows how the current browser paints it; filter support and rendering can differ across browsers. The resulting filter: declaration is shown as plain text you can copy straight into a stylesheet.

Good uses

matching a design mockup's photo treatment (desaturated, high-contrast, sepia) and grabbing the exact filter: CSS instead of eyeballing values by hand
prototyping a hover, disabled, or loading state for an image or icon, like grayscale plus reduced brightness, before wiring it into a stylesheet
checking how drop-shadow, blur, or hue-rotate combine and in what order, before committing to a specific filter stack in production CSS

Limits and checks

Stack order changes the result: the same functions and values can render differently depending on the order you added them, since each filter operates on the output of the previous one rather than on the original pixels independently.
The preview reflects only the sample image loaded in the tool; the same numeric values can look much stronger or weaker on your own image if its baseline brightness, contrast, or color balance differs.
The output is a live CSS effect, not an edited file - copying the filter: string doesn't bake the look into a new image, and heavy filters, especially blur and drop-shadow, can be costly to repaint on large or animated elements.

Common questions

Can I export the sample image with the filter baked in as a new picture file?

No. This generates a CSS filter value, not a processed image file - the sample image itself is never altered or re-encoded. Applying the effect to your own image just means putting the copied filter: declaration on that element's CSS. If you need a flattened image with the effect baked into the pixels, that requires a separate export step, such as a canvas render, that this tool doesn't provide.

Why does the same set of filters look different if I just change the order?

Because filter functions apply sequentially, each one working on the output of the one before it, not independently on the original image. Blur before hue-rotate isn't guaranteed to match hue-rotate before blur. For drop-shadow, earlier filters can change the input alpha mask that determines the shadow shape, while the shadow color comes from its color argument or currentColor. Reordering the stack in this tool changes both the preview and the generated CSS list order.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.