CSS Box Shadow Generator

Build soft, layered CSS shadows visually. Free, no sign-up, works in your browser.

🔒 100% private — processing happens in your browser. Nothing is uploaded.
How to use the box shadow generator
  1. Move the sliders for offset, blur, spread, colour and opacity.
  2. Turn on “Layered” for the soft, realistic shadows used in modern UI design.
  3. Copy the CSS into your stylesheet.
A layered shadow stacks several thin shadows with growing blur, which looks much more natural than one big blurry shadow. Use small offsets for cards and buttons, larger ones for pop-ups and modals, and inset shadows for pressed buttons or input fields.























				

					

					

						

					

					

						
						
						
					

					
					
Powered by CookieAdmin