CSS Gradient Generator

이 도구 소개

CSS 그라디언트 생성기는 CSS에 바로 붙여넣을 수 있는 다색 그라디언트를 만들어줍니다. 선형(방향성) 및 방사형(원형) 그라디언트를 지원하며 색상 정지점을 원하는 만큼 추가할 수 있습니다.

색상 정지점은 그라디언트 축을 따라 각 색이 시작·끝나는 위치를 정의합니다. 각도 슬라이더로 선형 그라디언트 방향을 0°에서 360°까지 회전할 수 있습니다.

사용 방법

1. Linear 또는 Radial 그라디언트 타입을 선택하세요.
2. 선형 그라디언트는 각도 슬라이더로 방향을 조정하세요.
3. 색상 정지점의 색상을 클릭하고 슬라이더로 위치를 조정하세요.
4. + 추가 버튼으로 정지점을 더 추가하고, ✕로 제거하세요.
5. 복사 버튼을 눌러 CSS background 선언을 클립보드에 복사하세요.

활용 사례

웹 디자이너들이 이미지 대신 CSS 그라디언트로 히어로 섹션 배경을 만들 때 사용합니다. 브랜드 팀이 브랜드 색상 지침에 맞는 그라디언트 팔레트를 생성합니다. 개발자들이 카드, 버튼, 오버레이에 그라디언트 배경을 프로토타이핑합니다.

자주 묻는 질문

• 선형과 방사형 그라디언트의 차이는? — 선형 그라디언트는 지정된 각도의 직선을 따라 색이 전환됩니다. 방사형 그라디언트는 중심점에서 바깥쪽으로 색이 퍼집니다.
• 색상을 3개 이상 사용할 수 있나요? — 네. + 추가 버튼을 눌러 원하는 만큼 정지점을 추가할 수 있습니다. 각 정지점에는 고유한 색상과 위치가 있습니다.
• 생성된 CSS가 모든 브라우저에서 호환되나요? — 네. linear-gradient() 및 radial-gradient() 함수는 벤더 프리픽스 없이 모든 최신 브라우저에서 완전히 지원됩니다.