CSS 그라디언트 완벽 가이드: linear-gradient와 radial-gradient 마스터하기

그라디언트는 웹 페이지를 더욱 아름답고 세련되게 만들기 위해 널리 사용되는 기법입니다. 단색으로 박스를 꾸미는 대신 그라디언트를 활용하면 두 가지 이상의 색상이 자연스럽게 전환되는 효과를 낼 수 있어 시각적으로 훨씬 매력적인 디자인을 완성할 수 있습니다.

CSS에서 그라디언트를 다룰 때는 linear-gradient와 radial-gradient 두 가지 속성을 사용합니다. 이 속성들을 통해 각각 선형 그라디언트와 방사형 그라디언트를 만들 수 있습니다.

이 글에서는 실제 예제와 함께 CSS로 선형 그라디언트와 방사형 그라디언트를 만드는 방법을 자세히 살펴봅니다. 글을 끝까지 읽으시면 CSS 그라디언트를 능숙하게 다룰 수 있게 될 것입니다.

CSS 그라디언트란?

디자인 분야에서 그라디언트는 두 가지 이상의 색상 사이의 점진적인 전환을 의미합니다. 단순한 색상 전환부터 시작해 각도 조절, 여러 색상 사용 등 다양한 방식으로 스타일링할 수 있습니다.

CSS가 지원하는 그라디언트는 크게 두 가지입니다.

• 선형 그라디언트(Linear Gradient)
• 방사형 그라디언트(Radial Gradient)

선형 그라디언트는 위에서 아래로 또는 왼쪽에서 오른쪽으로 이어지는 직선을 따라 색상이 전환됩니다. 반면 방사형 그라디언트는 특정 원점에서 사방으로 퍼져 나가는 형태의 색상 전환입니다.

CSS에서 그라디언트는 background 속성으로 정의합니다. 이 속성은 웹 요소의 배경을 만드는 데 사용되며, background-color, background-image 등 배경 관련 속성들을 한 번에 지정할 수 있는 축약형(shorthand)입니다.

background 속성의 기본 문법은 다음과 같습니다.

background: typeOfBackground;

이제 본격적으로 CSS 그라디언트 만들기를 시작해 보겠습니다. 먼저 선형 그라디언트부터 알아보겠습니다.

CSS 선형 그라디언트(Linear Gradient)

선형 그라디언트는 하나의 직선을 따라 두 가지 이상의 색상이 전환되는 효과입니다.

예를 들어 왼쪽에서 오른쪽으로, 위에서 아래로, 혹은 요소의 왼쪽 하단에서 오른쪽 상단 모서리로 이어지는 그라디언트 배경을 만들 수 있습니다. 기본값으로 그라디언트는 위에서 아래 방향으로 적용되며, 원하는 경우 방향을 직접 지정할 수도 있습니다.

선형 그라디언트에는 '컬러 스톱(color stop)'이라는 개념이 있는데, 이는 그라디언트 전환에 포함시킬 색상들을 의미합니다. 색상의 개수에는 제한이 없으므로 원하는 만큼 지정할 수 있습니다.

CSS에서 선형 그라디언트 함수의 문법은 다음과 같습니다.

background: linear-gradient(direction, color1, color2 ...);

여기서 direction은 그라디언트의 진행 방향을, color1, color2...는 그라디언트에 포함될 컬러 스톱을 나타냅니다.

지금부터 몇 가지 구체적인 예제를 통해 선형 그라디언트를 살펴보겠습니다.

위에서 아래로 적용되는 그라디언트

박스의 위쪽에서 아래쪽으로 흐르는 그라디언트를 만든다고 가정해 보겠습니다. 이것은 바로 linear-gradient() 함수의 기본 동작 방식입니다.

그라디언트가 #00C9FF(연한 파랑)로 시작해서 #92FE9D(연한 초록)로 끝나도록 만들어 보겠습니다. 코드는 다음과 같습니다.

.gradient {
	background: linear-gradient(#00C9FF, #92FE9D);
}

실행 결과:

왼쪽에서 오른쪽으로 적용되는 그라디언트

이번에는 색상이 왼쪽에서 오른쪽으로 전환되는 그라디언트를 만들어 보겠습니다. 다음 코드를 사용하면 됩니다.

.gradient {
	background: linear-gradient(to right, #00C9FF, #92FE9D);
}

실행 결과:

두 색상이 왼쪽에서 오른쪽으로 자연스럽게 전환되는 것을 확인할 수 있습니다. 이는 to right를 그라디언트 방향으로 지정했기 때문입니다. 반대로 오른쪽에서 왼쪽으로 흐르는 그라디언트를 원한다면 to left를 사용하면 됩니다.

대각선 그라디언트

linear-gradient() 함수에 가로와 세로 시작점을 함께 지정하면 대각선 방향의 그라디언트도 만들 수 있습니다.

오른쪽 아래로 향하는 그라디언트를 원한다면 to bottom right를, 왼쪽 위로 향하는 그라디언트를 원한다면 to top left를 지정하면 됩니다.

오른쪽 위 방향으로 전환되는 그라디언트를 만들어 보겠습니다.

.gradient {
	background: linear-gradient(to top right, #00C9FF, #92FE9D);
}

실행 결과:

그라디언트가 왼쪽 아래의 연한 파란색에서 시작해 오른쪽 위의 초록색으로 부드럽게 전환되는 것을 볼 수 있습니다.

컬러 스톱(Color Stops)

지금까지의 예제는 모두 두 가지 색상만 사용했습니다. 하지만 더 복잡하고 화려한 그라디언트를 만들고 싶다면 세 가지 이상의 색상을 지정하는 것도 가능합니다.

#00D2FF(연한 파랑)에서 #92FE9D(연한 초록)를 거쳐 #3A47D5(짙은 파랑)로 왼쪽에서 오른쪽으로 전환되는 그라디언트를 만들어 보겠습니다.

.gradient {
background: linear-gradient(to right, #00D2FF, #00C9FF, #3A47D5);
}

실행 결과:

이 예제에서는 세 가지 색상이 왼쪽에서 오른쪽으로 순차적으로 전환되는 것을 확인할 수 있습니다.

각도(Angles) 활용하기

앞선 예제에서는 미리 정의된 방향 키워드(예: top right, bottom left)를 사용했습니다. 그라디언트의 모양을 더 세밀하게 제어하고 싶다면 직접 각도 값을 지정할 수 있습니다.

각도는 선형 그라디언트에서 방향을 쓰는 자리에 첫 번째 값으로 입력합니다.

#00C9FF와 #92FE9D 사이를 120도 각도로 전환되는 그라디언트를 만들어 보겠습니다.

.gradient {
	background: linear-gradient(120deg, #00C9FF, #92FE9D);
}

실행 결과:

이 예제에서는 파란색과 초록색 사이가 왼쪽에서 오른쪽으로 120도 각도로 전환됩니다. 만약 40도 각도의 그라디언트가 필요하다면 40deg처럼 원하는 각도 값을 지정하면 됩니다.

투명 그라디언트

CSS 그라디언트는 RGBA 색상을 사용하면 투명도를 자유롭게 조절할 수 있습니다.

RGBA 색상은 RGB(빨강, 초록, 파랑) 방식에 알파(alpha)라는 추가 매개변수를 더한 것으로, 알파 값은 색상의 투명도를 결정합니다. 알파 값은 0에서 1 사이의 값을 가지며, 값이 작을수록 더 투명해집니다.

#00C9FF에서 #92FE9D로 왼쪽에서 오른쪽으로 전환되는 그라디언트를 만들되, 첫 번째 색상은 50% 투명하게, 마지막 색상은 30% 투명하게 만들어 보겠습니다.

.gradient {
	background: linear-gradient(to right, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7));
}

실행 결과:

앞서 만든 그라디언트와 비교해 보면 색상이 훨씬 투명해진 것을 알 수 있습니다. 이 예제에서는 16진수(hex) 값 대신 RGBA 값을 사용해 색상을 지정했습니다.

첫 번째 색상(파랑)에는 알파 값 0.5를 지정해 50% 투명하게 만들었고, 두 번째 색상(초록)에는 알파 값 0.7을 지정했습니다. 참고로 알파 값이 낮을수록 색상이 더 투명하게 표현됩니다.

경계선(Hard Lines) 만들기

일반적으로 그라디언트를 만들 때는 색상 간에 부드럽고 점진적인 전환이 일어나기를 기대합니다. 하지만 두 색상 사이에 명확한 경계선을 만들어 구분하고 싶은 경우도 있습니다. 이럴 때 '하드 라인(hard line)'을 지정하면 됩니다.

하드 라인을 지정하는 문법은 다음과 같습니다.

linear-gradient(direction, hard-line, colors);

예를 들어 검정색과 초록색 그라디언트의 중간 지점에 경계선을 만들고 싶다면 black 50%, green 50%처럼 지정하면 됩니다. 파란색과 분홍색 그라디언트의 70% 지점에 경계선을 만들고 싶다면 blue 70%, pink 30%처럼 작성하면 됩니다.

그라디언트 중간 지점에 경계선이 생긴 예제를 살펴보겠습니다.

.gradient {
	background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%);
}

실행 결과:

이미지에서 확인할 수 있듯이 그라디언트 중간 지점에 하드 스톱(hard stop) 위치가 생성되어 두 색상이 뚜렷하게 구분됩니다.

CSS 방사형 그라디언트(Radial Gradient)

방사형 그라디언트는 특정 원점에서 사방으로 퍼져 나가며 두 가지 이상의 색상이 전환되는 효과입니다. 방사형 그라디언트의 원점은 타원(ellipse) 또는 원(circle) 형태입니다.

방사형 그라디언트는 최소 두 개의 컬러 스톱을 가져야 하며, 컬러 스톱의 개수에는 제한이 없습니다. 방사형 그라디언트의 문법은 다음과 같습니다.

background: radial-gradient(shape size at position, start color, next colors …, final color);

문법을 하나씩 살펴보겠습니다.

• shape: 방사형 객체의 모양입니다. 기본값은 타원(ellipse)입니다.
• size: 방사형 객체의 크기입니다. 기본값은 farthest-corner입니다.
• at position: 방사형 객체의 위치입니다. 기본값은 center입니다.
• start color: 그라디언트의 첫 번째 색상입니다.
• next colors: 시작 색상과 마지막 색상 사이에 들어갈 중간 색상들입니다.
• final color: 그라디언트의 마지막 색상입니다.

이제 방사형 그라디언트의 문법을 익혔으니 몇 가지 예제를 살펴보겠습니다.

기본 방사형 그라디언트

#4B6CB7에서 #D9E7FF로 전환되는 타원형 방사형 그라디언트를 만들어 보겠습니다.

.gradient {
	background: radial-gradient(#4B6CB7, #D9E7FF);
}

실행 결과:

이 예제에서는 두 가지 색상과 기본값만을 사용해 방사형 그라디언트를 만들었습니다. 기본값을 사용했기 때문에 색상 전환이 균등하게 배분되고, 방사형 객체는 박스 중앙에 위치하며, 모양은 타원으로 적용됩니다.

컬러 스톱 비율 지정하기

방사형 그라디언트에서도 직접 컬러 스톱을 지정할 수 있습니다. 이렇게 하면 색상 전환이 기본값의 균등한 전환 방식 대신 특정 위치에서 일어나게 됩니다.

#4B6CB7에서 #D9E7FF를 거쳐 #9198E5로 전환되는 방사형 그라디언트를 만들어 보겠습니다. 첫 번째 색상이 그라디언트의 25%를 차지하고, 가운데 색상은 50%, 마지막 색상은 25%를 차지하도록 합니다.

.gradient {
	background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);
}

실행 결과:

코드에서 지정한 지점대로 세 가지 색상이 전환되는 것을 볼 수 있습니다. 이 효과를 위해 먼저 그라디언트에 포함할 색상을 지정한 다음, 해당 색상이 차지할 비율을 함께 명시했습니다. 예를 들어 가운데 색상인 #D9E7FF는 그라디언트의 50%를 차지합니다.

모양 변경하기

방사형 그라디언트의 기본 모양은 타원입니다. 하지만 원(circle) 형태로 변경할 수도 있습니다. 그라디언트에 circle 값을 지정하면 됩니다.

#4B6CB7와 #D9E7FF 사이를 전환하되 중심점이 원 형태인 방사형 그라디언트를 만들어 보겠습니다.

.gradient {
	background: radial-gradient(circle, #4B6CB7, #D9E7FF);
}

실행 결과:

이 예제에서는 #4B6CB7와 #D9E7FF 사이의 방사형 그라디언트를 만들었습니다. 그라디언트의 중심점이 타원이 아닌 원 형태로 표현된 것이 핵심입니다.

방사형 그라디언트 위치 지정하기

방사형 그라디언트 중심 객체의 위치는 변경할 수 있습니다. 중심 객체의 위치를 결정하는 데 사용되는 키워드는 네 가지입니다.

• closest-corner
• farthest-corner
• closest-side
• farthest-side

위치 50px 50px에 가장 먼 코너(farthest corner)를 향하는 원형 방사형 그라디언트를 만들어 보겠습니다.

.gradient {
	background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);
}

실행 결과:

이 예제에서는 방사형 그라디언트의 중심점이 50px 50px 위치의 가장 먼 코너에 나타납니다. 중심점이 왼쪽 위 모서리에 위치한 것을 확인할 수 있으며, 이는 그라디언트가 의도한 대로 작동하고 있음을 보여줍니다. 그런 다음 그라디언트가 코드에서 지정한 다음 색상으로 바깥쪽으로 전환됩니다.

마무리

그라디언트는 CSS에서 두 가지 이상의 색상 사이의 전환 효과를 만드는 데 사용됩니다. CSS에서 주로 사용되는 그라디언트는 선형 그라디언트와 방사형 그라디언트 두 가지입니다.

이 글에서는 예제를 통해 CSS에서 선형 그라디언트와 방사형 그라디언트를 만드는 방법, 그리고 각 그라디언트 유형이 제공하는 다양한 속성으로 그라디언트를 커스터마이징하는 방법을 살펴봤습니다. 이제 여러분도 CSS 그라디언트를 전문가처럼 활용할 준비가 되었습니다!