Components & UI

CSS Gradients

Smooth color transitions for backgrounds, borders, and text.

1Linear Gradient

Transitions colors along a straight line. Specify an angle or direction.

Example Code

.btn {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}

Radiates outward from a center point — great for spotlights and orbs.

Example Code

.glow {
  background: radial-gradient(circle at center,
    rgba(79,70,229,0.6), transparent 70%);
}

Conic gradients sweep around a point. Add multiple color stops for richer effects.

Example Code

.pie {
  background: conic-gradient(#4f46e5 0 25%, #ec4899 0 50%, #f59e0b 0 75%, #10b981 0 100%);
  border-radius: 50%;
}

Finished reading?

Mark this topic as complete to track progress.