CSS Gradients

Imagine painting a canvas. If you use standard colors, you paint solid blocks of blue or red. While bold, the flat color blocks can look a bit simple. Now, imagine using a soft color blend. You blend your blue paint smoothly into red, creating a beautiful gradient transitions. Gradients are those smooth color blends. By using different gradient patterns, you can blend colors horizontally, radially, or in circles, creating gorgeous, professional backgrounds without needing to load heavy image files.

In this page:

The Linear Gradient
The Radial Gradient
The Conic Gradient
Repeating Gradients
Text Gradients

The Linear Gradient

Linear gradients blend colors along a straight, directional axis. You can define the direction of the color blend using degrees (like 90deg) or simple direction keywords (like 'to right').

Note: Use linear gradients as background-image properties, as browsers treat gradients as image assets natively.

Warning: Avoid blending contrasting complementary colors directly without intermediate stops, as it can create a muddy gray transition area.

Example: The Linear Gradient

css

<style>
.box {
  height: 100px;
  background: linear-gradient(90deg, red, blue);
}
</style>
<div class="box"></div>

The Radial Gradient

Radial gradients blend colors outward in concentric circles or ellipses, starting from a central point and fading smoothly toward the outer edges of the container. By default the circles or ellipses start at the center of the element, though you can reposition that starting point.

Note: Use radial gradients to create beautiful glowing spheres or soft spotlight background effects.

Warning: Radial gradients can look stretched if applied to long, non-square container layouts.

Example: The Radial Gradient

css

<style>
.box {
  height: 100px;
  background: radial-gradient(circle, yellow, orange);
}
</style>
<div class="box"></div>

The Conic Gradient

Conic gradients blend colors around a central 360-degree rotation axis, looking exactly like a color wheel or a pie chart section from above. This makes conic gradients ideal for building progress rings, color pickers, or pie-chart-style visualizations in pure CSS.

Note: Use conic gradients to build clean CSS pie charts, progress rings, or abstract color wheels easily.

Warning: Conic gradients are a newer CSS standard, so check compatibility before using them on legacy projects.

Example: The Conic Gradient

css

<style>
.box {
  height: 100px;
  background: conic-gradient(red, yellow, green, blue, red);
}
</style>
<div class="box"></div>

Repeating Gradients

Repeating gradients allow you to repeat your color blends infinitely across your container, making it easy to create striped patterns, badges, or custom textures with just a few lines of code.

Note: Use repeating-linear-gradient to create classic progress bar stripes or warning banners easily.

Warning: Ensure your color transitions are styled cleanly to prevent your striped patterns from looking blurry.

Example: Repeating Gradients

css

<style>
.box {
  height: 100px;
  background: repeating-linear-gradient(45deg, red, red 10px, white 10px, white 20px);
}
</style>
<div class="box"></div>

Text Gradients

To apply a beautiful color blend to your webpage text, you can use background-clip: text to mask a background gradient inside your text characters, keeping your typography looking clean and modern.

Note: Always set the text color property to transparent (color: transparent) to allow the background gradient to show through.

Warning: Some older browsers require vendor prefixes (like -webkit-background-clip) to display text gradients correctly.

Example: Text Gradients

css

<style>
h1 {
  background: linear-gradient(90deg, purple, orange);
  background-clip: text;
  color: transparent;
}
</style>
<h1>Gradient Text</h1>

Common Mistakes

Applying gradients to the CSS color or background-color properties, which browsers ignore; always use background-image.
Forgetting to set color: transparent when attempting to style text gradients.
Writing linear gradient angles without units (e.g., writing linear-gradient(90, red, blue) without deg).

Chapter Summary

CSS gradients blend colors smoothly to create high-performance backgrounds without loading heavy image files.
Blend colors linearly along a straight line using linear-gradient(), or radially from a center point using radial-gradient().
Use repeating-linear-gradient to create striped patterns, and background-clip: text to apply color gradients directly to text.

Browser Support

Standard linear, radial, and conic gradient properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Relative Units Next Lesson → CSS Shadows