Tailwind Gradation 그라데이션 효과 활용 예시

하단 그라데이션

 

<!-- 상단 그라데이션 -->
<div
    class="gradation bg-gradient-to-b from-red-500 absolute w-full top-0 h-36 z-50"
  ></div>
  
<!-- 하단 그라데이션 -->
  <div
    class="gradation bg-gradient-to-t from-red-500 absolute w-full bottom-0 h-36 z-50"
  ></div>

1. gradtion : 가독성을 위해 그라데이션 영역이라고 알려주기 위해 지정한 이름입니다. 어떠한 기능도 하지 않습니다. 

2. bg-gradient-to-t : ~로 향하다, 즉 top 으로 향하는 방향

3. bg-gradient-from : ~로 부터, from-색상 

4. absolut: 상단 하단에 완전 고정하기 위해 설정

5: w-full: width:100%

6: bottom-0 : 그라데이션 절대값 고정

7. h-36 : 그라데이션 height

8. z-50 : z-index 요소 높이 정렬, 가장 위로!