No Login Data Private Local Save

CSS Filter Generator - Online Visual SVG Filter Builder

32
0
0
0
Preview 
filter: none;
<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="custom-filter" x="-20%" y="-20%" width="140%" height="140%">
    <!-- no filters -->
  </filter>
</svg>
Filter Controls
0px20px
0%200%
0%200%
0%100%
0°360°
0%100%
0%100%
0%200%
0%100%
Quick Presets

Frequently Asked Questions

This tool helps you visually create CSS filter property values by adjusting sliders for each filter function (blur, brightness, contrast, etc.) and seeing the result on a sample image in real time. It also generates equivalent SVG filter code for advanced usage.

All standard functions: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and drop-shadow(). They combine in the order shown in the controls.

Simply copy the CSS code from the "CSS Filter" tab and paste it into your stylesheet, e.g., img { filter: blur(5px) grayscale(50%); }. It works on any HTML element.

SVG filters offer more flexibility and are supported in older browsers. You can embed the generated SVG filter in your HTML and reference it via filter: url(#filter-id). The tool translates the same visual settings into an SVG filter definition.

Yes, CSS applies filters from left to right. This tool uses a fixed order optimized for predictable results (blur → brightness → contrast → grayscale → hue-rotate → invert → opacity → saturate → sepia → drop-shadow). Changing the order in your own code may produce different visuals.

Absolutely! Click "Upload Image" and select any photo from your device. The preview updates instantly with your image and applies the current filter settings.
🔧 Related Tools