CSS 그라데이션: radial, linear, conic gradient

Radial gradient

radial-gradient()는 중심점에서 바깥쪽으로 색을 섞어요. 모든 CSS 그라데이션처럼 이미지라서 background-image(또는 background 단축 속성)에 넣어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

전체 문법은 radial-gradient(shape size at position, color stops)예요. 색 앞의 모든 것은 선택 사항이에요.

크기 키워드는 마지막 색에 닿는 곳을 정해요. 상자의 가장 가까운 변, 가장 먼 모서리 등이에요. 여기서 값을 바꾸고 그라데이션이 다시 그려지는 걸 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a, circle 40px, #f59e0b 99%, transparent(가장자리가 딱 떨어지는 점)를 넣어 보세요.

Linear gradient

linear-gradient()는 직선을 따라 색을 섞어요. 방향이나 각도를 먼저 넣고, 그다음 색을 넣어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

각도는 0deg가 위쪽에서 시작해서 시계 방향으로 돌아요. 그래서 90deg는 to right이고 180deg는 기본값 to bottom이에요. to right는 오른쪽에서 왼쪽으로 읽는 페이지에서도 물리적 방향 그대로예요. 그라데이션이 읽는 방향을 따라야 한다면 직접 뒤집으세요.

색 정지점과 딱 끊기는 정지점

색마다 위치를 줄 수 있어요. 위치가 없으면 색이 고르게 배치돼요. 두 색이 같은 위치를 가지면 색이 즉시 바뀌고, 이렇게 줄무늬, 깃발, 진행 막대를 그려요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

정지점은 #111827 12px 24px처럼 위치 두 개를 받을 수도 있고, 12px에서 24px까지 단색 띠를 그려요.

Conic gradient

conic-gradient()는 시곗바늘처럼 중심점을 돌면서 색을 칠해요. 딱 끊기는 정지점과 함께 쓰면 이미지나 JavaScript 없이 원그래프를 그려요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

CSS로 그린 그래프는 스크린 리더에 보이지 않으니 숫자를 텍스트로도 넣으세요.

그라데이션 텍스트

그라데이션 배경을 글자 모양으로 잘라 내고 텍스트 자체는 투명하게 만들어요.

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

일반 color 대체값을 염두에 두세요. 잘라 내기가 실패하면 텍스트가 사라져요. 그라데이션 텍스트는 명도 대비도 고르지 않으니 큰 제목에만 쓰세요.

그라데이션은 하나의 background-image 목록 안에서 이미지나 다른 그라데이션과 겹쳐 쓸 수 있어요. 레이어, 크기, 위치는 배경 이미지 페이지에서 다뤄요.

자주 하는 실수

• background-color: linear-gradient(...). 그라데이션은 이미지예요. background-image나 background를 쓰세요.
• 각도 방향 착각. 0deg는 오른쪽이 아니라 위쪽을 가리켜요. 90deg가 오른쪽을 향해요.
• 높이 없는 요소에 그라데이션. 아무것도 안 보여요. 콘텐츠나 크기를 주세요.
• 탁한 중간색. 빨강과 초록처럼 선명한 반대색 두 개를 섞으면 sRGB에서는 회갈색을 거쳐요. 중간 정지점을 추가하거나 다른 색 공간에서 섞으세요. linear-gradient(in oklch, red, green)
• 크고 은은한 그라데이션의 계단 현상. 아주 비슷한 색이 넓은 영역에 걸치면 단계가 보여요. 정지점 사이의 대비를 조금 늘리면 나아져요.