Skip to main content

CSS Box Shadow Generator

Build a CSS box-shadow visually and copy the generated declaration, entirely in your browser.

Shadow layer 1
Generated CSS

This tool formats a box-shadow declaration from controlled numeric inputs and a colour. It runs entirely in your browser.

Shadow rendering can vary slightly between browsers, displays and zoom levels.

Generated locally in your browser

How to use it

  1. Adjust the offsets, blur, spread, colour, and opacity for the first shadow layer
  2. Toggle inset if you want the shadow drawn inside the element
  3. Add more layers and reorder them with move up and move down if needed
  4. Copy the generated box-shadow declaration, or Reset to start from the default

For each shadow layer, set the horizontal and vertical offsets, the blur radius, the spread radius, a colour, and an opacity from 0 to 100 percent; toggle inset to draw the shadow inside the element instead of outside. Stack up to five layers, reorder them with move up and move down, and remove any layer down to one. A neutral preview card updates live as you adjust the controls, and the read-only output shows the exact box-shadow declaration ready to paste. Every value comes from bounded numeric inputs and a validated hex colour — there is no free-form CSS, so url(), var(), and calc() are never accepted. Everything runs locally: nothing is uploaded or stored. This does not support text-shadow, and it is separate from the CSS Gradient Generator, which builds background gradients rather than element shadows.

FAQ

We use cookies to run this site and, with your consent, to understand usage and personalize ads. You can change your choice at any time.