저는 퍼블리싱을 하다 모 홈페이지의 텍스트에 그라데이션 효과가 들어간 걸 보고 '어! 이건 우째했지?' 이런 생각이 들었죠.
그래서 바로 개발자 도구를 참고했고, CSS로 배경에 선형 그라데이션 효과를 넣는 방법을 알게되었는 데, 오늘은 이 방법에 대해 까먹기 전에 얼른 포스팅하려 해요.
자 그럼 CSS로 선형 그라데이션 효과를 주는 방법에 대해 알아보도록 하죠! 😎

1. linear-gradient()

liner-gradient( 선형 그라데이션 )

여기서 gradient가 색체용어로는 하나의 색체에서 다른 색체로 변하는 단계를 말합니다.
그래서 CSS에서 한 방향에서 다른 방향으로 색이 점차 변하게 하고 싶다할 때 사용하는 속성이 gradient 속성 입니다.

2. linear-gradient() 사용하기

linear-gradient( direction, color1, color2, …, color3 )

먼저, direction에 그라데이션을 넣을 방향을 입력합니다.
direction에는 총 5가지가 있는 데, 하나씩 살펴보도록 하죠.

먼저, to bottom은 위에서 아래로 그라데이션을 만듭니다. 가장 기본 값이죠.
두번째로, to top은 아래에서 위로 그라데이션을 만듭니다.
세번째로, to left, 오른쪽에서 왼쪽으로 그라데이션을 만듭니다.
다음으로, to right는 to left와 반대로 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.
마지막으로, ndeg는 n도의 방향으로 그라데이션을 만듭니다.

그리고 그 다음으로 색을 넣으면 되는 데 색은 여러개 입력할 수 있으며, 입력한 순서대로 설정한 방향대로 그라데이션을 만들 수 있죠.

예를 들어 한 번 보도록 하죠!

linear-gradient( to right, green, blue )

위 코드를 입력했을 때, 왼쪽에서 오른쪽으로 초록에서 파랑색 순으로 색이 점차 변하게 됩니다.

위와 같이 말이죠.