🌈
무료 CSS 그래디언트 생성기
라이브 미리보기와 함께 선형, 방사형, 원뿔형 CSS 그래디언트를 만듭니다. 한 번의 클릭으로 CSS를 복사합니다.
한 번 로드하면 오프라인에서도 작동
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);서로 많이 다른 색 사이에 회색 중간색이 생기는 것을 방지해요. 오래된 브라우저를 위해 일반 sRGB 줄도 대체용으로 추가돼요.
0%
100%
프리셋
주요 용도
- Hero 섹션용 그래디언트 만들기웹사이트 hero 섹션 및 랜딩 페이지용 전체 페이지 그래디언트 배경을 디자인합니다.
- 그래디언트 버튼 및 CTA 만들기눈에 띄는 그래디언트 버튼 배경을 디자인하여 행동 촉구를 두드러지게 합니다.
- 카드용 그래디언트 배경 만들기카드, 모달, 사이드바 및 UI 컴포넌트 배경용 그래디언트 채우기를 디자인합니다.
- 소셜 미디어 그래픽용 그래디언트 만들기Instagram 게시물, YouTube 썸네일 및 Twitter 카드용 생생한 그래디언트 배경을 디자인합니다.
- 차트용 색상 눈금 만들기히트맵, 진행률 표시줄 및 데이터 시각화용 그래디언트 색상 눈금을 생성합니다.
사용 방법
그라데이션 생성기는 브라우저에서 CSS 그라데이션 문자열을 직접 만듭니다. 라이브러리, 서버, 업로드가 없습니다. 직접 작성한 함수가 색상 정지점과 각도로 올바른 linear-gradient, radial-gradient, conic-gradient 구문을 실시간으로 조합한 뒤 선택한 출력 대상에 맞게 형식화합니다.
- 1정지점과 방향 설정브라우저 기본 색상 선택기로 색상 정지점을 2~6개 설정하고, 범위 슬라이더로 각 정지점을 0–100% 축에 배치합니다. 선형과 원뿔형 그라데이션은 각도(0–360°)도 고르고, 원형 그라데이션은 모양(타원 또는 원)과 그라데이션이 퍼지는 범위를 정하는 크기 키워드를 고릅니다.
- 2buildCss가 그라데이션 문자열 조합변경될 때마다 로컬 buildCss 함수가 매개변수를 올바른 CSS 함수 호출로 이어 붙입니다. 예: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). 라이브러리 없이 일반 JavaScript 템플릿 로직으로 문자열을 만들고 정지점 배열에서 바로 연결합니다.
- 3인라인 스타일로 실시간 미리보기 렌더링조합된 그라데이션 문자열은 div 요소에 인라인 background 스타일로 직접 적용되므로 브라우저 자체 CSS 엔진이 미리보기를 렌더링합니다. 캔버스나 이미지는 없으며, 보이는 것은 말 그대로 적용된 CSS 속성입니다.
- 4네 가지 형식의 바로 복사 가능한 출력형식 선택기가 같은 그라데이션 문자열을 일반 CSS(background: ...), 단색 대체가 포함된 CSS 블록, Tailwind 임의 값 클래스, SCSS 변수 선언으로 변환합니다. 복사를 클릭하면 navigator.clipboard.writeText로 선택한 출력을 클립보드에 씁니다. 현재 그라데이션은 URL 해시에도 인코딩되어 북마크하거나 공유할 수 있습니다.