Output follows CSS box-shadow syntax: optional inset, then X, Y, blur, spread, and color. Multiple shadows are comma-separated; the first listed paints on top.
Skip to box shadow generatorBox Shadow Generator
Build CSS box-shadow values visually—offset, blur, spread, color, opacity, and inset—then copy clean CSS, inline style, or Tailwind.
Example output
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.15);
Multi-layer box-shadow with live preview—computed locally, nothing uploaded. After you set elevation, add a fill with the CSS Gradient Generator.
Loading tool…
What does a CSS box shadow do?
box-shadow draws one or more shadows around an element’s frame using X/Y offset, blur, optional spread, color, and optional inset.
The CSS box-shadow property adds depth around a box. A typical card uses a small downward offset, a moderate blur, and a low-opacity color:
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);
X moves the shadow left or right. Y moves it up or down. Blur softens the edge (it cannot be negative). Spread grows or shrinks the shadow before blur. Color—usually rgba—sets the tint and strength. inset draws the shadow inside the padding box instead of outside it.
This generator builds that CSS visually. Stack layers for realistic elevation. It is not filter: drop-shadow() and not text-shadow.
Start from a preset, tune the active layer, then copy the declaration. Prefer your design-system tokens when you already have them.
How to use the Box Shadow Generator
Start from a preset or the default layer
The default is 0 8px 24px at 15% black. Card, Soft, or Modal are useful starting points.
Adjust X and Y offset
Positive Y is a natural downward light. Negative X/Y are valid.
Adjust blur and spread
Blur must stay ≥ 0. Negative spread tightens the shadow before it blurs.
Set color, opacity, and inset
Opacity is baked into rgba(). Inset is for inner shadows on inputs and pressed buttons.
Add layers and copy
Add, duplicate, reorder, or disable layers, then copy CSS, Tailwind, inline style, or a CSS variable.
CSS box-shadow syntax
Each shadow is optional inset, then offset-x, offset-y, optional blur-radius, optional spread-radius, and color. This tool always writes four px lengths plus rgba so the result is explicit.
Multiple shadows are a comma-separated list. The first shadow in the list is painted on top of later shadows, as documented by MDN.
box-shadow does not change layout size. An ancestor with overflow: hidden can clip the shadow.
Formula
box-shadow: [inset] <offset-x> <offset-y> <blur> <spread> <color>;
Soft card:
box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);
Two layers:
box-shadow:
0 1px 2px rgba(0,0,0,0.08),
0 8px 24px rgba(0,0,0,0.12);Assumptions
- Lengths in this UI are pixels
- Opacity is encoded in rgba alpha
- Disabled layers are omitted from the output
Limitations
- Not filter: drop-shadow() — that follows alpha shapes, not the border box
- Not text-shadow
- Neumorphism here is a two-layer starter, not a full soft-UI studio
Soft, card, inset, and glow shadows
Cards
Soft and layered cards
A tight contact shadow plus a larger ambient layer reads more realistic than one heavy blur.
Buttons
Resting and pressed states
A small outer shadow at rest; inset for the pressed state.
Modals
Dialogs and popovers
Larger Y and blur, often with a slightly negative spread so the umbra stays under the box.
Effects
Glow and neumorphism
Glow is a colored, unoffset blur. Neumorphism uses two opposing soft layers on a matching background.
Box shadow examples
Subtle card
Input
Quiet liftOutput
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.08);Small Y, small blur, low opacity.
Floating card
Input
Stronger elevationOutput
box-shadow: 0px 12px 30px 0px rgba(0,0,0,0.12);Larger Y and blur; keep opacity modest.
Button
Input
Clickable controlOutput
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);Enough lift to read as tappable without looking detached.
Inset
Input
Recessed fieldOutput
box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.12);inset draws the shadow inside the box.
Glow
Input
Colored haloOutput
box-shadow: 0px 0px 32px 0px rgba(79,70,229,0.35);Little or no offset, large blur, a brand color.
Hard shadow
Input
Retro offsetOutput
box-shadow: 4px 4px 0px 0px rgba(15,23,42,0.85);Zero blur keeps a crisp edge.
What the four box-shadow values mean
| Value | Meaning |
|---|---|
| X offset | Moves the shadow left (negative) or right (positive) |
| Y offset | Moves the shadow up (negative) or down (positive) |
| Blur | Softens the edge. Cannot be negative. |
| Spread | Grows or shrinks the shadow before blur. May be negative. |
Color and inset are separate. Opacity is part of the color.
box-shadow vs drop-shadow vs text-shadow
| Property | Follows | Use |
|---|---|---|
| box-shadow | The border box (and its radius) | Cards, buttons, inputs |
| filter: drop-shadow() | Rendered alpha | Irregular PNG/SVG silhouettes |
| text-shadow | Glyphs | Headlines and labels |
How to make a soft, card, or inset shadow
| Goal | What to change | Starting CSS |
|---|---|---|
| Soft shadow | Modest Y, larger blur, low opacity, near-zero spread | 0 4px 16px rgba(0,0,0,0.10) |
| Card shadow | A tight contact layer plus a larger ambient layer | 0 1px 2px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.10) |
| Inset / inner | Add inset and keep Y small | inset 0 2px 6px rgba(0,0,0,0.12) |
| Modal | Larger Y and blur, often slight negative spread | 0 24px 48px -8px rgba(0,0,0,0.28) |
There is no single formula. Softness is mostly blur + opacity; elevation is mostly Y + layering.
Multiple box shadows
| Need | Layer idea |
|---|---|
| Realistic depth | Small sharp contact + larger soft ambient |
| Glow | Zero offset, large blur, brand color |
| Neumorphism | Light layer up-left + dark layer down-right |
| Outline | Zero offset, zero blur, positive spread |
Shadows are comma-separated. The first listed shadow paints on top of later ones.
px vs rem vs em for box-shadow
| Unit | When it is practical |
|---|---|
| px | Most UI elevation tokens and this generator’s export |
| rem | When the shadow should scale with the root font size |
| em | Rare; scales with the element’s font size |
Exact pixel values are common for cards and buttons because elevation is a visual constant, not a type scale.
Real-world shadow recipes
| Recipe | Use | CSS |
|---|---|---|
| Soft card | Quiet panels | 0px 4px 16px 0px rgba(0,0,0,0.10) |
| Elevated card | Dashboards | 0px 2px 4px rgba(0,0,0,0.08), 0px 12px 28px -4px rgba(0,0,0,0.16) |
| Floating button | Primary CTA | 0px 4px 12px 0px rgba(0,0,0,0.15) |
| Modal | Dialogs | 0px 24px 48px -8px rgba(0,0,0,0.28) |
| Inset input | Recessed fields | inset 0px 2px 6px 0px rgba(0,0,0,0.14) |
| Glow | Focus / brand halo | 0px 0px 32px 0px rgba(79,70,229,0.35) |
| Neumorphism | Soft UI on a matching surface | -6px -6px 14px rgba(255,255,255,0.90), 6px 6px 14px rgba(15,23,42,0.12) |
| Hard / retro | Poster-style offset | 4px 4px 0px 0px rgba(15,23,42,0.85) |
Common box-shadow mistakes
Shadow is too dark
Drop opacity. Most UI shadows sit between 8% and 20% black.
Blur is too small
Soft elevation needs more blur than offset.
Spread is too large
Spread grows a hard halo. Keep it near 0 unless you want an outline.
X offset looks like side lighting
For UI cards, X is usually 0. Save large X for stylized or hard shadows.
Y offset is excessive
A huge Y with a tiny blur looks like a detached slab.
Forgetting inset
Inner shadows need the inset keyword on that layer.
One giant shadow instead of layers
A contact layer plus an ambient layer usually looks more natural.
Invalid Tailwind arbitrary syntax
Spaces become underscores; use the copied shadow-[…] class.
Expecting shadows to add layout size
box-shadow does not affect the box model.
Shadow clipped by overflow: hidden
Clip on the element that should show the shadow, not an ancestor.
Tailwind box shadows
Use named utilities when they match
shadow-sm, shadow, shadow-md, shadow-lg, and shadow-xl cover many UI cases.
Copy arbitrary values for custom stacks
shadow-[0px_8px_24px_0px_rgba(0,0,0,0.15)] is valid Tailwind JIT syntax.
Or extend the theme
The optional config snippet maps one named key to the same CSS value.
When this tool isn't the right choice
You need a silhouette shadow on a transparent PNG
Use filter: drop-shadow() instead of box-shadow.
You need text glow only
Use text-shadow (or the text glow tool), not box-shadow.
You already have elevation tokens
Use those tokens. This tool is for exploring or exporting a value you do not have yet.
Troubleshooting
The shadow looks cut off
Likely cause: An ancestor has overflow: hidden, or the preview area is clipping it.
Fix: Give the shadow room, or apply overflow clipping on a child instead.
Neumorphism looks dirty
Likely cause: The page background does not match the element fill.
Fix: Use the same surface color for both, then apply the two opposing layers.
Workflow guides
Step-by-step chains that connect related tools for common tasks.
Shadow, then a matching fill
- Dial in a card or modal shadow above and copy the CSS.
- Build the background in the CSS Gradient Generator .
Shadow on a complete button
- Copy a Button or Inset shadow.
- Apply it inside the CSS Button Generator if you also need hover and padding.
Box shadow vs related EverydayTools
This page owns CSS box-shadow. Use another generator for fills, radius tokens, or a full button stylesheet.
| Related tool | Use this tool when | Use related tool when |
|---|---|---|
| CSS Gradient Generator | You need elevation, not a fill. | You need a linear, radial, or conic background. |
| CSS Button Generator | You only need the shadow token. | You want hover, padding, and a full button stylesheet. |
| Tailwind Cheatsheet | You already have shadow-[…] from this tool. | You need named utilities such as shadow-md. |
What to do next
Continue the workflow with the right follow-up tool.
- Add a fill with theCSS Gradient Generator .
- Pick a matching color in theColor Picker .
- Look up named utilities in theTailwind Cheatsheet .
Advertisement
Frequently asked questions
What is a CSS box shadow?
It is a shadow drawn around an element’s frame using offsets, blur, optional spread, color, and optional inset.
How do I generate a box shadow in CSS?
Set box-shadow on the element, or copy the declaration from this generator.
What do the four box-shadow values mean?
X offset, Y offset, blur, and spread — in that order — followed by color.
What is the difference between offset, blur and spread?
Offset moves the shadow. Blur softens it. Spread changes its size before blur.
What does inset do in box-shadow?
It places that shadow inside the element instead of outside it.
Can CSS have multiple box shadows?
Yes. Separate them with commas. The first listed shadow paints on top.
Which box shadow values create a soft shadow?
Modest offset, larger blur, near-zero spread, and low opacity. There is no single formula.
How do I make a card shadow in CSS?
Start with a small contact layer and a larger ambient layer, or use the Card preset.
How do I make an inner shadow in CSS?
Add inset to the layer, or use the Inset preset.
How do I make a glow with box-shadow?
Use little or no offset, a large blur, and a colored rgba. The Glow preset does this.
How do I create a box shadow in Tailwind?
Use shadow-md (and friends) or paste this tool’s shadow-[…] arbitrary class.
What is the difference between box-shadow and drop-shadow?
box-shadow follows the border box. filter: drop-shadow() follows the rendered alpha shape.
Does box-shadow affect an element's layout size?
No. Shadows paint outside (or inside) the box without changing width or height.
Can box-shadow use negative values?
Yes for X, Y, and spread. Blur cannot be negative.
Is this box shadow generator free, and does it run in the browser?
Yes. It is free, needs no account, and generates values locally. They are not uploaded for conversion.
How do I write a Tailwind arbitrary box shadow?
Copy this tool’s shadow-[…] class. Spaces become underscores and stacked shadows use a comma-plus-underscore separator.
Privacy, accuracy, and trust
Privacy
Shadow generation happens in your browser, so the values you enter do not need to be uploaded to a server. The URL is not rewritten as you drag sliders.
Accuracy
Syntax follows MDN: optional inset, four lengths, color. Multiple shadows are comma-separated; the first paints on top.
How this tool works
All mapping is client-side JavaScript.
Verification guidance
Default layer should export box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.15);
Limitations: Not drop-shadow(), not text-shadow, not a Material Design export.
Preview large blur stacks on real devices; GPU cost rises with blur and layer count.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-09-20.