CSS 그라디언트 생성기

CSS 그라디언트 생성기란?

CSS 그라디언트 생성기는 CSS의 linear-gradient, radial-gradient, conic-gradient 함수를 시각적으로 편집해 주는 도구입니다. 컬러 스톱을 손으로 일일이 타이핑할 필요 없이, 트랙 위에서 색을 드래그하면 미리보기가 즉시 갱신되고, 그대로 스타일시트에 붙여 넣을 수 있는 CSS가 만들어집니다.

요즘 UI에서 그라디언트는 거의 모든 곳에 쓰입니다. 히어로 섹션, 카드 오버레이, 버튼 상태, 글로우 효과, 다크 모드의 미묘한 톤 변화, 로딩 스켈레톤, 장식용 보더까지 말이죠. 그라디언트 문법을 직접 읽고 쓸 줄 알면 작업이 빨라지지만, 아이디어를 빠르게 스케치하는 데에는 시각적 생성기를 따라올 게 없습니다.

CSS는 세 가지 그라디언트를 지원합니다. *Linear*는 임의의 각도로 직선을 따라 흐르고, *Radial*은 한 점에서 원이나 타원 모양으로 퍼져 나가며, *Conic*은 시계 문자판처럼 중심점을 기준으로 색이 회전합니다. 각각 어울리는 용도가 다르고, 한 배경 안에서 여러 그라디언트를 겹쳐 쓸 수도 있습니다.

그라디언트를 만들면서 배우게 되는 것

• 그라디언트는 *방향*(또는 모양)과 *컬러 스톱*(색상과 선택적인 위치)으로 정의됩니다.
• 같은 위치에 컬러 스톱 두 개를 두면 *하드 에지*가 만들어져, 줄무늬나 분할 배경에 유용합니다.
• oklch 같은 최신 컬러 스페이스를 쓰면 rgb나 hsl보다 시각적으로 더 균일하고 부드러운 그라디언트가 나옵니다.

CSS 그라디언트, 단계별로 만들어 보기

1. 1

   그라디언트 종류 선택

   직선으로 색이 흐르게 하려면 linear, 원형으로 퍼지게 하려면 radial, 중심을 기준으로 회전시키려면 conic을 고르세요.

2. 2

   각도 또는 위치 설정

   linear는 각도를 도(°) 단위로 지정합니다. CSS에서는 0deg가 아래에서 위로 향하는 방향이라는 점에 주의하세요. radial과 conic은 중심 위치를 잡아 줍니다.

3. 3

   컬러 스톱 추가하고 배치

   원하는 만큼 색을 추가하고, 트랙 위에서 각 스톱을 드래그해 위치를 조정하세요. 두 스톱을 같은 위치에 두면 경계가 또렷한 하드 에지가 만들어집니다.

4. 4

   실제 모양에서 미리보기

   전체 폭 히어로, 카드, 버튼 사이를 전환해 가면서 종횡비가 달라질 때 그라디언트가 어떻게 보이는지 확인하세요.

5. 5

   CSS 복사

   완성된 background 선언을 복사해서 스타일시트에 그대로 붙여 넣으면 됩니다.

CSS 그라디언트 빠른 참조

세 가지 그라디언트 함수와 그 안에 들어가는 요소들. 자세한 레퍼런스는 MDN 문서: linear-gradient, radial-gradient, conic-gradient.

따라 해 볼 만한 CSS 그라디언트 예시

.hero {  background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}

.card {  background:    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),    #1f2230;}

.stripes {  background: repeating-linear-gradient(    45deg,    #1a1a1a 0 12px,    #2a2a2a 12px 24px  );}

CSS 그라디언트에서 자주 하는 실수

• 컬러 스톱을 너무 많이 넣기 — 보통 3~4개면 충분합니다. 많아질수록 결과가 탁해지기 쉬워요.
• CSS 그라디언트의 0deg가 아래에서 위 방향이라는 사실을 잊는 것 (많은 디자인 툴에서는 0°가 오른쪽 방향이라 헷갈리기 쉽습니다).
• 콘트라스트가 강한 그라디언트 위에 텍스트를 올리면서 양쪽 끝 색 모두에 대해 가독성을 확인하지 않는 것 — WCAG 명도 대비를 항상 염두에 두세요.

CSS 그라디언트 자주 묻는 질문