CSS Box Shadow Generator
Shadow
Preview
Preview
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the CSS Box Shadow Generator
Design a CSS box-shadow visually instead of guessing values. Move the sliders, pick a shadow color and opacity, and the preview and the CSS update together. It is made for front-end developers and designers styling cards, buttons and modals.
How to use it
- 1 Drag Horizontal offset and Vertical offset to move the shadow.
- 2 Adjust Blur radius and Spread radius to soften the shadow or change its size.
- 3 Choose the Shadow color, Opacity, Box color and Background color, and tick Inset shadow for an inner shadow.
- 4 Click Copy CSS and paste the box-shadow declaration into your stylesheet.
Frequently asked questions
The declaration reads box-shadow: [inset] x-offset y-offset blur spread color. Positive offsets move the shadow right and down, blur softens its edge, and a negative spread makes it smaller than the element.
An inset shadow is drawn inside the element instead of behind it, so the box looks pressed in. Tick Inset shadow to add the inset keyword to the CSS.
The opacity becomes the alpha channel of an rgba() color, so the shadow blends with whatever is behind the element instead of painting a solid block.
Offsets and spread run from -50px to 50px, blur from 0 to 100px, and opacity from 0 to 1 in steps of 0.01.
The generator builds one shadow at a time. To layer several, copy each declaration and join the values with commas in a single box-shadow property.