Preview
Box Shadow Preview
Generated CSS
The CSS box-shadow property adds one or more shadow effects around an element's box. Shadows give depth and dimension to UI elements, making them appear elevated or recessed. They are essential for modern card designs, buttons, modals and any interface element that needs visual separation from its background.
Unlike older techniques that used images for shadow effects, CSS box shadows are rendered entirely by the browser — meaning they are sharp at any resolution, load instantly, and can be animated with CSS transitions.
The full syntax for box-shadow is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
You can stack multiple shadows by separating them with commas, which allows you to create complex layered shadow effects. The generator above supports multiple layers so you can build exactly the shadow you need.
X Offset controls how far the shadow moves horizontally — positive values push it right, negative values push it left. Y Offset does the same vertically. Blur Radius determines how soft or sharp the shadow edge is — zero gives a hard shadow, higher values give a softer, more diffuse effect. Spread Radius expands or contracts the shadow beyond the element's dimensions. Color sets the shadow color and you can control opacity using RGBA values.
Adding the inset keyword flips the shadow so it appears inside the element rather than outside. Inset shadows are used to create pressed button effects, inner glow effects, and realistic indentation on UI elements.
| Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|
| 10+ | 4+ | 5.1+ | 12+ | 10.5+ |
Add shadow layers using the "+ Add Layer" button. Select any layer to edit its settings — adjust X offset, Y offset, blur, spread and opacity using the sliders. Pick a shadow color using the color picker. Toggle the Inset switch to make the shadow appear inside the element. Change the card background color to test your shadow in different contexts. Finally click Copy Code to get the ready-to-use CSS.