CSS Gradients Complete Guide - Linear, Radial, Conic & Patterns

Linear Gradients

Create smooth color transitions along a straight line. The most common gradient type.

Basic Syntax

/* Basic linear gradient (top to bottom by default) */
.element {
  background: linear-gradient(#667eea, #764ba2);
}

/* Full syntax */
/* linear-gradient(direction, color-stop1, color-stop2, ...) */
.element {
  background: linear-gradient(to right, #667eea, #764ba2);
}

linear-gradient(#667eea, #764ba2)

Direction Keywords

/* Direction keywords */
.element {
  background: linear-gradient(to top, #667eea, #764ba2);
  background: linear-gradient(to bottom, #667eea, #764ba2);  /* default */
  background: linear-gradient(to left, #667eea, #764ba2);
  background: linear-gradient(to right, #667eea, #764ba2);
}

/* Diagonal directions */
.element {
  background: linear-gradient(to top left, #667eea, #764ba2);
  background: linear-gradient(to top right, #667eea, #764ba2);
  background: linear-gradient(to bottom left, #667eea, #764ba2);
  background: linear-gradient(to bottom right, #667eea, #764ba2);
}

to top

to bottom

to left

to right

to bottom right

to top left

Angle Values

/* Angle values (0deg = to top, rotates clockwise) */
.element {
  background: linear-gradient(0deg, #667eea, #764ba2);    /* to top */
  background: linear-gradient(45deg, #667eea, #764ba2);   /* diagonal */
  background: linear-gradient(90deg, #667eea, #764ba2);   /* to right */
  background: linear-gradient(135deg, #667eea, #764ba2);  /* diagonal */
  background: linear-gradient(180deg, #667eea, #764ba2);  /* to bottom */
  background: linear-gradient(270deg, #667eea, #764ba2);  /* to left */
}

/* Other angle units */
.element {
  background: linear-gradient(0.25turn, #667eea, #764ba2);  /* 90deg */
  background: linear-gradient(100grad, #667eea, #764ba2);   /* 90deg */
}

45deg

90deg

135deg

180deg

270deg

Multiple Colors

/* Three colors */
.element {
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
}

/* Rainbow gradient */
.element {
  background: linear-gradient(
    90deg,
    #ff6b6b,
    #feca57,
    #48dbfb,
    #1dd1a1,
    #5f27cd
  );
}

/* Dark theme gradient */
.element {
  background: linear-gradient(180deg, #0f0c29, #302b63, #24243e);
}

3 colors

rainbow

dark theme

Radial Gradients

Create circular or elliptical gradients that radiate from a center point.

Basic Syntax

/* Basic radial gradient (ellipse by default) */
.element {
  background: radial-gradient(#667eea, #764ba2);
}

/* Circle shape */
.element {
  background: radial-gradient(circle, #667eea, #764ba2);
}

/* Full syntax */
/* radial-gradient(shape size at position, color-stops) */
.element {
  background: radial-gradient(circle at center, #667eea, #764ba2);
}

ellipse (default)

circle

Size Keywords

/* Size keywords */
.element {
  /* Gradient ends at closest side */
  background: radial-gradient(circle closest-side, #667eea, #764ba2);
  
  /* Gradient ends at farthest side */
  background: radial-gradient(circle farthest-side, #667eea, #764ba2);
  
  /* Gradient ends at closest corner */
  background: radial-gradient(circle closest-corner, #667eea, #764ba2);
  
  /* Gradient ends at farthest corner (default) */
  background: radial-gradient(circle farthest-corner, #667eea, #764ba2);
}

/* Explicit size */
.element {
  background: radial-gradient(circle 100px, #667eea, #764ba2);
  background: radial-gradient(ellipse 100px 50px, #667eea, #764ba2);
}

closest-side

farthest-side

closest-corner

farthest-corner

Position

/* Position keywords */
.element {
  background: radial-gradient(circle at top, #667eea, #764ba2);
  background: radial-gradient(circle at bottom, #667eea, #764ba2);
  background: radial-gradient(circle at left, #667eea, #764ba2);
  background: radial-gradient(circle at right, #667eea, #764ba2);
  background: radial-gradient(circle at center, #667eea, #764ba2);
}

/* Combined positions */
.element {
  background: radial-gradient(circle at top left, #667eea, #764ba2);
  background: radial-gradient(circle at bottom right, #667eea, #764ba2);
}

/* Percentage/pixel positions */
.element {
  background: radial-gradient(circle at 25% 25%, #667eea, #764ba2);
  background: radial-gradient(circle at 100px 50px, #667eea, #764ba2);
}

at top

at bottom

at left

at right

at center

at 25% 25%

Conic Gradients

Create color transitions that rotate around a center point, like a color wheel or pie chart.

Basic Syntax

/* Basic conic gradient */
.element {
  background: conic-gradient(#667eea, #764ba2, #f093fb, #667eea);
}

/* Full syntax */
/* conic-gradient(from angle at position, color-stops) */
.element {
  background: conic-gradient(from 0deg at center, #667eea, #764ba2);
}

conic-gradient(#667eea, #764ba2, #f093fb, #667eea)

Starting Angle & Position

/* Starting angle */
.element {
  background: conic-gradient(from 45deg, #667eea, #764ba2, #f093fb, #667eea);
  background: conic-gradient(from 90deg, #667eea, #764ba2, #f093fb, #667eea);
}

/* Custom position */
.element {
  background: conic-gradient(at 25% 25%, #667eea, #764ba2, #f093fb, #667eea);
  background: conic-gradient(at top left, #667eea, #764ba2, #f093fb, #667eea);
}

/* Both angle and position */
.element {
  background: conic-gradient(from 45deg at 25% 25%, #667eea, #764ba2, #f093fb, #667eea);
}

from 45deg

at 25% 25%

Pie Charts & Hard Stops

/* Pie chart with hard color stops */
.element {
  background: conic-gradient(
    #667eea 0deg 90deg,     /* 25% */
    #764ba2 90deg 180deg,   /* 25% */
    #f093fb 180deg 270deg,  /* 25% */
    #48dbfb 270deg 360deg   /* 25% */
  );
}

/* Using percentages */
.element {
  background: conic-gradient(
    #667eea 0% 25%,
    #764ba2 25% 50%,
    #f093fb 50% 75%,
    #48dbfb 75% 100%
  );
}

/* Donut chart (combine with radial) */
.element {
  background: 
    radial-gradient(circle, white 40%, transparent 41%),
    conic-gradient(#667eea 0% 40%, #764ba2 40% 70%, #f093fb 70% 100%);
}

pie chart (degrees)

hard stops (%)

Color Stops

Control where colors start and end in your gradients.

Color Stop Positioning

/* Even distribution (default) */
.element {
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  /* Same as: #667eea 0%, #764ba2 50%, #f093fb 100% */
}

/* Custom positions */
.element {
  /* Early middle color */
  background: linear-gradient(90deg, #667eea 0%, #764ba2 20%, #f093fb 100%);
  
  /* Late middle color */
  background: linear-gradient(90deg, #667eea 0%, #764ba2 80%, #f093fb 100%);
}

/* Using different units */
.element {
  background: linear-gradient(90deg, #667eea 0px, #764ba2 100px, #f093fb);
}

0%, 50%, 100%

0%, 20%, 100%

0%, 80%, 100%

Hard Color Stops

/* Hard stop (no transition) */
.element {
  background: linear-gradient(
    90deg,
    #667eea 0%,
    #667eea 50%,    /* Same color at same position = hard edge */
    #764ba2 50%,
    #764ba2 100%
  );
}

/* Shorthand for hard stops */
.element {
  background: linear-gradient(90deg, #667eea 50%, #764ba2 50%);
}

/* Multiple hard stops for stripes */
.element {
  background: linear-gradient(
    90deg,
    #667eea 0% 33.33%,
    #764ba2 33.33% 66.66%,
    #f093fb 66.66% 100%
  );
}

Hard stop at 50% (no transition)

Transparency & Color Hints

/* Transparent color stops */
.element {
  background: linear-gradient(
    90deg,
    #667eea,
    transparent,
    #764ba2
  );
}

/* RGBA for semi-transparency */
.element {
  background: linear-gradient(
    90deg,
    rgba(102, 126, 234, 1),
    rgba(102, 126, 234, 0)
  );
}

/* Color hint (midpoint) - controls transition speed */
.element {
  /* Transition midpoint at 75% instead of 50% */
  background: linear-gradient(90deg, #667eea, 75%, #764ba2);
}

Repeating Gradients

Create seamless patterns by repeating gradient color stops.

Repeating Linear

/* Basic repeating linear */
.element {
  background: repeating-linear-gradient(
    45deg,
    #667eea 0px,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
  );
}

/* Stripes pattern */
.element {
  background: repeating-linear-gradient(
    90deg,
    #667eea 0px,
    #667eea 10px,
    transparent 10px,
    transparent 20px
  );
}

diagonal stripes

horizontal

vertical

diagonal

Repeating Radial

/* Concentric circles */
.element {
  background: repeating-radial-gradient(
    circle,
    #667eea 0px,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
  );
}

/* Bullseye pattern */
.element {
  background: repeating-radial-gradient(
    circle at center,
    #667eea 0px,
    #667eea 5px,
    transparent 5px,
    transparent 10px
  );
}

repeating-radial-gradient

Repeating Conic

/* Sunburst pattern */
.element {
  background: repeating-conic-gradient(
    #667eea 0deg 10deg,
    #764ba2 10deg 20deg
  );
}

/* Color wheel segments */
.element {
  background: repeating-conic-gradient(
    from 0deg,
    #667eea 0deg 30deg,
    #764ba2 30deg 60deg,
    #f093fb 60deg 90deg
  );
}

repeating-conic-gradient

Gradient Patterns

Create complex patterns by combining multiple gradients with background-size.

Checkerboard

.checkerboard {
  background:
    linear-gradient(45deg, #667eea 25%, transparent 25%),
    linear-gradient(-45deg, #667eea 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #667eea 75%),
    linear-gradient(-45deg, transparent 75%, #667eea 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  background-color: #764ba2;
}

checkerboard pattern

Dots Pattern

.dots {
  background: radial-gradient(circle, #667eea 3px, transparent 3px);
  background-size: 20px 20px;
  background-color: #1a1a2e;
}

dots pattern

Grid Pattern

.grid {
  background:
    linear-gradient(to right, rgba(102, 126, 234, 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(102, 126, 234, 0.3) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #1a1a2e;
}

grid pattern

Zigzag Pattern

.zigzag {
  background: 
    linear-gradient(135deg, #667eea 25%, transparent 25%) -20px 0,
    linear-gradient(225deg, #667eea 25%, transparent 25%) -20px 0,
    linear-gradient(315deg, #667eea 25%, transparent 25%),
    linear-gradient(45deg, #667eea 25%, transparent 25%);
  background-size: 40px 40px;
  background-color: #764ba2;
}

zigzag pattern

Gradient Text

Apply gradients to text using background-clip.

Basic Gradient Text

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

/* With fallback for older browsers */
.gradient-text {
  color: #667eea; /* Fallback */
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated gradient text */
.animated-text {
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Gradient Text

background-clip: text

Browser Support: The -webkit- prefix is still needed for Safari. Always include both prefixed and unprefixed properties.

Gradient Borders

Multiple techniques to create gradient borders on elements.

Pseudo-element Method (Recommended)

.gradient-border {
  position: relative;
  background: #1a1a2e;
  border-radius: 8px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px; /* Border width */
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

Pseudo-element gradient border

::before with mask

Border-image Method

/* Simple but no border-radius support */
.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

/* With slice value */
.gradient-border {
  border: 4px solid;
  border-image-source: linear-gradient(135deg, #667eea, #764ba2);
  border-image-slice: 1;
}

Border-image gradient (no radius)

border-image

Background Method

/* Double background technique */
.gradient-border {
  background: 
    linear-gradient(#1a1a2e, #1a1a2e) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
  border: 2px solid transparent;
  border-radius: 8px;
}

Layering Gradients

Combine multiple gradients using CSS multiple backgrounds.

Basic Layering

/* Multiple gradients (first listed = on top) */
.element {
  background:
    linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, transparent 50%),
    linear-gradient(225deg, rgba(118, 75, 162, 0.8) 0%, transparent 50%),
    linear-gradient(315deg, rgba(240, 147, 251, 0.8) 0%, transparent 50%),
    linear-gradient(45deg, rgba(72, 219, 251, 0.8) 0%, transparent 50%);
  background-color: #1a1a2e;
}

4 layered gradients

Mesh Gradient Effect

.mesh-gradient {
  background:
    radial-gradient(at 40% 20%, #667eea 0px, transparent 50%),
    radial-gradient(at 80% 0%, #764ba2 0px, transparent 50%),
    radial-gradient(at 0% 50%, #f093fb 0px, transparent 50%),
    radial-gradient(at 80% 50%, #48dbfb 0px, transparent 50%),
    radial-gradient(at 0% 100%, #667eea 0px, transparent 50%),
    radial-gradient(at 80% 100%, #764ba2 0px, transparent 50%);
  background-color: #1a1a2e;
}

mesh gradient effect

Gradient Over Image

/* Overlay gradient on image */
.hero {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    url('image.jpg') center/cover;
}

/* Colorize image with gradient */
.colorized {
  background:
    linear-gradient(
      135deg,
      rgba(102, 126, 234, 0.8),
      rgba(118, 75, 162, 0.8)
    ),
    url('image.jpg') center/cover;
  background-blend-mode: overlay;
}

Advanced Techniques

Creative uses of gradients for UI effects and interactions.

Animated Gradient Background

.animated-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Gradient Hover Effect

.gradient-hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.5s ease;
}

.gradient-hover:hover {
  background-position: 100% 50%;
}

Hover me

background-position transition

Gradient Buttons

/* Solid gradient button */
.btn-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

/* Gradient outline button */
.btn-outline {
  background: 
    linear-gradient(#1a1a2e, #1a1a2e) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
  border: 2px solid transparent;
  color: white;
  transition: all 0.3s;
}

.btn-outline:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Shine effect button */
.btn-shine {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-shine:hover::before {
  left: 100%;
}

Gradient Mask

/* Fade out effect */
.fade-bottom {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 60%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 60%,
    transparent 100%
  );
}

/* Spotlight effect */
.spotlight {
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 30%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle at center,
    black 30%,
    transparent 70%
  );
}

CSS Variables with Gradients

:root {
  --gradient-start: #667eea;
  --gradient-end: #764ba2;
  --gradient-angle: 135deg;
}

.dynamic-gradient {
  background: linear-gradient(
    var(--gradient-angle),
    var(--gradient-start),
    var(--gradient-end)
  );
}

/* Change with JavaScript */
/* element.style.setProperty('--gradient-start', '#ff6b6b'); */

/* Theme variants */
[data-theme="sunset"] {
  --gradient-start: #f093fb;
  --gradient-end: #f5576c;
}

[data-theme="ocean"] {
  --gradient-start: #667eea;
  --gradient-end: #48dbfb;
}

Performance Tip: Animating background-position or background-size is more performant than animating the gradient colors directly, as it doesn't trigger repaint on every frame.

CSS Gradients Guide

Linear Gradients

Basic Syntax

Direction Keywords

Angle Values

Multiple Colors

Radial Gradients

Basic Syntax

Size Keywords

Position

Conic Gradients

Basic Syntax

Starting Angle & Position

Pie Charts & Hard Stops

Color Stops

Color Stop Positioning

Hard Color Stops

Transparency & Color Hints

Repeating Gradients

Repeating Linear

Repeating Radial

Repeating Conic

Gradient Patterns

Checkerboard

Dots Pattern

Grid Pattern

Zigzag Pattern

Gradient Text

Basic Gradient Text

Gradient Borders

Pseudo-element Method (Recommended)

Border-image Method

Background Method

Layering Gradients

Basic Layering

Mesh Gradient Effect

Gradient Over Image

Advanced Techniques

Animated Gradient Background

Gradient Hover Effect

Gradient Buttons

Gradient Mask

CSS Variables with Gradients

Related Tools

Gradient Mixer

Color Contrast Checker

Get the Weekly Drop