How to make a CSS box shadow
- Pick a preset to start from, such as Soft or Layered, or adjust the layer that is already there.
- Set the horizontal offset, vertical offset, blur and spread with the sliders or by typing a number in the box beside each one. Choose a color and an opacity, and tick Inset for an inner shadow.
- Click Add layer to stack another shadow. Select a layer in the list to edit it, use Move up and Move down to reorder it, or Remove to delete it. The first layer is drawn on top.
- Switch the preview between the light and dark surfaces to check the shadow on both, then click Copy CSS and paste the declaration into your stylesheet.
Why use this tool
Cards, buttons and menus
Give a card, a dropdown or a modal some depth. A soft, low-opacity shadow lifts an element off the page; the Layered preset stacks five faint shadows for a smoother, more natural edge than one large blur.
Matching a design file
Design tools such as Figma describe a drop shadow with the same four numbers CSS uses: X, Y, blur and spread. Type them into the number boxes, set the color and opacity, and copy the result.
Inputs and pressed states
An inset shadow makes an element look sunken, which suits text fields, wells and the pressed state of a toggle button. Tick Inset on any layer, or start from the Inner preset.
Checking dark mode
A dark shadow that looks right on a white page can all but disappear on a dark one. Flip the preview to the dark surface to see whether the shadow still reads, or whether a lighter glow or a border works better there.
Private by design
Every calculation runs in this browser tab, so results update the moment you change a value. There is nothing to upload, no account to create and nothing to install.
Good to know
How box-shadow is written. Each shadow is [inset] x y blur spread color. The x and y offsets move the shadow right and down; negative values move it left and up. Blur softens the edge and cannot be negative. Spread grows the shadow before it is blurred, and a negative spread shrinks it, which keeps a soft shadow from peeking out at the sides.
Several layers. List several shadows separated by commas and the browser draws them all. The first one in the list is drawn on top. This generator holds up to 10 layers, and the CSS keeps them in the order shown in the layer list.
The output. Every length is written in px, including zeros, and the color is written as rgba() with the opacity as its last value, so #E4572E at 100% becomes rgba(228, 87, 46, 1). With no layers, the output is box-shadow: none;.
Ranges. The offsets and the spread run from −100 to 100 px and the blur from 0 to 200 px, in whole pixels. Opacity runs from 0 to 100%. A number typed outside a range is flagged, then brought to the nearest limit when you leave the box.
Shareable links. The page address updates as you edit, with your layers in the ?s= parameter. Bookmark it or send it to someone, and the same shadow opens with the link. A damaged or edited link that cannot be read is ignored, and the default shadow is shown instead.
Things to know. A box shadow follows the element's border-radius, takes up no space in the layout and does not change the element's size. An ancestor with overflow: hidden clips it. The Neumorphic light preset only looks right when the page background is close to the element's own color, as on the light preview surface.
In — Preset
Layered (5 layers)Out — CSS
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 16px 32px 0px rgba(0, 0, 0, 0.06);| Preset | box-shadow value |
|---|---|
| Workshop offset | 4px 4px 0px 0px rgba(228, 87, 46, 1) |
| Soft | 0px 8px 24px -4px rgba(0, 0, 0, 0.12) |
| Layered | 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 16px 32px 0px rgba(0, 0, 0, 0.06) |
| Inner | inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25) |
| Neumorphic light | -8px -8px 16px 0px rgba(255, 255, 255, 0.9), 8px 8px 16px 0px rgba(27, 26, 23, 0.15) |
| Glow | 0px 0px 24px 4px rgba(228, 87, 46, 0.6) |
Frequently asked questions
What do the numbers in box-shadow mean?
In order: the horizontal offset, the vertical offset, the blur radius and the spread radius, followed by the color. 0px 8px 24px -4px rgba(0, 0, 0, 0.12) is a shadow moved 8px down, blurred over 24px, shrunk by 4px on every side and drawn in black at 12% opacity. Blur and spread are optional in CSS and default to 0; this generator always writes all four.
How do I add more than one shadow?
Separate the shadows with commas in one box-shadow declaration. The first shadow in the list is drawn on top of the others. In the generator, click Add layer, and use Move up and Move down to change the order.
What is an inset shadow?
The inset keyword draws the shadow inside the element’s border instead of outside it, so the element looks pressed in rather than raised. Offsets work the same way: a positive y offset puts the shadow along the top inside edge.
Does box-shadow change the size or layout of an element?
No. A shadow is painted outside (or, with inset, inside) the element’s border box without taking up space, so neighbouring elements do not move. It can be clipped by an ancestor with overflow: hidden, which is the usual reason a shadow seems cut off.
Why does my shadow disappear in dark mode?
A dark shadow needs a lighter background to stand out against. On a dark page it has little contrast left. Check it on the dark preview surface; a lighter or colored glow, a border, or a slightly lighter card color often works better there.
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the element’s box and its border-radius, and supports spread, inset and several layers. drop-shadow() follows the shape of what is actually drawn: the visible pixels of an image or an SVG cast the shadow, and fully transparent areas cast none. It has no spread and no inset. Use drop-shadow() for icons and cut-out images, and box-shadow for boxes.