# CSS Box Shadow Generator

> Design a CSS box-shadow with live values for offset, blur, spread and colour.

To generate a CSS box-shadow, adjust the horizontal and vertical offset, blur radius, spread and colour opacity. The tool outputs ready-to-paste CSS plus a layered two-shadow version, which reads as far more realistic elevation than a single shadow.

**URL:** https://convertto.tech/t/box-shadow-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Set the horizontal offset.
2. Set the vertical offset.
3. Set the blur radius.
4. Set the spread.
5. Pick the shadow colour.
6. Set the opacity.
7. Turn "Inset (inner shadow)" on or off as needed.
8. The result appears immediately — copy or download it.

## FAQ

### What makes a shadow look realistic?

Layering. A single large blur reads as fake; two or three shadows with increasing blur and decreasing opacity mimic how real light falls off. Keep them all in the same direction, as one light source would.

## Related tools

- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Shape Generator](https://convertto.tech/t/css-shape-generator): Generate triangles, arrows, stars and other shapes using pure CSS.
- [CSS Text Shadow Generator](https://convertto.tech/t/text-shadow-generator): Design text shadows, outlines and glow effects with a live preview.
- [Tailwind Colour Shade Generator](https://convertto.tech/t/tailwind-shade-generator): Generate a full 50–950 Tailwind colour scale from a single brand colour.
- [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.
- [Neumorphism Generator](https://convertto.tech/t/neumorphism-generator): Generate the paired light and dark shadows that make an element look pressed into or raised from its background.
- [nth-child Selector Generator](https://convertto.tech/t/nth-child-generator): Build an :nth-child formula and see which items it selects out of a row.