Design box shadows visually — adjust offset, blur, spread, color and opacity, and copy the CSS.
The box-shadow property gives depth to flat elements. It takes five values: the horizontal offset, the vertical offset, the blur radius, the spread radius, and the color. A subtle shadow with a large blur and a small offset reads as elevation; a tight shadow with a strong offset reads as a hard edge. Designers tune these numbers by feel, which means dragging sliders and seeing the result — exactly what this tool does.
The preview box in the middle shows the shadow as you move the sliders. The CSS line underneath updates in real time: copy it and paste it into your stylesheet. The tool also supports inset shadows, which paint inside the element instead of outside — useful for pressed buttons, input fields and recessed panels.
Everything runs in your browser. The preview is a real CSS box-shadow applied to a div, not a rendering or an approximation. What you see here is what your users will see.
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color
It expands or contracts the shadow before blurring. A positive spread makes the shadow larger than the element; a negative spread makes it smaller. Zero means the shadow is the same size as the element.
Yes, in CSS. This tool generates one shadow. To add more, separate them with commas in your stylesheet.
It paints the shadow inside the element instead of outside. Useful for pressed-state buttons or recessed panels.
Yes. The shadow follows the border-radius of the element automatically.
Because the opacity slider needs an alpha channel. Hex colors are opaque; rgba lets the shadow be semi-transparent, which looks more natural.
Vai.la turns any URL into a short link with click statistics, QR Code and your own biolink.
Vai.la is not responsible for how the tools are used or for decisions made based on their results.