[CSS] Gradient 속성

Gradient

• 그라디언트는 두 가지 이상의 색상 사이에 부드러운 색상 전환을 만들 수 있는 스타일링 기능
• CSS에서는 세 가지 주요 유형의 그라디언트를 지원
  • 선형 그라디언트 (Linear Gradient)
  • 방사형 그라디언트 (Radial Gradient)
  • 원추형 그라디언트 (Conic Gradient)

선형 그라디언트 (Linear Gradient)

• 직선을 따라 색상이 전환되는 가장 기본적인 그라디언트 유형.
• 기본 구문

background-image: linear-gradient(direction, color1, color2, ...);
기본 방향: 위에서 아래 (top to bottom)
왼쪽에서 오른쪽: linear-gradient(to right, red, yellow)
대각선: linear-gradient(to bottom right, red, yellow)
각도 지정: linear-gradient(45deg, red, yellow)

• 고급 기능

  • 다중 색상 정지점: 여러 색상을 사용한 그라디언트 생성
  • 투명도 지원: rgba() 함수를 사용해 페이딩 효과 구현
  • 반복 그라디언트: repeating-linear-gradient() 함수 사용

• tailwind 버전

  • 그라디언트 방향 클래스
    • bg-gradient-to-t: 위쪽으로
    • bg-gradient-to-b: 아래쪽으로
    • bg-gradient-to-l: 왼쪽으로
    • bg-gradient-to-r: 오른쪽으로

<div class="bg-gradient-to-r from-purple-600 to-blue-600">
  <!-- 왼쪽에서 오른쪽으로 그라디언트 -->
</div>

방사형 그라디언트 (Radial Gradient)

• 중심점에서 방사형으로 색상이 퍼져나가는 그라디언트
• 기본 구문

background-image: radial-gradient(shape, color1, color2);

• 주요 특징
  • 원형(circle) 또는 타원형(ellipse) 모양 지원
  • 중심점 위치 조정 가능
  • 크기와 위치 제어 가능

원추형 그라디언트 (Conic Gradient)

• 중심점 주위로 회전하는 색상 전환을 생성

background-image: conic-gradient(color1, color2);

• 주요 특징
  • 중심점 지정 가능
  • 시작 각도 설정 가능
  • 다양한 색상 분포 제어