gradients 함수

 

🟢   gradients

배경 이미지 대신 CSS 코드만으로 두 개 이상의 색상이 부드럽게 변화하는 배경을 만드는 속성.

 

🔹  linear gradients (선형 그라데이션)

일정한 방향(직선)을 따라 색상이 부드럽게 변화하는 방식.

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

  background: linear-gradient(45deg, #f3bc2c, #e74c3c);
    /* 오른쪽 위 방향으로 45도 기울여서 전개 */
    
  background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
    /* 왼쪽에서 오른쪽으로, 시작(0%)은 빨강, 중간(50%)은 노랑, 끝(100%)은 초록 */
}

• 문법: linear-gradient(방향/각도, 색상1, 색상2, ...)
• 방향 지정
  • to right: 왼쪽 → 오른쪽.
  • to left: 오른쪽 → 왼쪽.
  • to bottom: 위 → 아래. (기본값)
  • to top: 아래 → 위.
  • to bottom left: 오른쪽 위 → 왼쪽 아래.
  • <숫자>deg: 각도 지정. (0deg: 위, 90deg: 오른쪽 등)

 

🔹  radial gradients ( 원형 그라데이션)

중심점에서 시작하여 바깥쪽으로 원이나 타원 형태로 색상이 부드럽게 변화하는 방식.

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

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

• 문법: radial-gradient(모양 크기 at 중심점, 색상1, 색상2, ...)
• 모양(shape)
  
  • ellipse: 타원. (기본값)
  • circle: 원.
• 중심점(center)
  • center: 요소 정중앙에서 색상이 시작. (기본값)
  • at center: 중앙.
  • at top left: 왼쪽 위.
  • at bottom right: 오른쪽 아래.

 

🔹  conic gradients (원뿔형 그라데이션)

중심점을 기준으로 시계 방향 또는 반시계 방향으로 회전하며 색상이 변화하는 방식.

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

• 특징: 파이 차트, 색상표(Color Wheel)와 같은 디자인에 활용.

 

.gradients {
  background: conic-gradient(from 45deg, red, yellow, green);
  /* 45도에서 시작하여 시계 방향으로 색상 회전 */
}

• 시작 각도(angle):  from <숫자>deg로 지정 가능.

 

---

 

◼️  색상 중단점 (Color Stops)

그라데이션에서 특정 색상이 시작하거나 끝나는 지점을 의미.

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

• 활용: 겹치게 설정하면 날카로운 경계, 간격을 두면 부드러운 그라데이션 가능.
• 위치는 %(백분율) 또는 px(픽셀) 단위로 지정 가능.
• 위치를 지정하지 않으면 브라우저가 색을 자동으로 균등 분배.

 

---

 

🔹 repeating gradients (반복 그라데이션)

설정한 그라데이션 패턴을 요소 전체에 무한 반복하여 적용하는 방식.

.gradient {
  background: repeating-linear-gradient(
  45deg, /* 45도 기울기 */
  #ccc, /* 회색 시작 */
  #ccc 10px, /* 10PX까지 회색 */
  #fff 10px, /* 10PX부터 흰색 시작 */
  #fff 20px /* 20PX까지 흰색 */
  );
}
/* 20px 간격으로 반복되는 대각선 줄무늬 패턴 */

• 종류: repeating-linear-gradient, repeating-radial-gradient
• 용도: 스트라이프(줄무늬) 배경, 체크무늬, 패턴 디자인, 무한 반복되는 배경 효과 등.
• Color Stop 위치를 겹치거나 일정 간격으로 설정 → 반복 패턴 제어

 

 

📍  POINT 📍 

✔️ 그라데이션은 color 속성이 아닌 background 또는 background-image 속성에서 사용해야 한다. ✔️

✔️ 최신 브라우저는 대부분 지원하지만, 아주 오래된 환경을 위해 단일 색상의 배경색(Fallback color)을 미리 지정해 두는 것이 좋다. ✔️

✔️ 투명도(rgba)와 결합하면 이미지 위에 겹쳐지는 세련된 오버레이 효과를 만들 수 있다. ✔️

 

 

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

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

 

---

 

🔗 CSS Gradients training 🔗

https://www.w3schools.com/css/css3_gradients.asp

W3Schools.com

 

---

 

🔗 CSS gradient generator 🔗

https://cssgradient.io/

CSS Gradient – Generator, Maker, and Background