Box Shadow Generator
Generate CSS box-shadow values with live preview. Supports multiple layered shadows for depth and realism.
Preview
box-shadow: 0px 4px 8px 0px #00000033;How to Use
- Adjust the shadow parameters using the visual controls: horizontal offset (X), vertical offset (Y), blur radius, spread radius, and shadow color (including opacity). The preview box updates in real time as you drag each slider.
- Toggle between `inset` and `outset` shadow modes. Outset shadows create the illusion of the element floating above the page; inset shadows create depth within the element — useful for sunken inputs, pressed buttons, or inner glows.
- Copy the generated CSS `box-shadow` declaration with one click. For advanced effects, stack multiple shadows by adding new layers — each layer appears as a comma-separated value, enabling complex effects like neumorphism, material design elevation, and frosted glass.
Frequently Asked Questions
- What do the four box-shadow values mean?
- The CSS `box-shadow` property accepts: offset-x (horizontal shift, positive = right), offset-y (vertical shift, positive = down), blur-radius (how soft the shadow edge is, 0 = sharp), and spread-radius (how much the shadow expands or shrinks). A negative spread creates a smaller shadow than the element.
- Can I create multiple shadows on one element?
- Yes — add as many shadow layers as you need by clicking 'Add Layer'. Each layer is a complete shadow definition, and CSS renders them from top to bottom (first shadow on top). This is how modern UI effects like neumorphism (soft 3D) and elevated cards with ambient + directional shadows are created.
- How does box-shadow affect browser performance?
- Simple shadows have negligible performance impact. Complex layered shadows with large blur radii can trigger repaints, especially during animations. For animated shadows, prefer using `filter: drop-shadow()` or animating `opacity` on a pseudo-element with a fixed shadow instead of animating the `box-shadow` property directly.