Box Shadow Generator
Build production box-shadow declarations with live-tunable depth, softness, and color.
Generate CSS box shadows instantly. Free shadow maker with offsets, blur, spread, color, opacity and inset mode.
Calculator Inputs
About Box Shadows
Build production box-shadow declarations with live-tunable depth, softness, and color.
Dial offsets, blur, spread, color, and opacity — plus inset mode for pressed-in effects. The output is a single copy-ready declaration using rgba so the shadow tints any background instead of stamping gray boxes.
Rule of thumb: larger blur with low opacity reads premium; tight dark shadows read dated. Animate transform and opacity, never box-shadow itself, for 60fps motion. Everything runs in your browser.
Where it is used
Card elevations, button depth, modal scrims, and neumorphic experiments.
How to use the Box Shadows
- Offset X (px) — enter the value (e.g. 0).
- Offset Y (px) — enter the value (e.g. 4).
- Blur Radius (px) — enter the value (e.g. 12).
- Spread (px) — enter the value (e.g. 0).
- Shadow Color (hex) — enter the value (e.g. 000000).
- Opacity (0–100%) — enter the value (e.g. 15).
- Inset Shadow — enter the value.
- Calculate — press the Calculate button to see the result instantly above.
Formula
box-shadow: [inset] x y blur spread rgba(color, opacity).
Examples
Example
Frequently Asked Questions
- Why rgba instead of a hex shadow?
- Hex shadows are opaque slabs. rgba lets the background show through, so one declaration works on light and dark surfaces.
- How do layered shadows work?
- Comma-separate multiple shadows; the first paints on top. A tight dark layer plus a wide faint layer beats any single shadow.
- Do shadows hurt performance?
- Static ones are cheap (one composite). Animating box-shadow per frame is expensive — animate a pseudo-element’s opacity instead.