Developer tools
CSS Box Shadow Generator
Create a ready-to-copy CSS box-shadow declaration locally in your browser.
Tune a CSS shadow without writing the declaration by hand.
Set horizontal and vertical offset, blur, spread, colour, opacity, and inset mode to preview a shadow and copy its CSS. Everything is calculated locally in your browser, so the values you enter are never uploaded or stored.
Frequently Asked Questions
Everything you need to know about this tool, how it works, and privacy.
What do offset, blur, and spread mean in a CSS box shadow?
Offset X moves the shadow left or right, and offset Y moves it up or down. Blur softens the shadow edge, while spread changes its size before blur is applied.
What is the difference between an inset and an outer box shadow?
An outer shadow appears outside the element. Select inset to draw the shadow inside the element instead, which is useful for recessed or pressed effects.
Can this generator create multiple shadows or just the CSS output?
This tool creates one ready-to-copy box-shadow declaration at a time. To use multiple shadows, create each declaration and combine the comma-separated shadow values in your stylesheet.
What happens with invalid or zero values?
Zero is valid for every measurement and can remove an offset, blur, or spread effect. The tool shows an error instead of generating CSS when a value is invalid or outside its accepted range.
Do my shadow settings leave my browser?
No. Previewing, generating, and copying the CSS happen locally in your browser. CodeASystem does not upload or store your settings.