CSS Filter Generator

Every CSS filter generator lets you stack blur(), brightness(), contrast() and the rest — but almost none of them let the order matter, because most only ever apply filters in one fixed sequence. This one is different: the filter chain is a real, reorderable list built with native HTML5 drag-and-drop, and re-ordering two functions genuinely changes the rendered pixels, exactly as it would in production CSS. Blur-then-hue-rotate looks different from hue-rotate-then-blur, and now you can see why before you ship it.

Upload your own photo and the nine chainable functions — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert and drop-shadow — apply live to it as an actual `filter` CSS declaration on an `<img>` element, not a simulated swatch. Add a function from the select, drag its row up or down the list to change its position in the chain, adjust its slider, and the preview and the copyable `filter: ...;` line update on every input. Remove a step with its own button, right there in the row.

A second, smaller chain builds a `backdrop-filter` value applied to an overlay panel positioned over the preview, so you can see the frosted-glass effect — the technique behind modern translucent navigation bars and modal backgrounds — without touching the underlying image's own filter chain. It works even before you upload a photo, against the colorful placeholder background, so you can dial in a frosted panel design in seconds.

When the preview looks right, copy the CSS straight from the output box, or export a real PNG: the same filter string is handed to a Canvas 2D context's `ctx.filter` property — which uses the identical syntax as the CSS `filter` property — and the canvas is converted to a downloadable file with `canvas.toBlob()`. The exported image matches the live preview exactly, because it is produced by the same filter string running through the same rendering primitive. Everything happens locally in your browser; your photo is never uploaded anywhere.