How to inject pre-built svg filters: glow, blur, drop shadow, glassmorphism
- Step 1Add your SVG — Drop an SVG file or paste the SVG source into the input. The tool validates that the content parses as SVG XML before it will run.
- Step 2Pick a preset — Open the Effect preset dropdown and choose Glow, Blur, Drop Shadow, Glassmorphism, or Neomorphism. Each preset maps to a fixed set of filter primitives — there are no per-primitive controls to configure.
- Step 3Set the intensity — Drag the Intensity slider between 1 and 10 (0.5 steps). For Glow and Blur this is the
stdDeviation; for Drop Shadow it drivesdx,dy, and blur; for Neomorphism it drives both the light and dark shadow offsets. - Step 4Run the injection — Click run. The tool inserts a
<filter id="jad-filter-<preset>">into<defs>and attaches it to the first<g>without an existing filter, or wraps the SVG body in a filtered group if there is no group. - Step 5Check the preview — The result panel renders the filtered SVG. Confirm the effect is not clipping at the edges — Glow, Drop Shadow, and Neomorphism presets ship an expanded filter region to leave room for the spread.
- Step 6Download or copy — Save the file (named
<original>-<preset>.svg) or copy the SVG source. The effect is fully self-contained — no CSS or script is required for it to render anywhere.
What each preset actually injects
Exact filter primitives produced by the injector for each preset. i = the Intensity slider value (1–10). These are the literal primitives written into the SVG; the tool exposes no other knobs.
| Preset | Filter primitives | Driven by intensity (i) | Filter region (x / y / w / h) |
|---|---|---|---|
| Glow | feGaussianBlur → feMerge (blurred copy painted under the original) | stdDeviation = i | -20% / -20% / 140% / 140% |
| Blur | single feGaussianBlur | stdDeviation = i | default (no expansion — large blur may clip) |
| Drop Shadow | single feDropShadow, flood-opacity="0.4" (default black) | dx = i/2, dy = i, stdDeviation = i/2 | -10% / -10% / 130% / 130% |
| Glassmorphism | feGaussianBlur → feColorMatrix type="saturate" values="1.5" | stdDeviation = i | default |
| Neomorphism | two feDropShadow: light (#ffffff, opacity 0.6) + dark (#000000, opacity 0.2) | light dx=dy=-i, dark dx=dy=+i, both stdDeviation=i | -20% / -20% / 140% / 140% |
Controls the tool exposes (and what it does not)
The injector UI has exactly two inputs. There is no colour picker, no separate offset/spread field, and no multi-effect stacking. To change colour or stack effects, use the sibling tools noted.
| Control | Type | Range / values | Default | Notes |
|---|---|---|---|---|
| Effect preset | dropdown | glow · blur · dropshadow · glassmorphism · neomorphism | glow | Selects the whole primitive set; no per-primitive editing |
| Intensity | slider | 1–10, step 0.5 | 3 | Single value reused across the preset's primitives |
| Shadow / glow colour | not available | — | — | Hard-coded per preset (black shadow, white+black for neomorphism). Recolour the artwork with svg-hex-swapper instead |
| Stack two effects | not available | — | — | One preset per run; re-run on the output to layer (each run adds its own <filter>) |
Cookbook
Each recipe shows the SVG that goes in and the exact filter markup that comes out, so you can predict the result before you run it.
Glow on a logo mark
The Glow preset blurs a copy of the graphic and paints it under the crisp original with feMerge, giving a halo. Intensity 4 means stdDeviation=4. The -20% filter region leaves room so the halo is not clipped.
Input: <svg viewBox="0 0 24 24"><g><path d="M12 2 19 21 12 17 5 21Z" fill="#6366f1"/></g></svg> Preset: glow Intensity: 4 Output (defs + filtered group): <svg viewBox="0 0 24 24"><defs><filter id="jad-filter-glow" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#jad-filter-glow)"><path d="M12 2 19 21 12 17 5 21Z" fill="#6366f1"/></g></svg>
Drop shadow under a card icon
Drop Shadow uses a single feDropShadow. Intensity 6 gives dx=3, dy=6, stdDeviation=3, with the fixed flood-opacity of 0.4. The shadow colour is black — the tool has no colour control, so tint the artwork or shadow elsewhere if you need a coloured shadow.
Preset: dropshadow Intensity: 6 Injected filter: <filter id="jad-filter-dropshadow" x="-10%" y="-10%" width="130%" height="130%"><feDropShadow dx="3" dy="6" stdDeviation="3" flood-opacity="0.4"/></filter> dx = i/2 = 3 , dy = i = 6 , stdDeviation = i/2 = 3
Blur for a background decoration
The Blur preset is the simplest: one feGaussianBlur, default filter region. Because there is no region expansion, a high intensity can clip at the SVG's edges — increase the viewBox or use a wrapper if the soft edge is cut off.
Preset: blur Intensity: 8 Injected filter: <filter id="jad-filter-blur"><feGaussianBlur in="SourceGraphic" stdDeviation="8"/></filter> Note: default region (-10%..) is the SVG default; stdDeviation 8 may bleed past it.
An SVG with no <g> gets wrapped
If the SVG has no group, the injector wraps the body in a new <g filter=...> after the defs, so the effect still applies to all rendered content. The output filename becomes input-glow.svg.
Input (no group): <svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="red"/></svg> Preset: glow Intensity: 3 Output: <svg viewBox="0 0 10 10"><defs><filter id="jad-filter-glow" ...>...</filter></defs><g filter="url(#jad-filter-glow)"><circle cx="5" cy="5" r="4" fill="red"/></g></svg>
Layering two effects by re-running
There is no stacking control, but each run adds its own <filter>. To get glow plus shadow, run Glow first, then feed the result back in and run Drop Shadow. The second run finds the now-existing <defs> and prepends a second filter, then targets the same first <g> — which already carries the glow filter, so re-targeting may overwrite it. Re-run order and an inspect step matter; verify in the preview.
Pass 1: glow @4 -> logo-glow.svg (g has filter=url(#jad-filter-glow)) Pass 2: dropshadow @5 on logo-glow.svg -> defs now holds BOTH jad-filter-glow and jad-filter-dropshadow -> the first <g> already had filter=, so the new filter is NOT re-applied to it -> open the preview: if only one effect shows, combine in a single inline SVG by hand instead.
Edge cases and what actually happens
Blur preset clips at the SVG edge
By designThe Blur preset uses the default filter region (no expansion). At high intensity the soft edge can be cut off at the SVG bounds. Glow, Drop Shadow, and Neomorphism ship an expanded region (130–140%) to avoid this; for Blur, give the artwork more viewBox padding or apply the effect to a smaller inner element.
You want a coloured glow or shadow
Not supportedThe shadow colour is fixed: Drop Shadow uses the default black flood, Neomorphism uses white + black. There is no colour input. Recolour the source artwork with svg-hex-swapper before injecting, or hand-edit the flood-color on the emitted feDropShadow.
Two effects on one icon
Single preset per runEach run injects exactly one preset. Re-running on the output adds a second <filter> to <defs>, but the injector targets the first <g> only if it has no existing filter= — so the second effect may not attach. For reliable layering, combine the primitives into one <filter> by hand or use the preview to confirm.
SVG already has a filter on its first group
PreservedThe injector skips any <g> that already carries filter= (its selector is <g(?!\s+filter=)). If every group is already filtered, it wraps the body in a new outer <g> so the new effect still renders without clobbering yours.
Existing <defs> in the file
PreservedThe new <filter> is prepended inside the existing <defs> (the <defs> open tag is matched and the filter inserted right after it). Your gradients, clip paths, and symbols stay intact.
Pasted content is not valid SVG
Invalid inputIf you paste source that does not parse as SVG XML, the tool rejects it with an invalid-SVG error before any injection runs. Paste the full <svg>...</svg> document, not a fragment.
Intensity outside 1–10
Clamped by the sliderThe Intensity control is a range input bounded to 1–10 in 0.5 steps, so you cannot set a value outside that band in the UI. The default when unset is 3.
Glassmorphism does not blur the background
ExpectedThe Glassmorphism preset is feGaussianBlur + feColorMatrix saturate 1.5 applied to the icon's own pixels — it does not sample content behind the element. True frosted-glass over a backdrop needs CSS backdrop-filter on a container, not an SVG filter.
filter id collides on re-run
By designThe id is always jad-filter-<preset>, so re-running the same preset produces the same id. Two different presets produce two different ids and coexist. Two runs of the same preset would create duplicate ids — strip the extra with a quick pass through svg-unused-defs-purger if needed.
Frequently asked questions
Which effects can I add?
Five presets: Glow, Blur, Drop Shadow, Glassmorphism, and Neomorphism. Each maps to a fixed set of SVG filter primitives. There are no other effect types and no way to author a custom primitive chain in this tool.
Are these CSS filters or native SVG filters?
Native SVG filters — feGaussianBlur, feDropShadow, feColorMatrix, and feMerge. They are written into the SVG's <defs>, so the effect travels with the file and renders inside <img src> and background-image, not just inline SVG.
Can I change the glow or shadow colour?
No. The colours are fixed per preset (black shadow for Drop Shadow; white plus black for Neomorphism). To get a coloured result, recolour the artwork first with svg-hex-swapper or svg-monochrome-converter, then inject.
What does the Intensity slider control?
One value (1–10, step 0.5) reused across the preset. For Glow and Blur it is the stdDeviation; for Drop Shadow it sets dx = i/2, dy = i, stdDeviation = i/2; for Neomorphism it sets both shadow offsets and blur.
Can I stack a glow and a shadow together?
Not in a single run. You can re-run the output with a second preset, but the injector only attaches a filter to a group that does not already have one, so layering can be unreliable. For guaranteed stacking, merge the primitives into one <filter> by hand.
Where does the filter get attached?
To the first <g> that has no existing filter= attribute. If there is no usable group, the tool wraps the entire SVG body in a new <g filter="url(#jad-filter-<preset>)"> so the effect always applies.
Will the effect work when the SVG is an <img>?
Yes. Because the <filter> lives in the SVG's own <defs>, the effect renders wherever the SVG is shown — inline, as <img>, or as a CSS background. CSS filter: on the host element would not survive that.
Does the tool keep my gradients and clip paths?
Yes. The new filter is inserted into the existing <defs>; everything already there is preserved. The injector also leaves any group that already has a filter= untouched.
What is the output file named?
<original-stem>-<preset>.svg — for example logo-glow.svg or card-dropshadow.svg. The MIME type is image/svg+xml.
Why does my Blur look cut off at the edges?
The Blur preset uses the default filter region with no expansion, so a large blur bleeds past the SVG bounds and clips. Add viewBox padding, lower the intensity, or apply blur to a smaller inner shape.
What tier do I need?
The Filter Injector requires Pro. Free tier covers a 5 MB single file across SVG tools; Pro raises that to 50 MB and 20 batch files. The effect itself runs the same in-browser or via the local runner.
Can I minify the result?
Yes. The output is plain SVG, so you can pass it through svg-pro-minifier afterward. Minification preserves the <filter> definition and its url(#...) reference.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.