Beautiful shadows,
zero guessing.
Drag sliders to tune your shadow and watch the live preview update instantly. Copy the finished CSS with one click.
box-shadow: 4px 8px 20px 0px rgba(0,0,0,0.35);Adjust the sliders
Set horizontal/vertical offset, blur radius, spread and opacity to shape the shadow.
Pick a colour
Enter any hex colour — the tool converts it to rgba for precise opacity control.
Copy the CSS
Click 'Copy CSS' and paste the box-shadow property directly into your stylesheet.
What does the spread value do?
Spread expands or contracts the shadow's size before blurring. A positive spread makes the shadow larger than the element; a negative value shrinks it.
What is an inset shadow?
An inset shadow appears inside the element rather than outside, giving a pressed or sunken appearance — useful for inputs, cards and button states.
Does the generated CSS work everywhere?
Yes. box-shadow is supported in all modern browsers including Chrome, Firefox, Safari and Edge with no prefix needed.
Can I use multiple shadows?
CSS supports comma-separated multiple shadows (e.g. box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15);). Copy the value from this tool and add it to a multi-shadow list in your code.
Why use rgba for the colour?
rgba lets you control opacity independently from the colour, which gives you much finer control over shadow intensity without needing to change the hex value.