Design a CSS box-shadow
A good shadow gives an element a sense of depth, but the CSS has several values — offset, blur, spread, colour — and tweaking them blind is slow. This generator lets you adjust each one and see the shadow update live, then copy the exact CSS. It's the quickest route from "I want a subtle lift" to the precise rule that produces it.
How to use it
- Adjust the horizontal and vertical offset, blur, and spread.
- Set the shadow colour and opacity.
- Copy the generated CSS.
Tips for natural shadows
- Keep offsets small and blur soft for a realistic lift.
- Use a low-opacity dark colour rather than solid black.
- Layer two shadows for a more convincing sense of depth.
Questions people ask
What does spread do? It grows or shrinks the shadow before the blur is applied — positive values make it larger than the element, negative ones smaller.
Is anything uploaded? No — the preview and CSS are generated in your browser.