CSS Filter Generator

Yes, and it is one of the smoothest ways to add hover feedback. Put transition: filter 0.3s ease; on the element, then change the filter list in the :hover rule, for example from grayscale(100%) to grayscale(0%) for the classic color-on-hover photo grid. Keep the same functions in the same order in both states so the browser can interpolate each value instead of jumping.

filter: applies to the element itself. An img with filter: blur(5px) is blurry. backdrop-filter: applies to whatever’s RENDERED BEHIND the element. A semi-transparent div with backdrop-filter: blur(20px) blurs the content behind it – the glassmorphism effect. Requires a transparent or semi-transparent background to be visible.

box-shadow: shadow follows the element’s bounding box. Rectangular shadow even on an irregular shape. drop-shadow: shadow follows the alpha channel of the content. For a transparent PNG icon, the shadow matches the icon’s actual silhouette, not its rectangular bounds. Drop-shadow is GPU-accelerated; box-shadow is CPU-rendered.

Yes. blur(5px) grayscale(100%) blurs first then desaturates. grayscale(100%) blur(5px) desaturates first then blurs. Different visual results. The tool emits filters in a consistent order; rearrange manually if you need a specific composition order.

Most filters (brightness, contrast, opacity, grayscale, sepia, invert, saturate, hue-rotate) are very cheap – GPU-accelerated, runs at 60fps on any modern device. blur is the expensive one: each pixel samples nearby pixels. Large blur values + large elements = potential lag. drop-shadow internally blurs the alpha channel, so it has the same caveat.

hue-rotate uses HSL-style hue rotation, not perceptually-uniform rotation. Colors near pure red rotate visibly differently than colors near pure green, even with the same angle. For perceptually-uniform color shifts, use the LCH color space (CSS Color 4) or post-process in a color editor.

Instagram’s actual filters use sophisticated multi-pass color grading that CSS filter can’t fully replicate. These presets approximate the “look and feel” of Clarendon and Gingham using just CSS – they’re 80% there but not pixel-identical. For exact replication, use a server-side image processor with lookup tables (LUTs).

The opacity() filter does the same thing as the opacity property – but combines with other filters in a single declaration. Useful for animating multiple effects simultaneously without juggling two properties.

For filter: no prefix needed since Safari 9 (2015). For backdrop-filter: Safari requires -webkit-backdrop-filter as well, even in current versions. The tool emits both when backdrop-filter mode is selected.

No. The image you upload to test stays in your browser. Pure browser-side CSS generation.