This free online CSS box shadow generator lets you design multi-layer box shadows with a visual editor and live preview. Choose from 10 curated presets including Subtle, Dreamy, Neon, and Neumorphism effects, or create custom shadows with full control over offset, blur, spread, color, and opacity. Export production-ready CSS or Tailwind arbitrary value syntax with one click.
Step-by-Step
Start with a preset — Click any of the 10 shadow presets to load a professionally designed shadow configuration.
Customize shadow layers — Adjust X offset, Y offset, blur radius, spread radius, color, and opacity for each shadow layer.
Add layers — Click Add Layer to stack multiple shadows for complex effects. Each layer can be configured independently.
Toggle inset — Switch between outer (drop) shadows and inset (inner) shadows for any layer.
Preview live — See your shadow rendered on a customizable preview box in real-time.
Copy the CSS — Click Copy to grab the box-shadow CSS property or Tailwind arbitrary value syntax.
Features
10 curated presets — Subtle, Medium, Heavy, Dreamy, Neumorphism, Neon, Sharp, Layered, Inner Glow, and Paper effects.
Multiple shadow layers — Stack as many shadow layers as needed for complex depth effects.
Inset shadow support — Toggle between outer drop shadows and inner inset shadows per layer.
Live preview — See your shadow on a customizable preview element with adjustable background color, border radius, and size.
Full parameter control — Sliders for X offset, Y offset, blur, spread, and opacity, plus a color picker for each layer.
CSS output — Copy the complete box-shadow property value, ready to paste into your stylesheet.
Tailwind output — Generates Tailwind's shadow-[value] arbitrary value syntax for utility-first workflows.
100% client-side — All rendering and computation happens in your browser.
Common Use Cases
Card Elevation — Design layered shadows for cards, modals, and dropdown menus that create realistic depth and elevation in Material Design and modern UI systems.
Neumorphism UI — Create the soft, extruded plastic look of neumorphic design using paired light and dark shadows with matching background colors.
Button Effects — Design pressed (inset) and raised (outer) shadow states for interactive button components with hover and active transitions.
Neon and Glow Effects — Use large blur values with bright colors to create glowing neon text and elements for dark-themed UIs.
Paper and Print Effects — Simulate paper-like depth with subtle offset shadows, perfect for portfolio sites and document-style layouts.
Tips for Power Users
- Stack 2–3 shadow layers with different blur values for the most realistic depth perception. Use a tight shadow for definition and a wide one for ambient light.
- For neumorphism, use the same background color for the element and its container, with one light shadow (top-left) and one dark shadow (bottom-right).
- Inset shadows are perfect for input fields, creating a subtle pressed-in effect that signals interactivity.
- Performance tip: box shadows trigger repaints. For animated shadows, use will-change: box-shadow or animate opacity of a pseudo-element instead.
This box shadow generator runs entirely in your browser — no design software, no plugins, and no server calls. It gives you production-ready CSS and Tailwind code with a visual editor that makes it easy to experiment with shadow depth, color, and layers. The preset collection covers the most popular shadow patterns so you can start with a professional foundation and customize from there.