CSS filter generator

About this tool

CSS filters apply graphical effects like blur and color shifts without editing the source image. Use filter on the element itself, or backdrop-filter on a semi-transparent overlay to blur content behind it (frosted glass).

Functions combine left-to-right. This tool outputs the standard property plus -webkit-backdrop-filter when needed.

Heavy blur and high contrast filters can hurt scrolling performance on large images — test on real hardware. backdrop-filteronly blurs what is already painted behind the element; the panel itself still needs a semi-transparent background to look like glass. Stacking many functions makes debugging harder; start from a preset and tweak one slider at a time.