CSS Box Shadow Generator

What Is a CSS Box Shadow?

The box-shadow property in CSS attaches one or more shadows to an element's box. It is part of the CSS Backgrounds and Borders Module Level 3 specification and is one of the most widely used visual effects in modern web design. A box shadow is defined by its horizontal offset, vertical offset, blur radius, spread radius, and color. The shadow follows the element's border shape — if the element has rounded corners via border-radius, the shadow respects those curves.

Box Shadow Parameters Explained

Every box shadow declaration consists of five core parameters, plus an optional inset keyword:

• Offset-X — Horizontal position. Positive values move the shadow right, negative values move it left.
• Offset-Y — Vertical position. Positive values move the shadow down, negative values move it up.
• Blur Radius — The softness of the shadow. Higher values produce a more diffuse edge. A value of 0 produces a sharp, hard-edged shadow.
• Spread Radius — The size of the shadow. Positive values expand the shadow in all directions, negative values contract it. This parameter is unique to box-shadow and does not exist in the CSS filter: drop-shadow() function.
• Color — The shadow color, typically specified with an alpha channel (e.g., rgba(0,0,0,0.3)) to control opacity independently of the color hue.

How It Works: CSS Shadow Syntax

The standard syntax for a single box shadow is:

box-shadow: offset-x offset-y blur-radius spread-radius color;

For an inset (inner) shadow, add the inset keyword at the beginning or end:

box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.3);

Multiple shadows are comma-separated:

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

Material Design Shadow Levels

Google's Material Design specifies elevation levels that translate directly to box-shadow values. Here are the recommended shadow levels for different UI elevations:

/* Elevation 1 — Default cards and buttons */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Elevation 2 — Floating action buttons, raised cards */
box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);

/* Elevation 4 — Menus, sub menus */
box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.12);

/* Elevation 8 — Dialogs, drawers */
box-shadow: 0 12px 24px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.12);

/* Elevation 16 — Modals, pickers */
box-shadow: 0 24px 48px rgba(0,0,0,0.15), 0 16px 32px rgba(0,0,0,0.12);

Each elevation uses two shadows: a larger, softer shadow for ambient light and a smaller, sharper shadow for directional light. This technique produces realistic depth perception that mimics physical lighting.

Hover Animation Effects

Transitioning box-shadow on hover creates a polished interactive feel. Always transition the box-shadow property with a short duration for smooth animation:

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: box-shadow 0.3s ease-in-out;
}
.card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.2), 0 10px 10px rgba(0,0,0,0.18);
}

Performance: GPU Compositing vs Repaint

Box shadows have performance implications that every developer should understand. The browser must calculate the shadow for every pixel at the element's edges, and any change to the shadow triggers a repaint. However, when combined with transform or opacity transitions that use GPU compositing, shadow-heavy animations can still run at 60fps. For complex pages with dozens of shadow elements, prefer filter: drop-shadow() for irregular shapes or limit the number of layered shadows per element. Modern browsers optimize box-shadow rendering via hardware acceleration where possible, but multiple large shadows on overlapping elements can still cause layout thrashing.

Using Pseudo-Elements for Advanced Shadows

When you need shadows that don't conform to the element's box shape — for example, shadows that extend only in one direction or glow effects with unusual shapes — CSS pseudo-elements (::before and ::after) offer an alternative approach:

.button {
  position: relative;
}
.button::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 10%;
  width: 80%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.3), transparent);
  filter: blur(4px);
  z-index: -1;
}

This technique is especially useful for creating glow effects, long shadows, and custom shadow shapes that the standard box-shadow property cannot achieve.

Common Use Cases

• Card UI — Shadows distinguish card elevation hierarchy in dashboards, portfolios, and e-commerce listings.
• Buttons — Raised buttons use shadows to appear clickable. Inset shadows create a pressed (active) state.
• Modals and Dialogs — High-elevation shadows separate overlays from the page content beneath.
• Navigation — Sticky headers and sidebars use bottom/right shadows to indicate they float above the content.
• Image Frames — Photos and screenshots benefit from subtle shadows that give them physical depth on the page.

Best Practices

• Use rgba() or hsla() colors with alpha transparency instead of #000 with a separate opacity — this prevents color banding and gives more natural-looking shadows.
• Layer two shadows for realism: one narrow shadow for the direct light source and one broad shadow for ambient occlusion.
• Avoid large blur radii on many overlapping elements; each shadow layer increases the compositing cost.
• For pressed button states, use inset shadows rather than reducing the outer shadow — this creates a more convincing tactile response.
• Prefer CSS transitions over JavaScript-driven shadow animations for better performance.
• Test shadow rendering on high-DPI screens where blur quality differences become visible.

Related Resources

• CSS Gradient Generator — Combine gradients with shadows for rich visual effects.
• Color Converter — Convert shadow colors between HEX, RGB, and HSL formats.
• CSS Formatter — Format your box-shadow CSS code with proper indentation.