CSS / linear-gradient - 선형 그라데이션 효과 만들기

linear-gradient()는 직선 방향을 따라 두 개 이상의 색이 이어지는 CSS 그라데이션 이미지를 만드는 함수입니다. background-image: linear-gradient(to right, yellow, red)처럼 사용하면 왼쪽 노란색에서 오른쪽 빨간색으로 변하는 배경을 만들 수 있습니다. 색을 지정하는 background-color 속성에는 이 함수를 사용할 수 없습니다.

기본 문법과 방향

.box {
  background-image: linear-gradient(to right, yellow, red);
}

각도는 위쪽을 0deg로 시작해 시계 방향으로 증가합니다. 45deg는 오른쪽 위 방향입니다. to top right 같은 모서리 방향 키워드도 사용할 수 있지만, 상자가 정사각형이 아닐 때 45deg와 같은 결과라고 가정하지 마세요. 색은 적어도 두 개의 색상 지점을 지정하며, 방향을 생략하면 위에서 아래로 이어집니다.

전체 예제: 방향과 색상 지점을 비교하기

다음 코드를 linear-gradient.html로 저장하고 브라우저에서 엽니다. 네 배경은 방향, 색상 지점, 경계 처리의 차이를 보여 줍니다. CSS로 이미지를 그리므로 별도 그림 파일은 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>선형 그라데이션 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
h1 { font-size: 24px; }
    main { max-width: 600px; display: grid; gap: 16px; }
    figure { margin: 0; }
    figcaption { margin-bottom: 6px; }
    .swatch { height: 85px; border: 1px solid #6e8295; border-radius: 6px; }
    .basic { background-image: linear-gradient(to right, yellow, red); }
    .vertical { background-image: linear-gradient(to bottom, yellow, red); }
    .stops { background-image: linear-gradient(to right, yellow 50%, red 60%, purple 100%); }
    .hard { background-image: linear-gradient(to right, #1768a5 50%, #11958e 50%); }
  </style>
</head>
<body>
<h1>선형 그라데이션 비교</h1>
<main>
  <figure><figcaption>오른쪽 방향: 노랑 → 빨강</figcaption>
    <div class="swatch basic" role="img" aria-label="왼쪽 노랑에서 오른쪽 빨강으로 변하는 배경"></div>
  </figure>
  <figure><figcaption>아래 방향: 노랑 → 빨강</figcaption>
    <div class="swatch vertical" role="img" aria-label="위쪽 노랑에서 아래쪽 빨강으로 변하는 배경"></div>
  </figure>
  <figure><figcaption>색상 지점: 50% · 60% · 100%</figcaption>
    <div class="swatch stops" role="img" aria-label="절반까지 노랑을 유지하고 빨강을 지나 보라로 변하는 배경"></div>
  </figure>
  <figure><figcaption>같은 지점: 경계가 선명한 두 색</figcaption>
    <div class="swatch hard" role="img" aria-label="왼쪽 파랑과 오른쪽 청록의 경계가 중앙에 있는 배경"></div>
  </figure>
</main>
</body>
</html>

첫 배경은 왼쪽에서 오른쪽으로, 두 번째는 위에서 아래로 색이 변합니다. 세 번째는 왼쪽 절반까지 노란색을 유지한 뒤 빨강을 지나 보라로 이어집니다. 마지막 배경은 중앙에서 색이 바로 바뀌어 섞이는 구간이 없습니다.

색상 지점은 단색 구간의 끝과 전환을 구분하기

색 뒤의 백분율은 그라데이션 선 위에서 해당 색에 도달하는 위치를 나타냅니다. yellow 50%, red 60%, purple 100%는 50~60% 구간이 전부 빨간색이라는 뜻이 아닙니다. 0~50%는 노란색, 50~60%는 노랑에서 빨강으로 전환, 60~100%는 빨강에서 보라로 전환됩니다.

색상 지점의 위치를 모두 생략한 단순한 그라데이션에서는 첫 색과 마지막 색이 양끝에 놓이고 중간 지점들이 균등하게 분배됩니다. 위치를 직접 지정하면 유지 구간과 전환 구간을 조절할 수 있습니다. 예제의 red 60%만 red 80%로 바꾸면 노랑에서 빨강으로 바뀌는 구간이 더 넓어집니다. 비교 후 60%로 되돌리세요.

두 색을 같은 지점에 놓으면 그 지점에서 바로 색이 바뀝니다. 예제의 #1768a5 50%, #11958e 50%가 그 경우입니다. 단색 영역 두 개를 50%씩 나누는 것과 부드럽게 섞이는 그라데이션을 구분할 수 있습니다. 반복 줄무늬를 만들 때는 repeating-linear-gradient도 사용할 수 있지만, 일반 linear-gradient가 색상 지점 목록을 자동 반복하지는 않습니다.

투명한 색과 배경에 적용할 때의 주의점

색상 지점에 rgb(0 0 0 / 0)이나 rgb(0 0 0 / 0.6)처럼 알파 값을 사용할 수 있습니다. 사진 위에 어두운 덮개를 만들 때는 그라데이션과 사진을 배경 이미지의 여러 층으로 조합할 수 있습니다. 먼저 적은 배경 이미지가 앞쪽에 그려지므로 덮개와 사진의 순서를 확인해야 합니다.

배경만 있는 빈 요소는 내용이나 높이가 없으면 보이지 않을 수 있습니다. 예제에서는 비교를 위해 height를 85px로 지정했습니다. 실제 버튼이나 배너는 내용과 padding 등으로 필요한 크기를 확보하세요. background 단축 속성을 나중에 다시 쓰면 기존 background-image가 초기화될 수 있으므로 개발자 도구에서 최종 값을 확인합니다. 글자를 올릴 때는 배경의 밝은 구역과 어두운 구역 모두에서 읽기 쉬운지 확인해야 합니다.

문법과 색상 지점은 MDN의 linear-gradient() 설명과 W3C의 선형 그라데이션 정의를 참고할 수 있습니다.