SVG Filter Effects Generator
Visually build an SVG <filter> — blur, hue rotate, saturate, drop shadow, turbulence, emboss and more — with a live preview on text, shapes or your own image, and copy the ready-to-use SVG and CSS. Runs entirely in your browser.
Input
Used as the SVG filter id and the CSS url() reference. Letters, digits, _ and - only.
Output
Your filtered preview will appear here.
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/svg-filter-effects-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"filterType": "blur",
"blurStdDev": "4",
"filterId": "myFilter",
"previewTarget": "shapes"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `svg-filter-effects-generator` tool (SVG Filter Effects Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/svg-filter-effects-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="SVG Filter Effects Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
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
- Pick a filter from the dropdown — Gaussian blur, hue rotate, saturate, luminance-to-alpha, turbulence & distortion, drop shadow, or an emboss/convolve kernel.
- Tune the sliders that appear for that filter. Each one maps directly to a real SVG primitive attribute (
stdDeviation,baseFrequency,kernelMatrix, and so on). - Choose a preview target — sample text, a group of shapes, or an image you drop in — and the live preview updates as you adjust.
- 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 CSShue-rotate(). - Saturate (
feColorMatrix type="saturate") — from fully grayscale (0) through original (1) to super-saturated. Equivalent to CSSsaturate(). - 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 CSSdrop-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.