CSS 그라디언트 생성기

이 도구는 무엇인가요?

CSS 그라디언트는 업로드하는 파일이 아니라 색상 목록으로부터 브라우저가 직접 생성하는 이미지입니다 — linear-gradient()는 지정된 각도의 직선을 따라 색을 전환하고, radial-gradient()는 중심점에서 바깥으로 색을 전환합니다. 둘 다 두 개 이상의 색상 스톱을 받으며, 각 스톱은 선택적으로 그라디언트를 따라 위치를 고정할 수 있습니다.

손으로 직접 쓰면 그라디언트는 미묘하게 틀리기 쉽습니다 — 스톱 순서, 퍼센트 누락, 또는 방향이 뒤바뀐 각도 값(CSS 각도는 수학 각도와 달리 'to top'에서 시계 방향으로 진행됩니다) 같은 것들이요. 이 도구는 이런 문법을 신경 쓰지 않게 해줍니다 — 색상 선택기와 슬라이더로 색과 위치를 설정하고, 실시간으로 업데이트되는 미리보기 박스를 보다가 원하는 결과가 나오면 CSS를 복사하면 됩니다.

출처: CSS Images Module Level 3, W3C — linear-gradient()와 radial-gradient() 문법을 정의하는 명세.

왜 사용해야 할까요?

• 색상, 위치, 각도를 바꿀 때마다 실시간 미리보기가 즉시 업데이트됩니다 — 결과를 보기 위해 페이지를 새로고침할 필요가 없습니다.
• 클릭 한 번으로 선형과 원형 그라디언트를 전환할 수 있습니다. 각도 조절은 적용되지 않는 원형 그라디언트에서는 자동으로 숨겨집니다.
• 고정된 2색 그라디언트에 묶이지 않고 색상 스톱을 2개에서 4개까지 추가하거나 제거할 수 있습니다.
• 각 스톱마다 자체 위치 슬라이더가 있어서 스톱을 균등한 간격에 묶어둘 필요가 없습니다.
• 표준 linear-gradient()/radial-gradient() 문법을 사용해 바로 붙여넣을 수 있는 CSS를 출력합니다.
• 전적으로 브라우저 안에서 동작합니다 — 설정한 내용이 어디로도 업로드되지 않습니다. 무료, 가입 불필요, 모바일에서도 사용 가능.

사용 방법

1. 그라디언트 유형으로 선형 또는 원형을 선택하세요.
2. 선형 그라디언트라면 각도 슬라이더를 드래그하세요 — 90deg는 왼쪽에서 오른쪽, 180deg는 위에서 아래로 향합니다.
3. 각 스톱의 색상과 위치를 설정하세요 — 첫 번째 스톱이 그라디언트의 시작 색이고, 마지막이 끝 색입니다.
4. '+ 스톱 추가'를 클릭해 다중 색상 그라디언트를 위해 최대 4개까지 스톱을 추가하거나, ✕ 버튼으로 하나를 제거하세요(최소 2개).
5. 생성된 CSS를 복사해 background나 background-image 선언에 붙여넣으세요.

예시

입력

선형 · 각도: 90deg · 스톱: #f97316(0%), #ec4899(100%)

결과

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

버튼, 배너, 히어로 배경에 흔히 쓰이는 왼쪽에서 오른쪽으로 향하는 주황색-핑크색 그라디언트입니다.

선형 그라디언트 vs. 원형 그라디언트

선형 그라디언트는 각도로 제어되는 직선을 따라 색이 전환되며, 배너, 버튼, 방향성 있는 배경에 유용합니다. 원형 그라디언트는 중심점에서 바깥으로 확장되는 고리 형태로 색이 전환되며, 스포트라이트 효과, 배지, 글로우 스타일 배경에 잘 맞습니다. 이 도구는 원형 그라디언트를 박스 중앙에 위치한 원형(circle)으로 기본 설정하는데, 이는 가장 흔한 원형 그라디언트 사용 사례를 커버합니다. CSS는 타원(ellipse) 형태나 중심을 벗어난 위치도 지원하므로, 필요하면 복사한 결과를 직접 수정할 수 있습니다.

자주 쓰이는 그라디언트 패턴

• 은은한 브랜드 악센트: 얕은 각도로 가까운 색조 두 개(예: 같은 색의 두 가지 명도)를 조합해 부드러운 배경 워시를 만듭니다.
• 고대비 CTA 버튼: 90deg나 135deg에서 채도가 높은 보색 두 개를 조합해 대담하고 클릭하고 싶은 느낌을 줍니다.
• 이미지 위 오버레이: 투명에서 단색으로 향하는 그라디언트(선택기의 밑바탕 hex 값에 rgba 색을 넣거나 복사한 뒤 조정)를 배경 이미지 위에 겹칩니다.
• 다중 스톱 레인보우/브랜드 그라디언트: 0~100% 전체 범위에 3~4개 스톱을 분산 배치해 2색 그라디언트보다 더 부드럽고 점진적인 전환을 만듭니다.
• 원형 스포트라이트: 0% 근처의 밝은 중심 스톱이 100% 근처의 어두운 가장자리 스톱으로 페이드아웃되며, 히어로 섹션이나 카드 하이라이트에 유용합니다.

다른 CSS 도구와 조합하기

그라디언트는 같은 요소에서 둥근 모서리, 그림자와 함께 조합되는 경우가 많습니다 — 부드러운 box-shadow와 둥근 모서리가 있는 그라디언트 카드는 흔한 UI 패턴입니다. 각 부분을 따로 생성한 뒤 CSS 선언을 요소에 함께 결합하세요.

→ 박스 섀도우 생성기 · Border Radius 생성기 · 색상 선택기

자주 묻는 질문