Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
background-image property!Straight line transition
Circular transition
Rotational transition
Linear gradients transition colors along a straight line in any direction.
/* Top to bottom (default) */
background: linear-gradient(blue, red);
/* Direction keywords */
background: linear-gradient(to right, blue, red);
background: linear-gradient(to bottom right, blue, red);
/* Angle in degrees */
background: linear-gradient(45deg, blue, red);
/* Multiple colors */
background: linear-gradient(red, yellow, green);
/* Color stops (positions) */
background: linear-gradient(red 0%, yellow 50%, green 100%);Direction can be: to top,to right, or an angle like45deg
Top to Bottom
linear-gradient(#667eea, #764ba2)Left to Right
linear-gradient(to right, #667eea, #764ba2)45° Diagonal
linear-gradient(45deg, #667eea, #764ba2)Three Colors
linear-gradient(red, yellow, lime)<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🎨 CSS Gradient Gallery</h1>
<div class="grid">
<div class="gradient-card gradient1">
Sunset
<span class="label">linear-gradient(135deg, ...)</span>
</div>
<div class="gradient-card gradient2">
Pink Flamingo
<span class="label">to right</span>
</div>
<div class="gradient-card gradient3">
Blue Sky
<span class="label">120deg angle</span>
</div>
<div class="gradient-card gradient4">
Peachy
<span class="label">to top</span>
</div>
<div class="gradient-card gradient5">
Cotton Candy
<span class="label">Soft pastels</span>
</div>
<div class="gradient-card gradient6">
Warm Flame
<span class="label">Pink to yellow</span>
</div>
<div class="gradient-card gradient7">
Radial Burst
<span class="label">radial-gradient</span>
</div>
<div class="gradient-card gradient8">
Corner Radial
<span class="label">circle at top left</span>
</div>
<div class="gradient-card gradient9">
Rainbow
<span class="label">4 colors</span>
</div>
<div class="gradient-card gradient10">
Tropical
<span class="label">3 vibrant colors</span>
</div>
<div class="gradient-card gradient11">
Stripes
<span class="label">repeating-linear</span>
</div>
<div class="gradient-card gradient12">
Spinner
<span class="label">conic-gradient</span>
</div>
</div>
</div>
</body>
</html>Loading preview...
Radial gradients radiate outward from a center point in a circular or elliptical shape.
/* Simple radial */
background: radial-gradient(blue, red);
/* Shape and position */
background: radial-gradient(circle, blue, red);
background: radial-gradient(circle at top left, blue, red);
/* Size keywords */
background: radial-gradient(circle closest-side, blue, red);Center
Top Left
Ellipse
Conic gradients rotate colors around a center point - perfect for pie charts and loading spinners!
/* Simple conic */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* With starting angle */
background: conic-gradient(from 45deg, red, yellow, blue);
/* Pie chart example */
background: conic-gradient(
#667eea 0deg 120deg,
#764ba2 120deg 240deg,
#f093fb 240deg 360deg
);.gradient-text {
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}background-image