Design a CSS box shadow with a live preview.
The box shadow generator lets you design a CSS box-shadow visually: set the horizontal and vertical offset, the blur, the spread, the color and the opacity, or make it an inset shadow. The preview and the CSS update as you change the values.
Soft shadows with a large blur and a slightly negative spread give cards and buttons a modern, floating look.
See the shadow on a card as you edit.
Inner shadows for inputs and pressed buttons.
The color is converted to RGBA.
One line, ready to paste.
Horizontal offset, vertical offset, blur radius and spread radius, followed by the color.
Use a large blur, a small vertical offset, a negative spread and a low opacity, e.g. 0 10px 30px -5px rgba(0,0,0,.25).
Yes, separate several shadows with commas in the box-shadow property.
Normally not; only very large, animated shadows can cost performance.