Design box-shadow effects visually and copy the CSS — with a live preview.
The CSS Box Shadow Generator helps you craft the perfect box-shadow with sliders for horizontal offset, vertical offset, blur, spread, and color. Preview the shadow on a real element as you tweak it, then copy clean CSS — including inset shadows and multiple layered shadows for realistic depth.
A box shadow is defined by a few values: the horizontal and vertical offsets move the shadow, blur softens its edge, spread grows or shrinks it, and the color (often with alpha transparency) sets its tone. Add the inset keyword to draw the shadow inside the element instead of behind it. You can stack several shadows in one property, separated by commas, to build soft, natural depth.
Shadows do more than decorate — they communicate elevation. In modern interfaces, a slightly raised element reads as interactive or important, while a flat element recedes. A consistent set of shadow levels (a subtle one for cards, a stronger one for menus, a pronounced one for modals) gives users an intuitive sense of what floats above what. Because the eye reads light and shadow instinctively, getting these cues right makes an interface feel organised without any explicit labelling.
Create a subtle card lift:
box-shadow: 0 4px 6px rgba(0,0,0,0.1);The preview shows a gentle shadow beneath the element, giving it a floating, elevated feel without looking heavy — the kind of shadow used on modern cards and buttons.
Real-world shadows are not a single hard edge, so layering one tight, darker shadow with a softer, wider one mimics how light actually falls and produces depth that looks natural rather than flat. Keep shadow colors semi-transparent so they blend with any background instead of appearing as solid grey blocks, and bias the vertical offset downward to match the convention that light comes from above. Subtlety usually wins: a shadow you barely notice often does more for perceived quality than a heavy one.
Yes — layer several shadows in one value to build soft, realistic depth.
Enable the inset option to render the shadow inside the element.
Alpha transparency lets the shadow blend with the background so it looks like light, not a solid block.
Spread grows or shrinks the shadow before blur is applied, letting you make it tighter or wider.
Yes — copy the generated box-shadow directly into your stylesheet.
box-shadow is supported in all modern browsers.
Pair it with the CSS Text Shadow Generator and CSS Border Radius Generator to complete a component.
How to Use CSS Box Shadow Generator
Adjust offset, blur, spread, and color to taste.
See the shadow update live on a sample element.
Copy the box-shadow CSS into your project.
Design box-shadow effects visually and copy the CSS — with a live preview.
Tool Use:
0Added:
Sep 11, 2026Type:
Free ToolPrivacy:
Client SideGenerate custom QR codes for URLs, vCards, Wi-Fi, text, and more — high-resolution PNG and SVG download, free.
Generate stylish text images with custom fonts, colors, gradients, shadows, and strokes. Download as PNG instantly — perfect for social media, logos, and banners.
Encode text or files to Base64 and decode Base64 strings back to text. Free, instant, browser-only — no upload, no logging.
Generate globally unique identifiers (UUID v4) for databases, sessions, and distributed systems — instant and bulk-friendly.
Generate strong, random passwords with custom length, character classes, and exclusions — perfect for new accounts and password rotation.