How it works
The Box Shadow Generator provides a visual interface for creating CSS box-shadow declarations โ adjust offset, blur, spread, color, and opacity with sliders and see the shadow update live on a preview element.
CSS box shadows have 6 parameters: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Getting the combination right from memory is error-prone. This generator makes it visual and instant.
How to use it: drag the sliders for horizontal offset (โ50px to 50px), vertical offset (โ50px to 50px), blur radius (0โ100px), and spread (โ50px to 50px). Pick the shadow color using the color picker (with opacity control for rgba). Toggle "Inset" to switch between outer and inner shadows. Add multiple shadow layers (CSS supports comma-separated multiple shadows) with the + button. Click Copy to get the CSS-ready box-shadow declaration.
Design patterns enabled: soft UI / neumorphism effects (two shadows at ยฑ5px offset with low blur), elevation layers (small tight shadows for near surfaces, larger blurred shadows for elevated surfaces), inner shadows for pressed button states, glowing text effects using color with high spread and zero offset.
Multi-shadow tip: CSS box-shadow accepts multiple comma-separated values. Stacking a tight focused shadow with a larger blurred one creates depth that looks more realistic than a single shadow โ a technique used in Material Design's elevation system.
Frequently Asked Questions
- Yes. Click 'Add shadow layer' to stack multiple box-shadow values. CSS processes multiple shadows from front to back (first listed shadow appears on top). Combining a tight focused shadow with a larger blurred one creates realistic depth.
- Spread grows (positive) or shrinks (negative) the shadow beyond the blur radius. A spread of 5px makes the shadow 5px larger than the element in all directions. A negative spread combined with high blur creates a focused glow effect.
- Inset shadows appear inside the element boundary instead of outside. They're used for: pressed button states (depth appears to sink), inner border effects, and realistic neumorphism (soft UI) designs.
- Box shadows with dark colors on dark backgrounds are invisible. For dark mode designs, use lighter shadow colors or switch to using outline/border effects instead. The preview background can be toggled between white and dark to test both.