[css] 그라데이션 효과로 배경 꾸미기

 

이미지에 그라데이션을 넣는 속성

linear-gradient( to <방향> or <각도>, <시작색상>, <끝색상>)

여기서 각도는 deg로 표기합니다.

 

ex)

background: #06f; /* css3를 지원하지 않는 브라우저용 */
background: linear-gradient(45deg, #06f, white 30%, #06f);  /* 위에서부터 30% 위치에 색상 중지점 지정 */

 

저기서 30%의 의미는 45도 방향으로 기울어 내려 가면서 30% 지점에 흰색그라데이션이 입혀지고

다시 blue 색깔로 변하게 되는 것입니다.