CSS 그라데이션 생성기 — 시각적으로 그라데이션 디자인
실시간 미리보기로 선형 및 방사형 CSS 그라데이션을 만들고 바로 사용할 수 있는 background 코드를 복사하세요.
🔒 모두 브라우저 안에서 동작합니다. 입력과 출력은 서버로 전송되거나 저장되지 않아 안전합니다.
도움이 됐나요? 눌러서 반응하기
이 도구 소개
선형 및 방사형 CSS 그라데이션을 시각적으로 디자인하세요. 색상 정지점을 추가하고 드래그해 위치를 옮기며 각도를 설정하면 실시간 미리보기가 즉시 갱신됩니다. 마음에 들면 바로 붙여넣을 수 있는 background 코드를 복사해 스타일시트에 사용하세요. 모든 작업은 브라우저에서 이루어집니다.
자주 묻는 질문
CSS 그라데이션은 어떻게 만드나요?
선형 또는 방사형을 선택하고 두 가지 이상의 색을 골라 정지점을 배치한 뒤 각도나 중심을 조정하세요. 도구가 해당하는 background 값을 대신 작성해 주므로 복사해서 CSS 규칙에 붙여넣기만 하면 됩니다.
선형 그라데이션과 방사형 그라데이션의 차이는 무엇인가요?
선형 그라데이션은 선택한 각도의 직선을 따라 색을 섞고, 방사형 그라데이션은 중심점에서 원이나 타원 모양으로 바깥쪽으로 색을 섞습니다. 선형은 배경과 버튼에, 방사형은 스포트라이트나 부드러운 광채 표현에 어울립니다.
서버로 전송되는 것이 있나요?
아니요. 미리보기와 생성된 코드는 모두 브라우저에서 만들어지므로 디자인에 관한 어떤 정보도 업로드되거나 저장되지 않습니다.