CSS gradients display smooth color transitions between two or more specified colors without using image files. Browsers support Linear, Radial, and Conic gradient types.
Gradients are declared as background-image values:
/* 1. Linear Gradient (Directional: angle or keywords) */
.bg-linear {
background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
/* 2. Radial Gradient (Circular out from center) */
.bg-radial {
background-image: radial-gradient(circle at center, #38bdf8 0%, #0f172a 70%);
}
/* 3. Conic Gradient (Rotational color wheel) */
.bg-conic {
background-image: conic-gradient(from 0deg, #38bdf8, #34d399, #38bdf8);
}
Key features:
to right, 135deg, to bottom).linear-gradient(to right, red, yellow, green)).flowchart LR
A["Linear Gradient"] --> B["Directional Axis (135deg / to right)"]
C["Radial Gradient"] --> D["Circular Expansion from Center Point"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Gradients Demonstration</title>
<style>
.gradient-banner {
background-image: linear-gradient(135deg, #1e293b 0%, #2563eb 100%);
padding: 3rem 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<div class="gradient-banner">
<h1 style="margin: 0;">Modern Linear Gradient Banner</h1>
<p>CSS gradients generate smooth resolution-independent color backgrounds without image assets!</p>
</div>
</body>
</html>
135deg for subtle diagonal gradients: Diagonal gradients look more dynamic than flat top-to-bottom gradients.Create a CSS class .gradient-btn set with background-image: linear-gradient(to right, #2563eb, #38bdf8);!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.