Adjust the shadow
Move the sliders for horizontal and vertical offset, blur and spread.
CSS Box Shadow Generator
Design a box-shadow with live sliders for offset, blur, spread and opacity, then copy the CSS.
Free
No sign-up
Runs in your browser
Drag the sliders; the preview updates as you go.
Need a background too? Use the CSS Gradient Generator.Common uses
- Give cards and buttons a soft, modern shadow
- Create an inset effect for input fields
- Match a shadow from a design mock-up
How it works
How to use CSS Box Shadow Generator
Choose colour and opacity
Pick the shadow colour and how strong it is, or switch to an inner shadow.
Copy the CSS
Copy the box-shadow rule and paste it into your stylesheet.
FAQ
Good to know
How do I use CSS Box Shadow Generator?
1. Adjust the shadow: Move the sliders for horizontal and vertical offset, blur and spread. 2. Choose colour and opacity: Pick the shadow colour and how strong it is, or switch to an inner shadow. 3. Copy the CSS: Copy the box-shadow rule and paste it into your stylesheet.
What is the difference between blur and spread?
Blur softens the edge of the shadow. Spread makes the shadow larger or, with a negative value, smaller than the element.
Why use a low opacity?
Soft shadows of about 10–25% opacity look more natural than solid black.
Does box-shadow affect layout?
No. Shadows are drawn outside the layout and do not move other elements.