Gradients Summary
CSS provides linear, radial, and conic gradients, all composable with background layering. Use them for backgrounds, text, borders, patterns, progress bars, and overlays — all without images.
CSS
Beginner
3 min read
CSS Gradients Summary
Example
/* Three gradient types at a glance */
.linear { background: linear-gradient(135deg, #667eea, #764ba2); }
.radial { background: radial-gradient(circle at center, #4fc3f7, #0d47a1); }
.conic { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border-radius: 50%; } Pro Tip
Layer multiple gradients in one background declaration using commas.