CSS 그라디언트 생성기
실시간 미리보기와 복사용 코드로 여러 색상 스톱의 선형·원형·원뿔형 CSS 그라디언트를 만듭니다. 무료, 업로드 없음, 브라우저 처리.
색 10%
색 2100%
background: linear-gradient(90deg, #8b5cf6 0%, #06b6d4 100%);🔒 브라우저에서 생성되며 업로드되지 않습니다.
CSS 그라디언트를 시각적으로
색상 스톱을 최대 8개까지 추가하고 위치를 드래그한 뒤 선형·원형·원뿔형과 각도 또는 원형 모양을 정하면
미리보기가 실시간으로 갱신되고, 바로 붙여넣을 background 선언이 생성됩니다. 모든 설정은 공유
링크에 담깁니다. 스타일시트에 그대로 복사하세요.
선형·원형·원뿔형
선형은 지정한 각도의 직선을 따라, 원형은 중심에서 바깥으로(원 또는 타원), 원뿔형은 중심을 기준으로 색을 회전시키며 섞습니다 — 색상환·파이 차트·진행 링에 유용합니다. 모두 이미지 없이 순수 CSS입니다.
자주 묻는 질문
어디에나 쓸 수 있나요?
네. 생성된 값은 모든 최신 브라우저에서 어떤 요소의 CSS 배경으로도 동작합니다.
색을 몇 개까지 넣을 수 있나요?
2개부터 8개까지 넣을 수 있습니다. 각 스톱은 고유한 색과 위치를 가지며, 2개까지 언제든 제거할 수 있습니다.
각도가 모든 유형에 적용되나요?
각도는 선형과 원뿔형에 적용됩니다. 원형은 중심에서 바깥으로 퍼지므로 각도 대신 원/타원 모양을 선택합니다.
업로드되는 게 있나요?
아니요. 색 선택에 따라 브라우저에서 그라디언트를 만들 뿐 아무것도 전송되지 않습니다.