Category: Developer tools
CSS Box Shadow Generator
Design a box-shadow and copy the CSS
Set the offset, blur, spread, colour and opacity, watch a live preview, and copy a ready-to-paste box-shadow declaration. Everything is rendered by your own browser.
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
Everything on this page is processed in your browser. Nothing is uploaded.
What this tool does
box-shadow takes five values in a fixed order, and small changes to any of them read very differently on screen, which makes it awkward to write blind. This tool renders the real declaration on a preview box as you move the sliders. A second, tighter contact layer can be added — the pairing designers use to make an element look lifted rather than blurred — and inset turns the shadow inward for pressed or recessed surfaces.
How to use it
- Set the horizontal and vertical offset, the blur and the spread.
- Pick a shadow colour and opacity, and optionally turn on inset or a contact layer.
- Copy the box-shadow declaration into your stylesheet.
Privacy
This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.
Frequently asked questions
- Is anything uploaded?
- No. The preview is a CSS shadow painted by your browser and the declaration is assembled in the page.
- What does spread do?
- Spread grows or shrinks the shadow before it is blurred. A negative spread pulls the shadow in, which is how a soft shadow is kept from leaking out past the sides of the element.
- Why use two layers?
- One wide, soft shadow on its own tends to look like fog. Adding a small, darker layer close to the element gives it a contact edge, and the two together read as height.