그라디언트 생성기

선형, 원형, 원뿔형 그라디언트를 만들어 CSS나 이미지로 내보냅니다

파일이 기기 밖으로 나가지 않습니다
브라우저에서 실행
무료, 가입 불필요, 워터마크 없음

색상 정지점

막대를 클릭해 정지점을 추가하세요. 핸들을 드래그해 이동하고, 방향키로 미세 조정, Delete로 삭제합니다.

코드

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

첫 줄은 “in oklab/oklch”를 지원하지 않는 브라우저를 위해 정지점을 미리 계산한 대체 코드입니다.

그라디언트 생성기 사용 방법

선형, 원형, 원뿔형 그라디언트를 정지점 개수 제한 없이 만들고 sRGB, OKLab, OKLCH 중 보간 방식을 고릅니다. CSS, Tailwind, SVG 코드로 복사하거나 최대 8192px 이미지로 받을 수 있습니다.

‘유형’(선형, 원형, 원뿔형)을 고르고 ‘각도’, ‘모양’, 중심 위치를 정합니다. 원형과 원뿔형은 미리 보기에서 드래그해 중심을 옮길 수 있습니다.

‘색상 정지점’을 편집합니다. 막대를 클릭하면 추가되고, 핸들을 드래그하면 이동하며, 목록에서 각 색과 위치를 바꿀 수 있습니다.

‘색상 보간 공간’(sRGB, OKLab, OKLCH)을 고릅니다. ‘프리셋’이나 ‘무작위’로 시작해도 됩니다.

CSS, Tailwind, SVG 탭에서 코드를 복사합니다.

이미지가 필요하면 ‘너비’와 ‘높이’를 정하거나 크기를 고르고, PNG, JPG, WebP 중 하나를 선택해 다운로드합니다.

자주 묻는 질문

sRGB, OKLab, OKLCH 보간은 어떻게 다른가요?

sRGB는 기존 CSS 방식이라 보색끼리 섞으면 가운데가 회색빛이 될 수 있습니다. OKLab은 지각적으로 균일해 중간이 탁해지지 않고, OKLCH는 색상환을 따라 이동해 선명함을 유지합니다.

OKLab, OKLCH 그라디언트가 오래된 브라우저에서도 보이나요?

CSS 출력의 첫 줄은 “in oklab/oklch”를 지원하지 않는 브라우저를 위해 미리 계산한 정지점으로 만든 대체 코드입니다. SVG 코드와 다운로드 이미지도 미리 계산한 정지점을 쓰므로 어디서나 같게 보입니다.

원뿔형에서 SVG 탭을 쓸 수 없는 이유는?

SVG에는 원뿔형 그라디언트가 없습니다. PNG, JPG, WebP 이미지로 다운로드하세요.

투명한 정지점도 쓸 수 있나요?

네. rgba()나 #rrggbbaa처럼 투명도가 있는 색을 쓸 수 있습니다. JPG는 투명도를 지원하지 않으니 투명함을 살리려면 PNG나 WebP로 받으세요.

이미지는 서버에서 만들어지나요?

아니요. 브라우저 캔버스에 그린 뒤 바로 저장합니다. 크기는 한 변 1~8192px입니다.

키보드로 정지점을 세밀하게 옮기려면?

정지점 핸들에 포커스를 두고 방향 키로 1%씩(Shift는 10%) 옮기고, Home과 End로 양 끝으로 보내며, Delete로 삭제합니다. 정지점은 항상 2개 이상 남습니다.

그라디언트 생성기 사용 방법

‘색상 정지점’을 편집합니다. 막대를 클릭하면 추가되고, 핸들을 드래그하면 이동하며, 목록에서 각 색과 위치를 바꿀 수 있습니다.

‘색상 보간 공간’(sRGB, OKLab, OKLCH)을 고릅니다. ‘프리셋’이나 ‘무작위’로 시작해도 됩니다.

CSS, Tailwind, SVG 탭에서 코드를 복사합니다.

이미지가 필요하면 ‘너비’와 ‘높이’를 정하거나 크기를 고르고, PNG, JPG, WebP 중 하나를 선택해 다운로드합니다.

자주 묻는 질문

sRGB, OKLab, OKLCH 보간은 어떻게 다른가요?

OKLab, OKLCH 그라디언트가 오래된 브라우저에서도 보이나요?

원뿔형에서 SVG 탭을 쓸 수 없는 이유는?

SVG에는 원뿔형 그라디언트가 없습니다. PNG, JPG, WebP 이미지로 다운로드하세요.

투명한 정지점도 쓸 수 있나요?

네. rgba()나 #rrggbbaa처럼 투명도가 있는 색을 쓸 수 있습니다. JPG는 투명도를 지원하지 않으니 투명함을 살리려면 PNG나 WebP로 받으세요.

이미지는 서버에서 만들어지나요?

아니요. 브라우저 캔버스에 그린 뒤 바로 저장합니다. 크기는 한 변 1~8192px입니다.

키보드로 정지점을 세밀하게 옮기려면?

정지점 핸들에 포커스를 두고 방향 키로 1%씩(Shift는 10%) 옮기고, Home과 End로 양 끝으로 보내며, Delete로 삭제합니다. 정지점은 항상 2개 이상 남습니다.