Don't like ads? Go Ad-Free Today 

SVG Filter Effects Generator

ColorDeveloperImage

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

Filter Type

Filter

Filter ID

Used as the SVG filter id and CSS url() reference

Blur Settings

stdDeviation (px): 4

Hue Rotate Settings

Angle (deg): 90

Saturate Settings

Amount (0 = grayscale, 1 = original): 1.6

Turbulence & Distortion

Base Frequency: 0.04

Octaves: 3

Noise Type

Displacement Scale: 25

Drop Shadow Settings

Offset X (px): 4

Offset Y (px): 4

Blur Radius (px): 6

Shadow Color

Shadow Opacity: 0.6

Emboss Settings

Style

Preview Target

Show On

OUTPUT

Client Side

Live Preview

SVG Filter XML

CSS Usage

ADVERTISEMENT · REMOVE?

Guide

SVG Filter Effects Generator

Design SVG <filter> effects visually. Pick a filter primitive — Gaussian blur, color matrix variants (hue rotate, saturate, luminance to alpha), turbulence with displacement, drop shadow, or a convolve matrix preset (emboss, engrave, sharpen, edge detect) — and tune its parameters with sliders while watching a live SVG preview on text, shapes, or your own uploaded photo. Copy the generated <filter> XML block and a ready-to-paste CSS usage snippet.

How to Use

Pick a filter primitive from the Filter dropdown.
Set a unique Filter ID — it becomes the id on the <filter> element and the target of url(#…).
Tune the parameters that appear for the chosen primitive (sliders, color picker, noise type, etc.).
Switch the Preview Target between text, shapes, or photo — upload your own image to see the effect on real content.
Copy the generated SVG Filter XML into your page (it can live anywhere — even inside a hidden, zero-size SVG).
Apply it in CSS with the included snippet: either the native shorthand (when available) or the filter: url(#filterId) reference.

Features

Seven filter primitives — Gaussian blur, hue rotate, saturate, luminance to alpha, turbulence + displacement, drop shadow, and convolve-matrix presets (emboss, engrave, sharpen, edge detect).
Live SVG preview — instant visual feedback as you drag sliders; no rebuild step, no flicker.
Three preview targets — apply to crisp text, primitive shapes, or your own uploaded photo to see how the filter behaves on real content.
Two outputs — the full <filter> XML block (ready to paste into any SVG) and a CSS usage snippet with the native shorthand where available.
Drop shadow with opacity — combines feDropShadow with flood-opacity, which the native CSS shorthand cannot express.
Sanitized filter IDs — keeps your id values safe for url(#…) references.

 FAQ

What is the difference between a CSS filter and an SVG filter?

CSS filter shorthands (blur, hue-rotate, drop-shadow, etc.) are a fixed catalogue of effects that the browser maps to underlying SVG filter primitives. An SVG <filter> gives you direct access to those primitives — feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap, feConvolveMatrix, and more — and lets you compose them into effects (warps, noise, embosses, channel manipulation) that the shorthand cannot express. Anything you can do in CSS, you can do in SVG, but the reverse is not true.
What does the stdDeviation attribute mean on feGaussianBlur?

stdDeviation is the standard deviation of the Gaussian distribution used to weight neighbouring pixels. A larger value spreads the weighting across more pixels, producing a blurrier result. You can pass one number (uniform blur in both axes) or two space-separated numbers (different blur amounts on X and Y) for directional softness.
How does feTurbulence work, and why pair it with feDisplacementMap?

feTurbulence procedurally generates Perlin-style noise into an SVG image, controlled by baseFrequency (noise scale) and numOctaves (detail levels). The noise on its own is just a coloured texture. feDisplacementMap takes that noise as in2 and uses its R/G channels to offset the pixels of your source graphic, producing organic warping, smoke, water ripple, and distortion effects. The scale attribute controls how far each pixel can be displaced.
What is a kernel matrix, and how does feConvolveMatrix produce emboss or edge effects?

feConvolveMatrix slides a small matrix (the kernel) over every pixel, multiplying each cell by the corresponding neighbour pixel and summing the result. Different kernels produce different effects: a kernel that subtracts top-left from bottom-right neighbours creates the directional shading we read as emboss; a kernel with -1 around a positive centre amplifies differences and produces edge detection or sharpening. The order attribute sets the kernel size (typically 3 for a 3x3 matrix), and divisor/bias normalize the output.
Why does my SVG filter not work when applied with CSS filter: url(#id)?

Three common causes: (1) the <filter> element is not in the DOM when the CSS rule applies — make sure the filter SVG is embedded inline in the page, not loaded from an external file the browser blocks. (2) The id you reference does not match the id on the <filter> element (case sensitive, must be unique). (3) The element you are filtering has zero size or is clipped by the default filter region — set explicit x, y, width, height on the <filter> (often x="-30%" y="-30%" width="160%" height="160%") so effects like blur or drop shadow that extend past the source bounds are not cut off.