win-j 로고
자유로운 블로그

Developer Design Utility

CSS Gradient 생성기

색상, 방향, 타입, 색상 위치를 조절해 linear-gradient, radial-gradient, conic-gradient CSS background 코드를 생성하고 실시간 미리보기로 확인할 수 있습니다.

Gradient 코드 생성 linear, radial, conic 그라데이션 CSS background 코드를 바로 생성합니다.
실시간 미리보기 색상, 각도, 위치값을 변경하면 미리보기 배경에 즉시 반영됩니다.
복사·다운로드 선택자 코드, CSS 변수, background 속성을 복사하거나 CSS 파일로 저장할 수 있습니다.
Gradient Type Linear
Angle 135°
Color Stops 0% / 100%
Output background
STEP 1

Gradient 설정

그라데이션 타입, 색상, 각도, 적용 선택자를 조합해 원하는 CSS 배경 코드를 만들어보세요.

선형, 원형, 원뿔형 그라데이션을 선택합니다.

0° 135° 360°

linear/conic 타입에서 방향과 회전 기준으로 사용됩니다.

시작 색상입니다. HEX 색상 코드를 입력할 수 있습니다.

끝 색상입니다. 대비가 필요한 UI에서는 밝기 차이를 확인하세요.

0% 0% 100%
0% 100% 100%

생성 결과에 사용할 CSS 선택자를 선택합니다.

직접 입력을 선택한 경우에만 사용됩니다.

CSS 변수 코드 생성 시 사용할 변수명입니다.

:root 변수와 선택자 적용 코드를 함께 출력합니다.

Live Preview
CSS Gradient

색상과 방향을 조절해 실시간 배경 미리보기를 확인하세요.

Type linear
Angle 135°
Colors 2
STEP 2

추천 프리셋

버튼, 카드, 히어로 배경, 썸네일에 자주 사용하는 그라데이션 조합입니다.

기본 UI 그라데이션

강조 / CTA 그라데이션

특수 타입 그라데이션

STEP 3

생성 결과

아래 코드를 CSS 파일 또는 style 속성에 사용할 수 있습니다.

대기 중 
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.

도움말

CSS Gradient 생성기란?

CSS Gradient 생성기는 CSS 그라데이션 문법을 직접 작성하지 않아도 배경 그라데이션 코드를 쉽게 만들 수 있는 디자인 유틸리티입니다. linear-gradient, radial-gradient, conic-gradient 코드를 실시간 미리보기와 함께 생성할 수 있습니다.

사용 방법

  1. Linear, Radial, Conic 중 사용할 그라데이션 타입을 선택합니다.
  2. 두 색상과 색상 위치, 각도 또는 회전 기준을 조절하며 미리보기를 확인합니다.
  3. 적용할 CSS 선택자와 CSS 변수 사용 여부를 정한 뒤 CSS 코드를 생성합니다.
  4. 생성된 background 코드를 복사하거나 CSS 파일로 다운로드해 프로젝트에 적용합니다.
히어로 배경

랜딩페이지 첫 화면, 서비스 소개 영역, 캠페인 배너에 사용할 부드러운 배경 코드를 빠르게 만들 수 있습니다.

버튼과 카드

CTA 버튼, 가격 카드, 강조 박스처럼 시선을 모아야 하는 UI에 맞는 색상 조합을 실시간으로 비교하세요.

디자인 시스템

CSS 변수 옵션을 사용하면 같은 그라데이션을 여러 컴포넌트에서 재사용하고 나중에 색상을 쉽게 바꿀 수 있습니다.

생성된 CSS 사용 방법

생성된 CSS 코드를 복사해 스타일시트에 붙여넣으면 됩니다. CSS 변수 옵션을 사용하면 :root에 그라데이션 값을 저장하고 여러 선택자에서 var()로 재사용할 수 있습니다.

디자인 팁

  • 부드러운 그라데이션을 원한다면 밝기 차이가 비슷한 색상을 조합하는 것이 좋습니다.
  • CTA 버튼이나 강조 영역에는 대비가 강한 색상 조합이 효과적입니다.
  • 그라데이션 위에 텍스트를 올릴 때는 반드시 가독성과 색상 대비를 확인해야 합니다.
  • 같은 그라데이션을 여러 컴포넌트에 사용할 경우 CSS 변수로 관리하는 것이 좋습니다.

이 도구를 찾는 사용자가 자주 하는 작업

CSS Gradient Generator, linear-gradient generator, radial-gradient generator, conic-gradient generator, CSS background generator, gradient CSS maker를 찾는 사용자는 보통 웹사이트, 랜딩페이지, 버튼, 카드, 블로그 썸네일에 사용할 재사용 가능한 배경 코드를 만들고자 합니다.

linear-gradient와 radial-gradient의 차이는 무엇인가요?

linear-gradient는 색상이 직선 방향으로 변하고, radial-gradient는 원형으로 퍼지는 방식입니다. linear는 섹션과 버튼 배경에 많이 쓰이고, radial은 부드러운 강조 효과에 적합합니다.

그라데이션을 글자에 적용할 수 있나요?

가능합니다. background-clip: text와 투명한 글자색을 함께 사용하면 텍스트에 그라데이션을 적용할 수 있습니다. 다만 작은 화면에서는 가독성을 반드시 확인하는 것이 좋습니다.

CSS 변수 옵션은 왜 사용하나요?

CSS 변수는 같은 그라데이션을 여러 컴포넌트에서 재사용하기 좋습니다. 디자인 시스템을 관리하거나 나중에 색상을 한 번에 바꿔야 할 때도 유용합니다.

그라데이션도 접근성에 영향을 주나요?

영향을 줄 수 있습니다. 그라데이션 배경 위에 텍스트나 버튼을 올릴 경우 전체 그라데이션 구간에서 충분한 전경색 대비가 확보되는지 확인해야 합니다.

EDITORIAL GUIDE

CSS 그라데이션의 방향·색상 지점과 텍스트 대비를 함께 설계하는 법

그라데이션은 두 색을 고르는 것보다 색상 지점, 방향과 반복 방식이 결과를 크게 좌우합니다. 배경이 위치마다 달라지는 만큼 위에 놓이는 텍스트의 대비도 한 지점이 아니라 전체 영역에서 확인해야 합니다.

작성 · 검토
win-j
최종 검토
2026년 8월 8일

이런 분께 유용합니다

  • 배너·카드 배경을 만드는 웹 디자이너
  • 그라데이션 CSS 문법을 확인하는 개발자
  • 배경 위 텍스트 대비를 점검하는 운영자

대표 활용 상황

  • 선형·방사형·원뿔형 그라데이션을 비교할 때
  • 두 색의 시작·종료 지점을 조절할 때
  • 안전한 선택자와 CSS 사용자 정의 속성으로 코드를 만들 때

처음부터 결과 확인까지

  1. 1

    선형, 방사형 또는 원뿔형 중 표현 목적에 맞는 유형을 선택합니다.

  2. 2

    두 색을 정하고 각각의 색상 지점이 앞에서 뒤로 이어지도록 설정합니다.

  3. 3

    선형은 각도, 방사형은 형태와 위치, 원뿔형은 시작 각도와 중심을 조절합니다.

  4. 4

    반복 여부와 미리보기 크기를 실제 사용 영역에 맞춰 확인합니다.

  5. 5

    필요하면 유효한 CSS 선택자와 --로 시작하는 사용자 정의 속성 이름을 입력합니다.

  6. 6

    코드를 적용한 뒤 배경의 가장 밝고 어두운 지점에서 텍스트와 아이콘 대비를 각각 검사합니다.

실제 예시 1

대각선 브랜드 배경

입력
linear, 135deg, #2563EB 0%, #7C3AED 100%
결과
왼쪽 위에서 오른쪽 아래로 이어지는 선형 그라데이션

두 지점이 순서대로 배치되어 색 전환이 자연스럽습니다.

실제 예시 2

중앙 강조 배경

입력
radial, circle at center, 밝은색 0%, 어두운색 75%
결과
중앙에서 바깥으로 어두워지는 방사형 그라데이션

중앙 콘텐츠를 강조할 수 있지만 텍스트 대비는 위치별로 확인해야 합니다.

계산·처리 기준

선택한 유형에 따라 linear-gradient(), radial-gradient() 또는 conic-gradient() 함수를 만들고 각 색상과 지점을 background-image에 배치합니다. 선택자는 문법과 위험 문자를 제한하고, 사용자 정의 속성은 --로 시작하는 유효한 이름만 허용합니다.

알아둘 한계

  • 두 개의 색상 지점만 지원하며 다중 색상·색상 보간 공간은 직접 편집해야 합니다.
  • conic-gradient와 일부 고급 문법은 오래된 브라우저에서 지원이 다를 수 있습니다.
  • 그라데이션 위 텍스트의 WCAG 대비율을 자동 계산하지 않습니다.
  • 배경 이미지 대체색과 인쇄 환경은 생성 코드에 자동 포함되지 않습니다.
개인정보 처리

색상, 선택자와 CSS 변수 이름은 브라우저에서만 처리하며 서버로 전송하지 않습니다.

자주 묻는 질문

첫 번째 지점이 두 번째보다 뒤에 있어도 되나요?

브라우저가 보정할 수 있지만 의도 파악이 어려워지므로 이 도구는 첫 지점이 두 번째보다 크면 수정을 요청합니다.

background 대신 background-image를 출력하는 이유는 무엇인가요?

기존 배경색 같은 다른 background 하위 속성을 불필요하게 초기화할 가능성을 줄이기 위해서입니다.

한 지점의 대비만 통과하면 충분한가요?

아닙니다. 텍스트가 닿는 그라데이션의 가장 밝고 어두운 영역을 모두 확인해야 합니다.