CSS Box Shadow Generator
Build CSS box-shadow effects visually and copy the code.
Shadow Settings
box-shadow: 4px 8px 24px 0px rgba(0, 0, 0, 0.25);This tool lets you visually design a CSS box-shadow - adjusting offset, blur, spread, color, and opacity with live preview - and generates the exact CSS syntax to copy, rather than manually guessing values for the notoriously fiddly box-shadow property.
Frequently asked questions
If the tool supports multiple shadow layers, you can stack several shadows together for more complex depth effects, which is valid CSS box-shadow syntax (comma-separated shadow values).
Yes, typically - toggle between a standard drop shadow and an inset shadow that appears inside the element's border instead of outside it.
box-shadow is well-supported across all modern browsers without needing vendor prefixes, so the generated CSS should work consistently.