On this page

CSS Gradients (Linear, Radial, Conic)

Badar KhalilUpdated September 29, 2026 5 min read

What Are CSS Gradients?

CSS gradients are images generated by the browser that smoothly transition between two or more colors. They are used in background-image (and other places that accept an image), need no file download, and scale perfectly. Our focus keyword is CSS gradients, and this lesson covers linear-gradient, radial-gradient and conic-gradient, plus trending topics such as CSS gradient text, gradient borders, repeating gradients, CSS pie charts, mesh-style gradients, and interpolating in OKLCH for smoother colors.

1. linear-gradient()

A linear gradient moves along a straight line. Syntax: linear-gradient(direction, color-stop, color-stop, ...).

Default direction is to bottom (top to bottom).
Use keywords: to right, to bottom right.
Or angles: 45deg, 90deg (to right), 180deg (to bottom), 0deg (to top).

Code

background: linear-gradient(to right, #22c55e, #3b82f6);
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);

2. Color Stops and Hints

A color stop has a color and an optional position: red 20%.
Two stops at the same position make a hard edge (no blending): red 50%, blue 50%.
Two positions on one color: red 20% 40% makes a solid band.
A color hint is a lone percentage between stops (red, 30%, blue) that moves the midpoint of the transition.
Use transparent for fades. Modern browsers handle transparent correctly, blending in premultiplied alpha.

3. radial-gradient()

A radial gradient radiates from a center point. Syntax: radial-gradient(shape size at position, stops).

Shape: circle or ellipse (default).
Size: closest-side, farthest-corner (default), closest-corner, farthest-side, or explicit lengths.
Position: at center, at top left, at 30% 70%.

Code

background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 60%, #b45309);

4. conic-gradient()

A conic gradient rotates colors around a center point, like a color wheel or the sweep of a radar. Syntax: conic-gradient(from angle at position, stops). Stops use angles or percentages of a full circle.

Pie charts: hard stops such as #3b82f6 0 40%, #f59e0b 0 70%, #22c55e 0.
Color wheels: conic-gradient(red, yellow, lime, aqua, blue, magenta, red).
Checkerboards: repeating-conic-gradient with a small background-size.

5. Repeating Gradients

Use repeating-linear-gradient(), repeating-radial-gradient() and repeating-conic-gradient() to tile the color stops. They are ideal for stripes, rings and loading indicators.

6. Interpolation Color Space

By default gradients blend in sRGB, which can look gray or muddy in the middle (for example blue to yellow). You can choose the color space: linear-gradient(in oklch, #2563eb, #facc15) or in oklab. Add hue interpolation like in oklch longer hue for rainbow effects. This is a trending technique for vibrant, smooth gradients.

7. Popular Gradient Techniques

Gradient text

Use a gradient background with background-clip: text and a transparent text color.

Gradient borders

Layer two backgrounds: a solid fill clipped to padding-box and a gradient clipped to border-box, with a transparent border. Or use border-image (which does not work with rounded corners).

Overlays for text readability

linear-gradient(to top, rgb(0 0 0 / 70%), transparent) over a photo.

Mesh-like backgrounds

Stack several radial-gradient() layers with transparent ends over a base color for a soft, modern look.

Skeleton loaders

Animate background-position of a wide linear gradient to create a shimmer effect.

8. Performance and Accessibility

Gradients are cheap to render, but very large animated gradients can cost repaint time. Animate transform or background-position rather than changing the stops.
Check text contrast against the lightest and darkest parts of the gradient.
Provide a solid background-color fallback for old browsers.

Best Practices

Use two to three colors for clean gradients. More stops need more care.
Use OKLCH interpolation to avoid dull midpoints.
Store gradients in custom properties: --grad: linear-gradient(...).
Use hard stops for charts and stripes, soft stops for backgrounds.

Common Mistakes

Forgetting that 0deg points up, not right.
Using gradients with background-color only and expecting background-color: linear-gradient() to work. Gradients belong in background-image or the background shorthand.
Placing a color hint next to another hint, which is invalid.
Expecting border-image with a gradient to follow border-radius.

Summary

Linear gradients follow a line, radial gradients spread from a point and conic gradients sweep around a point. Add repeating variants, hard stops and OKLCH interpolation and you can build backgrounds, charts, patterns and loaders with pure CSS. Practice with the live examples below.

Try it Yourself HTML

<style>
  .g { display: inline-block; width: 150px; height: 90px; margin: 4px; color: #fff; font: 12px sans-serif; padding: 6px; border-radius: 8px; }
  .g1 { background: linear-gradient(#22c55e, #3b82f6); }
  .g2 { background: linear-gradient(to right, #f59e0b, #ef4444); }
  .g3 { background: linear-gradient(45deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%); }
  .g4 { background: linear-gradient(90deg, #0ea5e9 50%, #f97316 50%); }
</style>
<div class='g g1'>default (to bottom)</div>
<div class='g g2'>to right</div>
<div class='g g3'>45deg, 3 stops</div>
<div class='g g4'>hard stop at 50%</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .r { display: inline-block; width: 150px; height: 150px; margin: 4px; }
  .r1 { background: radial-gradient(circle, #fde047, #f97316); }
  .r2 { background: radial-gradient(circle at 30% 30%, #fff, #38bdf8 40%, #1e3a8a); border-radius: 50%; }
  .r3 { background: radial-gradient(closest-side, #a78bfa, #4c1d95); }
  .r4 { background: repeating-radial-gradient(circle, #0f172a 0 8px, #38bdf8 8px 16px); }
</style>
<div class='r r1'></div><div class='r r2'></div><div class='r r3'></div><div class='r r4'></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .c { display: inline-block; width: 160px; height: 160px; margin: 6px; border-radius: 50%; }
  .pie { background: conic-gradient(#3b82f6 0 40%, #f59e0b 0 70%, #22c55e 0); }
  .wheel { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
  .donut { background: conic-gradient(#ef4444 0 65%, #e2e8f0 0); -webkit-mask: radial-gradient(circle, transparent 50%, #000 51%); mask: radial-gradient(circle, transparent 50%, #000 51%); }
</style>
<div class='c pie'></div><div class='c wheel'></div><div class='c donut'></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .row { height: 60px; border-radius: 8px; margin-bottom: 10px; color: #fff; font: 13px sans-serif; padding: 8px; }
  .srgb { background: linear-gradient(90deg, #2563eb, #facc15); }
  .ok { background: linear-gradient(in oklch 90deg, #2563eb, #facc15); }
  .rainbow { background: linear-gradient(in oklch longer hue 90deg, #ef4444, #ef4444); }
  .stripe { background: repeating-linear-gradient(-45deg, #1e293b 0 10px, #334155 10px 20px); }
</style>
<div class='row srgb'>Default sRGB blend (muddy middle)</div>
<div class='row ok'>In OKLCH (vibrant middle)</div>
<div class='row rainbow'>in oklch longer hue (rainbow)</div>
<div class='row stripe'>repeating stripes</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .gborder { max-width: 320px; padding: 20px; border: 4px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4) border-box; margin-bottom: 16px; }
  .gtext { font: 800 40px sans-serif; background: linear-gradient(90deg, #f97316, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 16px; }
  .mesh { height: 140px; border-radius: 12px; background: radial-gradient(at 20% 20%, #f472b6, transparent 50%), radial-gradient(at 80% 30%, #38bdf8, transparent 50%), radial-gradient(at 50% 90%, #a3e635, transparent 50%), #1e1b4b; }
</style>
<div class='gborder'>Gradient border with rounded corners</div>
<h1 class='gtext'>Gradient Text</h1>
<div class='mesh'></div>

Output

Press Run to execute.

Exercise: Build a CSS Pie ChartHTML

Using conic-gradient and border-radius: 50%, draw a pie chart 200px wide and tall. Segments: 50% blue (#3b82f6), 30% orange (#f59e0b), 20% green (#22c55e). Use hard stops.

Try it Yourself HTML

<style>
  .pie { width: 200px; height: 200px; /* your code */ }
</style>
<div class='pie'></div>

Output

Press Run to execute.

Show expected output

A circle divided into 50%, 30% and 20% colored segments.

This is a self-check — compare your result with the expected output above.

Exercise: Striped Progress BarHTML

Make the .bar element look like a striped progress bar using repeating-linear-gradient at 45deg with two shades of green. Keep height 24px and rounded corners.

Try it Yourself HTML

<style>
  .bar { height: 24px; width: 300px; /* your code */ }
</style>
<div class='bar'></div>

Output

Press Run to execute.

Show expected output

A 24px tall bar with diagonal green stripes and rounded corners.

This is a self-check — compare your result with the expected output above.

Quiz: CSS Gradients Quiz Pass 70%

Loading quiz…

Was this page helpful?