SVG Filter Effects Generator

Design an SVG <filter> visually and watch it apply in real time to text, shapes, or your own image — then copy the ready-to-use SVG and CSS. SVG filters power effects that plain CSS can't reach: displacement warps, custom convolution kernels, luminance masks, and multi-primitive pipelines. This generator gives you a knob for each one and shows the result instantly.

How to use it

1. Pick a filter from the dropdown — Gaussian blur, hue rotate, saturate, luminance-to-alpha, turbulence & distortion, drop shadow, or an emboss/convolve kernel.
2. Tune the sliders that appear for that filter. Each one maps directly to a real SVG primitive attribute (stdDeviation, baseFrequency, kernelMatrix, and so on).
3. Choose a preview target — sample text, a group of shapes, or an image you drop in — and the live preview updates as you adjust.
4. Copy the output. You get three things: the complete preview SVG (a self-contained file you can open in any browser), a standalone <filter> definition ready to paste into your own markup, and the CSS needed to apply it.

The filter primitives

• Gaussian Blur (feGaussianBlur) — a soft, uniform blur. Has a direct CSS equivalent, filter: blur().
• Hue Rotate (feColorMatrix type="hueRotate") — spin every color around the wheel by an angle. Equivalent to CSS hue-rotate().
• Saturate (feColorMatrix type="saturate") — from fully grayscale (0) through original (1) to super-saturated. Equivalent to CSS saturate().
• Luminance to Alpha (feColorMatrix type="luminanceToAlpha") — turn brightness into transparency, useful for building masks. No CSS shorthand.
• Turbulence & Distortion (feTurbulence + feDisplacementMap) — Perlin-style noise that warps the source graphic. Choose turbulence or fractal noise, set the frequency, octaves, and displacement scale.
• Drop Shadow (feDropShadow) — offset, blur, color, and opacity. Maps to CSS drop-shadow() when opacity is 1; below that you reference the filter by id.
• Emboss / Convolve (feConvolveMatrix) — four 3×3 kernels: emboss, engrave, sharpen, and edge detect.

Applying the filter

Every primitive works through a url() reference, which is the one method that always applies:

.target { filter: url(#myFilter); }

For blur, hue-rotate, saturate, and full-opacity drop-shadow the tool also gives you the shorter native CSS form. Set a Filter ID to control the id used in both the SVG and the url() reference — it's sanitized to letters, digits, hyphens, and underscores so it's always a valid selector.

Does anything leave my browser?

No. Everything — including any image you preview the filter on — is processed entirely on your device. Nothing is uploaded to a server.

Why is the preview an SVG image?

The tool builds the preview as a single SVG string and renders it as an image, so the exact markup you see is the exact markup you copy. Because it's a self-contained SVG, you can download it, open it directly, or drop it straight into a design tool.