CSS Box Shadow Generator — Layered, Soft & Inset Shadows
Design soft, layered or inset CSS box shadows with live preview and copy-ready CSS or Tailwind classes.
Free, with no sign-up and no watermark. The file is processed in your browser and never uploaded.
Build CSS box-shadow values visually. Start from a preset, stack up to eight layers, and fine-tune offset, blur, spread, colour and opacity while the preview updates live. Copy plain CSS or a ready-made Tailwind arbitrary-value class.
Step by step
- Pick a starting point: Click a preset such as Soft, Layered or Hard offset — or keep the default.
- Choose a layer: Select Layer 1, Layer 2… to edit it, use Add layer for more depth, or Remove to delete the selected one.
- Adjust it: Drag the sliders or type exact values for Horizontal offset, Vertical offset, Blur, Spread and Opacity; tick Inset for an inner shadow.
- Match your design: Set the Box colour, Background and Corner radius so the preview looks like your real component.
- Copy the code: Switch between the CSS and Tailwind tabs and press Copy.
Handy for
Cards and modals
Two or three soft layers look more natural than one heavy shadow.
Buttons
A small shadow plus a larger blurred one gives a lifted, clickable feel.
Neo-brutalist UI
The Hard offset preset gives solid, unblurred shadows.
Focus glows
The Glow preset makes a coloured halo for highlighted elements.
Good to know
Real shadows get softer with distance: give bigger offsets more blur and lower opacity.
Negative spread keeps a large blurred shadow from spilling out at the sides.
Shadows are drawn first-layer-on-top, so put the sharpest, darkest layer first.
Questions
What do blur and spread do?
Blur softens the edge; spread grows (positive) or shrinks (negative) the shadow before blurring.
How do I use the Tailwind class?
Paste it into class — Tailwind v3.2+ and v4 understand arbitrary values like shadow-[0_4px_12px_rgb(0_0_0/0.12)].
Is anything uploaded?
No. The generator runs entirely in your browser; nothing you type or upload is sent anywhere.
More Web Design tools
- Glassmorphism CSS Generator — Create frosted-glass cards with backdrop blur, tint and border, previewed on colourful backgrounds.
- CSS Clip-Path Generator — Drag polygon points or pick a shape to build a CSS clip-path for images and sections.
- CSS Flexbox Generator & Playground — Experiment with flex direction, wrapping, alignment and item sizing, then copy the CSS and HTML.
- CSS Grid Layout Generator — Set columns, rows and gaps, place items across cells and copy clean CSS Grid code with HTML.
- Border Radius Generator — Shape corners with simple or eight-value elliptical border-radius to make pills, leaves and organic blobs.
- Neumorphism CSS Generator — Generate soft-UI neumorphic surfaces (flat, concave, convex or pressed) with a built-in contrast check.