그라데이션

개념 이해하기

linear-gradient는 방향을 따라, radial-gradient는 중심에서 바깥으로 색을 보간합니다. 배경 이미지이므로 background-color fallback과 함께 사용할 수 있습니다.

첫 상자의 선형 그라데이션은 색마다 위치를 두 개씩 적어 0부터 45%는 짙은 초록, 75%까지는 초록, 나머지는 노랑으로 경계가 딱 끊긴 대각선 띠 세 개를 만듭니다. 두 번째 상자는 같은 흰 글자를 쓰되 배경을 원형 그라데이션으로 바꿔 가운데 흰 원 바깥으로 옅은 초록 고리와 초록 영역이 이어지며, 12%와 13%, 45%와 46% 사이 1% 구간에서만 색이 섞여 고리 경계가 거의 선명합니다.

원형 그라데이션의 크기는 따로 적지 않으면 farthest-corner라서, 퍼센트 위치는 중심에서 가장 먼 모서리까지의 거리를 기준으로 계산됩니다. 그래서 두 번째 상자처럼 가로로 긴 상자에서는 고리가 생각보다 크게 그려지며, closest-side 같은 키워드나 60px 같은 반지름을 적으면 크기를 직접 정할 수 있습니다.