Intermediate12 min read

Gradients & Effects

Create rich visual depth with linear, radial, and conic gradients, plus filter effects for blur, color manipulation, and compositing.

Linear Gradients

Linear gradients transition colors along a straight line. Specify an angle or direction keyword (to right, to bottom right) followed by color stops. Color stops can include positions: red 0%, blue 100%.

Multi-stop gradients create richer effects than two-color blends. Use three or more stops with close values for smooth, professional-looking backgrounds.

Use 135deg or to bottom right for natural diagonal gradients
Repeating-linear-gradient creates stripe patterns
Gradients can be layered with background shorthand

.hero {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

.progress-bar {
  background: linear-gradient(
    to right,
    #22c55e var(--progress, 0%),
    #e2e8f0 var(--progress, 0%)
  );
}

Radial and Conic Gradients

Radial gradients radiate from a center point — ideal for spotlights, vignettes, and circular color washes. Conic gradients sweep around a center point — perfect for pie charts, color wheels, and loading indicators.

Combine radial gradients with background-size and background-position to create subtle mesh gradient effects popular in modern UI design.

.spotlight {
  background: radial-gradient(
    circle at 30% 20%,
    rgba(99, 102, 241, 0.3) 0%,
    transparent 60%
  );
}

.pie-chart {
  background: conic-gradient(
    #3b82f6 0deg 120deg,
    #22c55e 120deg 240deg,
    #f97316 240deg 360deg
  );
  border-radius: 50%;
}

Filter Effects

CSS filters apply graphical effects like blur, brightness, contrast, grayscale, and drop-shadow. Filters are GPU-accelerated and can be transitioned for smooth hover effects.

Backdrop-filter applies filters to the area behind an element — essential for frosted glass effects on overlays and navigation bars.

backdrop-filter requires a semi-transparent background to be visible
drop-shadow follows the element alpha shape unlike box-shadow
Combine filter: brightness() contrast() for image hover effects

.glass-panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

img.desaturate:hover {
  filter: grayscale(0);
  transition: filter 300ms ease;
}
img.desaturate { filter: grayscale(1); }

Blend Modes and Mix-blend-mode

Background-blend-mode blends background layers together. Mix-blend-mode blends an element with its backdrop. These create color overlay effects without extra DOM elements.

Use mix-blend-mode: multiply on text over images for readable headlines. Use background-blend-mode: overlay to tint photographs with brand colors.

.image-overlay {
  background-image: url('/photo.jpg'), linear-gradient(#3b82f6, #1d4ed8);
  background-blend-mode: overlay;
  background-size: cover;
}

Box Shadow and Layered Depth

Box-shadow creates depth without images. Layer multiple shadows for realistic elevation — a tight dark shadow plus a wide soft shadow mimics physical lighting.

Use consistent shadow scales across your design system. Define shadow tokens as CSS variables so elevation levels stay consistent between cards, modals, and dropdowns.