Box Shadow Generator
Design CSS box shadows visually with live preview. Adjust offset, blur, spread, and color, then copy the ready-to-use CSS instantly.
CSS Box Shadow Generator
Design beautiful shadows and copy the CSS instantly.
All processing happens locally in your browser — nothing is stored or sent to any server.
How to Use the Box Shadow Generator
- Adjust the X and Y offset sliders to position the shadow relative to the element.
- Set the blur radius for softness and the spread radius for shadow size.
- Pick or type a shadow color using any valid CSS color value (hex, rgba, hsla).
- Toggle inset shadow for inner shadow effects.
- Copy the generated box-shadow CSS and paste it directly into your stylesheet.
About CSS Box Shadows
CSS box shadows add depth, elevation, and visual hierarchy to UI elements without any images. The box-shadow property accepts up to six values: horizontal offset, vertical offset, blur radius, spread radius, color, and the optional inset keyword. The order matters — blur and spread are distinguishable only by their position in the declaration.
Design systems use shadows systematically: Material Design uses elevation levels (2dp, 4dp, 8dp, 16dp…) to communicate the stacking height of cards and dialogs. Subtle shadows (2-4px blur, low opacity) work for cards; stronger shadows (8-16px blur) are for modals and popovers; very soft diffuse shadows (20-40px blur, very low opacity) create a "floating" effect.
This generator provides real-time visual feedback — every slider updates the preview immediately so you can evaluate the effect before copying. The generated CSS is production-ready and works across all modern browsers.
Frequently Asked Questions
What does the spread radius do? ▼
The spread radius controls how far the shadow expands beyond the element's border box. A positive spread makes the shadow larger than the element, while a negative value shrinks it — useful for tight, close shadows that do not bleed outward.
What is an inset shadow? ▼
The inset keyword moves the shadow to the inside of the element, rendering it within the border box rather than outside. It is used for pressed-button effects, sunken input fields, and inner-depth card designs.
Can I use rgba colors for the shadow? ▼
Yes. Type any valid CSS color value: hex (#000), rgba(0,0,0,0.5), hsla(0,0%,0%,0.3), or named colors. Semi-transparent shadows using rgba are the most common choice in modern UI design.
Is the generated CSS production-ready? ▼
Yes. The generated box-shadow property uses standard CSS3 syntax with no vendor prefixes required. It is compatible with all modern browsers (Chrome, Firefox, Safari, Edge) and IE 9+.
Can I layer multiple box shadows? ▼
CSS supports multiple box shadows on the same element by comma-separating the values: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.15). This technique creates more realistic multi-layer shadow effects.
Why does my box shadow not show? ▼
Check that the shadow color has sufficient opacity (rgba alpha > 0), the element has no overflow: hidden clipping, and the blur or spread values are not set to 0 on a 0,0 offset. The live preview in this tool updates instantly so you can diagnose the issue visually.
What is the difference between box-shadow and filter: drop-shadow()? ▼
box-shadow follows the element's border box. filter: drop-shadow() follows the visible rendered shape of the element, including transparent areas. For irregular shapes or images with transparency, drop-shadow produces a more natural effect; for rectangular UI elements, box-shadow is standard.