Skip to content
Laviyx Learn

Try

CSS course menu

CSS Gradients: linear-gradient, radial-gradient and conic-gradient

Create CSS gradients without images: linear-gradient with angles and colour stops, hard stops for stripes, radial-gradient, conic-gradient for pie charts, repeating gradients, and gradient text.

Beginner4 min readUpdated
On this page

A gradient is a smooth transition between colours. In CSS, gradients are images generated by the browser, so they are used wherever an image can go, usually background or background-image. They scale to any size and need no download.

linear-gradient#

CSS
.g { height: 60px; margin-bottom: 8px; border-radius: 8px; color: white; padding: 6px; font: 13px monospace; }
HTML
<div class="g" style="background: linear-gradient(#2f5fe0, #9b5de5)">top to bottom (default)</div>
<div class="g" style="background: linear-gradient(to right, #ff7e5f, #feb47b)">to right</div>
<div class="g" style="background: linear-gradient(135deg, #11998e, #38ef7d)">135deg</div>
Result
  • The direction is a keyword (to right, to bottom left) or an angle (0deg points up, 90deg points right).
  • Then list two or more colours.

Colour stops#

Each colour can have a position:

CSS
.g { height: 50px; margin-bottom: 8px; border-radius: 8px; }
HTML
<div class="g" style="background: linear-gradient(to right, red, orange 20%, yellow 40%, green 60%, blue 80%, violet)"></div>
<div class="g" style="background: linear-gradient(to right, #2f5fe0 50%, #ffd34d 50%)"></div>
Result

When two stops share a position, the change is instant: a hard stop. That is how you draw stripes and split backgrounds.

radial-gradient#

Spreads out from a point:

CSS
.r { display: inline-block; width: 140px; height: 120px; margin: 4px; border-radius: 8px; }
HTML
<div class="r" style="background: radial-gradient(#ffd34d, #e8590c)"></div>
<div class="r" style="background: radial-gradient(circle at 30% 30%, white, #2f5fe0 60%)"></div>
<div class="r" style="background: radial-gradient(circle, transparent 40%, #11998e 41%)"></div>
Result

The default shape is an ellipse that fits the box; circle and at x y change the shape and centre.

conic-gradient#

Rotates colours around a centre point, like a colour wheel. With hard stops, it draws a pie chart:

CSS
.pie {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(#2f5fe0 0 45%, #ffd34d 45% 75%, #e8590c 75% 100%);
}
HTML
<div class="pie" role="img" aria-label="Pie chart: 45% blue, 30% yellow, 25% orange"></div>
Result

A chart drawn with CSS is just a picture to assistive technology, so give it a text alternative, as with aria-label here.

Repeating gradients#

repeating-linear-gradient repeats its stops to fill the box, which makes patterns:

CSS
.stripes {
  height: 60px;
  background: repeating-linear-gradient(45deg, #ffd34d 0 12px, #222 12px 24px);
}
HTML
<div class="stripes"></div>
Result

Gradient text#

Clip the background to the shape of the text:

CSS
.fancy {
  font: 800 40px system-ui, sans-serif;
  background: linear-gradient(90deg, #2f5fe0, #e8590c);
  background-clip: text;
  color: transparent;
}
HTML
<h1 class="fancy">Laviyx Learn</h1>
Result

Check that gradient text still has enough contrast with the page background across its whole range.

Practice#

Practice exercise

Create a progress bar that is 70% complete using a single linear-gradient with hard stops: green for the first 70% and light grey for the rest, with rounded ends.

Show solution
CSS
.progress {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(to right, #2f9e44 70%, #e9ecef 70%);
}
HTML
<div class="progress" role="img" aria-label="70% complete"></div>
Result

For a real progress indicator, the HTML <progress value="70" max="100"> element is the semantic choice; it can be styled too.

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Backgrounds: background-color, background-image, size, position and repeatLearn CSS backgrounds: background-color, background-image, background-size cover and contain, background-position, background-repeat, background-attachment, multiple backgrounds, the background shorthand, and text readability over images.Beginner6 min readCSSCSS Colors: Names, Hex, RGB, HSL, OKLCH, Transparency and ContrastLearn every way to write colours in CSS: named colours, hex codes, rgb(), hsl(), oklch(), transparency with alpha and opacity, currentColor, and how to choose accessible colour contrast.Beginner5 min readCSSCSS Shadows, Opacity and Filters: box-shadow, text-shadow, filter and backdrop-filterAdd depth and visual effects with CSS: box-shadow (offsets, blur, spread, inset, layered shadows), text-shadow, opacity, filter functions such as blur, grayscale and brightness, drop-shadow, and frosted glass with backdrop-filter.Intermediate5 min read