# CSS Box-Shadow Generator - Layered Shadows with Live Preview and Copy-Ready CSS

Page: https://hirantha.me/tools/box-shadow-generator
Part of: Hirantha Sandaruwan Lakshan free tools (https://hirantha.me/tools)
Updated: 2026-10-13

Design CSS box-shadows with layers, offset, blur, spread, opacity and inset, watch them live, then copy the code. Text-shadow mode and presets are included.

This is a free tool that runs in the browser: open the page to use it. File tools process files on the visitor's own device; files are never uploaded or stored. No account, sign-up, payment or watermark.

Move the sliders, or type exact values, and see the shadow change on a live box. 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.

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.

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 |

Q: What is the order of values in box-shadow?
A: 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.

Q: How do I add more than one shadow?
A: 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.

Q: What is the difference between blur and spread?
A: 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.

Q: How do I make an inner shadow?
A: 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.

Q: Does box-shadow follow rounded corners?
A: 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.

Q: What is the difference between box-shadow and text-shadow?
A: 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.

Q: Should I use rgba() or an eight-digit hex colour?
A: 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: box-shadow (MDN) (https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow); CSS Backgrounds Level 3: drop shadows, the box-shadow property (W3C) (https://www.w3.org/TR/css-backgrounds-3/#box-shadow); CSS Text Decoration Level 3: the text-shadow property (W3C) (https://www.w3.org/TR/css-text-decor-3/#text-shadow-property); text-shadow (MDN) (https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow); CSS Color Level 4: hex notation (W3C) (https://www.w3.org/TR/css-color-4/#hex-notation)

Related tools:

- [CSS gradient generator](https://hirantha.me/tools/css-gradient-generator.md): Build linear, radial and conic CSS gradients with any number of colour stops, a live preview and copy-ready code. Repeating gradients and oklch blending included.
- [Colour contrast checker](https://hirantha.me/tools/color-contrast-checker.md): Check the WCAG contrast ratio of a text and background colour, see AA and AAA pass or fail for normal and large text, and get the nearest colour that passes.
- [Colour converter](https://hirantha.me/tools/color-converter.md): Convert a colour between HEX, RGB, and HSL.
- [px to rem and em converter](https://hirantha.me/tools/px-to-rem-converter.md): Convert px to rem and em, and back, with your own root font size, or rewrite every px in a block of CSS to rem. Includes a px to rem table for common sizes.
- [CSS minifier and beautifier](https://hirantha.me/tools/css-minifier.md): Minify CSS in your browser: strip comments and white space safely, shorten values, and see the bytes saved. Or beautify minified CSS back into readable code.