What is the CSS box-shadow property?
The box-shadow property paints one or more shadows around (or inside) an element's border box. Each shadow is written as offset-x offset-y blur-radius spread-radius color, optionally prefixed with inset. Positive offsets move the shadow right and down, the blur radius softens its edge, and the spread radius grows or shrinks the shadow before it is blurred.
Shadows are drawn in the order you list them, with the first shadow on top. Stacking several low-opacity layers with doubling offsets and blur (1px, 2px, 4px, 8px…) produces the soft, realistic depth used by modern design systems — far more natural than one large, dark shadow.
A shadow follows the element's border-radius, never affects layout and does not trigger reflow, so it is a cheap way to communicate elevation. Because the shadow is outside the box it can be clipped by a parent with overflow: hidden — give the parent some padding if that happens.
How to use the CSS Box Shadow Generator
- Pick a preset such as Subtle, Elevated or Neumorphic to start, or tweak the default shadow.
- Select a layer and adjust its horizontal and vertical offset, blur, spread, color and opacity. Tick Inset for an inner shadow.
- Add, duplicate or remove layers (up to six) to build smooth, layered depth.
- Set the box color, page color and border radius so the preview matches your design.
- Copy the CSS and paste it into your stylesheet or a page builder's custom CSS field.
Example
A two-layer card shadow that lifts on hover:
.card {
border-radius: 16px;
box-shadow:
0 4px 6px -1px rgba(15, 23, 42, 0.1),
0 2px 4px -2px rgba(15, 23, 42, 0.1);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow:
0 20px 25px -5px rgba(15, 23, 42, 0.12),
0 8px 10px -6px rgba(15, 23, 42, 0.1);
}Tips for better shadows
- Tint shadows with a dark version of the background hue instead of pure black — shadows on a blue page look more natural in a deep navy.
- Negative spread (e.g.
0 10px 15px -3px) keeps the shadow from peeking out at the sides, so it only appears below the element. - Use the same light direction for every shadow on the page: if one card casts its shadow downward, all of them should.
- Neumorphic designs pair a light shadow at the top-left with a dark one at the bottom-right on a surface the same color as the page. They have low contrast, so add a visible border or focus style for interactive elements.
- To animate elevation smoothly, transition between two shadows with the same number of layers. For heavy shadows on many elements, animating
opacityof a pseudo-element that holds the larger shadow is cheaper. - Need a shadow that follows a transparent PNG or SVG shape? Use
filter: drop-shadow()from the CSS Filter Generator instead. For text, use the Text Shadow Generator.
Browser support
box-shadow, multiple shadows and inset work unprefixed in every browser in use today. The -webkit-box-shadow prefix has not been needed for over a decade and can be removed from old stylesheets. For a deeper walkthrough, read the CSS box-shadow guide.
Frequently Asked Questions
What is the difference between blur and spread?
Blur softens the edge of the shadow — larger values make it more diffuse. Spread changes the shadow's size before blurring: positive values expand it in every direction, negative values shrink it. A shadow with zero offset, zero blur and a positive spread draws a solid ring, similar to an outline that follows border-radius.
How do I add multiple box shadows?
Separate them with commas in a single box-shadow declaration. The first shadow in the list is painted on top. Writing a second box-shadow declaration replaces the first rather than adding to it.
How do I put a shadow on only one side?
Combine an offset with a negative spread equal to or larger than the blur, for example 0 8px 6px -6px rgba(0, 0, 0, 0.3) for a bottom-only shadow. The negative spread pulls the shadow in so it does not show on the other sides.
What does inset do?
inset draws the shadow inside the element's padding box instead of outside it, which makes the element look pressed in. Inset and outer shadows can be combined in one list.
Does box-shadow affect layout or performance?
It never changes the size or position of the element or its neighbours. Very large blur radii on many elements, or animating box-shadow on scroll, can cost paint time on low-end devices — keep animated shadows small or animate a pseudo-element's opacity instead.
Why is my shadow cut off?
A parent with overflow: hidden, overflow: auto or contain: paint clips anything outside its box, including shadows. Add padding to the parent or move the clipping to an inner wrapper. Pair shadows with the Border Generator or Button Generator for complete components.