CSS Box Shadow, Neumorphism & Glassmorphism Generator
Design beautiful, layered CSS box-shadows visually and copy the exact code with this free online shadow generator. Drag sliders for offset, blur, spread, color, and opacity, stack multiple shadow layers for realistic depth, and preview the result live — then grab clean, cross-browser CSS in one click.
It also generates neumorphism (soft UI) styles — the dual light-and-dark shadow technique that makes elements look extruded from or pressed into the page — plus a glassmorphism mode for building frosted-glass cards with backdrop blur, tint, saturation, and luminous borders. Getting these effects right by hand means endless tweak-save-refresh cycles; a visual generator collapses that into seconds, and everything runs in your browser so nothing is uploaded.
How to Create a CSS Shadow, Soft UI, or Glass Effect
-
Pick a mode
Choose Box Shadow for classic elevation and glows, Neumorphism for soft UI surfaces, or Glassmorphism for frosted glass.
-
Adjust visually
Drag sliders for offset, blur, spread, color, and opacity — or for glass, tune backdrop blur, tint, opacity, saturation, radius, and border while watching the live preview.
-
Test glass over real content
In Glassmorphism mode, drag the target behind the panel to see how the frosted blur reads over photos, gradients, and text.
-
Copy the CSS
One click copies the complete rule — including the -webkit-backdrop-filter prefix for glass — ready to paste into your stylesheet.
Why Use This Shadow & Glass Generator?
-
Three effects in one tool
Switch between layered box-shadows, neumorphic soft UI, and frosted glassmorphism without leaving the page.
-
Glassmorphism mode
Generate frosted glass with backdrop-filter blur, saturation, tint, and inset highlight borders — the translucent panel look used across modern app UIs.
-
Neumorphism presets
Generate the paired light/dark shadows of soft UI, with correct surface and background colors.
-
Live preview over content
See exactly how a shadow or a glass panel reads on a real element — drag content behind the glass to test its blur.
-
Cross-browser output
Copy compact, valid CSS with the -webkit-backdrop-filter fallback so glass works in Safari and Chromium alike.
-
100% client-side
Everything is generated locally in your browser — no sign-up, no upload, no server.
Frequently Asked Questions
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius, and color — e.g. box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15). Positive offsets move the shadow right/down; blur softens the edge; spread grows or shrinks it.
How do I create a glassmorphism effect in CSS?
Glassmorphism combines a semi-transparent tinted background with backdrop-filter: blur() saturate() to frost whatever is behind it, a thin bright border, and inset highlight shadows. Switch to the Glassmorphism tab, adjust the tint, opacity, blur, and saturation, and the tool writes the full rule including the -webkit-backdrop-filter prefix Safari needs.
What is neumorphism in CSS?
Neumorphism (soft UI) uses two opposing shadows — a light one from the top-left and a dark one from the bottom-right — on an element whose background matches the page, making it appear softly extruded or pressed in.
Do backdrop-filter and box shadows hurt performance?
Static box-shadows are cheap. backdrop-filter is more expensive because the browser must blur live content, so keep glass panels reasonably sized and avoid animating blur radius; transition opacity or transform instead to keep repaints down.