CSS : Gradient

그레이디언트(Gradient)

📌 참고자료
MDN 그레이디언트 사용하기
poiemaweb 그레이디언트
TCPSCHOOL CSS3 선형 그래디언트

그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성한다.

🪄 CSS3 이전
CSS3가 이 기능을 제공하지 전에는 포토샵 등의 소프트웨어를 이용하여 이미지를 제작해서 사용했으나 이미지 다운로드 시간 소요와 확대하면 해상도가 떨어지는 문제가 있었다.

🎨 종류

1. 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally)
2. 방사형 그레이디언트 (Radial Gradient: defined by their center)

---

선형 그레이디언트

📌 참고자료
MDN linear-gradient()

CSS3 함수linear-gradient()을 이용하면 선형 그라데이션을 만들 수 있다.

🎨 방법

linear-gradient(direction, color1, color2, color3, ...);

🎨 그라데이션 방향

• 방향을 지정하지 않으면 default(기본값)은 위 → 아래 방향이다. ▶ to bottom
• 아래에서 위로 그라데이션 ▶ to top
• 오른쪽에서 왼쪽으로 그라데이션 ▶ to left
• 왼쪽에서 오른쪽으로 그라데이션 ▶ to right
• n도 방향으로 그라데이션 ▶ ndeg

방사형 그레이디언트

📌 참고자료
MDN radial-gradient()

CSS3 함수radial-gradient()을 이용하면 방사형(원형) 그라데이션을 만들 수 있다.

🎨 방법

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

🎨 설명

• shape : 모양 지정 ▶ 원 모양 circle & 타원 모양 ellipse
• size : 크기 지정
• position : 중심 위치 지정
• color : 색상 지정

---

🗓️ 수정 및 추가

✅ 2022.02.28

• CODEPEN 수정