How to Create CSS Box Shadow Online — Free (2026)

The brevio CSS Box Shadow Generator lets you create, stack, and preview box shadows live in your browser. Adjust offsets, blur, spread, and colour, then copy the ready-to-use CSS property. No upload, no account, no server.

The box-shadow CSS Syntax

box-shadow: [inset] <h-offset> <v-offset> <blur-radius> <spread-radius> <color>;

All values are required except inset and spread-radius. You can layer multiple shadows by separating them with commas.

How to Create a Box Shadow Step by Step

1. Open the CSS Box Shadow Generator.
2. Set the horizontal and vertical offsets. Drag the sliders from −50 to 50px. A positive horizontal offset moves the shadow right; a positive vertical offset moves it down. Start with small values like 4px, 4px for a classic drop shadow.
3. Adjust blur radius. 0px produces a hard, sharp edge. 10–20px creates a soft, natural-looking shadow. Very large values (50px+) create ambient glow effects.
4. Adjust spread radius. A positive spread expands the shadow beyond the element bounds. A negative spread creates an inner-corner effect. Keeping spread at 0 is the most natural-looking default.
5. Choose a colour and opacity. Click the colour swatch and select from the colour picker. Reduce opacity with the slider — shadows are usually between 15% and 30% opacity for a realistic look.
6. Add multiple shadows. Click + Add Shadow to layer a second or third shadow. A common technique is combining a close sharp shadow with a distant diffuse one.
7. Toggle inset. Check Inset to make the shadow appear inside the element, useful for pressed-button effects and inner borders.
8. Copy the CSS. Click Copy CSS to copy the full box-shadow: declaration to your clipboard.

Common Box Shadow Patterns

Subtle card shadow (material design style)

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

Elevated card on hover

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

Inset pressed state

box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

Glowing focus ring (accessibility)

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);

No shadow (remove inherited shadow)

box-shadow: none;

Box Shadow vs Drop Shadow (filter)

box-shadow applies to the rectangular bounding box of an element, ignoring transparent areas. The CSS filter: drop-shadow() function applies to the actual visible shape, following transparent pixels. Use filter: drop-shadow() when you need a shadow that follows a PNG with transparency or an SVG path.

Frequently Asked Questions

How do I remove a box shadow?

Set box-shadow: none to explicitly remove a shadow, or box-shadow: 0 0 0 transparent for a transition-friendly starting point that animates smoothly to a visible shadow.

Can I use multiple shadows?

Yes. Separate multiple shadow definitions with commas. The first shadow in the list is rendered on top. This is how many UI libraries create layered depth effects using two or three shadows at different scales and opacities.

Is box-shadow supported in all browsers?

Yes. box-shadow has full support in all modern browsers (Chrome, Firefox, Safari, Edge) and has had since 2011. No vendor prefix is needed in 2026.

Does box-shadow affect layout?

No. Box shadows are rendered outside the normal flow and do not affect other elements or the box model. If you need the shadow to push adjacent content, use outline (which also does not affect layout) or add padding/margin to the parent.