CSS Box-Shadow Generator - Layered Shadows with Live Preview and Copy-Ready CSS
Move the sliders, or type exact values, and see the shadow change on a live box.
Maintained by Hirantha Sandaruwan Lakshan. Updated 13 October 2026.
About this tool
Stack several layers for soft, realistic shadows, add inset shadows for pressed effects, and change the colours of the page and the box to see how the shadow looks on your design. Then copy the CSS. Presets cover soft, layered, neumorphic, inset, hard-edged and glow shadows, and a text-shadow mode is built in.
How it works
A box-shadow value is up to six parts in this order: an optional inset keyword, a horizontal offset, a vertical offset, a blur radius, a spread radius and a colour. A positive horizontal offset moves the shadow right, and a positive vertical offset moves it down. The blur radius makes the edge soft, with 0 giving a sharp edge, and it cannot be negative. The spread radius grows the shadow in every direction before blurring if it is positive and shrinks it if it is negative. If you leave the colour out, the shadow uses the element's currentColor, so this tool always writes one.
Several shadows are written as a comma-separated list, and CSS Backgrounds Level 3 says the first one is on top and the rest are layered behind it. Realistic shadows are rarely a single blur: real light makes a tight dark shadow close to the object and a wide faint one further away. Stacking layers, such as 1px, 2px, 4px, 8px and 16px of offset and blur each at about 8% black, gives a smoother result than one big blur. The Layered preset does exactly that. A shadow never changes the size of the box or moves other content, and it follows the border-radius of the element.
Use a semi-transparent colour so the shadow takes on the colour of what is behind it. Opacity can be written two ways: rgba(0, 0, 0, 0.25) or an eight-digit hex colour #00000040, where the last two digits are the opacity as a number from 00 to ff. The hex form of 25% is 40, because 0.25 x 255 = 63.75, which rounds to 64, written 40 in hex. A fully opaque colour is written as a plain six-digit hex colour in both formats.
Inset turns the shadow inside the box, which is how pressed buttons and recessed fields are drawn: the shadow is clipped to the padding box and drawn above the background but below the content. In text-shadow mode the same sliders write a text-shadow, which has only an X offset, a Y offset, a blur and a colour. It has no spread and no inset, so those controls are hidden there. Neumorphism is two shadows on a box that has the same colour as its page: a dark one down and to the right, and a light one up and to the left.
Worked examples
A soft card shadow
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12) puts a wide, faint shadow 8px below the box with no sideways offset. At 12% black it lifts a white card off a light grey page without a hard edge.
A neumorphic button
On a #e0e0e0 page, a #e0e0e0 box with box-shadow: 20px 20px 60px 0 #bebebe, -20px -20px 60px 0 #ffffff looks pushed out of the surface. The first layer is the dark shadow bottom right and the second is the light one top left.
A pressed, inset effect
box-shadow: inset 0 2px 8px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 0 rgba(255, 255, 255, 0.7) draws a dark shadow along the inside of the top edge and a thin light line along the inside of the bottom edge, which makes a field look sunk into the page.
The same 25% black in two formats
In rgba form it is rgba(0, 0, 0, 0.25). In eight-digit hex it is #00000040. Fifty percent is rgba(0, 0, 0, 0.5) or #00000080, because 0.5 x 255 = 127.5, which rounds to 128, or 80 in hex.
The parts of a box-shadow value, in order
| Part | What it does | Allowed values | If left out |
|---|---|---|---|
| inset | Draws the shadow inside the box | The keyword inset, first or last | An outer shadow |
| Horizontal offset | Moves the shadow right (positive) or left (negative) | Any length | Required, with the vertical offset |
| Vertical offset | Moves the shadow down (positive) or up (negative) | Any length | Required, with the horizontal offset |
| Blur radius | Softens the edge; larger is wider and fainter | A length of 0 or more | 0, a sharp edge |
| Spread radius | Grows (positive) or shrinks (negative) the shadow before blurring | Any length | 0 |
| Colour | The colour of the shadow | Any CSS colour, usually with some transparency | currentColor, the element's text colour |
Frequently asked questions
What is the order of values in box-shadow?
Optional inset, then horizontal offset, vertical offset, blur radius, spread radius and colour: for example box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2). The two offsets are required, the blur and spread are optional and default to 0, and a colour is best always given.
How do I add more than one shadow?
Separate the shadows with commas. The first one in the list is on top. This tool shows each shadow as a layer you can move up and down, and writes them one per line so the CSS stays readable.
What is the difference between blur and spread?
Blur softens the edge of the shadow without changing its centre size, and spread changes how big the shadow is before it is blurred. A spread of 4px with a blur of 0 gives a solid outline 4px thick around the box, which is a handy way to fake a border that does not take up space.
How do I make an inner shadow?
Add the inset keyword, which this tool does with the Inset checkbox on a layer. An inset shadow is drawn inside the box, above its background and below its content, and it is clipped to the padding box.
Does box-shadow follow rounded corners?
Yes. If the element has a border-radius, the shadow takes the same rounded shape. Use the corner radius slider in the preview to see it. A shadow does not affect the layout either: it can overlap neighbouring content and is not counted in the box size.
What is the difference between box-shadow and text-shadow?
box-shadow draws a shadow around the box of an element. text-shadow draws one behind each letter. text-shadow takes an X offset, a Y offset, an optional blur and a colour, with no spread and no inset keyword. Switch the mode at the top of the tool to write a text-shadow.
Should I use rgba() or an eight-digit hex colour?
They mean the same. rgba() is the older and more widely known form and is easy to read. Eight-digit hex is shorter, and every current browser supports it. Pick whichever your codebase already uses; the tool can write either.
Sources & references
Updated Oct 13, 2026