Free tool
Box Shadow Generator With Layers, Presets and Tailwind Sizes
Build a shadow on a sample box, add layers until it looks natural, and copy the CSS. You can also start from a preset or from one of Tailwind's own shadow sizes.
Tailwind sizes
The shadow is built in your browser and nothing is sent anywhere. Your last design stays on this device only, and Copy link holds the design inside the address.
Why one shadow layer often looks flat
A single dark blur under a card tends to look like a sticker with a dirty edge. Real shadows are made of a tight, darker part close to the object and a wider, lighter part further out. CSS lets you stack several shadows on one element for this reason, and the tool is built around layers.
Each layer has its own controls, and Add a shadow layer adds another. The two default layers show the idea: one big, soft, low-opacity shadow pushed down, and one small, tight one. Change one value at a time and watch the preview box.
What each control does
| Control | Effect |
|---|---|
| Offset X and Y | Moves the shadow sideways and down or up |
| Blur | Softens the edge. Zero is a hard edge |
| Spread | Grows or shrinks the shadow before blur. A negative value keeps it tucked under the box |
| Colour and opacity | The shadow colour and how strong it is |
| Inset | Draws the shadow inside the box instead of outside |
You can also set the box colour, the page colour behind it and the corner radius. The Box and Page switch changes what the preview shows, which matters because a shadow that looks right on white can disappear on a grey page.
Starting from a preset
The preset buttons give you a starting point so you do not begin from zero.
- Soft for a gentle lift under cards.
- Layered for a more natural, built-up depth.
- Sharp for a hard offset shadow with no blur.
- Glow for a coloured halo around a button.
- Inset for pressed or recessed areas such as input fields.
- Soft UI for the pale, embossed look with a light and a dark shadow.
A separate row, Tailwind sizes, loads xs, sm, md, lg, xl and 2xl. Use it if you want to see what those utility names look like or to start from one and adjust it.
Copying CSS or a Tailwind class
Code as CSS writes a box-shadow line, with one shadow per layer. Code as a Tailwind class writes a shadow arbitrary value class and a matching rounded class for the corner radius you set. Colours with partial opacity are written as rgba values, and Copy link reopens the design for someone else.
Shadows are part of how an interface says that something can be pressed or sits above something else. If you want a design system built with that kind of care, our web design and UI/UX page is the place to start.
Shadow habits to avoid
- Black at full strength. Pure black shadows look heavy. A low opacity, or a dark tint of the page colour, looks calmer.
- Different light directions. Keep every shadow on the page pushing the same way, usually down.
- Too much blur on small items. Small buttons need small shadows.
- Shadow on every element. If everything floats, nothing does.
Only try a glow where a button needs a strong hint, such as a main call to action.
A short recipe for a natural card shadow
- Start with the Layered preset and set the box colour to your real card colour.
- Switch to the Page view and set the page colour to match your background.
- Lower the opacity of the biggest layer until the shadow is only just visible.
- Keep the corner radius the same as the card in your design.
- Copy the CSS and test it on a phone, where small screens make large blurs look heavy.
A shadow that you notice before the card is too strong. The aim is a gentle sense that the card sits above the page.
Frequently asked questions
How do I add more than one shadow to a box?
Press Add a shadow layer. CSS allows several shadows on one element, and the code box lists them in order.
What is the spread value for?
Spread makes the shadow bigger or smaller before it is blurred. A negative spread helps a soft shadow stay under a box instead of showing at the sides.
What does inset do?
It draws the shadow inside the edge of the box, which suits input fields and pressed buttons.
Can I get Tailwind shadows?
Yes. The Tailwind sizes row loads xs to 2xl as a starting point, and Code as a Tailwind class writes an arbitrary value class for your own design.
Why does my shadow disappear on a coloured page?
The page colour changes how visible a shadow is. Use the Page colour control to match your real background.
Is my design stored anywhere?
Your last design is kept in this browser. Use Copy link to share it, since the design is inside the address.
More free tools
- CSS gradient generator: Build linear, radial and conic CSS gradients with colour stops and copy CSS or a Tailwind class.
- Colour palette generator: Generate website colour palettes by harmony, check text contrast, and export CSS, Tailwind, SVG or PNG.
- Lighten and darken colour tool: Lighten or darken a colour, build 50 to 950 scales, and copy them as CSS, Tailwind, SCSS or JSON.
- PX to REM converter: Convert px, rem and em, convert CSS and build fluid type.