CSS Gradients and Box Shadows: A Complete Visual Guide

CSS gradients and box shadows are two of the most powerful yet underused visual tools in a web developer's toolkit. When used well, they add depth, hierarchy, and polish to interfaces. When used poorly, they make everything look like a 2009 website. This guide teaches both the mechanics and the taste.

CSS Gradients

Linear Gradients

The most common gradient type. Goes from one color to another in a straight line.

/* Basic left-to-right */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Diagonal */
background: linear-gradient(135deg, #667eea, #764ba2);

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

/* With transparency */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));

/* Hard stop (no blend) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

The angle can be specified in degrees (0deg = bottom to top, 90deg = left to right) or with keywords (to top, to right, to bottom-right).

Radial Gradients

Emanates outward from a center point.

/* Circular gradient */
background: radial-gradient(circle, #667eea, #764ba2);

/* Elliptical (default) */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* Positioned center */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);

/* Spotlight effect */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);

Radial gradients are perfect for spotlight effects, glows, and vignettes.

Conic Gradients

Sweeps around a center point — like a color wheel or pie chart.

/* Color wheel */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* Pie chart segments */
background: conic-gradient(
  #3b82f6 0% 35%,
  #8b5cf6 35% 60%,
  #10b981 60% 80%,
  #f59e0b 80% 100%
);

/* Checkerboard pattern */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;

Gradient text

One of the most popular modern UI effects:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Gradient overlays on images

Essential for readable text over photos:

.hero {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
    url('hero.jpg');
  background-size: cover;
}

Use our CSS Gradient Generator to build gradients visually with a live preview and copy the CSS with one click.

Box Shadows

The box-shadow syntax

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

• offset-x / offset-y — shadow position (positive = right/down)
• blur-radius — 0 = hard edge, higher = softer
• spread-radius — positive grows the shadow, negative shrinks it
• inset — draws shadow inside the element instead of outside

Basic shadows

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

/* Card shadow */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

/* Large modal shadow */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

/* Hard drop shadow (no blur) */
box-shadow: 4px 4px 0px #1e293b;

Multi-layer shadows

Multiple shadows can be stacked with commas. This is the key to realistic shadows:

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

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

The second approach distributes the shadow energy across multiple layers, creating a more natural depth falloff.

Inset shadows

Draw shadows inside the element — great for pressed states and input fields:

/* Pressed button state */
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Input field with depth */
input {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* Frosted glass inner glow */
.glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(0,0,0,0.2);
}

Colored shadows

Shadows don't have to be black. Colored shadows add vibrancy:

/* Colored elevation */
.btn-primary {
  background: #3b82f6;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Dark mode glow */
.card {
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

Smooth shadow transitions

Animate shadows on hover for satisfying interactions:

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

Combining gradients and shadows

The most polished UIs use gradients and shadows together:

.premium-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 6px -1px rgba(0,0,0,0.2),
    0 20px 40px -5px rgba(0,0,0,0.4);
}

.gradient-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}

.gradient-button:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  transform: translateY(-1px);
}

Tools to work faster

• CSS Gradient Generator — Build gradients visually with multiple stops, angles, and types. Live preview with one-click copy.
• CSS Box Shadow Generator — Layer multiple shadows, adjust blur/spread/color, and get production-ready CSS instantly.
• Color Format Converter — Convert between HEX, RGB, HSL, and RGBA — essential when setting shadow opacities.
• Color Palette Generator — Generate complementary, analogous, and monochromatic palettes to find perfect gradient color pairs.

Gradients and shadows follow the same rule as all good design: restraint. One well-crafted shadow or gradient elevates a component. A dozen competing ones create noise. Master the techniques, then use them purposefully.