Multi-layer box-shadow builder with Material elevation presets and Tailwind export—part of the Design & UI effect chain (border-radius → shadow → gradient).
Skip to box shadow generatorbox-shadow: 0px 8px 24px 0px rgba(0,0,0,0.15);
Multi-layer box-shadow with live preview—computed locally, nothing uploaded. Pair rounded corners from Border Radius Generator; stack with CSS Gradient Generator.
Create single or multi-layer CSS box shadows. Use presets, tweak layers, and export as CSS, inline style, or Tailwind config.
Inset, Neumorph, and Glow apply a preset to your layers. Normal mode adds standard layers when you click Add layer.
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.15);boxShadow: "0px 8px 24px 0px rgba(0,0,0,0.15)"boxShadow: {
'custom': '0px 8px 24px 0px rgba(0,0,0,0.15)'
}The CSS box-shadow property adds shadow effects around an element's frame. Each shadow is defined by four length values (x offset, y offset, blur radius, spread radius), a color, and an optional inset keyword. You can stack multiple shadows by separating them with commas — a technique used for layered glows, neumorphism, and rich elevation effects.
Box shadows are rendered outside the element's layout by default, meaning they don't affect surrounding elements. They are GPU-composited in modern browsers, making them cheaper to animate than properties that trigger layout (like margin). For clipped children or non-rectangular elements, consider filter: drop-shadow() instead.
box-shadow: [inset] <x> <y> <blur> <spread> <color>;
| Parameter | What it controls | Typical value |
|---|---|---|
| X offset | Horizontal shadow position. Negative = left. | 0 to ±20px |
| Y offset | Vertical shadow position. Positive = below. | 2px to 16px |
| Blur radius | Larger = softer edges. 0 = hard shadow. | 4px to 30px |
| Spread radius | Expands or contracts shadow size. 0 = same as element. | -4px to 8px |
| Color | Use rgba() for transparency. Dark colors for elevation, light for neumorphism. | rgba(0,0,0,0.1–0.3) |
| inset | Moves shadow inside the element. Used for pressed/active states. | optional keyword |
Use subtle downward shadows (small Y, medium blur) to lift cards, modals, and dropdowns above the page. Larger blur and spread = higher elevation. Follow a consistent elevation scale to keep depth readable across your UI.
Inset or outset shadows make excellent custom focus indicators. They respect border-radius, are animatable, and don't affect layout — making them a solid alternative to outline for keyboard-navigable components.
Animate box-shadow on hover (transition: box-shadow 0.2s) to create a lift effect. Increase Y offset and blur on hover to signal interactivity without moving the element in the layout.
Use two shadows — one light (white or near-white, negative offset) and one dark (gray/black, positive offset) — against a matching background to create the soft-extruded look. Works best with pastel backgrounds and rounded corners.
Set X and Y to 0, use a large blur, and use a colored rgba() value to create a glow. Common for neon UI, status indicators, and hover states on colored buttons.
Add an inset shadow on :active to simulate a pressed button. Reduce Y offset and blur, keep it subtle — this gives tactile feedback without moving the element.
Subtle card elevation
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
Medium elevation (modal/dropdown)
box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
Strong elevation (floating action)
box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.1);
Colored glow (button hover)
box-shadow: 0 0 20px rgba(59,130,246,0.5);
Neumorphism flat
box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff;
Inset pressed state
box-shadow: inset 0 2px 6px rgba(0,0,0,0.15);
Box shadows are GPU-composited and cheaper than many CSS properties, but a few patterns can hurt performance:
will-change: box-shadow or animate a pseudo-element's opacity instead.Free CSS box-shadow generator with multi-layer controls, Material-style elevation presets, and live preview. Tune X/Y offset, blur, spread, and rgba color—then copy CSS, inline style, or Tailwind boxShadow config. Runs locally in your browser; no signup.
Stack box-shadow layers visually, preview on card/button/panel shapes, and copy production-ready CSS or Tailwind in one click.
Common real-world scenarios where this tool saves time.
Dial Y offset and blur for dropdowns, dialogs, and floating panels using a consistent elevation scale.
Export inset shadows for :active states and deeper shadows for :hover lift effects.
Copy a boxShadow entry for tailwind.config.js without hand-escaping rgba values.
Start with an elevation preset (Soft, E1–E5, FAB, Modal) or choose Inset, Neumorph, or Glow mode to load a starting stack.
Adjust X/Y offset, blur, spread, color, and opacity per layer. Add layers for stacked elevation or dual-shadow neumorphism.
Switch the preview between card, button, and panel on light or dark backgrounds to judge contrast.
Copy the CSS box-shadow rule, inline boxShadow string, or Tailwind boxShadow config—or copy all three at once.
Advertisement
Add transition: box-shadow on the base element and change the shadow in :hover. Keep the same number of layers between states for smoother repaints.
box-shadow follows the element's box. filter: drop-shadow() follows visible pixels—better for irregular shapes and transparent PNGs.
Yes—rgba black at roughly 0.06–0.20 opacity is common for natural elevation shadows.
This tool builds arbitrary multi-layer box-shadow stacks for any UI element. Neumorphism Generator focuses on soft dual-shadow presets on matching backgrounds—use it for tactile buttons; use this tool for general elevation, glow, and inset shadows.
Yes—layer values and preview styling are computed locally in your browser. Settings are not uploaded to EverydayTools servers.
Box-shadow layers and preview styling are computed locally; shadow settings are not sent to a server.
Always verify in target browsers; GPU cost rises with large blur on big elements.
For design and prototyping—not a substitute for design-system tokens in production.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-07-07.
Same workflow or intent — pick the next step without leaving the site.
Create CSS gradients online—linear, radial, conic. HEX, RGB, HSL, opacity, presets. Copy CSS or Tailwind free in your browser.
Free CSS border radius generator — set individual corner values visually and copy the CSS border-radius property instantly. Supports all four corners independently. No signup. Runs locally in your browser when supported—no upload required for normal use.
Free CSS clip-path generator — build polygon, circle, and ellipse shapes visually with draggable points and copy the clip-path CSS property instantly. No signup needed. Runs locally in your browser when supported—no upload required for normal use.
Free CSS button generator — design custom buttons with gradients, shadows, border radius, and hover effects using visual controls. Copy the CSS and HTML instantly. No signup. Runs locally in your browser when supported—no upload required for normal use.
Free CSS filter generator — create blur, brightness, contrast, grayscale, hue-rotate, and other filter effects with live preview. Copy the CSS filter property. No signup. Runs locally in your browser when supported—no upload required for normal use.
Build frosted glass CSS with WCAG contrast checker, layer composer, VisionOS/Fluent presets, and full export—CSS, Tailwind, tokens, share URL. Blur 0–40px. Browser-only, no signup.