Share
Tune blur/contrast/hue-rotate/sepia and copy the CSS filter string.
![filter preview](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="s" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="%23fda4af"/><stop offset="50%" stop-color="%23fbbf24"/><stop offset="100%" stop-color="%2360a5fa"/></linearGradient></defs><rect width="800" height="600" fill="url(%23s)"/><circle cx="200" cy="200" r="100" fill="%23fef3c7" opacity="0.85"/><circle cx="600" cy="450" r="150" fill="%2316a34a" opacity="0.6"/></svg>)
filter: none;
Apply CSS filters live to your own image or our sample. Adjust blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, and drop-shadow with sliders. Copy the resulting `filter:` declaration for production use.
Share this tool
