CSS Box Shadow Generator: A CSS box-shadow generator builds drop-shadow and inset-shadow effects visually and outputs the exact box-shadow code. Adjust offset, blur, spread, color and opacity, preview live, then copy the CSS — including multi-layer shadows.
Frequently Asked Questions
What does box-shadow do in CSS?
box-shadow adds a shadow around an element's frame. Its values are horizontal offset, vertical offset, blur radius, spread radius, and color — for example box-shadow: 0 4px 12px rgba(0,0,0,0.15).
How do I create a soft, subtle shadow?
Use a small vertical offset, a moderate blur, no spread, and a low-opacity black such as rgba(0,0,0,0.1). Soft shadows read as more modern and less harsh than dark, tight shadows.
What is the inset keyword in box-shadow?
Adding the inset keyword draws the shadow inside the element instead of outside, creating a pressed or recessed look often used for input fields and toggles.
Can I add multiple shadows to one element?
Yes. Separate each shadow with a comma in the same box-shadow declaration. Layering two or three shadows with different blur values creates realistic, layered depth.