Gradient

CSS Gradient Generator

선형, 방사형, 원뿔형 그라디언트를 무제한 스톱, OKLCH 기반 보간, Tailwind v4 유틸리티 출력으로 만드세요. 실시간 미리보기, 30개 이상의 프리셋, 모두 브라우저 안에서.

선형은 선택한 각도(0° = 위쪽, 90° = 오른쪽)를 따라 직선 방향으로 색을 섞습니다. 방사형은 중심점에서 바깥으로 색이 번지며 — 원 또는 타원 모양에 farthest-corner 같은 크기 키워드를 함께 씁니다. 원뿔형은 중심점을 기준으로 회전합니다 — 컬러 스톱이 시계바늘처럼 각도에 배치됩니다. 원뿔형은 파이 차트, 다이얼 표시, 합성 color-wheel 배경에 특히 잘 어울립니다.

유사하지 않은 색조 사이를 전환할 때 — 예: 파랑 → 노랑, 빨강 → 초록 — 입니다. 기본 sRGB 보간은 중간 지점에서 흐린 회색을 거쳐가지만, OKLCH(CSS Color Module 4의 in oklch)는 지각적으로 균일한 색공간에서 보간하기 때문에 중간색이 선명하게 유지됩니다. 비슷한 색조 두 개로 만든 그라디언트라면 차이가 작지만, 다중 스톱이거나 색조 범위가 넓은 그라디언트에서는 OKLCH가 압도적으로 우수합니다.

컬러 스톱
CSS
Tailwind v4
JSON
프리셋

프로덕션용 CSS 그라디언트를 위해 만들어졌습니다

선형 / 방사형 / 원뿔형, OKLCH 부드러운 보간, Tailwind 친화적 — 그리고 실제로 사용할 때 즐겁게 해주는 작은 디테일들.

세 가지 그라디언트 타입

선형은 0-360° 각도, 방사형은 원형/타원형 + 크기 + 위치, 원뿔형은 시작 각도 + 위치를 지원합니다. 모두 표준을 준수하는 CSS Images Module Level 4 문법으로 출력됩니다.

최대 12개의 컬러 스톱

원하는 퍼센트에 스톱을 추가하고, 위치 슬라이더를 드래그해 미세 조정하며, 스와치를 클릭해 색상을 고르거나 HEX를 붙여넣으세요. 출력 시 스톱은 자동 정렬됩니다. ×를 눌러 삭제하세요(최소 2개 스톱 유지).

OKLCH 기반 보간

기본 sRGB와 최신 in oklch 보간 사이를 전환할 수 있습니다. OKLCH는 색조가 크게 바뀌는 구간에서도 흐릿한 회색 띠 없이 지각적으로 더 부드러운 중간색을 만들어 줍니다. CSS Color 4를 아직 지원하지 않는 브라우저에서도 자연스럽게 폴백됩니다.

CSS, Tailwind v4, JSON 출력

세 가지 출력 패널이 실시간으로 갱신됩니다: 원본 CSS(background-image: linear-gradient(...)), Tailwind v4 임의값 유틸리티(bg-[linear-gradient(...)]), 그리고 Style Dictionary 또는 Figma Tokens에 바로 사용할 수 있는 JSON 디자인 토큰 스니펫.

30개 이상의 엄선된 프리셋

Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — 클릭해서 불러오고 다듬으세요. 각 프리셋은 단순한 이름이 아니라 실제로 프로덕션 품질의 출발점입니다.

실시간 미리보기 + 설계 단계부터의 프라이버시

미리보기는 네이티브 background-image로 렌더링되므로 보이는 그대로가 실제 스타일시트의 결과입니다. 모든 픽셀이 로컬에서 처리됩니다 — DevTools → Network 탭을 열어 외부 요청이 0건임을 직접 확인하세요.

CSS 그라디언트 만드는 법

빈 화면에서 프로덕션용 CSS, Tailwind, 또는 JSON까지 4단계.

  1. 1

    그라디언트 타입 선택

    선형은 배경, 헤더, 히어로 섹션에. 방사형은 스포트라이트, 비네팅, 빛나는 버튼에. 원뿔형은 파이 차트, 컬러 휠, 트렌디한 합성 배경에 적합합니다. 탭으로 전환하세요 — 컬러 스톱은 전환 시에도 유지됩니다.

  2. 2

    컬러 스톱 배치

    컬러 스와치를 클릭해 피커를 열거나 입력란에 HEX를 직접 붙여넣으세요. 슬라이더를 드래그해 스톱 위치를 0-100% 사이로 설정합니다. + 스톱 추가를 클릭하면 가장 큰 간격(중간 지점 색상으로)에 새 스톱이 삽입됩니다. 총 12개까지 가능합니다.

  3. 3

    지오메트리 + 보간 조정

    선형은 각도를 설정하세요(0°는 위, 90°는 오른쪽). 방사형은 모양, 크기 키워드, 중심 위치를 선택하세요. 원뿔형은 시작 각도를 설정합니다. 다중 색조 그라디언트의 중간색을 지각적으로 부드럽게 하려면 색상 보간을 OKLCH로 전환하세요.

  4. 4

    출력 복사

    세 패널이 실시간으로 갱신됩니다: CSS(background-image:...), Tailwind v4(bg-[...]), JSON(디자인 토큰 형태). 각 패널의 복사 아이콘을 누르거나 CSS 다운로드를 클릭해 프로젝트에 바로 넣을 수 있는 gradient.css 파일을 저장하세요.

디자이너와 개발자를 위해

Figma + 별도의 그라디언트 사이트를 여는 것보다 프라이버시 우선의 브라우저 도구가 더 나은 네 가지 일반적인 시나리오.

마케팅 페이지의 히어로 섹션 배경

브랜드와 가까운 프리셋을 고르고, 두 가지 브랜드 컬러를 스톱에 넣고, 깔끔한 중간색을 위해 OKLCH 보간으로 전환하세요. CSS를 복사해 히어로의 스타일시트에 붙여넣으면 됩니다. 총 소요 시간: 2분 이내.

브랜드를 반영한 버튼 + 카드 그라디언트

3 스톱 브랜드 그라디언트를 한 번 만들어 JSON 디자인 토큰으로 복사한 뒤 Style Dictionary / Figma Tokens에 넣으세요. 이제 모든 플랫폼의 모든 버튼과 카드가 같은 그라디언트를 참조로 사용합니다. 한 곳에서 수정하면 어디든 반영됩니다.

차트 + 대시보드용 원뿔형 배경

합성 원뿔형 그라디언트는 파이 차트 시각화, 진행 다이얼, '데이터 로딩' 셔머 상태에 완벽합니다. 원뿔형 타입을 고르고, 시작 각도를 설정하고, 적절한 퍼센트에 스톱을 배치하세요 — 0-360° 각도와 퍼센트 위치가 정확히 일치합니다.

슬라이드, 소셜 게시물, 히어로 이미지용 커스텀 배경

그라디언트를 만들고, 화면비를 목적에 맞춰 설정하고(슬라이드 16:9, 인스타그램 1:1, X 헤더 3:1) 미리보기를 캡처하세요. 또는 CSS를 일회용 HTML 파일에 복사한 뒤 원하는 정확한 픽셀 크기로 브라우저에서 캡처해도 됩니다.

100% 프라이빗 — 브라우저에서 실행됩니다

사용자의 색상과 그라디언트는 절대 기기를 떠나지 않습니다. DevTools → Network를 열면 어떤 작업 중에도 외부 요청이 0건임을 확인할 수 있습니다.

  • 그라디언트 문자열 조합, CSS / Tailwind / JSON 직렬화, 실시간 미리보기 모두 사용자의 기기에서 JavaScript로 실행됩니다 — 서버 사이드 렌더링도, 서드 파티 API도 없습니다.
  • 미리보기는 네이티브 CSS background-image를 사용합니다 — 따라서 렌더링된 그라디언트는 사용자의 브라우저에서 스타일시트가 만들어낼 결과와 정확히 일치합니다.
  • 로그인 없음, 색상 값에 대한 텔레메트리 없음. 쿠키는 쿠키 동의 상태용 1개와 언어 환경설정용 1개만 사용합니다.

관련 가이드

CSS 그라디언트, OKLCH 보간, 디자인 토큰 시스템에 대해 엄선된 읽을거리.

자주 묻는 질문

선형, 방사형, 원뿔형의 차이는 무엇인가요?

선형은 선택한 각도(0° = 위쪽, 90° = 오른쪽)를 따라 직선 방향으로 색을 섞습니다. 방사형은 중심점에서 바깥으로 색이 번지며 — 원 또는 타원 모양에 farthest-corner 같은 크기 키워드를 함께 씁니다. 원뿔형은 중심점을 기준으로 회전합니다 — 컬러 스톱이 시계바늘처럼 각도에 배치됩니다. 원뿔형은 파이 차트, 다이얼 표시, 합성 color-wheel 배경에 특히 잘 어울립니다.

OKLCH 보간은 언제 써야 하나요?

유사하지 않은 색조 사이를 전환할 때 — 예: 파랑 → 노랑, 빨강 → 초록 — 입니다. 기본 sRGB 보간은 중간 지점에서 흐린 회색을 거쳐가지만, OKLCH(CSS Color Module 4의 in oklch)는 지각적으로 균일한 색공간에서 보간하기 때문에 중간색이 선명하게 유지됩니다. 비슷한 색조 두 개로 만든 그라디언트라면 차이가 작지만, 다중 스톱이거나 색조 범위가 넓은 그라디언트에서는 OKLCH가 압도적으로 우수합니다.

Tailwind v4 출력은 무엇을 주나요?

JSX / Blade / HTML에 그대로 붙여넣을 수 있는 임의값 유틸리티입니다: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. tailwind.config.js 수정 없이 모든 Tailwind 4 프로젝트에서 동작합니다. 명명된 색상 토큰을 선호한다면 CSS를 복사한 후 직접 변환해 사용하세요.

구형 브라우저에서도 그라디언트가 동작하나요?

선형과 방사형 그라디언트는 2014년부터 사실상 모든 브라우저에서 지원됩니다. 원뿔형 그라디언트는 2021년까지 모든 에버그린 브라우저에 출시되었습니다. in oklch 보간 키워드는 Chrome 111+, Safari 16.2+, Firefox 113+에서 지원됩니다. 구형 브라우저를 지원해야 한다면 기본 sRGB 보간을 사용하세요 — 시각적 차이는 색조가 크게 변하는 다중 스톱 그라디언트에서 가장 두드러집니다.

서버로 전송되는 것이 있나요?

없습니다. 그라디언트 문자열 생성, CSS / Tailwind / JSON 직렬화, 실시간 미리보기 모두 사용자의 기기에서 JavaScript로 실행됩니다. DevTools → Network를 열면 어떤 작업 중에도 외부 요청이 0건임을 확인할 수 있습니다. 브랜드 컬러나 내부 토큰을 붙여넣어도 — 어떤 것도 노트북을 떠나지 않습니다.