SVG Filter Generator
Adjust blur, brightness and more to generate SVG filter code
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool lets you tune eight visual effects — blur, brightness, contrast, saturation, hue rotation, opacity, sepia, and invert — with sliders while previewing the result live on a circle, rectangle, or star shape. The finished effect can be copied instantly as SVG <filter> markup with a ready-to-use CSS snippet, making it handy for web designers or front-end developers who need more precise control than the plain CSS filter property offers. Everything runs locally in your browser, with nothing sent to a server.
How to use
- Choose a preview shape: circle, rectangle, or star
- Adjust the blur, brightness, contrast, saturation, hue rotate, opacity, sepia, and invert sliders
- Watch the effect update live in the preview panel above
- Copy the generated SVG filter code and paste it into your HTML/CSS
FAQ
- How is this different from the CSS filter property?
- An SVG <filter> combines primitives like feComponentTransfer and feColorMatrix directly, giving finer and more flexible control than the CSS filter property alone. The generated code applies in CSS as filter: url(#id).
- Can I use the generated filter on a real image?
- Yes. The preview uses a shape, but once you paste the copied SVG code into your HTML, you can apply filter: url(#ut-custom-filter) to an img or any other element for the same effect.
- How do I reset the values?
- Click the Reset button to return all sliders to their defaults (blur 0, brightness/contrast/saturate/opacity 1, hue rotate/sepia/invert 0).