Box Shadow Generator
Create beautiful CSS box-shadows with live preview
Examples
Tailwind-style small elevation
inset: false · offsetX: 0 · offsetY: 1 · blurRadius: 3 · spreadRadius: 0 · color: #00000033box-shadow: 0px 1px 3px 0px #00000033;A subtle, close shadow with low alpha — matches Tailwind's `shadow-sm` token and works well for cards on a light background.
Tailwind-style medium elevation
inset: false · offsetX: 0 · offsetY: 4 · blurRadius: 6 · spreadRadius: -1 · color: #00000040box-shadow: 0px 4px 6px -1px #00000040;The negative spread tightens the footprint so the shadow does not bleed far beyond the element's edge — identical to Tailwind's `shadow-md`.
Two-layer card shadow
Layer 1: 0 1 3 0 #00000033
Layer 2: 0 10 15 -3 #00000040box-shadow: 0px 1px 3px 0px #00000033, 0px 10px 15px -3px #00000040;Stacking a sharp close shadow with a soft diffuse shadow mimics two light sources and produces the more natural elevation seen in Material and Tailwind UI.
About this tool
The Box Shadow Generator lets you build CSS box-shadow rules visually — one layer at a time — without trial-and-error in a stylesheet. Each layer has its own inset toggle, X/Y offsets, blur radius, spread radius, and color, and the live preview updates as you drag any slider.
Stacking multiple layers is where the real design power lives. A small close shadow plus a larger diffuse shadow mimics two real light sources and produces the soft, layered elevation seen in Material Design and the Tailwind UI library. The color field accepts any valid CSS color, including 8-digit hex notation (#RRGGBBAA) so you can dial alpha in precisely.
Everything runs locally in your browser. No image, color, or shape data is uploaded to a server — only the generated CSS rule leaves your device, and that happens when you copy it.
How to use
Pick a preset
Click one of the five presets (Tailwind-style sm/md/lg, soft 2px, pressed inset) to start from a known-good elevation, then tweak the sliders.
Tune the layer
Drag offset, blur, spread, and color until the preview matches your design. Tick Inset to flip the shadow inside the element for a pressed or engraved look.
Add more layers
Click Add Shadow Layer to stack a second shadow. Layered shadows look more natural than a single heavy one — pair a small close shadow with a larger diffuse one.
Copy the CSS
Click Copy to copy the full box-shadow declaration (including all layers in the right order) into your stylesheet.
Use cases
Designing card and modal elevations
Copy each elevation tier (rest, hover, modal) as a CSS custom property so the design system has a consistent shadow language across every surface.
Building a neumorphic UI
Use two opposite-direction shadows — one dark, one light — on the same element to produce the soft, embossed look popular in dashboards and music players.
Mimicking physical depth
Pair a small offset with a large blur and a low alpha (under 20%) so the shadow reads as ambient light rather than a hard outline.
Pressed or inset affordances
Tick Inset to flip a shadow inside the element for pressed buttons, input fields, or track wells — a common pattern for toggles and sliders.
Common mistakes
Mistake:Adding a single heavy shadow with a large blur and high alpha instead of stacking two softer layers.
Fix:Stack a small close shadow with a larger diffuse shadow at lower alpha — the result looks more natural and matches how light actually behaves.
Mistake:Using black at full opacity for every shadow.
Fix:Use 8-digit hex with an alpha channel (e.g. #00000033) so the background color blends through. Pure black at 100% alpha reads as a hard outline.
Mistake:Forgetting that shadow renders outside the box and may be clipped by overflow: hidden on a parent.
Fix:Either lift the shadow to a parent that does not clip, or use a filter: drop-shadow() on the inner element so it follows the actual shape and is not clipped by a sibling.
Mistake:Mixing CSS color formats inside one declaration.
Fix:Pick one color format (hex with alpha, rgb(), or rgba()) and use it consistently. The generator stores colors as 6- or 8-digit hex for predictability.
Mistake:Using a very large blur without enough offset, so the shadow appears centered rather than directional.
Fix:Increase offsetY (or offsetX) to push the shadow away from the element. A centered blur-only shadow is a glow, not a directional drop shadow.
Frequently asked questions
Related guides
References & standards
Related tools
Aspect Ratio Calculator
Calculate dimensions and ratios for images and videos.
Border Radius Generator
Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
Dummy Avatar Generator
Generate unique SVG avatars for mockups and placeholders using various illustration styles
Flexbox Playground
Visually configure a CSS flexbox container — set direction, alignment, wrap and gap, see a live preview, and copy production-ready CSS.