SHDCSS Box Shadow Generator

CSS box-shadow Complete Guide

CSS box-shadow adds depth and dimension to elements — a core tool in every modern UI design system from Material Design to neumorphism and glassmorphism. This tool lets you adjust offset, blur, spread, and color in real time to preview the result, then copy the CSS with one click.

box-shadow vs text-shadow

box-shadow — Element Box Shadow

Applies a shadow to the element's entire box area. Supports the inset keyword and spread value — both absent from text-shadow.

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

/* Outer + inner shadow simultaneously */
box-shadow:
  0 4px 6px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.1);

text-shadow — Text Shadow

/* Basic: x y blur color */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

/* Glow effect */
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #667eea;

/* Retro 3D effect */
text-shadow: 1px 1px #aaa, 2px 2px #aaa, 3px 3px #aaa;

Understanding All 6 Values

What Each Value Does

box-shadow: inset   x     y     blur   spread  color;
            (opt)  5px   5px   15px   0px     rgba(0,0,0,0.25);

/* inset  : inner shadow (omit for outer) */
/* x      : positive=right, negative=left */
/* y      : positive=down, negative=up */
/* blur   : 0=sharp, higher=softer */
/* spread : positive=expand, negative=contract */
/* color  : rgba/hex (use transparency for realism) */

Material Design Shadow Values

Official Material Design Elevation Scale

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

/* elevation 2 (button) */
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

/* elevation 3 (modal) */
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

/* elevation 4 (drawer) */
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

/* elevation 5 (dialog) */
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

Multi-Shadow Techniques — Neumorphism

Neumorphism

/* Must match background color */
.neumorph {
  background: #e0e5ec;
  box-shadow:
    6px 6px 12px #b8bec7,    /* dark shadow (bottom-right) */
    -6px -6px 12px #ffffff;  /* light shadow (top-left) */
  border-radius: 12px;
}

/* Pressed state */
.neumorph:active {
  box-shadow:
    inset 4px 4px 8px #b8bec7,
    inset -4px -4px 8px #ffffff;
}

Colored Shadows

/* Button with brand-colored shadow */
.btn-primary {
  background: #667eea;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.btn-danger {
  background: #f5576c;
  box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
}

Performance and Accessibility

Performance Optimization

box-shadow is not GPU-accelerated and triggers a paint step. Instead of animating box-shadow directly, use an ::after pseudo-element with the shadow pre-rendered, then transition only its opacity to maintain 60fps.

/* GPU-friendly hover shadow */
.card { position: relative; }
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::after {
  opacity: 1; /* only opacity changes — no repaint */
}

Frequently Asked Questions

Can I create an outline with box-shadow instead of border?

Yes — use spread only: box-shadow: 0 0 0 2px #667eea creates a 2px border-like ring. Unlike outline, it follows border-radius and does not affect layout.

What is the difference between box-shadow and filter: drop-shadow()?

filter: drop-shadow() follows the actual visible shape of transparent PNGs and SVGs. box-shadow always follows the rectangular box. Use drop-shadow for irregular shapes like icons.

How does box-shadow map to Tailwind CSS?

<div class="shadow-sm">    <!-- small shadow -->
<div class="shadow">       <!-- default shadow -->
<div class="shadow-md">    <!-- medium shadow -->
<div class="shadow-lg">    <!-- large shadow -->
<div class="shadow-xl">    <!-- extra large shadow -->
<div class="shadow-2xl">   <!-- 2xl shadow -->
<div class="shadow-inner"> <!-- inner shadow -->
<div class="shadow-none">  <!-- remove shadow -->

Any accessibility considerations?

Never rely on box-shadow alone to indicate focus. Shadows may be invisible in high-contrast mode. Always keep an outline for keyboard focus indicators and use shadows only as visual enhancement.