CSS Box Shadow & Gradient Complete Guide

📖 8 min read · CSS & Design · Try Box Shadow Generator →

CSS Box Shadow

The CSS box-shadow property adds shadow effects around an element's frame. It creates depth and visual hierarchy in flat designs without using images. Box shadows are rendered by the browser and do not affect page layout — they are purely visual.

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

/* Examples */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);        /* Subtle card shadow */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);       /* Elevated modal */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);   /* Inset (pressed) */
box-shadow: 0 0 0 3px #6366f1;                     /* Focus ring */

Box Shadow Parameters Explained

offset-x

Horizontal shadow offset. Positive values move shadow right, negative values move it left. 0 centers the shadow horizontally.

offset-y

Vertical shadow offset. Positive values move shadow down, negative values move it up. 0 centers the shadow vertically.

blur-radius

Controls how blurry the shadow is. 0 = sharp edge. Higher values = more blur and larger shadow. Cannot be negative.

spread-radius

Expands or contracts the shadow. Positive values make the shadow larger than the element. Negative values shrink it. Optional, defaults to 0.

color

The shadow color. Use rgba() for transparency. Semi-transparent shadows (rgba(0,0,0,0.1-0.3)) look more natural than solid colors.

inset

Optional keyword. Makes the shadow appear inside the element instead of outside. Creates a pressed or recessed effect.

Multiple Shadows & Design Patterns

CSS allows multiple shadows separated by commas. Layering shadows creates more realistic and sophisticated effects:

/* Neumorphic effect */
box-shadow: 
  6px 6px 12px rgba(0,0,0,0.15),
  -6px -6px 12px rgba(255,255,255,0.1);

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

/* Colored glow effect */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);

CSS Gradients

CSS gradients create smooth transitions between two or more colors without using images. They are resolution-independent, scale perfectly on all screens, and are more performant than image backgrounds.

/* Linear gradient */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);

/* Radial gradient */
background: radial-gradient(circle, #667eea, #764ba2);
background: radial-gradient(ellipse at top, #1a1a2e, #16213e);

/* Multi-color gradient */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

/* Gradient with stops */
background: linear-gradient(to right, #667eea 0%, #764ba2 50%, #f093fb 100%);

Gradient Direction Values

to right

→ Left to right

to left

← Right to left

to bottom

↓ Top to bottom (default)

to top

↑ Bottom to top

to bottom right

↘ Diagonal

45deg

45° angle

135deg

135° angle

to top right

↗ Diagonal

Gradient Text Effect

/* Gradient text */
.gradient-text {
  background: linear-gradient(to right, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

This technique clips the gradient to the text shape, creating a colorful text effect. Supported in all modern browsers.

Performance Tips

Box shadows are GPU-accelerated in modern browsers — they are cheap to render
Avoid animating box-shadow directly — animate opacity or use filter: drop-shadow() instead for better performance
Gradients are rendered by the GPU and are more performant than gradient images
Use will-change: transform on elements with complex shadows that animate

Generate CSS Visually

Box Shadow Generator →Gradient Generator →