CSS Filter Generator
Adjust sliders and preview a CSS filter live, then copy the code.
'/%3E%3Ccircle cx='120' cy='90' r='55' fill='%23FFD166'/%3E%3Crect x='230' y='110' width='120' height='90' fill='%234B0082' opacity='0.7'/%3E%3Ccircle cx='300' cy='60' r='35' fill='%23F8FAF6'/%3E%3C/svg%3E)
Advertisement
About this tool
The filter property works on any HTML element, not just images — try it on backgrounds, videos or whole containers.
Only the filters you change are included in the CSS, in the order shown, and the order matters: brightness then contrast looks slightly different from contrast then brightness. Use Reset all to start again. Filters such as blur can slow scrolling on low-powered phones if applied to large areas, so test on a real device.