그라데이션 효과 ( linear-gradient, radial-gradient, conic-gradient)

1. 개념
2. inear-gradient
3. radial-gradient
4. conic-gradient

개념

CSS에서 요소의 배경을 그라데이션으로 설정할 때 사용되는 기능

• inear-gradient: 한쪽 끝에서 반대쪽 끝까지 직선 방향으로 변하는 그라데이션.
• radial-gradient: 중심에서 외곽으로 퍼지는 원형 또는 타원형 그라데이션.
• conic-gradient: 중심에서 시계 방향으로 회전하며 변하는 원뿔형 그라데이션.

1. inear-gradient

사용법

1. 기본문법

   linear-gradient(direction, color-stop1, color-stop2, ...)

• direction: 그라데이션의 방향을 설정
  기본값은 위에서 아래(180도)이며, 여러 방식으로 설정 가능
  • to bottom (기본값)
    설명: 위에서 아래로 그라데이션을 적용
  • 그 외: to top, to left, to right, to top left...
  • 각도 설정: 45deg
    설명: 45도 각도로 위 왼쪽에서 아래 오른쪽으로 그라데이션을 적용
• color-stop: 그라데이션에 사용할 색상과 위치를 지정
  각 색상은 콤마로 구분하며, 색상 간의 전환이 자연스럽게 이루어짐.
  • 색상 전환이 시작될 위치를 퍼센트로 지정 가능

예시

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

• 빨간색이 20%까지 채워지고,
  50% 지점에서 노란색으로 바뀌며,
  80% 지점에서 파란색이 적용

background: linear-gradient(to right, red, green);

• 단순한 두 색상의 그라데이션 왼(red)->오(green)

---

2. radial-gradient

사용법

1. 기본문법

   radial-gradient(shape size at position, color1, color2, ...)

• shape: 그라데이션의 형태로, circle(원형)과 ellipse(타원형)를 지정
  • circle:(기본값)
    설명: 원형 그라데이션을 생성

• size: 그라데이션의 크기를 설정해 퍼짐 정도를 결정, farthest-corner``closest-side, farthest-side, closest-corner 등의 키워드를 사용가능
  • farthest-corner(기본값): 시작점에서 가장 먼 모퉁이까지 그라데이션이 확장
  • closest-side: 시작점에서 가장 가까운 모서리나 면까지 그라데이션이 확장
  • farthest-side: 시작점에서 가장 먼 모서리나 면까지 그라데이션이 확장
  • closest-corner: 시작점에서 가장 가까운 모퉁이까지 그라데이션이 확장

• position: 그라데이션의 시작점을 설정하며, center, top left, bottom right 등으로 설정 가능
  • 기본값: center

• color1, color2...: 그라데이션에 포함될 색상들을 지정하며, 중간 색을 추가하면 색이 순차적으로 변하는 단계 그라데이션 가능

예시

background: radial-gradient(circle, red, blue);

• 중심에서부터 파란색으로 퍼지는 원형 그라데이션

background: radial-gradient(ellipse closest-side, red, blue);

• 타원형 그라데이션이 중심에서 가장 가까운 모서리까지 퍼짐

background: radial-gradient(circle farthest-corner at top right, red, blue);

• 우상단에서 시작해 원형 그라데이션이 대각선 끝 모퉁이까지 퍼짐

---

3. conic-gradient

사용법

1. 기본문법

   conic-gradient(from angle at position, color-stop1, color-stop2, ...)

• from angle: 그라데이션이 시작되는 각도를 지정
  • 기본값: 0deg (위쪽에서 시작)
• position: 그라데이션의 중심 위치를 설정하며, center, top, left 등으로 지정할 수 있음.
• color-stop: 각 색상과 그 위치를 지정하여 그라데이션이 점차 변하도록 할 수 있음.

예시

background: conic-gradient(red, blue, green);

• 빨간색에서 파란색, 초록색으로 시계 방향 회전하며 색이 변함.

background: conic-gradient(from 90deg, red, yellow, blue);

• 90deg에서 시작하여 빨간색에서 노란색, 파란색으로 변하는 회전형 그라데이션이 됨.

background: conic-gradient(red 0%, yellow 25%, green 50%, blue 75%);

• 0% 지점에서 빨간색, 25%에서 노란색, 50%에서 초록색, 75%에서 파란색이 적용됨.

background: conic-gradient(at top right, red, yellow, green, blue);

• 오른쪽 상단에서 중심을 시작으로 원뿔형으로 회전하며 색이 바뀌는 그라데이션