How to how to apply glassmorphism and neomorphism effects to svg icons
- Step 1Start from a clean icon — Use a single-colour or simple icon. Glassmorphism over-saturates, and neomorphism reads best on a flat shape, so simplify or recolour first with svg-monochrome-converter if the source is busy.
- Step 2Choose Glassmorphism for a soft glassy mark — Pick the Glassmorphism preset. It applies
feGaussianBlurthen asaturate 1.5feColorMatrix. Tune Intensity for the blur amount — low (2–3) keeps the silhouette readable; high values dissolve it. - Step 3Choose Neomorphism for soft-UI depth — Pick Neomorphism. The injector emits a white highlight shadow at
dx=dy=-intensity(opacity 0.6) and a black shadow atdx=dy=+intensity(opacity 0.2), both blurred by intensity, with an expanded filter region so neither clips. - Step 4Set intensity to match icon size — Small icons need a low intensity (1.5–3) or the shadows overwhelm the shape; larger illustrations can take 4–6. The single slider scales both neomorphism shadows together.
- Step 5Test on the real background — Download and drop the icon onto the actual surface colour. Neomorphism needs a mid-tone background; glassmorphism needs something behind it to feel translucent. Pure white or black kills both illusions.
- Step 6Add real backdrop blur in CSS if needed — For true frosted glass that blurs the page behind a panel, wrap the icon in a container with CSS
backdrop-filter— the SVG preset alone cannot reach the backdrop.
Glassmorphism vs. Neomorphism presets — what gets injected
The literal primitives the injector writes for each soft-UI preset. i = Intensity (1–10).
| Preset | Primitives | Key values (i = intensity) | Reaches the backdrop? |
|---|---|---|---|
| Glassmorphism | feGaussianBlur → feColorMatrix type="saturate" | blur stdDeviation = i; saturate values="1.5" | No — icon's own pixels only |
| Neomorphism | two feDropShadow (light + dark) | light dx=dy=-i, #ffffff, opacity 0.6; dark dx=dy=+i, #000000, opacity 0.2; both stdDeviation=i | No — shadows are the icon's own |
Background colour guidance
Both effects depend heavily on the surface they sit on. These are practical ranges, not tool settings.
| Effect | Works on | Breaks on | Why |
|---|---|---|---|
| Neomorphism (light mode) | #d0d0d0–#f0f0f0 | pure #ffffff | The white highlight needs a non-white base to be visible |
| Neomorphism (dark mode) | #2a2a2a–#3a3a3a | pure #000000 | The black shadow disappears on pure black |
| Glassmorphism | any busy/colourful backdrop | flat single colour | Glass reads as glass only when there is something to blur over (use CSS backdrop-filter for true backdrop blur) |
| Glassmorphism (SVG-only) | as a soft-saturated icon anywhere | — | The preset is self-contained, so it works visually even without a backdrop, just not as see-through glass |
Cookbook
The exact markup each soft-UI preset produces, so a designer can hand it to engineering verbatim.
Neomorphism dual-shadow extrusion
Intensity 4 produces a white highlight up-left and a black shadow down-right, the classic soft-UI emboss. The expanded region keeps both shadows from clipping.
Preset: neomorphism Intensity: 4 <filter id="jad-filter-neomorphism" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="-4" dy="-4" stdDeviation="4" flood-color="#ffffff" flood-opacity="0.6"/> <feDropShadow dx="4" dy="4" stdDeviation="4" flood-color="#000000" flood-opacity="0.2"/> </filter> Place on a #e6e6e6 surface for the intended raised look.
Glassmorphism soft mark
Intensity 5 blurs the icon and boosts saturation 1.5x. This is a self-contained glassy look on the icon — not a see-through panel.
Preset: glassmorphism Intensity: 5 <filter id="jad-filter-glassmorphism"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/> <feColorMatrix in="blur" type="saturate" values="1.5"/> </filter> # For true frosted glass over a page, add CSS: backdrop-filter: blur(12px); on the container.
Small-icon neomorphism without overwhelm
At 24px, intensity 4 buries the shape under shadow. Drop to 1.5 so the emboss is a hint, not a blob.
24x24 icon, intensity 1.5: light: dx=-1.5 dy=-1.5 stdDeviation=1.5 (#ffffff, .6) dark: dx= 1.5 dy= 1.5 stdDeviation=1.5 (#000000, .2) Silhouette stays legible; depth still reads.
Recolour, then add depth
Neomorphism on a multicolour icon looks muddy. Flatten to one tone first, then inject — the workflow chains cleanly.
Step 1: svg-monochrome-converter (single color #5b6cff)
Step 2: svg-filter-injector { neomorphism, 3 }
Result: a tinted, single-tone icon with a clean soft-UI extrusion.Combine SVG glass with CSS backdrop
Use the injector for the icon's own soft look and CSS for the real backdrop blur that SVG cannot do — together they read as true glassmorphism.
icon.svg -> svg-filter-injector { glassmorphism, 4 } (soft, saturated mark)
.glass-panel {
backdrop-filter: blur(14px) saturate(1.4);
background: rgba(255,255,255,.18);
}
/* panel blurs the page; the injected icon adds the glassy detail */Edge cases and what actually happens
Expecting glassmorphism to blur the page behind the icon
Not supportedThe Glassmorphism preset is feGaussianBlur + saturate on the icon's own pixels — it cannot sample the backdrop. True see-through glass needs CSS backdrop-filter on a container; combine the two for the full effect.
Neomorphism on pure white or pure black
Illusion breaksThe white highlight is invisible on #ffffff and the black shadow is invisible on #000000. Neomorphism needs a mid-tone surface (≈#d0d0d0–#f0f0f0 light, #2a2a2a–#3a3a3a dark).
Shadows overwhelm a tiny icon
By designIntensity scales both neomorphism shadow offsets. On a 16–24px icon, intensity 4+ buries the shape. Drop to 1.5–2 so the emboss is subtle and the silhouette stays readable.
Want a coloured glass tint
Fixed by presetGlassmorphism's saturation is a fixed values="1.5" and the icon keeps its own hues; there is no tint control. Recolour the artwork first with svg-hex-swapper to drive the glass tint.
Multicolour icon turns muddy
ExpectedBoth presets read best on flat shapes; a busy multicolour icon blurs into mush (glass) or fights the dual shadows (neomorphism). Flatten with svg-monochrome-converter first.
Neomorphism shadow direction is fixed
By designThe light shadow is always up-left (-i) and the dark shadow down-right (+i). There is no light-source angle control. To flip the emboss to inset, hand-edit the dx/dy signs on the emitted primitives.
Glassmorphism at high intensity dissolves the icon
Tune intensityA large blur stdDeviation melts the silhouette. Keep intensity low (2–3) when the icon must stay identifiable, higher only for decorative blobs — pair with svg-blob-generator shapes for ambient glass.
Dark-mode and light-mode need different versions
Two passesA neomorphism icon tuned for a light surface looks wrong on dark, because the fixed white/black shadows assume a mid-tone base. Produce a light and a dark variant and switch by theme.
Frequently asked questions
Does the glassmorphism preset blur the background like CSS?
No. SVG filters operate only on the element's own pixels. The preset is feGaussianBlur plus feColorMatrix saturate 1.5 on the icon. For backdrop blur, use CSS backdrop-filter on a container and combine the two.
How is neomorphism implemented?
Two feDropShadow primitives on the same shape: a white highlight at dx=dy=-intensity (opacity 0.6) and a black shadow at dx=dy=+intensity (opacity 0.2), both blurred by the intensity value, inside an expanded filter region so neither clips.
What background colour should I use for neomorphism?
A mid-tone: roughly #d0d0d0–#f0f0f0 in light mode and #2a2a2a–#3a3a3a in dark mode. Pure white hides the highlight and pure black hides the shadow, so the soft-UI illusion collapses.
Can I change the light source angle for neomorphism?
Not in the tool. The highlight is fixed up-left and the shadow down-right. To change direction or make it inset, hand-edit the dx/dy signs on the two emitted feDropShadow primitives.
Can I tint the glass effect?
There is no tint control; the saturation is fixed at 1.5 and the icon keeps its colours. Recolour the source first with svg-hex-swapper or svg-monochrome-converter to drive the glass colour.
Why does my icon look muddy after the effect?
Both presets assume a simple shape. A multicolour icon blurs into mush under glassmorphism and fights itself under neomorphism. Flatten to one tone before injecting.
Does the effect survive in an <img>?
Yes. The primitives are embedded in the SVG's <defs>, so the glass or soft-UI look renders inline, as <img>, and as a CSS background — no external CSS needed.
How do I tune intensity for small icons?
Use a low value (1.5–3). Intensity scales the shadow offsets and blur directly, so a high value on a small icon buries the silhouette. Larger illustrations tolerate 4–6.
Can I animate these effects?
The injector outputs static markup, but the resulting feGaussianBlur stdDeviation can be animated with SMIL animate or driven by CSS custom properties for hover transitions — that animation is something you add after injecting.
What is the performance cost?
Both presets force GPU compositing. Neomorphism uses two shadow passes and glassmorphism a blur plus colour-matrix pass. Apply them to hero icons and feature marks, not to every item in a long list.
Do I still need CSS for full glassmorphism?
For the see-through, backdrop-blurred panel, yes — that is backdrop-filter, which SVG cannot do. The injected glass preset adds the icon's own soft, saturated detail on top.
What tier do I need?
Pro. The filter injector is Pro-gated; the effect runs the same whether in-browser or via the local runner for Pro+ users.
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.