Image Filter Editor HTML CSS JS — CSS Filters

An image filter editor lets users upload a photo, adjust brightness, contrast, saturation, blur, hue, sepia, grayscale and invert with live sliders, and download the edited result. The clever part is that all the heavy lifting is done by the browser's built-in CSS filter engine for the live preview, and by the matching Canvas `ctx.filter` property for the final export — so there is no per-pixel JavaScript image processing and no library at all. Here is how it is built.

Loading the image with FileReader and drag-and-drop

Images enter the editor two ways. A file input fires a change event, and a drop zone listens for the DataTransfer API events dragover, dragleave and drop. In the drop handler, event.dataTransfer.files[0] gives the dropped file, and event.preventDefault() stops the browser from navigating away to open it. Both paths funnel into a single loader that uses the FileReader API: reader.readAsDataURL(file) reads the image into a base64 data URL, and on reader.onload that URL is assigned to an Image element's src. Reading as a data URL keeps everything client-side — the file never leaves the browser.

Composing the CSS filter string

The editor defines a FILTERS array describing each adjustment: its CSS function name (brightness, contrast, saturate, blur, hue-rotate, sepia, grayscale, invert), the slider range, the default value, and the unit (%, px or deg). Each filter is rendered as a labeled range input.

On any slider change, the code rebuilds a single CSS filter string by mapping over the array: for each filter it produces a token like brightness(120%) or blur(3px), then joins them with spaces into one declaration such as brightness(120%) contrast(110%) saturate(150%) blur(0px) hue-rotate(0deg) sepia(0%) grayscale(0%) invert(0%). Assigning that string to the preview image's style.filter applies every adjustment at once. The order of functions in the string matters — CSS filters are applied left to right, so each operates on the output of the previous — which is why the array order is fixed and meaningful.

Why CSS filters instead of pixel manipulation

A naive editor would call getImageData, loop over millions of bytes adjusting each channel, and putImageData back — slow and complex. By contrast, CSS filters are GPU-accelerated and free: the browser already implements brightness, contrast, hue rotation, sepia matrices and Gaussian blur natively. The live preview updates instantly even on large images because the compositor does the work, and the code stays tiny since it only assembles a string.

Exporting with Canvas ctx.filter

The catch is that style.filter only affects how the element is displayed — it does not change the underlying image data, so you cannot just save the <img>. To produce a real filtered file, the export step draws to a canvas. It creates an offscreen <canvas> sized to the image's naturalWidth and naturalHeight (the true pixel dimensions, not the displayed size), gets the 2D context, and sets ctx.filter to the exact same composed filter string used for the preview. Then ctx.drawImage(previewImg, 0, 0) rasterizes the image through the filter pipeline directly into the canvas bitmap. Because ctx.filter accepts the same syntax as the CSS property, the canvas output is pixel-identical to what the user sees.

Finally the canvas is exported with canvas.toDataURL(), which returns a PNG data URL. A temporary anchor with a download attribute and that URL as its href is clicked programmatically to trigger the browser's save dialog. This canvas-to-anchor pattern is the standard way to download generated images.

Reset and randomize

A reset button restores every slider to its default value from the FILTERS array and rebuilds the filter string, returning the image to its original look. A randomize button assigns each filter a random value within its range and reapplies, which is a fun way to discover combinations. Both simply mutate the slider values and call the same rebuild routine, demonstrating how a single source of truth — the filter string assembled from the inputs — keeps preview, export, reset and randomize perfectly in sync.

A copyable filter string

Because the live CSS filter string is exactly what a developer would paste into a stylesheet, the editor also surfaces it as text. Users can copy the current filter: declaration and drop it straight into their own CSS, making the tool double as a visual generator for CSS filter values.

Altogether the editor shows how to combine the FileReader API, the DataTransfer drag-and-drop API, GPU-accelerated CSS filters for instant preview, and canvas ctx.filter plus toDataURL for true export — a complete, dependency-free image editing flow in a few dozen lines.