CSS Gradients: From Basics to Advanced Techniques

CSS Gradients: From Basics to Advanced Techniques

Gradients add visual depth and brand personality to your UI. Modern CSS supports three gradient types with powerful control over stops, angles, and blending.

Linear Gradients

/* Basic: top to bottom */
background: linear-gradient(to bottom, #667eea, #764ba2);

/* Angled */
background: linear-gradient(135deg, #f093fb, #f5576c);

/* Multiple stops */
background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 50%, #00d2ff 100%);

Stop Positions

Control where each color begins and ends:

/* Hard color stop — no blending */
background: linear-gradient(90deg, red 50%, blue 50%);

/* Weighted blend */
background: linear-gradient(90deg, red 0% 30%, blue 70% 100%);

Radial Gradients

/* Circle from center */
background: radial-gradient(circle, #667eea, #764ba2);

/* Ellipse with position */
background: radial-gradient(ellipse at top left, #f093fb, transparent);

Size Keywords

closest-side — gradient ends at the nearest edge

farthest-corner — gradient extends to the farthest corner (default)

Conic Gradients

/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart */
background: conic-gradient(#4f46e5 0% 35%, #e11d48 35% 65%, #059669 65% 100%);

Practical Patterns

Mesh Gradient (Layered)

.mesh {
  background:
    radial-gradient(at 20% 80%, #7c3aed33 0%, transparent 50%),
    radial-gradient(at 80% 20%, #e11d4833 0%, transparent 50%),
    radial-gradient(at 50% 50%, #06b6d433 0%, transparent 50%),
    #09090b;
}

Text Gradient

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

Border Gradient

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

Performance

Gradients are rendered by the GPU and are very performant. They're better than using gradient images because they scale perfectly, add zero network requests, and can be animated.

Try It

Use our CSS Gradient Generator to visually build gradients with multiple stops, choose between linear/radial/conic, and copy the CSS.

Conclusion

Gradients are a powerful design tool. Layer radial gradients for mesh effects, use conic gradients for data visualization, and always build them visually first.