CSS Box Shadow Generator
Build a CSS box-shadow value with a live preview and one-click copy.
Every calculation runs locally in your browser. Nothing you enter here is sent anywhere.
For informational and educational purposes only — not professional or technical advice, and not a substitute for consulting a qualified professional about your specific situation. TrueMeasureKit is not liable for decisions made based on these results. See our Terms of Service.
Why box-shadow needs an rgba color, not a plain hex
A hex color has no built-in opacity — box-shadow renders a fully solid color unless it's expressed as rgba() or with a color that has an alpha channel. Most well-designed shadows use partial opacity (typically 10–35%) rather than a solid black, since a fully opaque shadow tends to look harsh and unrealistic compared to how light and shadow actually behave.
Frequently asked questions
What do the different box-shadow values control?
In order: horizontal offset, vertical offset, blur radius (how soft the edge is), spread radius (how much the shadow grows or shrinks), and color — plus an optional inset keyword to draw the shadow inside the element instead of outside.