CSS Box Shadow Generator — Neumorphism, Glassmorphism & Tailwind
Free CSS box shadow generator with live preview. Build shadows, neumorphism, glassmorphism effects. Export to CSS, Tailwind, or CSS variables. No signup.
Updated May 2026
box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
shadow-xl
--shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
Shift+Enter copies CSS
How the CSS box shadow generator works
Visual sliders, three output formats
1. Adjust the sliders
Shift X, Shift Y, Blur, Spread and Opacity — the preview updates live as you drag.
2. Pick a mode or preset
Standard, Neumorphism, Glassmorphism — or click a ready-made preset from the gallery.
3. Copy CSS, Tailwind or a variable
`Shift+Enter` copies the CSS instantly from anywhere in the tool.
What this box shadow generator does
Three shadow styles in one generator
Automatic neumorphism
Calculates the two opposing shadows (highlight + shade) from whatever background color you choose.
Glassmorphism in context
Renders the preview over a colored gradient, including the -webkit- prefix Safari needs.
Triple export
Plain CSS, a Tailwind utility class, or a CSS custom property — copy whichever format your project uses.
Material Design presets
Ready-made elevation levels, plus iOS-style shadows, subtle cards and neon glows.
CSS box-shadow examples
Common values you can copy straight into your stylesheet
When you'll reach for this tool
The most common scenarios among people who use it
Material Design-style elevation
Stack a tight shadow and a diffuse one for realistic depth on cards and surfaces.
Neon effect on buttons and badges
Zero offset with a high blur produces an ambient glow instead of a directional shadow.
Soft UI (neumorphism)
Cards and buttons with a plastic 3D feel — switch between Flat, Pressed and Concave.
Frosted glass cards
Glassmorphism over a colored background or image, with the correct fallback for Safari.
Common mistakes
Using box-shadow instead of drop-shadow for icons
box-shadow follows the element's rectangular box; drop-shadow traces the actual visual shape, including transparent PNGs.
Forgetting the -webkit-backdrop-filter prefix
Without it, the glassmorphism effect silently disappears on iOS and macOS Safari.
Animating box-shadow directly on hover
Triggers a repaint on every frame — animate opacity on a pseudo-element that already has the shadow applied instead.
Why use this box shadow generator
No other generator combines standard shadows, neumorphism and glassmorphism in one place — Neumorphism mode calculates both opposing shadows automatically, something other generators leave you to compute by hand.
The CSS it outputs is production-ready, with compatibility prefixes like -webkit-backdrop-filter already included.
box-shadow vs. filter: drop-shadow
Two ways to add a shadow, different purposes
Frequently asked questions
It adds one or more shadow effects around an element's box — horizontal offset, vertical offset, blur, spread and color. Multiple shadows stack when separated by commas, with the first one rendered on top.
References
Related Tools
- Color Contrast Checker Design Free color contrast checker — verify WCAG 2.2 AA and AAA compliance instantly. Live preview, color blindness simulation, and accessible color suggestions....
- Color Converter Design Convert colors between HEX, RGB, HSL, and CMYK instantly. Free online color picker with WCAG contrast checker and palette generator.
- Color Palette Generator Design Generate harmonious color palettes from any base color. Choose Analogous, Complementary, Triadic or Tetradic harmony — export as CSS variables or JSON.
- Color Palette from Image Design Extract color palettes from any image — get HEX, RGB, HSL codes and export as CSS variables, Tailwind config, JSON, or PNG. 100% client-side, no upload.
- CSS Flexbox Generator Design Free CSS Flexbox generator: live preview, Tailwind & CSS dual output, 10 preset layouts, contextual warnings, React/JSX export. No signup required.
