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.
Related Tools
CSS Gradient Generator
Build beautiful CSS gradients visually. Choose linear, radial, or conic type, add color stops, adjust angle and position, and get a live preview. Copy the ready-to-use CSS with one click.
Glassmorphism Generator
Generate CSS glassmorphism effects with blur and transparency controls. Live preview and ready-to-copy CSS for frosted glass UI designs.
CSS Triangle Generator
Create pure CSS triangles using the border hack technique. Choose direction, size, and color with a visual preview and ready-to-copy CSS.
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.