그라데이션 생성기
CSS 그라데이션을 시각적으로 만들고 코드를 복사합니다
Linear와 Radial 두 유형을 오가며 각도(0~360도)와 색상 정지점을 슬라이더로 움직이면 미리보기와 CSS 코드가 동시에 바뀝니다. 정지점은 원하는 만큼 추가하고 각 색의 위치를 0~100% 사이에서 따로 잡을 수 있어 세 가지 이상 색이 섞인 배경도 만들 수 있습니다. 디자인 시안의 그라데이션을 눈으로 맞춰 가며 CSS로 옮기는 프런트엔드 개발자, 랜딩 페이지 히어로 배경을 직접 꾸미는 마케터가 주로 씁니다. 생성된 코드는 background 속성에 그대로 붙여넣으면 됩니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
그라데이션, 이렇게 쓰세요
색상 정지점(color stop)과 각도를 조절해 linear·radial 그라데이션 CSS를 만들고, 미리보기를 보며 코드를 바로 복사합니다.
버튼·히어로 배경·카드 헤더에 단색 대신 깊이감을 줄 때, 디자인 시안의 그라데이션을 CSS로 옮길 때 씁니다.
정지점이 3개 이상이면 중간 색을 명시해야 탁한 구간이 생기지 않습니다. 예: linear-gradient(135deg, #0E9AA7 0%, #4353E8 100%).
같은 카테고리 도구
자주 묻는 질문
Q. 텍스트에 그라데이션을 입힐 수 있나요?
background-clip: text 와 color: transparent 를 함께 주면 됩니다. 생성된 코드에 두 줄만 추가하세요.
Q. Safari에서 색이 다르게 보여요.
투명(transparent)을 정지점으로 쓰면 브라우저마다 보간이 다릅니다. rgba(색, 0) 처럼 같은 색의 투명값을 쓰세요.
Q. conic-gradient(원뿔형)도 만들 수 있나요?
현재는 linear와 radial 두 유형만 지원합니다. 원뿔형이 필요하면 생성된 linear 코드에서 함수명을 conic-gradient(from 0deg, ...)로 바꾸고 각도 부분만 손보면 됩니다.