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

Syntax

css

selector {
  background: linear-gradient(direction, color1, color2);
  background: radial-gradient(shape, color1, color2);
  background: conic-gradient(color1, color2);
}

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.
Accepted values:
linear-gradient(direction, colors) — straight line, e.g. to right or 45deg
radial-gradient(shape, colors) — circular or elliptical
conic-gradient(colors) — colors rotate around a center
repeating-linear-gradient() — tiles the gradient
color stop — a color followed by a position such as red 30%

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.
Accepted values:
radial-gradient(color, color) — default ellipse from the center
circle — forces a circular shape
ellipse — the default shape
closest-side | closest-corner | farthest-side | farthest-corner — sets the gradient size (default farthest-corner)
at <position> — moves the center (e.g. at top left)

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.
Accepted values:
conic-gradient(color, color) — colors sweep around a center point
from <angle> — rotates the starting angle
at <position> — moves the center
<color> <angle> — color stop at a given angle or percentage

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.
Accepted values:
repeating-linear-gradient(...) — tiles a linear gradient
repeating-radial-gradient(...) — tiles a radial gradient
repeating-conic-gradient(...) — tiles a conic gradient
<color> <length> — the final stop length sets the repeat interval

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.
Accepted values:
background: linear-gradient(...) — the gradient fill
background-clip: text — clips the background to the glyphs
webkit-background-clip: text — prefixed form for older WebKit/Blink
color: transparent — reveals the clipped background

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>

Live Example

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

CSS Gradients

The Linear Gradient

The Radial Gradient

The Conic Gradient

Repeating Gradients

Text Gradients

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code