CSS Filter Generator

The CSS filter property applies photo-style effects — blur, brightness, contrast, grayscale, sepia, hue rotation, inversion and drop shadows — to any element, image or video without editing the file. This generator builds the value from sliders or a preset and previews it on a sample scene in your browser. A second mode solves the common "how do I make this black SVG icon #2563EB with CSS" problem: it searches for a filter chain that turns black into your color and reports how close it got.

How to use this tool

1. Choose "Build a filter" and set the values, or pick a preset such as black and white or vintage.
2. Optionally add a drop shadow that follows the content's outline.
3. For an icon color, switch to "Recolor a black icon", type the target color and keep "Make the icon black first" on.
4. Copy the CSS; in recolor mode, check the color error and try another seed if it is above 2.

Formula

brightness: C′ = C × b · contrast: C′ = (C − 0.5) × c + 0.5 · invert: C′ = i + C × (1 − 2i) · sepia, saturate, hue-rotate: 3 × 3 color matrices from the Filter Effects spec

C is a channel from 0 to 1 and each step is clamped to 0–1. The recolor solver evaluates these formulas starting from black and uses simultaneous perturbation stochastic approximation (a seeded random search) over invert, sepia, saturate, hue-rotate, brightness and contrast, scoring RGB and HSL differences.

Example

The default values give filter: brightness(110%) contrast(120%) saturate(130%);, a punchier photo. The black and white preset is grayscale(100%) contrast(110%). For a white icon the solver finds a chain with essentially no error, because invert(100%) alone turns black into white; for blue #2563EB with seed 1 it lands within ΔE 2 — too small to see at icon sizes.