Box Shadow Generator
Generate CSS box-shadow with live preview. Customize offset, blur, spread, color, and opacity.
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
About Box Shadow Generator
Visual CSS box-shadow generator with real-time preview. Adjust horizontal offset, vertical offset, blur radius, spread radius, color, and opacity with sliders or number inputs. Toggle inset mode. Add multiple shadow layers for stacked shadow effects. The live preview shows exactly how the shadow will render. Copy the ready-to-use CSS box-shadow property with one click.
All processing happens entirely in your browser using modern web APIs. Nothing is uploaded to our servers — your data stays local and private. Free to use forever.
Common use cases
- Designing card shadows for UI components (cards, modals, buttons)
- Creating the popular "neumorphism" or "glassmorphism" shadow effects
- Generating drop shadows for navigation bars and floating elements
- Adding inset shadows to input fields for a "pressed" or "sunken" effect
- Experimenting with layered shadows for depth and realism
How it works
The CSS box-shadow property syntax is: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Multiple shadows are comma-separated. This tool maintains an array of shadow layer objects and serializes them to the CSS value string in real time as you adjust the controls. The preview element applies the generated CSS property directly.