[CSS] linear-gradient

linear-gradient 속성은 잘 사용한다면 화면의 단조로움을 제거하고 신비로운 느낌을 줄 수 있다.

위와 같은 효과를 주기 위해서는 다음과 같은 속성들을 사용한다.

background: linear-gradient(to bottom right in oklab, var(--color-blue-600) 0%, var(--color-blue-700) 100%);

 

linear-gradient 속성은 background 혹은 background-image에 사용한다. 첫 파라미터는 linear-gradient의 방향을 지정한다. to bottom right를 지정했으니 왼쪽위에서 오른쪽 아래방향으로 그레디언트가 퍼진다.

 

in oklab 어떤 타입의 색을 사용할지 여부를 말한다. 그 뒤에는 식의 시작점과 종료점을 퍼센트로 표시한 색의 값을 넣어주면 되는데 2개 이상은 몇개를 넣어도 상관없다 예를 들어 위 색에 green 색을 중간에 넣는다면 다음과 같이 표시된다.

linear-gradient(to bottom right in oklab, var(--color-blue-600) 0%, var(--color-green-600) 50%, var(--color-purple-600) 50%, var(--color-indigo-800) 100%)