CSS Box Shadow Generator

Create beautiful CSS box shadows visually with live preview

Live preview | 100% client-side
Shadow Preview

Preview Element

Shadow Layers

CSS Output

Preset Shadows

100% Browser-Based

All shadows are generated locally in your browser. Nothing is sent to any server. Free to use with no limits or sign-up required.

What is CSS Box Shadow?

Add depth and dimension to elements with the box-shadow property

The CSS box-shadow property adds one or more shadow effects around an element's frame. It is one of the most widely used CSS properties for creating depth, elevation, and visual hierarchy in modern web design. Unlike images, CSS shadows are resolution-independent, performant, and can be animated with transitions.

Box shadows accept up to six values: an optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be layered on a single element by separating them with commas, enabling complex lighting effects like neumorphism, material design elevation, and realistic depth.

Multiple Layers

Stack multiple shadows on a single element using comma-separated values. The first shadow appears on top. Layering creates realistic depth and complex lighting effects.

Offset & Blur

Control the shadow's position with horizontal and vertical offsets, and soften edges with the blur radius. A blur of 0 creates a sharp shadow, while higher values produce a softer, more diffused look.

Spread & Inset

The spread radius expands or shrinks the shadow. The inset keyword creates inner shadows, useful for pressed states, input fields, and neumorphic designs.

Box Shadow Syntax

Quick reference for the CSS box-shadow property

Basic Syntax 

/* Syntax */
box-shadow: [inset] offset-x offset-y blur spread color;

/* Simple shadow */
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);

/* With spread */
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

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

Multiple Shadows 

/* Layered shadow for depth */
box-shadow:
  0px 1px 2px rgba(0, 0, 0, 0.06),
  0px 4px 8px rgba(0, 0, 0, 0.1);

/* Neumorphism effect */
box-shadow:
  8px 8px 16px #d1d5db,
  -8px -8px 16px #ffffff;

/* Colored glow */
box-shadow:
  0px 0px 20px rgba(99, 102, 241, 0.4),
  0px 0px 60px rgba(99, 102, 241, 0.15);

Tailwind CSS Equivalents 

/* Tailwind shadow utilities */
class="shadow-sm"    /* 0 1px 2px rgba(0,0,0,0.05) */
class="shadow"       /* 0 1px 3px, 0 1px 2px */
class="shadow-md"    /* 0 4px 6px -1px, 0 2px 4px -2px */
class="shadow-lg"    /* 0 10px 15px -3px, 0 4px 6px -4px */
class="shadow-xl"    /* 0 20px 25px -5px, 0 8px 10px -6px */
class="shadow-2xl"   /* 0 25px 50px -12px */

/* Arbitrary value for custom shadows */
class="shadow-[0px_4px_16px_rgba(0,0,0,0.12)]"

Box Shadow vs Drop Shadow

Two CSS approaches to adding shadows — and when to use each

box-shadow

  • Applies to the element's rectangular box model
  • Supports inset for inner shadows
  • Supports spread radius
  • Multiple comma-separated shadows
  • Best for cards, buttons, modals, and UI elements
box-shadow: 0 4px 12px rgba(0,0,0,0.15);

filter: drop-shadow()

  • Follows the element's actual shape (including transparency)
  • Does not support inset
  • Does not support spread radius
  • Works on SVGs and transparent PNGs
  • Best for images, icons, and non-rectangular shapes
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));

Frequently Asked Questions

Common questions about CSS box shadows and this generator

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple values including horizontal offset, vertical offset, blur radius, spread radius, and color. It accepts multiple comma-separated shadows to create layered effects. It is one of the most commonly used properties for creating depth and elevation in web design.
box-shadow applies a rectangular shadow to the element's box model, including padding and border. filter: drop-shadow() is a CSS filter that follows the actual shape of the element, including transparent areas in images. box-shadow supports the spread radius and inset keyword, while drop-shadow does not. Use box-shadow for cards and UI elements, and drop-shadow for images and SVGs.
Yes. CSS allows multiple box shadows on a single element by separating each shadow with a comma. For example: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);. The first shadow listed appears on top. Layering multiple shadows is a common technique for creating realistic depth, neumorphism effects, and complex lighting.
The inset keyword changes the shadow from an outer shadow (outset) to an inner shadow. An inset shadow appears inside the element's border, giving the appearance of the content being pressed into the page. This is commonly used for input fields, neumorphism designs, pressed button states, and progress bars.
The spread radius is the fourth length value in the box-shadow syntax. A positive spread value causes the shadow to expand beyond the element's size, while a negative value causes it to shrink. A spread of 0 means the shadow is the same size as the element. Negative spread is often used with Tailwind-style shadows to create tighter, more focused shadow effects.
Yes. This CSS box shadow generator runs entirely in your browser using JavaScript. No data is sent to any server, and there are no usage limits or sign-up required. Once the page loads, the tool works completely offline.