Box Shadow Generator
Layered CSS box shadows and border radius, with Tailwind output. Runs in your browser.
About this box shadow generator
This box shadow generator lets you design CSS shadows and border radius with sliders and copy the code. It is for front-end developers and designers who want a shadow that looks right on their real colors, not just on white.
Stack up to ten layers. Each has its own offset, blur, spread, color, opacity and inset setting. Round all four corners together or one at a time. The preview updates as you drag.
When it looks right, copy plain CSS, a Tailwind class or a named Tailwind theme token. You can also paste a box-shadow from your stylesheet and keep editing it here. Nothing leaves your browser.
Features
Up to ten layers
Add, duplicate, reorder, hide and delete layers. Several soft layers look more natural than one big blur.
Every box-shadow setting
Horizontal and vertical offset, blur, spread, color, opacity and inset, on sliders that also work with the arrow keys.
Border radius per corner
Link the corners or set each one. The output uses the shortest valid border-radius shorthand, such as 16px 4px.
Seven presets
Soft, Hard / neo-brutal, Layered, Glow, Floating, Inset and Neumorphic. Each also sets fitting card and background colors.
CSS and Tailwind output
A multi-line CSS rule, a Tailwind arbitrary class such as shadow-[…] rounded-[…], or a named token for a v4 @theme block and a v3 config.
Edit an existing shadow
Paste a box-shadow value, with or without the property name. Multiple layers, inset, rem and em lengths and any CSS color all load as editable layers.
Preview on your colors
Set the card and background colors to match your design, so a glow on a dark page looks the way it will in your app.
How to use the box shadow generator
- 1Pick a preset or add layers, then adjust offset, blur, spread, color and opacity.
- 2Set the border radius for all corners or each one, and check the live preview.
- 3Choose CSS, Tailwind class or Tailwind theme and copy the code.
When to use it
Cards and panels
Start from Soft or Layered for content cards, then lower the opacity until the lift is barely there.
Neo-brutal buttons
The Hard preset gives a solid 6px offset with no blur. Match the radius to your buttons and you are done.
Focus rings and glows
Combine a 1px spread ring with a wide blurred layer in your brand color for focus states or a highlighted pricing plan.
Hero sections
Put a floating card on a custom CSS gradient background and set the preview background to its main color to judge the shadow.
How does CSS box-shadow work?
A box-shadow is drawn from a copy of the element's shape. The first two lengths move that copy right and down; negative values move it left and up. The third length is the blur. The fourth is the spread, which grows or shrinks the shape before blurring. Then comes the color.
Add inset and the shadow is drawn inside the element, so it looks pressed in. Shadows follow the border radius and take no space in the layout.
Why do layered shadows look more realistic?
Real shadows are dark and sharp close to an object and faint and soft further away. One shadow can only be one or the other. Stack five layers with offsets of 1, 2, 4, 8 and 16px, each at about 7% opacity, and you get that falloff. That is exactly what the Layered preset does.
Separate shadows with commas. The first one in the list is painted on top, and the layer list here follows the same order.
How do you use a custom shadow in Tailwind?
Put the value in square brackets. Underscores stand for spaces and commas can stay, so a layered shadow fits in one class, like shadow-[0_1px_3px_rgba(16,24,40,0.1),0_12px_24px_-6px_rgba(16,24,40,0.14)]. It works in Tailwind v3 and v4.
Using the same shadow in many places? A token is easier to maintain. The Tailwind theme tab gives you --shadow-card and --radius-card for a v4 @theme block, plus the same values for a v3 config. Rename card to whatever you like.
What does a negative spread do?
It shrinks the shadow before blurring, so it hides under the element. Pair a negative spread with a large y offset and you get the classic floating card. A large spread with zero blur does the opposite: a solid outline that, unlike a border, does not change the layout.
Big blurs on many elements can make scrolling stutter on low-end phones, especially when they animate. Keep large shadows for a few key elements.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Layers | Up to 10, with reorder, hide and duplicate | One shadow |
| Border radius | Built in, per corner | Separate tool |
| Tailwind | Arbitrary class plus v4 and v3 tokens | CSS only |
| Existing CSS | Paste a box-shadow and edit it | Start from scratch |
| Preview colors | Custom card and background | White box on white |
Tips
- Tint shadows with a dark shade of your background hue instead of pure black. Generate a palette and use its 900 or 950 step.
- Keep one light source. If one card's shadow falls down and to the right, all of them should.
- On dark backgrounds shadows almost disappear. Use a lighter surface or a glow.
- Neumorphic shadows only work when card and background are the same color, and they rarely give controls enough edge contrast. Check the 3:1 non-text contrast before you ship them.
- Before you deploy, minify your CSS so long layered shadows do not bloat the stylesheet.
Questions
How do I add multiple box shadows to one element?
Separate them with commas in one box-shadow property. Here, click Add layer or Duplicate, and the CSS output lists every visible layer in order, top layer first.
What does spread do in box-shadow?
Spread grows the shadow shape before it is blurred, or shrinks it when negative. A negative spread keeps the shadow under the element instead of around its edges.
How do I make an inner shadow in CSS?
Put the inset keyword at the start of the shadow, as in inset 0 2px 6px rgba(0, 0, 0, 0.2). Tick Inset on a layer here to see it.
How do I make a soft, realistic shadow?
Use two to five low-opacity layers, each with a larger offset and blur than the last. The Layered and Soft presets are good starting points.
How do I use a custom box shadow in Tailwind?
Use an arbitrary value class such as shadow-[0_4px_12px_rgba(0,0,0,0.15)], or add a --shadow-name token to @theme in v4. The Tailwind tabs write both for you.
Does box-shadow affect layout or element size?
No. Shadows are painted without taking up space, so they can overlap nearby elements. A parent with overflow: hidden will clip them, so add padding there.
Can I edit a shadow I already have?
Yes. Open Edit an existing box-shadow, paste the value and click Load into editor. Each comma-separated shadow becomes a layer you can adjust.
Is my CSS sent anywhere?
No. The generator and the parser run in your browser.