CSS Box Shadow Generator
Design layered CSS box shadows with a live preview and copy the code
Runs entirely in your browser. Nothing you type or upload is sent to us or stored.
Results are for general guidance. Please check anything important before relying on it. Terms of use
How to Use
- Start from a preset (Card, Floating, Inner, Neon and more) below the tool, or keep the default card shadow.
- Pick a layer with the numbered buttons, then drag the sliders (or type pixel values) for horizontal and vertical offset, blur and spread.
- Set the shadow colour and its opacity, and tick Inset to put the shadow inside the box.
- Use Add layer for up to five shadows, the arrows to change their order and the bin to remove one. Adjust the box colour, background and border radius to match your design.
- Press Copy CSS and paste the rule into your stylesheet.
How CSS box shadows work
The CSS box-shadow property draws a shadow around (or inside) any element: cards, buttons, pop-ups, input boxes. This box shadow generator lets you shape it with sliders and see the result on a live box, then copy clean CSS. A good shadow makes a card look lifted off the page and tells people what they can tap.
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
| Value | What it does |
|---|---|
| offset-x | Moves the shadow right (positive) or left (negative) |
| offset-y | Moves it down (positive) or up (negative). Light from above means a positive y. |
| blur | Softens the edge. 0 gives a hard, sharp shadow. It can't be negative. |
| spread | Grows (positive) or shrinks (negative) the shadow before blurring |
| colour | Usually black or a dark tint with low opacity, written as rgba() |
| inset | Draws the shadow inside the box, so it looks pressed in |
The tool leaves out values that aren't needed. If spread is 0 it isn't written, and if blur and spread are both 0 you get just the two offsets and the colour, which is still valid CSS.
Layering shadows
Real shadows have a dark, tight part close to the object and a soft, wide part further away. One CSS shadow can't do both, so good designs stack two or three, separated by commas. The first one in the list is drawn on top. The Card preset is a typical example:
0 1px 3px rgba(0, 0, 0, 0.12),
0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 12px;
The first layer draws a crisp edge, and the second adds a soft glow below. The Floating preset uses negative spread on a large blur, so the shadow tucks in at the sides and the box seems to hover. The Neon preset uses a bright cyan with no offset on a dark background, which gives a glow instead of a shadow.
Worked example
Say you're building a product card for an online saree shop. Start from Card, then on layer 2 set the vertical offset to 10px, the blur to 24px and the opacity to 12%. For the hover state, copy a second version with a larger offset and blur, and add transition: box-shadow 0.2s; so the card lifts smoothly when touched or hovered.
Tips
- Keep opacity low. Most real interfaces use 5% to 25% black. Heavy black shadows look dated.
- Use the same light direction everywhere on a page: if one card's shadow falls down, all of them should.
- Tint the shadow with your brand colour (a dark blue instead of pure black) for a softer, more modern look.
- On dark backgrounds shadows hardly show. Use a lighter border or a subtle glow instead.
- Big blurred shadows on hundreds of elements can make scrolling feel slow on budget phones. Use them on a few key elements.
box-shadowfollowsborder-radius, but it ignores transparent parts of an image. For a shadow that follows the shape of a PNG icon, usefilter: drop-shadow()instead.
Every current browser supports box-shadow without a -webkit- prefix, so the single line you copy is all you need.