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
Reviewed by Rafael Duarte
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.
