Design Atlas
한국어
◐ Color

Gradient types

그라데이션 종류

Linear spreads along a direction, radial spreads from a center point, conic sweeps around an angle — the three basic CSS gradient types.

Also known as: Linear/radial/conic gradient그라디언트
···
html
<div class="wrap">
  <div class="box" id="linearBox"><span>linear</span></div>
  <div class="box" id="radialBox"><span>radial</span></div>
  <div class="box" id="conicBox"><span>conic</span></div>
</div>
css
.wrap{display:flex;gap:clamp(10px,3vmin,20px);width:min(760px,96%);justify-content:center;flex-wrap:wrap}
.box{width:clamp(64px,28vmin,160px);height:clamp(64px,28vmin,160px);border-radius:14px;border:1px solid var(--line);position:relative;overflow:hidden}
.box span{position:absolute;bottom:6px;left:6px;font:700 clamp(8px,2.2vmin,10px)/1 ui-monospace,monospace;color:#fff;background:rgba(0,0,0,.4);padding:3px 6px;border-radius:6px}
js
let angle = 0, t = 0;
const linearBox = document.getElementById('linearBox'), radialBox = document.getElementById('radialBox'), conicBox = document.getElementById('conicBox');

function render() {
  linearBox.style.background = 'linear-gradient(' + angle + 'deg, var(--accent), var(--accent-3))';
  const cx = 50 + 25 * Math.cos(t), cy = 50 + 25 * Math.sin(t);
  radialBox.style.background = 'radial-gradient(circle at ' + cx + '% ' + cy + '%, var(--accent-2), #1b1433)';
  conicBox.style.background = 'conic-gradient(from ' + angle + 'deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent))';
}
(function tick() {
  angle = (angle + 0.6) % 360;
  t += 0.02;
  render();
  requestAnimationFrame(tick);
})();

linear-gradient(angle, color1, color2) transitions along a straight direction. radial-gradient(circle at position, color1, color2) spreads outward from a point in a circle. conic-gradient(from angle, color1, color2, …) sweeps colors around a rotation, like a clock hand — which is exactly why it's the tool for drawing a color wheel or a pie chart.

All three accept position stops (%) for each color, and prefixing repeating- turns any of them into an infinitely repeating pattern — stripes, or a target/bullseye.

They're a common way to make a background feel alive, but if text sits on top, check contrast at every point along it — white text quietly disappears into the bright stretch of a gradient more often than teams expect.

When to use

Use linear when you need directionality, radial for spotlights and button glows, conic for pie charts and color wheels.