[HTML][CSS] CSS 그라디언트 (linear-gradient)

linear-gradient : 선형 그라디언트 , css로 그라데이션 효과 적용

 

 

1. 그라디언트 - 방향 

 

    <div class="grad_bottom">to bottom</div>
    <div class="grad_top">to top</div>
    <div class="grad_left">to left</div>
    <div class="grad_right">to right</div>

 

> bottom, top, left, right 방향 div 만든다.

 

2. css 

 

background: linear-gradient ( direction, color(start), color(end) );

 

.grad_bottom{background: linear-gradient(to bottom,red,blue);}
.grad_top{background: linear-gradient(to top,red,blue);}
.grad_left{background: linear-gradient(to left,red,blue);}
.grad_right{background: linear-gradient(to right,red,blue);}

 

direction

- to bottom : 아래로

- to top : 위로

- to left : 왼쪽으로

- to right : 오른쪽으로

 

> color는 여러개 가능 

> 제일 앞에 지정한 color부터 시작 - 마지막에 지정한 color로 끝

 

3. 선형 그라디언트 방향 적용

 

방향 그라디언트

 

4. 그라디언트 - 각도 

 

 <div class="grad_45">grad_45</div>

 

5. css

 

background: linear-gradient ( 각도, color(start), color(end) );

 

.grad_45{background: linear-gradient(45deg,red,blue);}

 

 

> 45도로 그라디언트 적용 (45deg)

 

 

6. 선형 그라디언트 각도 적용

 

각도 그라디언트