Design custom box shadows visually with live preview — adjust offset, blur, spread, and color, stack multiple shadow layers, and copy the ready-to-use CSS instantly.
Fine-tune every value with sliders and see the exact result before you ever touch your stylesheet.
Adjust the controls below and watch your shadow update live, then copy the generated CSS.
Getting shadows to look right by editing raw CSS values is slow and full of trial and error.
See exactly how your shadow will look as you adjust every value, with no guesswork.
Stack multiple shadows together to create depth effects used in modern UI design.
Copy the exact box-shadow code and paste it straight into your stylesheet.
The CSS box-shadow property takes horizontal offset, vertical offset, blur radius,
spread radius, and a color, in that order. A positive horizontal offset moves the shadow right,
a positive vertical offset moves it down, blur radius softens the edges, and spread radius
expands or shrinks the shadow's size. Adding the keyword inset turns the shadow
inward instead of casting it outward from the element.
You can combine multiple shadows on the same element by separating them with commas — this tool builds that combination for you automatically as you add layers.
Design your box shadow in three simple steps.
Set offset, blur, spread, color, and opacity until the preview looks right.
Stack additional shadows for more depth, or try one of the ready-made presets.
Copy the generated box-shadow code and paste it directly into your project.
Common questions about generating box shadows.