Complete CSS Gradient Guide

Gradients are one of the most commonly used CSS effects in modern web design. Instagram, Stripe, Spotify... they all express their brand identity with gradients.

In this guide, we'll explore all types of CSS gradients and practical applications with code examples.

---

Understanding Gradient Basics

Gradient Types

Basic Syntax

.element {
  background: linear-gradient(direction, color1, color2, ...);
}

---

Linear Gradient

Direction Settings

/* Keyword direction */
.to-right { background: linear-gradient(to right, #6366f1, #8b5cf6); }
.to-bottom { background: linear-gradient(to bottom, #6366f1, #8b5cf6); }
.to-top-right { background: linear-gradient(to top right, #6366f1, #8b5cf6); }

/* Angle direction */
.angle-45 { background: linear-gradient(45deg, #6366f1, #8b5cf6); }
.angle-90 { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.angle-180 { background: linear-gradient(180deg, #6366f1, #8b5cf6); }

Direction Keywords Summary

Color Stops

/* Equal distribution (auto) */
.auto {
  background: linear-gradient(#ff0000, #00ff00, #0000ff);
  /* 0%, 50%, 100% */
}

/* Explicit positions */
.explicit {
  background: linear-gradient(
    #ff0000 0%,
    #ff0000 30%,    /* 0-30%: Keep red */
    #00ff00 30%,    /* Sharp transition at 30% */
    #00ff00 70%,    /* 30-70%: Keep green */
    #0000ff 70%     /* Sharp transition at 70% */
  );
}

/* Hard stop (sharp transition) */
.hard-stop {
  background: linear-gradient(
    #6366f1 50%,
    #8b5cf6 50%
  );
}

Practical Example: Trendy Gradients

/* Instagram style */
.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

/* Stripe style */
.stripe {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

/* Glassmorphism background */
.glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
}

---

Radial Gradient

Basic Syntax

.radial {
  background: radial-gradient(shape size at position, color1, color2, ...);
}

Shape

/* Circle */
.circle {
  background: radial-gradient(circle, #6366f1, #8b5cf6);
}

/* Ellipse (default) */
.ellipse {
  background: radial-gradient(ellipse, #6366f1, #8b5cf6);
}

Size

.size-demo {
  background: radial-gradient(circle closest-side at 30% 30%, #6366f1, #8b5cf6);
}

Position

/* Keyword position */
.top-left {
  background: radial-gradient(circle at top left, #6366f1, #8b5cf6);
}

/* Percentage position */
.percent {
  background: radial-gradient(circle at 30% 70%, #6366f1, #8b5cf6);
}

/* Pixel position */
.pixel {
  background: radial-gradient(circle at 100px 50px, #6366f1, #8b5cf6);
}

Practical Example: Spotlight Effect

.spotlight {
  background:
    radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(99, 102, 241, 0.3) 0%,
      transparent 50%
    ),
    #1a1a2e;
}

// Spotlight following the mouse
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty('--mouse-x', `${x}%`);
  document.documentElement.style.setProperty('--mouse-y', `${y}%`);
});

---

Conic Gradient

Basic Syntax

.conic {
  background: conic-gradient(from angle at position, color1, color2, ...);
}

Basic Examples

/* Color wheel */
.color-wheel {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* Pie chart */
.pie-chart {
  background: conic-gradient(
    #6366f1 0deg 90deg,      /* 25% */
    #8b5cf6 90deg 180deg,    /* 25% */
    #a78bfa 180deg 270deg,   /* 25% */
    #c4b5fd 270deg 360deg    /* 25% */
  );
  border-radius: 50%;
}

Starting Angle and Position

/* Change starting angle */
.from-angle {
  background: conic-gradient(
    from 45deg,
    #6366f1, #8b5cf6
  );
}

/* Change center position */
.at-position {
  background: conic-gradient(
    at 30% 70%,
    #6366f1, #8b5cf6
  );
}

Practical Example: Donut Chart

.donut-chart {
  background: conic-gradient(
    #6366f1 0deg 120deg,
    #8b5cf6 120deg 240deg,
    #a78bfa 240deg 360deg
  );
  border-radius: 50%;
  position: relative;
}

.donut-chart::after {
  content: '';
  position: absolute;
  inset: 25%;
  background: white;
  border-radius: 50%;
}

---

Repeating Gradients

Repeating Linear

/* Stripe pattern */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #8b5cf6 10px,
    #8b5cf6 20px
  );
}

/* Warning tape */
.warning-tape {
  background: repeating-linear-gradient(
    45deg,
    #fbbf24,
    #fbbf24 20px,
    #1f2937 20px,
    #1f2937 40px
  );
}

Repeating Radial

/* Ripple pattern */
.ripple {
  background: repeating-radial-gradient(
    circle at center,
    #6366f1 0px,
    #6366f1 5px,
    transparent 5px,
    transparent 20px
  );
}

Repeating Conic

/* Fan pattern */
.fan {
  background: repeating-conic-gradient(
    #6366f1 0deg 10deg,
    #8b5cf6 10deg 20deg
  );
}

---

Multiple Gradient Layers

Stacking Layers

.layered {
  background:
    linear-gradient(45deg, rgba(99, 102, 241, 0.5), transparent 50%),
    linear-gradient(-45deg, rgba(139, 92, 246, 0.5), transparent 50%),
    linear-gradient(to bottom, #1a1a2e, #16213e);
}

Gradient + Image

.overlay {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.8)
    ),
    url('/image.jpg') center/cover;
}

Practical Example: Mesh Gradient Effect

.mesh-gradient {
  background:
    radial-gradient(at 40% 20%, #6366f1 0px, transparent 50%),
    radial-gradient(at 80% 0%, #8b5cf6 0px, transparent 50%),
    radial-gradient(at 0% 50%, #a78bfa 0px, transparent 50%),
    radial-gradient(at 80% 50%, #c4b5fd 0px, transparent 50%),
    radial-gradient(at 0% 100%, #e9d5ff 0px, transparent 50%),
    radial-gradient(at 80% 100%, #fae8ff 0px, transparent 50%),
    #1e1b4b;
}

---

Animated Gradients

Position Animation

.animated-gradient {
  background: linear-gradient(
    270deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #c4b5fd
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

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

Hue Rotate Animation

.hue-rotate {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  animation: hue-rotate 5s linear infinite;
}

@keyframes hue-rotate {
  to { filter: hue-rotate(360deg); }
}

Smooth Color Transition with @property

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.smooth-rotate {
  --gradient-angle: 0deg;
  background: conic-gradient(
    from var(--gradient-angle),
    #6366f1, #8b5cf6, #6366f1
  );
  animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

---

Gradient Text

Basic Implementation

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Animated Text

.animated-text {
  background: linear-gradient(
    90deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #6366f1
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 3s linear infinite;
}

@keyframes text-shine {
  to { background-position: 300% 0; }
}

---

Gradient Border

clip-path Method

.gradient-border {
  position: relative;
  background: white;
  padding: 2rem;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: inherit;
}

border-image Method

.gradient-border-simple {
  border: 3px solid;
  border-image: linear-gradient(45deg, #6366f1, #8b5cf6) 1;
}

---

Performance Optimization

Utilizing GPU Acceleration

/* Animate with transform */
.optimized {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  transform: translateZ(0); /* Create GPU layer */
}

Alternative for Complex Gradients

/* Consider using images instead of many layers */
.complex {
  background: url('/gradient.webp') center/cover;
}

---

FAQ

Q1: Choosing gradient colors is hard. Any recommended combinations?

A: Check out popular gradient presets at Gradient Generator. Also, starting with similar color families (purple-blue, orange-pink) looks natural.

Q2: Do gradients work in IE?

A: IE11 supports linear-gradient and radial-gradient, but not conic-gradient. As of 2026, IE support has largely ended.

Q3: Do gradients affect bundle size?

A: CSS gradients are much lighter than images. Even complex gradients are expressed in just a few lines of CSS, with minimal impact on bundle size.

Q4: How do I set gradient transparency?

A: Use rgba() or hsla().

background: linear-gradient(rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));

Q5: My gradient animation is choppy.

A: Instead of background-position animation, animating CSS variables with @property is smoother. Or use filter: hue-rotate().

---

Conclusion

CSS Gradient Key Points:

1. Linear: Direction + color stops
2. Radial: Shape + size + position
3. Conic: Rotation angle + position
4. Multiple layers: Separated by commas, stacked top to bottom
5. Animation: background-position or @property

---

Related Tools