예술·창작

🌈 CSS 그라디언트 생성기

Linear · Radial · Conic · Mesh · Repeating 5종 그라디언트와 RGB · HSL · OKLCH · LAB 4 색공간 보간을 한 번에 비교. WCAG 대비비·색맹 시뮬, 노이즈, 한국 무드 프리셋 30+, CSS · Tailwind · SVG · React · SwiftUI · Flutter 6포맷 코드 자동 생성.

LINEAR · OKLCH

보간 모드 비교 (같은 stops · 다른 색공간)

그라디언트 유형

각도 135°

노이즈 0%

컬러 Stops (3/8 · 바 클릭으로 추가)

실용 미리보기

그라디언트 카드

제목 + 부제 가독성 확인용

코드 복사 (6포맷)

background: linear-gradient(in oklch 135deg, #FF6B9D 0.0%, #7B82E0 50.0%, #3EC8FF 100.0%);

📥 이미지 내보내기 + 즐겨찾기

노이즈 포함

📚 알아두면 좋아요

색상 보간 모드 — 왜 OKLCH가 중요한가

그라디언트의 품질은 두 색상 사이를 어떤 색공간에서 보간하느냐에 크게 좌우됩니다. RGB는 단순하지만 보색 사이 중간이 회색에 가까워지고, HSL은 hue가 짧은 길로 회전하며 채도가 떨어지기 쉽습니다. OKLCH는 인간 시각의 인지 균등성을 반영해 설계되어 UI 그라디언트에 적합합니다.

색공간	특징	추천 용도	단점
RGB	직선 보간 (가장 단순)	단색 명도 변화·이펙트	보색 중간이 탁한 회색이 됨
HSL	Hue 회전 보간	일러스트·만화풍 그라디언트	명도 변화 반영 X
OKLCH	인지 균등 (CSS Color 4)	UI 그라디언트 ★ 권장	브라우저 지원 Chrome 111+
LAB	인쇄 표준 색공간	인쇄물·정밀 디자인	브라우저 지원 제한적

본 도구는 RGB 외 색공간을 사용할 때 자동으로 16개 중간 stop을 생성해 모든 브라우저에서 동일한 결과를 보여주며, "CSS" 코드로 출력할 때는 modern syntax (linear-gradient(in oklch, ...))도 함께 지원합니다.

5종 그라디언트 유형 — 언제 무엇을 쓸까

Linear — 가장 보편. 헤더·버튼·배경. 각도(0~360°)로 방향 결정.
Radial — 중심에서 방사형. 스포트라이트·spotlight 카드·발광 효과. circle은 정원, ellipse는 컨테이너 비율을 따름.
Conic — 시계 방향으로 회전. 도넛 차트·360° 색환·로딩 인디케이터. 단, Figma 미지원.
Mesh — 4 모서리 색상 합성. 부드럽고 트렌디한 SaaS 스타일 (Stripe·Mesh.cool). CSS는 multi-radial-gradient로 출력.
Repeating — Linear/Radial을 반복. 패턴·스트라이프·줄무늬 배경.

자주 묻는 질문

Q1. RGB와 OKLCH 보간 — 실제로 어떻게 다른가요?

두 색을 단순 RGB로 보간하면 중간이 어두워지거나 채도가 떨어집니다 (특히 빨강↔파랑). OKLCH는 인지적으로 균등한 색공간이라 같은 거리만큼 떨어진 색이 사람 눈에 같은 차이로 느껴집니다.

/* 예시: 노랑 → 파랑 */
linear-gradient(90deg, yellow, blue)            /* RGB: 중간이 칙칙한 회색 */
linear-gradient(in oklch, yellow, blue)         /* OKLCH: 중간이 자연스러운 초록 */

Chrome 111+, Safari 16.4+에서 native syntax 지원. 본 도구는 자동으로 dense stops를 생성해 폴백을 제공합니다.

Q2. Tailwind에서 mesh gradient를 쓰려면?

Tailwind 4의 arbitrary value 문법으로 직접 CSS를 넣거나 theme.extend.backgroundImage에 등록하는 방식이 있습니다.

/* 1) arbitrary value (1회용) */
<div className="bg-[radial-gradient(circle_at_0%_0%,#FF6B9D_0%,transparent_70%)]" />

/* 2) tailwind.config.js 등록 (재사용) */
theme: {
  extend: {
    backgroundImage: {
      'mesh-1': 'radial-gradient(circle at 0% 0%, #FF6B9D 0%, transparent 70%), radial-gradient(...)',
    },
  },
}
// 사용: <div className="bg-mesh-1" />

본 도구의 "Tailwind" 코드 탭은 arbitrary value 형태로 자동 변환합니다.

Q3. 그라디언트 위에 텍스트 가독성을 어떻게 보장하나요?

그라디언트는 위치마다 색이 다르므로 전 구간 worst-case 대비비를 봐야 합니다. 본 도구의 "분석·접근성" 탭은 그라디언트를 12개 지점으로 샘플링해 흰/검 텍스트와의 최저 대비비를 표시합니다. WCAG 기준:

본문 (16px 미만): 4.5:1 이상 (AA)
큰 글자 (18pt+ 또는 14pt+ 굵게): 3:1 이상
UI 컴포넌트·아이콘: 3:1 이상

그라디언트 위에 텍스트를 올릴 때는 어두운 영역 위에 흰 텍스트, 밝은 영역 위에 검정 텍스트를 둘 수 없으므로 text-shadow나 반투명 오버레이로 보강하는 것도 흔한 접근입니다.

Q4. Figma에서 conic gradient를 어떻게 쓰나요?

Figma는 2026년 5월 기준 conic-gradient를 직접 지원하지 않습니다. 대안:

SVG 임포트: 본 도구의 SVG 코드를 다운로드 후 Figma에 import (단, SVG conic은 표준이 아니라 radial로 폴백됨)
이미지로 export: 본 도구의 PNG 다운로드를 Figma에 배치
Linear/Radial로 대체: 디자인 의도가 회전 효과가 아니라면 Linear가 호환성·유지보수 측면에서 우월

Sketch와 Adobe XD도 마찬가지로 conic 미지원입니다.

Q5. SwiftUI / Flutter에 적용하는 방법은?

본 도구의 "Swift", "Flutter" 코드 탭이 그대로 복사·사용 가능한 코드를 출력합니다. 단, 두 프레임워크 모두 mesh gradient는 표준 지원이 제한적입니다.

SwiftUI: iOS 18 / macOS 15+에서 MeshGradient 지원, 그 미만은 LinearGradient 폴백 권장
Flutter: mesh 표준 위젯이 없어 RadialGradient 4개를 Stack으로 합성

Hex 색상은 SwiftUI에서는 Color(hex: "#xxxxxx") extension이, Flutter에서는 Color(0xFFxxxxxx)가 필요합니다.

Q6. 노이즈/그레인 효과는 어떻게 만드나요?

요즘 디자인 트렌드인 그레인 그라디언트는 SVG feTurbulence 필터로 생성한 노이즈 패턴을 그라디언트 위에 오버레이합니다. 본 도구는 노이즈 슬라이더 (0~100%) 조절만으로 자동 생성·미리보기·PNG export까지 지원합니다.

/* CSS multi-background로 노이즈 + 그라디언트 합성 */
background-image:
  url("data:image/svg+xml,...feTurbulence..."),
  linear-gradient(135deg, #FF6B9D, #3EC8FF);

Q7. WCAG 대비비를 통과하는 그라디언트를 만드는 팁?

전 구간 4.5:1 이상을 통과시키려면 그라디언트의 명도 폭을 좁게 유지해야 합니다. 다음 패턴이 안전합니다:

어두운 그라디언트 + 흰 텍스트: HSL 기준 명도 0~30% 범위에서만 변화
밝은 그라디언트 + 검정 텍스트: HSL 명도 75~95% 범위
중간 명도는 피하기: 명도 40~60%는 흰/검 양쪽 모두 4.5:1 미달 가능

불가피하게 명도 폭이 큰 그라디언트가 필요하면, 텍스트 영역에만 어두운 오버레이 (linear-gradient(rgba(0,0,0,0.4), transparent))를 추가하거나 strong text-shadow 적용이 일반적 우회법입니다.

Q8. 이미지에서 색상을 추출할 때 안전한가요?

네. 본 도구의 "이미지 → 색상 추출" 기능은 전적으로 브라우저 내에서만 처리됩니다. 이미지는 서버에 업로드되지 않으며, K-means 클러스터링으로 5개 대표 색상을 추출한 뒤 메모리에서 즉시 폐기됩니다 (URL.revokeObjectURL). 사진의 EXIF 정보나 원본도 외부로 전송되지 않습니다.

🌈 CSS 그라디언트 생성기

그라디언트 카드

색상 보간 모드 — 왜 OKLCH가 중요한가

5종 그라디언트 유형 — 언제 무엇을 쓸까

자주 묻는 질문

관련 도구