[CSS] linear-gradient() 사용하기

 

웹 화면을 개발하다 보면 가끔 그라데이션 마스크를 사용해야 할 일이 생깁니다.

자주 쓰는 스타일이 아니다 보니 매번 검색하게 돼서 블로그에 남겨 봅니다.

 

---

 

linear-gradient()는 하나의 색상에서 다른 색상으로 부드럽게 이어지는 배경을 만들 수 있습니다.

기본문법

background: linear-gradient(direction, color-stop1, color-stop2, ...);

 

• direction (방향): 그라디언트가 적용될 방향을 지정합니다. 각도(예: 45deg), 키워드(예: to right, to bottom), 또는 기본값(to bottom)을 사용할 수 있습니다.
• color-stop (색상 지점): 그라디언트가 시작되거나 끝나는 색상을 지정합니다. 색상 이름, HEX 코드, RGB, HSL 등을 사용할 수 있으며, 필요에 따라 여러 색상 지점을 추가할 수 있습니다.

---

기본 사용법

background: linear-gradient(to bottom, #ff7e5f, #feb47b);

이 코드는 위쪽(#ff7e5f)에서 시작하여 아래쪽(#feb47b)으로 부드럽게 색상이 전환되는 배경을 만듭니다.

---

그라데이션 방향 조절

그라디언트 방향을 변경하여 독특한 효과를 줄 수 있습니다.

- 45도 방향

background: linear-gradient(45deg, #ff7e5f, #feb47b);

- 왼쪽에서 오른쪽

background: linear-gradient(to right, #ff7e5f, #feb47b);

- 대각선 방향

background: linear-gradient(to top right, #ff7e5f, #feb47b);

---

여러 색상을 사용한 그라데이션

background: linear-gradient(to right, #ff7e5f, #feb47b, #86a8e7, #91eae4);

이 코드에서는 네 가지 색상이 오른쪽으로 흐르며 부드럽게 전환됩니다.

---

색상 전환 지점 지정

background: linear-gradient(to right, #ff7e5f 10%, #feb47b 20%, #86a8e7 50%, #91eae4 100%);

각 색상 간의 전환 지점을 명시적으로 지정하여 그라디언트의 색상 분포를 조정할 수 있습니다.

이 경우, 각 색상이 정확히 언제 시작되고 끝나는지를 제어할 수 있습니다.

---

반복되는 그라데이션 만들기

background: repeating-linear-gradient(45deg, #ff7e5f, #feb47b 10%, #86a8e7 20%);

linear-gradient()를 반복하여 패턴을 만들고 싶다면, repeating-linear-gradient() 함수를 사용할 수 있습니다.

 

---

 

+ linear-gradient()의 크로스 브라우징을 위한 벤더 프리픽스(vendor prefix)

background: -webkit-linear-gradient(direction, #ff7e5f, #feb47b); /* Chrome, Safari, iOS */
background: -moz-linear-gradient(direction, #ff7e5f, #feb47b);    /* Firefox */
background: -o-linear-gradient(direction, #ff7e5f, #feb47b);      /* Opera */
background: -ms-linear-gradient(direction, #ff7e5f, #feb47b);     /* Internet Explorer */
background: linear-gradient(to direction, #ff7e5f, #feb47b);         /* Standard */