Loading page
About this tool
Apply standard CSS filter properties (blur, grayscale, sepia, invert, hue-rotate) visually with live image preview and clean CSS exports.
CSS Filter Effects builds a `filter` declaration from nine standard filter functions — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia — and previews the result live on an image with a draggable before-and-after split. It is for front-end developers and designers tuning an image treatment who want the exact CSS rather than an exported bitmap. Only the values you actually change are written into the output, so the declaration stays as short as the effect requires.
Open CSS Filter Effects on AltFTool — it loads instantly in your browser.
Under Select Preview Target Image, pick Landscape, Portrait or Abstract Neon, or press Upload Custom to load your own image.
Move the Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Saturate and Sepia sliders in Filter Values Configuration; Reset Filters puts every slider back to its default.
Drag the Comparison Split Visualizer to compare Original against Filtered, then press Copy for the filter shorthand or Download to save filter-effects.css.
A draggable divider shows filtered and unfiltered halves of the same image side by side, which is the only reliable way to judge a subtle contrast or saturation change.
Values still at their neutral defaults are omitted, so you get `filter: grayscale(80%);` instead of a long chain of no-op functions, and `none` when nothing is applied.
Upload any image and it is read locally as a data URL for the preview, so you can tune the filter against the actual asset rather than a stock sample.
Nine: blur (0–20px), brightness (0–200%), contrast (0–200%), grayscale (0–100%), hue-rotate (0–360deg), invert (0–100%), opacity (0–100%), saturate (0–200%) and sepia (0–100%). All nine are standard CSS filter functions supported across current browsers.
Yes — filters are applied left to right, so `grayscale(100%) sepia(100%)` and `sepia(100%) grayscale(100%)` produce different images. The generator always writes them in a fixed order so the value you copy reproduces exactly what the preview showed.
No. It produces a CSS rule that the browser applies at render time; the underlying image file is untouched. That means the same asset can be reused with different filters, but also that anyone can view the original by disabling the style.
No. The file is read in the browser with FileReader and turned into a data URL used only for the on-page preview, so it never leaves your device.