Design shadows with live preview and CSS output.
Create single or multi-layer CSS box shadows. Use presets, tweak layers, and export as CSS, inline style, or Tailwind config.
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.Design shadows with live preview and CSS output.
Free CSS box shadow generator — set X/Y offset, blur radius, spread, and color visually with live preview. Copy the finished CSS box-shadow property instantly. No signup.
Add shadow layers and tune offset, blur, spread, and color.
Check the live preview against your target shape or card layout.
Copy the generated CSS or Tailwind class to your stylesheet or component.
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.
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.
Part of Design & UI Tools
More free tools for the same workflow.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-05-19.