CSS Filter Generator: Live Image Preview

Compare nine CSS image filters, reorder the pipeline, preview a local image without uploading it and copy the exact filter declaration.

02 / Native comparison

One image. Before and after.

Built-in sample · color, detail and transparent areas

Original

Result · exported

Choose a local image

PNG/JPEG/WebP: up to 4 MiB, 4096px per side and 4MP. Animation uses its default image or first frame. Read locally; no image export.

Both sides share preview dimensions; the checkerboard is not filtered. The frame may clip blur overflow; overflow is not exported. Scaling, color management and browsers can affect appearance.

04 / CSS

Copy the current order

filter: none;

Only the filter declaration is copied, not the image, preview size, background or clipping. Settings stay on this page without upload, persistence or URL parameters. Existing page analytics may run, without image, filename or setting data.

03 / Order & precision

Select a filter. Make it precise.

Apply in numbered order, matching CSS written left to right. Each step processes the previous result. One instance per function.

Blur `blur()`

Check Enable to edit. Disabled values are retained but do not affect output or validation.

Blur (px)

0–20px; up to one decimal, no units.

Arrow keys nudge by 0.1; Shift by 1. Blank, exponent, unit-bearing and out-of-range values are not silently corrected. These are editor limits, not CSS limits.

Blur is not redaction: original content remains. This is not a photo editor or a WCAG certificate. Pixel limits are checked after decoding and cannot guarantee prevention of memory spikes; resize large images first.

How to use this tool

Start with a preset or choose a local PNG, JPEG or WebP image. Enable a filter, select it to adjust its value, and move it up or down. Compare original and result at the same size, then copy CSS. Only active, valid values are exported.

When not to use it

This is not a photo editor, redaction tool or accessibility certificate. It does not import arbitrary CSS, export images, animate filters or generate backdrop-filter, drop-shadow or SVG filters. Check color, clipping, stacking and positioned descendants in your real component.

Design a gradient background → · Design polygon clipping →

Read the guide →

See the effect. Shape the pipeline.