CSS Gradients property

웹 페이지에 풍성한 색감과 깊이감을 더해주는 CSS 그라데이션(Gradients) 속성에 대해 알아보겠습니다.

그라데이션은 별도의 이미지 파일 없이 CSS 코드만으로 두 개 이상의 색상이 부드럽게 섞이는 효과를 만들어내며, 로딩 속도와 해상도 대응 면에서 매우 효율적입니다.

---

1. 선형 그라데이션 (Linear Gradients)

색상이 일정한 방향(직선)으로 진행하며 변하는 방식입니다.

• 구문: linear-gradient(방향/각도, 색상1, 색상2, ...)
• 방향: to right, to bottom left 처럼 키워드를 쓰거나, 45deg 처럼 각도를 직접 지정할 수 있습니다.

CSS

 

.linear-box {
  /* 위에서 아래로(기본값), 파란색에서 분홍색으로 */
  background: linear-gradient(blue, pink);

  /* 오른쪽 위 방향으로 45도 기울여서 전개 */
  background: linear-gradient(45deg, #f3bc2c, #e74c3c);
}

---

2. 원형 그라데이션 (Radial Gradients)

중심점에서 시작하여 바깥쪽으로 원을 그리며 색상이 변하는 방식입니다.

• 구문: radial-gradient(모양 크기 at 중심점, 색상1, 색상2, ...)
• 모양: circle(정원) 또는 ellipse(타원, 기본값)를 선택할 수 있습니다.

CSS

 

.radial-box {
  /* 중앙에서 시작하는 원형 그라데이션 */
  background: radial-gradient(circle, yellow, red, black);

  /* 왼쪽 위에서 시작하는 타원형 그라데이션 */
  background: radial-gradient(at top left, white, blue);
}

---

3. 원뿔형 그라데이션 (Conic Gradients)

중심점을 기준으로 시계 방향으로 회전하며 색상이 변하는 방식입니다.

• 특징: 파이 차트나 색상표(Color Wheel)와 같은 디자인을 만들 때 매우 유용합니다.

CSS

 

.conic-box {
  /* 중심에서 90도 간격으로 색상 배치 */
  background: conic-gradient(red, yellow, green, blue, red);
  border-radius: 50%; /* 원형으로 만들면 색상표 완성 */
}

---

4. 색상 중단점 (Color Stops)

색상이 바뀌는 정확한 위치를 백분율(%)이나 픽셀(px)로 지정할 수 있습니다.

• 활용: 중단점 위치를 겹치게 설정하면 부드러운 변화가 아닌 날카로운 경계선을 만들 수도 있습니다.

CSS

 

.stop-box {
  /* 0~50%는 빨강, 50%~100%는 노랑 (경계가 뚜렷한 이색 배경) */
  background: linear-gradient(to right, red 50%, yellow 50%);
}

---

5. 반복 그라데이션 (Repeating Gradients)

설정한 그라데이션 패턴을 요소 전체에 무한히 반복시킵니다.

• 종류: repeating-linear-gradient, repeating-radial-gradient
• 용도: 스트라이프(줄무늬) 패턴이나 체크 무늬를 만들 때 사용합니다.

CSS

 

.stripe-box {
  /* 20px 간격으로 반복되는 줄무늬 패턴 */
  background: repeating-linear-gradient(45deg, #ccc, #ccc 10px, #fff 10px, #fff 20px);
}

---

📋 그라데이션 종류별 요약표

종류	함수	특징	주요 용도
선형	linear-gradient()	직선 방향으로 색 변화	일반적인 배경, 버튼 입체감
원형	radial-gradient()	원 모양으로 확산	조명 효과, 구 형태 묘사
원뿔	conic-gradient()	시계 방향 회전	차트, 로딩 애니메이션
반복	repeating-...	패턴의 무한 반복	줄무늬, 격자 배경

---

학습 정리

• 그라데이션은 color 속성이 아닌 background 또는 background-image 속성에서 사용해야 합니다.
• 최신 브라우저는 대부분 지원하지만, 아주 오래된 환경을 위해 단일 색상의 **배경색(Fallback color)**을 미리 선언해 두는 것이 안전합니다.
• 투명도(rgba)와 결합하면 이미지 위에 겹쳐지는 세련된 오버레이 효과를 만들 수 있습니다.

---

웹 디자인의 깊이를 더해주는 CSS 그라데이션 속성을 정복하셨습니다!

---