CSS Box Shadow: Syntax, Examples and Generator

The CSS box-shadow property draws a shadow around an element's box using up to five values: horizontal offset, vertical offset, blur radius, spread radius and color, plus an optional inset keyword. A typical card shadow looks like box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);.

Tuning those numbers by hand is slow, so our free CSS box shadow generator gives you a slider for each value, a live preview, and a one-click copy of the finished declaration. This guide explains what each value does, gives copy-ready examples, and covers the mistakes that make shadows look muddy or break accessibility.

CSS box-shadow syntax explained

box-shadow is defined in the W3C CSS Backgrounds and Borders Module Level 3 and works in every modern browser without prefixes. The full syntax is:

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] [color];

Value	What it does	Notes
offset-x	Moves the shadow horizontally	Positive goes right, negative goes left. Required.
offset-y	Moves the shadow vertically	Positive goes down, negative goes up. Required.
blur-radius	Softens the edge	0 gives a hard edge. Negative values are invalid.
spread-radius	Grows or shrinks the shadow before blurring	Negative values pull the shadow in from the sides.
color	Sets the shadow color	Use rgba() for transparency. Defaults to currentcolor.
inset	Draws the shadow inside the box	Makes the element look pressed in.

Worked example: reading a shadow value

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);

This is the generator's starting value. The shadow sits 4px below the box with no sideways shift, blurs over 6px, and is shrunk by 1px on every side by the negative spread. That shrink hides most of the blur along the left and right edges, so the shadow appears to fall beneath the element instead of glowing around it. The color is black at 10% opacity.

Box shadow examples you can copy

Effect	CSS
Subtle card	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
Raised (hover state)	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
Bottom edge only	box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);
Pressed button	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
Focus ring	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);

How to layer multiple shadows

Separate shadows with commas to stack them. The first shadow in the list is painted on top. Pairing a tight, darker shadow with a wide, faint one looks more natural than a single shadow:

box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.08);

Our generator builds one shadow at a time. To layer, create each shadow separately and join the values with a comma.

How to use the CSS Box Shadow Generator

1. Open the CSS box shadow generator. The preview box starts with a soft card shadow.
2. Drag Horizontal Offset and Vertical Offset (each from -50px to 50px) to position the shadow.
3. Set Blur Radius (0 to 100px) for softness and Spread Radius (-50px to 50px) to grow or shrink it.
4. Adjust Opacity from 0 to 1, and choose a Shadow Color. The tool converts the color and opacity into an rgba() value.
5. Pick a Box Color and a Background Color to preview the shadow against your real component and page colors, and turn on Inset Shadow for an inner shadow.
6. Click Copy. You get the complete declaration, including box-shadow: and the closing semicolon, ready to paste into your stylesheet.

Tips for better CSS shadows

• Keep opacity low. Values between 0.05 and 0.2 usually look realistic. Solid gray shadows look heavy and turn muddy on colored backgrounds.
• Light from above. Use a positive vertical offset and little or no horizontal offset. Mixed light directions on one page look wrong even when users cannot say why.
• Build an elevation scale. Define three or four shadow levels and reuse them, so higher elements always have larger offsets and blur.
• Tint shadows on colored backgrounds. A darker shade of the background color often looks better than black. Convert hex values to RGB numbers for rgba() with the hex to RGB converter.
• Animate carefully. Changing box-shadow in an animation repaints the element on every frame. For smooth hover effects, put the larger shadow on a ::after pseudo-element and animate its opacity.
• Shadows do not take up space. They never affect layout, so a parent with overflow: hidden can clip them. Add padding to the parent if the shadow is cut off.
• Do not rely on a shadow alone for focus. In Windows forced colors (high contrast) mode, browsers remove box-shadow. Keep an outline, even a transparent one, so a focus indicator still appears.
• Check focus ring contrast. WCAG 2.x asks for a 3:1 contrast ratio for visual indicators of UI components. Test the ring color against the background with the color contrast checker, and read our guide to WCAG contrast ratios.

box-shadow vs filter: drop-shadow()

box-shadow always follows the element's rectangular box, including its border-radius. filter: drop-shadow() follows the visible shape of the content instead, so it suits transparent PNGs, SVG icons and irregular shapes. Drop shadows have no spread value and no inset option. For more on picking shadow and text colors, see our guide to converting hex, RGB and HSL colors.

Frequently asked questions

What do the four numbers in box-shadow mean?

In order, they are the horizontal offset, the vertical offset, the blur radius and the spread radius. Only the two offsets are required; blur and spread default to 0.

How do I add a shadow only to the bottom of an element?

Use a positive vertical offset with a negative spread roughly equal to the blur, for example box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);. The negative spread hides the shadow on the sides and top.

Can an element have more than one box shadow?

Yes. List several shadows separated by commas in one box-shadow declaration. The first shadow is drawn on top of the others.

What is an inset box shadow?

An inset shadow is drawn inside the element's border instead of outside it, which makes the element look recessed or pressed. Add the inset keyword at the start of the value.

Does box-shadow affect layout or element size?

No. A box shadow is painted outside the normal layout and does not change the element's size or push neighbors away. It can, however, be clipped by a parent with overflow: hidden.

What is the difference between box-shadow and drop-shadow?

box-shadow follows the element's rectangular box and supports spread and inset. filter: drop-shadow() follows the actual visible shape, including transparent areas of images, but has no spread or inset.