그라디언트 생성기이란?
선형, 방사형, 원뿔형 그라디언트를 무제한 색상 정지점으로 만들 수 있는 시각적 CSS 그라디언트 빌더입니다. 각도, 위치, 색상을 실시간으로 조정하고 클릭 한 번으로 CSS를 복사하세요.
선형, 방사형, 원뿔형 그라데이션 중에서 고르고 각도를 0°에서 360°로 설정하며 필요한 만큼 색상 정지점을 추가할 수 있습니다. 정지점마다 투명도를 따로 지정하면 투명한 오버레이도 만들 수 있어요. 노을, Instagram, 바다 같은 엄선된 프리셋에서 시작해 색을 다듬어 보세요. 방사형에서는 원형이나 타원 모양과 범위 키워드를 고를 수 있고, 혼합을 OKLab이나 OKLCH로 바꿔 더 매끄러운 최신 보간을 쓰거나 이징 곡선을 적용할 수 있습니다. 「애니메이션」을 켜면 바로 붙여넣을 수 있는 @keyframes 루프가 생겨 움직이는 배경을 만들 수 있습니다. 결과물은 순수 CSS라 스타일시트나 Tailwind 설정, 디자인 도구에 그대로 붙여넣으면 됩니다.
사용 방법
- 1단계 — 그라디언트 유형(선형, 방사형, 원뿔형)을 선택하고, 각도 슬라이더나 프리셋 버튼으로 방향 또는 각도를 설정합니다.
- 2단계 — 그라디언트 바를 클릭해 색상 정지점을 추가합니다. 드래그하거나 값을 직접 입력해 각 정지점의 색상과 위치를 조정하세요.
- 3단계 — 그라디언트를 실시간으로 미리 보고, 생성된 CSS 코드를 클립보드에 복사하거나 CSS 파일로 다운로드합니다.
사용 시기
- 포토샵을 열지 않고 히어로 영역, 버튼, 카드 배경을 디자인할 때.
- 웹, 이메일, 프레젠테이션 슬라이드에서 브랜드 색상을 통일할 때.
- 개발자에게 스펙을 넘기기 전에 CSS 효과를 미리 확인하고 싶을 때.
결과
석양 테마의 히어로 배경을 만들고 싶다고 합시다. 135° 선형 그라디언트를 선택하고, 0%에 주황, 50%에 로즈, 100%에 보라를 놓은 뒤 CSS를 스타일시트에 붙여넣으면 됩니다.
자주 묻는 질문
- 선형, 방사형, 원뿔형 그라데이션 차이는?
- 선형은 지정한 각도의 직선을 따라 색이 변합니다. 방사형은 중심에서 바깥쪽으로 퍼지는 형태로 햇살 같은 패턴. 원뿔형은 중심점을 기준으로 한 바퀴 회전하는 방식이라 원형 차트나 색상환에 적합합니다.
- 색상 정지점은 몇 개까지 추가할 수 있나요?
- 엄격한 제한은 없습니다. 실무에서는 보통 2~4개로 충분합니다. 5~6개를 넘기면 색이 서로 섞여 탁해지고, 원래 의도했던 또렷한 색 변화가 사라집니다.
- 어두운 배경에서 띠(밴딩) 현상이 보이는 이유는?
- 인접한 색의 명도가 너무 비슷하면 색띠가 나타납니다. 정지점 간의 대비를 키우거나, 색상 보간을 OKLCH 또는 OKLab(지각 기반)으로 바꾸거나, CSS로 미세한 노이즈 레이어를 얹어 보세요.
- 이 그라데이션을 Figma나 Sketch에서 쓸 수 있나요?
- CSS 자체를 바로 붙여넣을 수는 없지만, 색상값과 위치 퍼센트는 일대일로 대응합니다. 각 정지점의 hex 값과 위치를 디자인 도구의 그라데이션 편집기에 입력하면 재현됩니다.
- 각도 값은 정확히 무엇을 결정하나요?
- 선형 그라데이션에서 0°는 위쪽을 가리키며 시계 방향으로 회전합니다. 90°는 왼쪽에서 오른쪽, 180°는 위에서 아래로 향합니다. 원뿔형에서는 원주의 어느 지점에서 색 변화가 시작될지를 정합니다.