About the CSS Box Shadow Generator
This CSS box shadow generator writes the box-shadow property from simple controls: horizontal and vertical offset, blur radius, spread, colour and opacity, plus an inset switch for pressed or inner-glow effects. Turn on a second layer to build the soft, realistic two-layer shadows used by modern design systems — a wide, faint ambient shadow combined with a tighter, darker contact shadow.
It is for front-end developers and UI designers styling cards, modals, dropdowns, buttons and floating action buttons. Alongside the CSS you get a Tailwind CSS arbitrary-value class and, for outer shadows, how far the shadow reaches beyond each edge of the box — handy when a parent has overflow: hidden and the shadow is being clipped.
Colours can be hex, rgb(), hsl() or a CSS colour name; the opacity slider multiplies any alpha already in the colour. Lengths are in pixels and zero values are written as a bare 0, which is valid CSS.
How to use the css box shadow generator
- 1Set the vertical offset and blur — most UI shadows point down with a soft blur.
- 2Use a negative spread to tuck the shadow under the element.
- 3Pick the colour and lower the opacity until the shadow feels subtle.
- 4Optionally add a second layer, or switch on inset for an inner shadow.
- 5Copy the CSS or Tailwind class; check the reach values if a parent clips it.
Formula and method
Each shadow is a copy of the element’s border box, moved by the x and y offsets, grown (or shrunk, if negative) by the spread on every side, filled with the colour and then blurred. The CSS specification says the blur should approximate a Gaussian blur with a standard deviation of half the blur radius, so the soft edge fades out over roughly one blur radius on either side of the shadow’s edge.
That gives the visible reach past each side of an outer shadow: spread + blur − y above, spread + blur + y below, and the same with x for left and right (never less than zero). Several shadows are separated by commas and painted with the first one on top. Inset shadows are drawn inside the padding box instead and do not extend outside the element.
- x, y
- Horizontal and vertical offset in px
- blur
- Blur radius in px (cannot be negative)
- spread
- Amount the shadow grows (+) or shrinks (−) before blurring
Worked examples
Soft card shadow
The shadow is pushed 10px down, shrunk by 5px and blurred by 25px. Below the card it reaches −5 + 25 + 10 = 30px, above it only −5 + 25 − 10 = 10px, so it reads as light coming from above.
Two-layer elevation (like Tailwind shadow-lg)
A wide ambient layer (10px down, 15px blur, −3px spread) is combined with a tight contact layer (4px down, 6px blur, −4px spread), both at 10% black. The ambient layer reaches furthest: −3 + 15 + 10 = 22px below the box.
Inset pressed-button shadow
With inset the shadow is drawn inside the element, 2px down from the top edge, which makes a button look pressed in. Inset shadows never spill outside the box, so every reach value is 0.
Frequently asked questions
What are the four values in box-shadow?+
In order: horizontal offset, vertical offset, blur radius and spread radius, followed by the colour. Only the two offsets are required; blur and spread default to 0 and the colour defaults to the element’s text colour (currentcolor).
How do I add a shadow on only one side?+
Offset the shadow towards that side and use a negative spread roughly equal to the blur, e.g. box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3) for a bottom-only shadow. The negative spread hides it on the other three sides.
How do I make an inner shadow?+
Add the inset keyword at the start: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). Inset shadows are drawn inside the padding box and are often used for pressed buttons, input fields and wells.
Can I use multiple box shadows?+
Yes. Separate shadows with commas; the first one is painted on top. Layering a large, faint shadow with a small, darker one gives more realistic depth than a single shadow, which is what most design systems do.
What is the difference between box-shadow and drop-shadow()?+
box-shadow follows the element’s rectangular box (and border-radius). filter: drop-shadow() follows the actual visible pixels, including transparent PNGs and SVG shapes, but has no spread or inset option and can be slower to render.
Why is my box shadow cut off?+
A parent with overflow: hidden, overflow: auto or clip-path clips anything outside its box, including shadows. Add padding to the parent at least as large as the shadow’s reach, or move the overflow rule to an inner element.