웹 디자인에서 그라디언트(gradient)는 멋진 시각적인 효과를 주는데 도움을 줍니다. CSS를 사용하여 선형 및 원형 그라디언트를 만들고 적용하는 방법에 대해 알아보겠습니다.

선형 그라디언트

선형 그라디언트는 두 개 이상의 색상이 일정한 간격으로 서로 합쳐지는 효과를 만듭니다. 다음은 기본적인 선형 그라디언트의 예제입니다.

.gradient {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  /* from left to right, orange to pink */
}

linear-gradient 함수에는 그라디언트의 방향 및 색상이 지정됩니다. 위의 코드 예제에서 to right는 그라디언트가 왼쪽에서 오른쪽 방향으로 적용되고, #ff8a00는 오렌지색, #da1b60은 연분홍색을 나타냅니다.

원형 그라디언트

원형 그라디언트는 중심에서 바깥으로 향하는 원형으로 나타나는 그라디언트입니다. 아래는 원형 그라디언트를 만드는 예제입니다.

.radial-gradient {
  background: radial-gradient(circle at top left, #4f4cd9, #f36886);
  /* circle from the top left, blue to pink */
}

radial-gradient에서 circle at top left는 중심이 화면의 좌측 상단에 위치하는 원형 그라디언트를 의미하며, #4f4cd9는 파란색, #f36886은 분홍색을 나타냅니다.

세련된 그라디언트를 웹페이지에 적용하여 시각적인 효과를 강화해보세요!

참고 자료

• MDN Web Docs

기존의 배경색이나 이미지에 변화를 주어 색감이나 디자인 효과를 쉽게 적용할 수 있도록 한다. 다양한 CSS 속성을 활용하여 그라디언트의 색상, 방향, 포인트를 지정할 수 있으며, 이를 통해 사용자 정의 그라디언트가 가능해진다.