SVG Filter Playground
Experiment with all 17 SVG filter primitives. Adjust parameters in real time, see instant visual results, and copy the generated code.
Blur & Shadow
<feGaussianBlur>
Gaussian blur with independent x/y radius control and edge mode options.
Blur & Shadow<feDropShadow>
All-in-one drop shadow with offset, blur, colour, and opacity controls.
Colour
<feColorMatrix>
Hue rotation, saturation, luminance-to-alpha, and full 4×5 matrix transforms.
Colour<feComponentTransfer>
Per-channel transfer functions: identity, table, discrete, linear, and gamma.
Colour<feFlood>
Fill the filter region with a solid colour and adjustable opacity.
Compositing
<feComposite>
Porter-Duff compositing: over, in, out, atop, xor, and arithmetic mode.
Compositing<feBlend>
Blend modes: normal, multiply, screen, darken, lighten, and overlay.
Compositing<feMerge>
Layer multiple filter inputs on top of each other in a specified order.
Spatial
<feOffset>
Shift pixels by dx/dy - the backbone of shadow pipelines.
Spatial<feTile>
Tile the input image to fill the entire filter region.
Spatial<feDisplacementMap>
Distort pixels using another image's channels as a displacement map.
Morphology
<feMorphology>
Erode or dilate shapes - shrink or expand edges by a given radius.
Morphology<feConvolveMatrix>
Custom convolution kernels: sharpen, emboss, edge detection, and more.
Lighting
<feDiffuseLighting>
Matte surface lighting with distant, point, or spot light sources.
Lighting<feSpecularLighting>
Shiny surface highlights with configurable specular exponent and light sources.