Presets
Lift on hover
Box radius (preview)16px
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
Layer 1
X offset0px
Y offset4px
Blur12px
Spread0px
Opacity20%
Inset
How to use
01
Start from a preset or a palette
Click a preset such as Card, Modal or Neon, or open Elevation palette to build low, medium and high shadows from a light position, strength and crispness. Set Page background, Box color and radius to match your design.
02
Tune each layer
Drag X offset, Y offset, Blur, Spread and Opacity, pick a Shadow color and switch Inset on for inner shadows. Use the layer buttons to hide, move, duplicate or remove layers, up to ten in total.
03
Copy the code
Pick CSS, Tailwind, SCSS, With -webkit- or Hover state and press Copy, or download a .css file. Copy share link keeps the layers and colors in a URL.
Why CSS Box Shadow Generator
- Up to ten layers with offset, blur, spread, color, opacity and inset, plus reorder and hide.
- 23 presets and an elevation palette that writes low, medium and high CSS variables.
- Preview on a box, card, button or avatar with your own colors and a hover lift.
- CSS, Tailwind, SCSS, prefixed and hover-state output, with share links.
box-shadow syntax, value by value
Each layer is a list of values separated by spaces, and layers are separated by commas. The tool always writes the full form so every value is visible.
In your own CSS you can leave out spread, or both blur and spread, and they default to 0. The color can also be left out, in which case the browser uses the element's text color. The first layer in a list is painted on top of the ones after it.
| Part | Example | What it does |
|---|---|---|
| inset (optional) | inset | Draws the shadow inside the element |
| X offset | 0px | Moves the shadow right (positive) or left (negative) |
| Y offset | 4px | Moves the shadow down (positive) or up (negative) |
| Blur | 12px | How soft the edge is; 0 gives a hard edge |
| Spread | -2px | Grows or shrinks the shadow before blurring |
| Color | rgba(0, 0, 0, 0.2) | Shadow color; the alpha sets how dark it is |
Copy-ready box shadow recipes
These are the values behind some of the presets. The tool writes 0 without a unit, so its output is slightly shorter. Paste any of them after box-shadow: in your CSS.
| Use | Value |
|---|---|
| Subtle | 0px 1px 2px 0px rgba(0, 0, 0, 0.05) |
| Card | 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1) |
| Dropdown | 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1) |
| Popover | 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1) |
| Modal | 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1) |
| Deep | 0px 25px 50px -12px rgba(0, 0, 0, 0.25) |
| Inner | inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15) |
| Focus ring | 0px 0px 0px 3px rgba(37, 99, 235, 0.5) |
| Glow | 0px 0px 24px 4px rgba(59, 130, 246, 0.6) |
| Material 1 | 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) |
Common questions
Why do layered box shadows look more realistic than one shadow?
Real objects cast a small, dark shadow close to them and a wide, faint one further out, and one blur cannot show both. Stack two layers: a tight one with low blur and a larger one with more blur and lower opacity. The Card, Dropdown and Modal presets use this pattern.
How many shadow layers can I stack in the box shadow generator?
Up to ten. Each layer has its own offsets, blur, spread, color, opacity and inset switch, and the output joins them with commas. The first layer in the list is drawn on top, so use the up and down buttons to change which one sits in front.
What does the Spread value do in box-shadow?
Spread grows or shrinks the shadow before the blur is applied. A negative spread tucks a large blurred shadow under the element so it does not show at the sides. A spread with zero blur draws a solid outline, which is how the Focus ring and Rainbow rings presets work.
How do I make an inset shadow in CSS?
Switch on Inset for a layer and the shadow is drawn inside the element instead of outside. Inset shadows suit pressed buttons, input fields and recessed panels. You can mix inset and outer layers in the same box-shadow, as the Pressed preset does.
What is the elevation palette in this box shadow tool?
It builds three shadows, low, medium and high, that share one light position and one shadow color tinted from your background. Strength, Crispness and Layer count change all three at once. The output is a :root block with --shadow-color and --shadow-elevation-* variables you apply with var().
What color should a box shadow be on a colored background?
Avoid solid black. Black at 10 to 25 percent opacity works on white and light gray. On a colored page, a darker shade of the page color looks more natural, which is what the elevation palette does automatically from the background color.
Does box-shadow affect layout or performance?
It never changes layout, because the shadow does not take up space. Large blurs cost more to paint. The Hover state tab transitions box-shadow for simplicity; on long lists, fading in a pseudo-element that holds the larger shadow is cheaper.
How do I make a glow effect with box-shadow?
Use zero offsets, a large blur and a bright color at medium opacity, like the Glow preset: 0 0 24px 4px with blue at 60 percent. Stack two or three glows in related colors for a neon look, as the Neon preset does. Glows show most on dark backgrounds.
Can I use the box-shadow output in Tailwind?
Yes. The Tailwind tab writes an arbitrary value class such as shadow-[0_4px_12px_rgba(0,0,0,0.2)], with spaces turned into underscores. Paste it into the class attribute. For a shadow you reuse, add it to boxShadow in your Tailwind config instead.
How do I share a box shadow with a teammate?
Press Copy share link. The layers, page color, box color, radius and preview sample are stored in the link after a # sign, so nothing is sent to a server. Opening the link loads the same shadow in the tool.