CSS Box Shadow Generator — Master Box Shadows for Modern Web Design

Box shadows are one of the most versatile tools in CSS. Used subtly, they create depth and visual hierarchy. Used boldly, they define a distinctive design style. Understanding the syntax and techniques unlocks a wide range of effects.

CSS box-shadow syntax

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

• offset-x: Horizontal shadow position. Positive = right, negative = left.
• offset-y: Vertical shadow position. Positive = down, negative = up.
• blur-radius: 0 = sharp edge, higher = softer/more spread shadow.
• spread-radius: Positive = shadow expands beyond element, negative = shrinks.
• inset: Optional keyword — makes shadow appear inside the element.
• color: Any CSS color. rgba() is recommended for opacity control.

Multiple shadow layers

CSS allows multiple shadows separated by commas:

box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 4px 16px rgba(0,0,0,0.08);

Layering a tight, dark shadow with a loose, lighter shadow creates more realistic depth than a single shadow. Real objects cast multiple shadows — direct light creates a sharp inner shadow, ambient light creates a soft outer shadow.

Shadow techniques with examples

Subtle elevation (cards, panels)

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

Floating button effect

box-shadow: 0 4px 14px rgba(0,0,0,0.25);

Inner/pressed state

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

Colored glow (interactive elements, focus states)

box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);

Sharp graphic shadow (bold, retro style)

box-shadow: 4px 4px 0 rgba(0,0,0,0.9);

Neumorphism (soft UI)

box-shadow:
  6px 6px 12px rgba(0,0,0,0.15),
  -6px -6px 12px rgba(255,255,255,0.7);

Neumorphism requires a matching background color. The technique places light shadow on one side and dark shadow on the other, creating the illusion the element is extruded from the surface.

Tailwind CSS shadow classes

text-shadow and drop-shadow

text-shadow

Applies shadow to text characters, not the element box:

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

filter: drop-shadow()

Unlike box-shadow, drop-shadow follows the element's alpha channel — it wraps around transparent areas, making it ideal for PNG images with irregular shapes:

filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.3));

Performance considerations

Box shadows are painted on the CPU by default. For elements that animate or scroll, prefer filter: drop-shadow() which is GPU-accelerated. Avoid animating box-shadow directly — animate opacity on a pseudo-element instead for 60fps transitions.

How to generate box shadows free

1. Go to CSS Box Shadow Generator
2. Adjust horizontal, vertical, blur, and spread sliders
3. Pick shadow color and opacity
4. Add multiple layers for realistic depth effects
5. Choose from 20+ presets for instant starting points
6. Copy the CSS or find the equivalent Tailwind class