CSS 그라데이션 생성기 무료 — 실시간 미리보기·코드 복사
CSS 선형·원형·원뿔형 그라데이션을 시각적으로 만들고 코드를 바로 복사합니다. 프리셋 5종, 색상 최대 5개, 각도·위치 조절을 지원합니다.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
-webkit-background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
background-size: 100% 100%;
자주 묻는 질문
Q. linear-gradient와 radial-gradient의 차이는?
linear-gradient는 직선 방향으로 색상이 전환되고, radial-gradient는 중심에서 바깥으로 원형으로 전환됩니다.
Q. conic-gradient란 무엇인가요?
원의 중심을 축으로 색상이 회전하는 그라데이션입니다. 파이 차트나 색상환 표현에 주로 사용됩니다.
Q. 생성된 CSS를 바로 사용할 수 있나요?
네, 복사 버튼으로 CSS 코드를 복사한 뒤 원하는 요소의 background 속성에 붙여넣으면 됩니다.
Q. 색상을 몇 개까지 추가할 수 있나요?
최소 2개에서 최대 5개의 색상 정지점(color stop)을 설정할 수 있습니다.
Q. -webkit- 접두사가 필요한가요?
최신 브라우저는 접두사 없이 동작하지만, 생성된 코드에 -webkit- 버전도 포함되어 있어 구형 브라우저도 지원합니다.
Q. 그라데이션을 배경 이미지와 함께 사용할 수 있나요?
네, CSS의 background-image 속성에서 그라데이션과 url()을 콤마로 구분해 함께 사용할 수 있습니다.
이 도구 사용하는 방법
미리 만들어진 프리셋 버튼으로 빠르게 시작합니다.
선형·원형·원뿔형 중 선택하고 각도를 조절합니다.
색상 피커로 원하는 색상을 선택하고 위치를 설정합니다.
실시간 미리보기를 확인한 뒤 CSS 코드를 복사합니다.
CSS 그라데이션 생성기 무료 — 실시간 미리보기·코드 복사에 대해 알아야 할 전문 지식
CSS 그라데이션은 CSS Images Module Level 3 (W3C)에서 정의되며, 2011년 WebKit에 처음 도입되었습니다. conic-gradient는 2018년 CSS Images Module Level 4에서 추가되었으며, 현재 모든 주요 브라우저에서 지원됩니다. 그라데이션은 실제 이미지 파일이 아닌 CSS 함수이므로 네트워크 요청이 없어 성능상 유리합니다. background-size와 함께 사용하면 패턴·체크보드 등 복잡한 효과도 구현할 수 있습니다.
함께 사용하면 좋은 도구
HEX·RGB·HSL·CMYK 색상 변환, 보색·유사색·삼각 배색 팔레트 자동 생성, Tailwind CSS 색상 추천, WCAG 명암비 검사까지 무료로 제공합니다.
JPG·PNG 이미지를 브라우저에서 1초 만에 WebP로 변환·압축합니다. 서버 전송 없이 클라이언트 처리로 개인정보 안전. PNG 대비 26% 용량 절감으로 Core Web Vitals LCP 개선.
블로그 글자수를 실시간으로 측정합니다. SEO 최적 분량 2,000자 달성 여부를 즉시 확인하고 키워드 밀도까지 체크하세요. 네이버·티스토리·워드프레스 모두 지원.