CSS Box Shadow Generator

Six sliders, two colour pickers and an Inset shadow checkbox build one box-shadow value, previewed on a box with your own colour and corner radius.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

Preview

CSS

.element {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0px 18px 40px -12px rgba(15, 23, 42, 0.35);
}

Values

Shadow: 0px 18px 40px -12px rgba(15, 23, 42, 0.35)
Colour: rgba(15, 23, 42, 0.35)
Type: Outer

Quick answers

What do the four numbers in box-shadow mean?: In order: horizontal offset, vertical offset, blur radius and spread radius, followed by the colour. In 0px 18px 40px -12px the shadow sits 18px below the box, is blurred over 40px, and is shrunk by 12px on every side before blurring.
What is the difference between blur and spread in box-shadow?: Spread changes the size of the shadow: positive values grow it on all sides, negative values shrink it. Blur changes the edge: 0 is a hard line and larger values fade it out. Spread is applied first, then the blur.
How do I make an inner shadow in CSS?: Put the inset keyword at the start of the value, for example box-shadow: inset 0px 2px 4px 0px rgba(15, 23, 42, 0.2). The shadow is then drawn inside the element's border, over its background, so the box looks pressed in.
How do I put a box shadow on one side only?: Offset the shadow towards that side and add a negative spread so it is pulled in from the other edges. For a top shadow: box-shadow: 0px -6px 16px -4px rgba(0, 0, 0, 0.2). A spread of minus half the blur (-8px here) removes the last faint trace at the sides.
How do I make a glow with box-shadow?: Set both offsets to 0, add blur and a small positive spread, and use a bright colour: box-shadow: 0px 0px 24px 4px rgba(99, 102, 241, 0.6). With no offset the shadow shows evenly on all four sides.
Does box-shadow affect layout or element size?: No. A shadow takes up no space and never moves neighbouring elements, however large it is. It does not add scrollbars either, though an ancestor with overflow: hidden will cut it off.

What Box Shadow Generator does

This box shadow generator turns each part of the CSS box-shadow value into a control: horizontal offset and vertical offset from -60 to 60px, blur from 0 to 120px, spread from -40 to 60px, a shadow colour, and an opacity from 0 to 100% that is merged with the colour into an rgba() value. Tick Inset shadow to draw the shadow inside the box instead of outside it. With the starting settings the output is box-shadow: 0px 18px 40px -12px rgba(15, 23, 42, 0.35), a soft lifted-card shadow. The tool builds one shadow layer at a time; the section on layering shows how to join two outputs with a comma for more realistic depth.

CSS box shadow examples you can copy

Every value below was produced by this tool with the settings named in the last column. Unlisted controls were left at their starting values.

Effect	box-shadow value	Settings
Hairline card shadow	0px 1px 3px 0px rgba(15, 23, 42, 0.12)	Vertical 1, Blur 3, Spread 0, Opacity 12
Small raised card	0px 4px 6px -1px rgba(0, 0, 0, 0.1)	Vertical 4, Blur 6, Spread -1, Colour #000000, Opacity 10
Dropdown or popover	0px 10px 15px -3px rgba(0, 0, 0, 0.1)	Vertical 10, Blur 15, Spread -3, Colour #000000, Opacity 10
Floating card (tool default)	0px 18px 40px -12px rgba(15, 23, 42, 0.35)	Starting values
Modal or dialog	0px 25px 50px -12px rgba(0, 0, 0, 0.25)	Vertical 25, Blur 50, Spread -12, Colour #000000, Opacity 25
Focus ring	0px 0px 0px 3px rgba(79, 70, 229, 0.5)	Vertical 0, Blur 0, Spread 3, Colour #4f46e5, Opacity 50
Hard offset shadow	8px 8px 0px 0px rgba(0, 0, 0, 1)	Horizontal 8, Vertical 8, Blur 0, Spread 0, Colour #000000, Opacity 100
Coloured glow	0px 0px 24px 4px rgba(99, 102, 241, 0.6)	Vertical 0, Blur 24, Spread 4, Colour #6366f1, Opacity 60
Shadow along the top edge	0px -6px 16px -4px rgba(0, 0, 0, 0.2)	Vertical -6, Blur 16, Spread -4, Colour #000000, Opacity 20

The tool always writes all four lengths with px units, including zeros. 0px 1px 3px 0px and the shorter 0 1px 3px mean the same thing.

Inset box shadow examples

Tick Inset shadow and the same sliders draw inside the box. These three cover most inner-shadow uses.

Recessed input field

Inset shadow ticked, Vertical offset 2, Blur 4, Spread 0, Shadow opacity 20

box-shadow: inset 0px 2px 4px 0px rgba(15, 23, 42, 0.2);

A small downward offset puts the dark edge at the top, as if light is coming from above.

Even inner shadow on all sides

Inset shadow ticked, Vertical offset 0, Blur 12, Spread 0, Shadow colour #000000, Shadow opacity 30

box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.3);

Inner border that adds no size

Inset shadow ticked, Vertical offset 0, Blur 0, Spread 1, Shadow colour #cbd5e1, Shadow opacity 100

box-shadow: inset 0px 0px 0px 1px rgba(203, 213, 225, 1);

Unlike a real border, this does not change the element's dimensions, so hover and selected states can add it without shifting the layout.

Box-shadow syntax in order

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

Only the two offsets are required. Blur and spread default to 0 when left out, and blur cannot be negative. The colour defaults to the element's text colour (currentColor), so always state it. The blur is centred on the shadow's edge: a 40px blur fades over a 40px band, about 20px inside the edge and 20px outside it, which is why a shadow looks roughly half as soft as the number suggests. Spread is applied to the shape before blurring, and a negative spread is what keeps a large, soft shadow tucked under the element so it shows mainly on the side it is offset towards.

Layering two shadows for realistic depth

A single shadow often looks flat because real objects cast a tight, darker shadow where they meet the surface and a wide, faint one further out. CSS lets you list several shadows in one declaration, separated by commas, and the first in the list is painted on top.

This tool outputs one layer per run, so build each layer separately and join them yourself. Using two rows from the table above:

box-shadow: 0px 1px 3px 0px rgba(15, 23, 42, 0.12), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);

Outer and inset shadows can be mixed in the same list, for example a soft outer shadow plus an inset 1px line as a border. Keep each layer's opacity low. Two or three faint layers read as depth; one heavy layer reads as a dark smudge.

box-shadow vs filter: drop-shadow()

Searches for a CSS drop shadow usually mean one of these two. They are not interchangeable.

	box-shadow	filter: drop-shadow()
Shape it follows	The element's box and border-radius	The visible pixels, including transparent PNGs, SVG icons and clip-path shapes
Spread value	Yes	No
Inset option	Yes	No
Several shadows	Comma-separated list	Chain several drop-shadow() functions
Shadow of text and children	No, box only	Yes, everything painted inside the element
Made by this tool	Yes	No

An element with clip-path loses its box-shadow because the shadow is clipped away with everything else outside the shape. Put filter: drop-shadow() on a wrapper element instead.

How to use it

1
Set Horizontal offset and Vertical offset to place the shadow. Positive values move it right and down, negative values left and up.
2
Raise Blur to soften the edge, then adjust Spread: above 0 makes the shadow larger than the box, below 0 makes it smaller.
3
Choose a Shadow colour and a Shadow opacity. The two are combined into one rgba() colour in the output.
4
Set Box colour and Corner radius so the preview resembles the element you are styling.
5
Tick Inset shadow if you want an inner shadow, and check that the Type stat reads Inset.
6
Copy the .element rule or download it as style.css.

Common questions

Why is my box shadow not showing?

The usual causes are an ancestor with overflow: hidden cutting it off, a shadow colour too close to the page background, an opacity near 0, or a negative spread larger than the offset and blur can reveal. Also check that a later rule is not resetting box-shadow to none.

What opacity should a shadow have?

Low. Around 10 to 25 percent of black or a very dark neutral is a sensible range for interface shadows. The tool's starting value of 35 percent is paired with a -12px spread, which hides much of the shadow behind the box. Raise opacity only for deliberate effects such as hard offset shadows and glows.

Can I use a hex colour instead of rgba()?

Yes. The tool writes rgba() because it combines your colour with the opacity slider, but any CSS colour works. The eight-digit hex form carries its own alpha: #0f172a59 is the default colour at roughly 35 percent.

Does the shadow follow rounded corners?

Yes. Outer and inset shadows both take the element's border-radius automatically. The Corner radius slider here (0 to 80px) lets you check the result on a rounded box and is included in the copied rule as its own border-radius line.

Is box-shadow slow?

A static shadow costs very little. Animating blur or spread makes the browser repaint the shadow on every frame, which can stutter on large elements. A common fix is to put the larger shadow on a pseudo-element and animate its opacity instead.

Can box-shadow be used on text?

No. It shadows the element's box, so a paragraph gets a rectangular shadow around it. Letters need the text-shadow property, which takes offsets, blur and a colour but has no spread and no inset.

Why does the copied rule include background and border-radius?

They come from the Box colour and Corner radius controls, so the pasted rule reproduces the preview exactly. If your element already has a background and radius, copy only the box-shadow line.

Does a transparent element still hide its own outer shadow?

Yes. An outer shadow is only ever drawn outside the border edge, so nothing appears behind the element even when its background is transparent. A see-through card therefore shows the page behind it, not a dark patch.