[Tailwind CSS] 그라데이션 배경

bg-gradient-to-방향 from-색상 (via-중간 색상) to-색상 

: 그라데이션 배경 설정

<div class="bg-gradient-to-b from-purple-400 via-pink-500 to-red-600">
  3색 그라데이션
</div>

 

 

 

bg-gradient-to-방향

: 그라데이션의 방향 설정

• to-r  →  오른쪽으로 그라데이션
• to-l  →  왼쪽으로 그라데이션
• to-t  →  위쪽으로 그라데이션
• to-b  →  아래쪽으로 그라데이션
• to-tr  →  오른쪽 위 대각선으로 그라데이션
• to-bl  →  왼쪽 아래 대각선으로 그라데이션

 

from-색상

: 그라데이션의 시작 색상 설정

 

 

via-색상 (선택 사항)

: 그라데이션의 중간 색상 설정

 

 

to-색상

: 그라데이션의 끝 색상 설정

<div class="bg-gradient-to-r from-blue-500 to-green-500">
   2색 그라데이션
</div>

 

 

---

 

Gradient Color Stops - Tailwind CSS