CSS 그레이디언트 생성기
CSS 그레이디언트를 시각적으로 만드세요: 선형, 방사형, 원뿔형 유형, 각도 슬라이더, 최대 6개의 색상 정지점과 실시간 전체 너비 미리 보기 및 복사 가능한 코드를 제공합니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%)를 손으로 작성하고 페이지를 다시 로드하여 확인하는 것은 느린 반복 과정입니다. 이 생성기는 그 과정을 없앱니다: 선형, 방사형 또는 원뿔형을 선택하고 각도 슬라이더를 드래그한 다음, 네이티브 색상 피커와 백분율 위치로 각 색상 정지점을 설정하세요. 전체 너비 미리 보기는 모든 단일 입력에 다시 그려지며, 완성된 배경 라인은 항상 복사할 준비가 되어 있습니다.
세 가지 그레이디언트 유형은 각기 다른 역할을 합니다. 선형 그레이디언트는 방향을 따라 페이드되며 대부분의 히어로 섹션과 버튼을 담당합니다. 방사형 그레이디언트는 글로우와 비네트를 위해 중앙에서 방사됩니다. 원뿔형 그레이디언트는 중앙을 중심으로 회전하며 파이 차트와 컬러 휠을 구현합니다. 언제든지 유형을 전환할 수 있으며 정지점은 그대로 유지되므로 세 가지를 비교하는 데 몇 초면 충분합니다.
최대 6개의 색상 정지점으로 다중 밴드 디자인을 할 수 있는 여유가 생기며, 프리셋 페이지는 검증된 조합을 제공합니다. 따뜻한 선셋, 차분한 오션, 부드러운 파스텔 쌍을 빈 캔버스 대신 조정 가능한 시작점으로 삼을 수 있습니다. 역할 분담에 주목하세요: 이 사이트의 색상 팔레트 생성기는 조화로운 평면 색상을 선택하고, 색상 형식 변환기는 HEX, RGB, HSL 사이에서 값을 변환합니다. 이 도구는 다른 일을 합니다 — 선택한 색상을 바로 사용할 수 있는 CSS 그레이디언트 코드로 바꿉니다.
모든 것이 로컬에서 브라우저 내에서 실행됩니다: 업로드도, 계정도, 서버 왕복도 없으며, 한 번 로드된 생성기는 오프라인에서도 계속 작동합니다.