Gradient 정리

CSS의 gradient는 두 가지 이상의 색상이 자연스럽게 전환되는 배경 효과를 만드는데 사용됩니다. 이미지가 아니라 background-image롤 처리되며, 브라우저 렌더링만으로도 시각적 효과를 줄 수 있어 성능상 유리합니다.

---

1️⃣ linear-gradient - 선형 그라디언트

🔹 개념

한 색상에서 다른 색상으로 직선 방향으로 전환되는 그라디언트

🔹 문법

background-image: linear-gradient([방향], 색상1, 색상2, ...);

🔹 방향 옵션

• to right: 왼쪽 ➝ 오른쪽
• to bottom: 위 ➝ 아래 (기본값)
• to top left: 오른쪽 아래 ➝ 왼쪽 위
• 각도로도 지정 가능: 45deg, 180deg 등

background-image: linear-gradient(90deg, #00f, #0ff);

background-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);

background-image: linear-gradient(to right, red 20%, blue 80%);

✔️ 각 색상이 어디서 시작/끝날지 세밀하게 제어 가능

---

2️⃣ radial-gradient - 원형 그라디언트

🔹 개념

중심에서 바깥 방향으로 퍼지는 원형 또는 타원형 그라디언트

🔹 문법

background-image: radial-gradient([모양 크기 at 위치], 색상1, 색상2, ...);

🔹 기본 예제

background-image: radial-gradient(circle, red, yellow, green);

🔹 주요 옵션

• 모양: circle (원형), ellipse (타원형)

• 크기:

  • closest-side, farthest-side
  • closest-corner, farthest-corner

• 위치: 기본은 center, 예: at top left, at 50% 75%

background-image: radial-gradient(ellipse farthest-corner at 40% 60%, red, blue);

---

3️⃣ 'conic-gradient` - 원뿔형 그라디언트 (시계방향)

🔹 개념

중심점을 기준으로 색상이 시계방향 회전 형태로 변하는 그라디언트

🔹 문법

background-image: conic-gradient([from 각도 at 위치], 색상1, 색상2, ...);

🔹 예제

background-image: conic-gradient(from 0deg, red, yellow, green, blue, red);

⚠️ 브라우저 호환성확인 필요 (대부분의 최신 브라우저에서 지원)