Gradients

🎨 CSS3+ 🟢 Chapter 31 of 49 📂 Phase 11: Backgrounds & Visual Effects 📅 2026 Edition

📌 Covered in this chapter: Linear Gradient · Direction · Color Stops · Radial · Conic · Gradient Backgrounds · Gradient Borders · Gradient Text · Overlays · Performance

Welcome to Chapter 31: Gradients — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1Linear & Radial Gradients

CSS▶ Try in Editor

.gradient-bg {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

.radial-bg {
  background: radial-gradient(circle at top left, #eff6ff, #dbeafe);
}

.conic-badge {
  background: conic-gradient(from 180deg, #2563eb, #7c3aed, #2563eb);
}

Color stops: linear-gradient(to right, red 0%, yellow 50%, green 100%)

2Gradient Borders, Text & Performance

CSS

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gradient-border {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #2563eb, #7c3aed) border-box;
}

Performance: CSS gradients GPU-friendly — large image backgrounds kante often faster. Complex animated gradients CPU use cheyochu.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026