CSS Radial Gradient and Conic Gradient Examples

radial-gradient()

Colors spread out from a point, usually in a circle.

index.html

HTML

<style>
  .g { height: 100px; width: 100%; margin-bottom: 8px; border-radius: 8px; }
  .a { background: radial-gradient(circle, #f5b041, #d94a00); }
  .b { background: radial-gradient(circle at top left, #fff, #1a5276 70%); }
  .c { background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.45)); background-color: #fdf2e9; }
</style>
<div class="g a"></div>
<div class="g b"></div>
<div class="g c"></div>

circle or ellipse chooses the shape.
at top left or at 30% 70% moves the center.
The last example fades to a dark edge: a vignette.

conic-gradient()

Colors sweep around a center point, like a color wheel.

index.html

HTML

<style>
  .wheel { width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); display: inline-block; margin-right: 16px; }
  .pie { width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(#d94a00 0 40%, #1a5276 40% 70%, #27ae60 70%); display: inline-block; }
</style>
<div class="wheel"></div><div class="pie"></div>

A conic gradient with hard stops is the quickest way to draw a pie chart with CSS. The sizes here are made-up illustration percentages, so for real data you would use a chart with an accessible text alternative.

Repeating gradients

repeating-linear-gradient() tiles a pattern, which makes stripes cheaply:

index.html

HTML

<style>
  .stripes { height: 80px; border-radius: 8px; background: repeating-linear-gradient(45deg, #fdebd9 0 10px, #f9d4b4 10px 20px); }
</style>
<div class="stripes"></div>

Exercise: a spotlight

Make a dark box (#1c1b1f) with a soft white-ish circular glow in its center that fades to the dark color.

Show a possible solution

style.css

CSS

.spot { height: 160px; background: radial-gradient(circle at center, #5c5a63, #1c1b1f 70%); }