[CSS] 버튼/배경에 그라데이션 색상 넣기 (linear-gradient)

todo list를 만들면서 버튼과 배경에 그라데이션을 넣고싶어 찾아보았다!

linear-gradient()를 활용해 생각보다 간단하게 적용할 수 있었다.

 

 

linear-gradient()

CSS에서 두개 이상의 색상이 점진적으로 변화하는 이미지를 만드는 함수다.

image 의 한 종류인 gradient 타입의 객체를 반환한다. 따라서 image를 사용하는 background-image 등에 사용할 수 있다.

처음엔 별생각없이 background-color에 사용했다가 적용이 안됐는데 이 이유때문이었다!

 

 

사용법

linear-gradient(각도 || 방향, 색상1, 색상2, ...);

 

1) 각도 || 방향 (기본값: to bottom)

첫 색상에서 마지막 색상까지 변화하며 이어질 방향을 지정한다. 지정하지 않을 경우 위에서 아래 방향이다.

키워드를 사용하거나 deg 값으로 설정할 수 있다.

 

• to top (0 deg)
• to right (90 deg)
• to bottom (180 deg)
• to left (270 deg)

각도가 커질수록 시계방향으로 회전한다!

 

• to top left
• to right bottom

이렇게 키워드를 조합하는 것도 가능하고, 이 때 순서는 상관이없다.

 

 

2) color-stop

색상과 함께 색상의 위치를 % 혹은 길이로 지정할 수 있다. 첫번째 색상은 어디까지 위치할지, 첫번째 이후 나머지 색상은 어디부터 위치할지 설정할 수 있다.

 

background-image: linear-gradient(to right, blue 30%, lightgreen 70%);

blue가 시작부터 30% 위치까지, lightgreen이 70%부터 끝까지를 차지하고 그 사이 공간에 그라데이션이 생긴다.

 

 

 

 

 

참고자료

MDN, linear-gradient()

linear-gradient() - CSS: Cascading Style Sheets | MDN

 

탐구소년, [CSS] linear-gradient 사용법 그리고 예제

[CSS] linear-gradient 사용법 그리고 예제