Linear Gradients

The linear-gradient() function creates a color transition along a straight line. You control the direction (angle or keyword) and color stops.

/* Basic two-color gradient */
background: linear-gradient(135deg, #667eea, #764ba2); /* Three-color sunset */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe); /* With specific stop positions */
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 50%, #7209b7 100%); /* Hard color stops (no transition) */
background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%);

Radial Gradients

Radial gradients radiate outward from a center point. Control shape (circle or ellipse) and position:

/* Basic circle */
background: radial-gradient(circle, #667eea, #764ba2); /* Positioned spotlight */
background: radial-gradient(circle at 30% 70%, #ffecd2, #fcb69f); /* Ellipse shape */
background: radial-gradient(ellipse at center, #a8edea 0%, #fed6e3 100%);

Conic Gradients

Conic gradients sweep around a center point, like a pie chart or color wheel:

/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); /* Pie chart effect */
background: conic-gradient(#4facfe 0% 25%, #00f2fe 25% 50%, #43e97b 50% 75%, #fa709a 75%); /* Subtle sweep */
background: conic-gradient(from 45deg, #12c2e9, #c471ed, #f64f59);

Gradient Text

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

Gradient Borders

.gradient-border { border: 3px solid transparent; background-image: linear-gradient(white, white), linear-gradient(135deg, #667eea, #764ba2); background-origin: border-box; background-clip: padding-box, border-box;
}

Animated Gradients

.animated-gradient { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientShift 15s ease infinite;
} @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}
  • Ocean Blue: linear-gradient(135deg, #667eea, #764ba2)
  • Sunset: linear-gradient(135deg, #f093fb, #f5576c)
  • Forest: linear-gradient(135deg, #11998e, #38ef7d)
  • Fire: linear-gradient(135deg, #f12711, #f5af19)
  • Night: linear-gradient(135deg, #0f0c29, #302b63, #24243e)
  • Coral: linear-gradient(135deg, #ff9a9e, #fecfef)

Gradient Best Practices

  • Use 2-3 colors maximum for clean, professional gradients
  • Keep angles consistent across your design system (135deg is popular)
  • Test contrast ratios when using gradients behind text
  • Provide a solid fallback color before the gradient declaration
  • Use CSS custom properties for reusable gradient values

Build and preview gradients visually with our CSS Gradient Generator — adjust colors, angles, and stops with a live preview and copy the CSS instantly.