CSS Box Shadow Generator Online — Create Shadows with Live Preview Free

What Is CSS Box Shadow?

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple shadows on one element, separated by commas. Each shadow requires values for: horizontal offset, vertical offset, blur radius, spread radius, color, and whether the shadow is inset (inner shadow) or outset (default outer shadow).

box-shadow: [h-offset] [v-offset] [blur] [spread] [color] [inset?]

/* Example */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

How to Use the CSS Box Shadow Generator Online

1. Open the box shadow generator at DevKits.
2. Adjust the sliders: horizontal offset, vertical offset, blur radius, and spread radius.
3. Pick a shadow color and set the opacity.
4. Toggle inset to create inner shadows.
5. Add multiple shadows by clicking the "+" button — layers create rich, realistic depth.
6. Copy the generated CSS from the output panel.

Understanding Each Shadow Parameter

• Horizontal offset: Positive values move the shadow right; negative values move it left.
• Vertical offset: Positive values move the shadow down; negative values move it up.
• Blur radius: Higher values create a more diffuse, softer shadow. 0 = hard edge shadow.
• Spread radius: Positive values expand the shadow; negative values shrink it. A large negative spread with no blur creates a realistic "contact shadow".
• Color/opacity: Use rgba() with low opacity for natural-looking shadows. Pure black (rgba(0,0,0,0.1-0.3)) works well for most UI shadows.
• Inset: Makes the shadow appear inside the element, creating a sunken or pressed effect.

Key Features

• Visual sliders for all parameters with real-time preview.
• Multiple shadow layers — add up to 5 shadow layers for complex effects.
• Inset/outset toggle for inner and outer shadows.
• Shadow presets — popular shadow recipes from Tailwind, Material UI, and similar design systems.
• Background color picker — see how the shadow looks on different backgrounds.
• Copy to clipboard — one-click CSS copy.

Popular Shadow Presets

/* Subtle card shadow (Tailwind shadow-sm) */
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

/* Default card shadow (Tailwind shadow) */
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);

/* Large elevated shadow (Tailwind shadow-lg) */
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

/* Neumorphic inset effect */
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.15), inset -2px -2px 5px rgba(255,255,255,0.8);

Frequently Asked Questions

Can I apply multiple box shadows to one element?

Yes. Separate multiple box-shadow values with commas. Multiple shadows are applied from front to back in the order listed. This is essential for creating realistic depth effects like Material Design's elevation shadows.

What's the difference between box-shadow and filter: drop-shadow?

box-shadow follows the element's rectangular bounding box, ignoring transparent areas. filter: drop-shadow() follows the actual visible content (including transparency), making it better for non-rectangular elements and PNG images with transparency.

Why does my box shadow not appear on certain elements?

Box shadows can be hidden if the element is overflow:hidden on a parent, if the element itself has overflow:hidden clipping the shadow, or if z-index stacking context issues hide the shadow behind other elements.

Are there performance concerns with box-shadow?

Complex box shadows can trigger paint operations during animations. For animated elements, consider using filter: drop-shadow() or a pseudo-element shadow instead, as these can be GPU-composited.

Is the tool free?

Yes, completely free with no signup required.