SVG Filter Generator
Dial in blur, brightness, and more with sliders and get ready-to-use SVG filter code
Adjust eight effects — blur, brightness, contrast, saturation, hue rotation, opacity, sepia, and invert — with sliders and see the result immediately on a circle, square, or star preview. When you like what you see, copy the finished effect as a <filter> SVG snippet along with a CSS usage example. It's a fast way for web designers and front-end developers to build custom filters with more precision than CSS filter alone offers. All processing happens in your browser and nothing is sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Pick one of the preview shapes: circle, square, or star
- Adjust the blur, brightness, contrast, saturation, hue rotation, opacity, sepia, and invert sliders
- Watch the preview at the top apply your effects in real time
- Hit the copy button to grab the finished SVG filter code and paste it into your HTML/CSS
FAQ
- How is this different from the CSS filter property?
- An SVG <filter> is built by combining primitives like feComponentTransfer and feColorMatrix directly, which gives you finer, more flexible control than CSS filter on its own. The generated code can be applied straight from CSS with filter: url(#id).
- Can I use the generated filter on real images?
- Yes. The preview uses a shape, but once you paste the copied SVG into your HTML, you can apply filter: url(#ut-custom-filter) to an img or any other element and get exactly the same effect.
- How do I reset everything back to the starting values?
- Click the reset button and every slider returns to its default: blur 0; brightness, contrast, saturation, and opacity at 1; hue rotation, sepia, and invert at 0.