css 속성 linear-gradient

css 속성 linear-gradient

background-image의 속성 값으로 적용.

 

 

활용법

 

background-image: linear-gradient(색상1, 색상2);

=> 위에서 아래 방향으로 색상1, 색상2가 그라데이션으로 채워짐.

ex) background-image: linear-gradient(rgba(255, 255, 255, 1), white)

 

background-image: linear-gradient(각도, 색상1, 색상2);

=> 각도 입력 시 해당 각도만큼 회전, 예를 들어 90도 설정시 좌에서 우 방향으로 색상1, 색상2가 그라데이션으로 채워짐.

ex) background-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))

 

background-image: linear-gradient(각도, 색상1 비율, 색상2 비율);

=> 비율 입력 시, 각 색상 옆 비율 입력 시 해당 비율만큼 그라데이션으로 채워짐. (안쓰면 나머지)

ex) background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 40% , rgba(0, 0, 0, 0))

 

background-image: linear-gradient(각도, 색상1 비율, 색상2 비율), url(이미지 주소);

=> 콤마 후 이미지 url 입력시, 그라데이션 아래 이미지가 겹쳐 표시됨.(반투명 그라데이션과 함께 사용하면 효과적!)

ex) background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 40% , rgba(0, 0, 0, 0)), url('pizza.png');

 

* 자연스럽게 섞이는 그라데이션이 아니라, 색 두가지가 정확하게 구분되어 채워지도록 할 수도 있음.

 

 

* 구글앱에서 gradient-generator 웹 이용

편리하게 직관적으로 그라데이션을 선택하여 만들면, 해당 그라데이션을 css 코드로 작성해줌

https://cssgradient.io/