The best CSS gradient tools and techniques

The three gradient types

CSS offers three gradient functions, all usable in background:

Linear

background: linear-gradient(135deg, #3b82f6, #1d4ed8);

Radial

background: radial-gradient(circle, #3b82f6, #1d4ed8);

Conic

background: conic-gradient(from 0deg, #3b82f6, #9333ea, #3b82f6);

Gradient text

A classic: applying a gradient to text using the background clip.

.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Animating a gradient

By enlarging the background size and animating its position, you get a trendy moving gradient:

.animated {
  background: linear-gradient(270deg, #3b82f6, #9333ea, #ec4899);
  background-size: 600% 600%;
  animation: shift 8s ease infinite;
}
@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

Best practices

• Stick to two or three harmonious colors.
• Use the OKLCH space for transitions without dull zones.
• Check text contrast over a gradient.

Create your gradient

Our gradient generator covers all three types with a live preview, and our color converter helps you find the right OKLCH values.

Discover our free CSS tools