본문으로 건너뛰기
툴허브

CSS 그라디언트 생성기

원하는 색상과 방향을 선택하여 CSS 그라데이션 코드를 생성하세요.

미리보기

CSS 코드

background: linear-gradient(to bottom right, #667eea 0%, #764ba2 100%);

그라디언트 유형

135°

도구

색상

색상 #1
0%
색상 #2
100%

프리셋

CSS 그라디언트 가이드

그라디언트 유형

  • •선형(Linear): 한 방향으로 색상이 변하는 그라디언트
  • •방사형(Radial): 중심에서 바깥으로 퍼지는 그라디언트
  • •원뿔형(Conic): 중심점을 기준으로 회전하는 그라디언트

활용 팁

  • •2~3개 색상이 가장 자연스럽습니다
  • •대비가 큰 색상 조합으로 인상적인 효과를 낼 수 있습니다
  • •background-size와 animation으로 움직이는 효과도 가능합니다
  • •투명도를 활용하면 이미지 위에 오버레이 효과를 줄 수 있습니다

CSS 그라디언트 생성기란?

CSS 그라디언트 생성기는 선형(linear), 방사형(radial), 원뿔형(conic) 그라데이션 CSS 코드를 직관적인 UI로 만들어주는 웹 디자인 도구입니다. 색상 조합과 방향을 마우스로 조정하면 실시간으로 미리보기와 완성된 CSS 코드가 생성되어, 복잡한 그라디언트 문법을 직접 외울 필요 없이 원하는 배경 효과를 즉시 구현할 수 있습니다.

CSS 그라디언트 생성기 활용 팁

  • 프리셋 활용: 인기 있는 그라디언트 조합을 프리셋으로 제공합니다. 시작점으로 프리셋을 선택한 뒤 색상을 미세 조정하면 빠르게 원하는 결과를 얻을 수 있습니다.
  • 이미지 위 오버레이: 반투명 그라디언트(rgba 사용)와 배경 이미지를 콤마로 연결하면 히어로 섹션에서 텍스트 가독성을 높이는 오버레이 효과를 만들 수 있습니다.
  • 원뿔형 그라디언트: conic-gradient는 파이 차트, 색상환, 로딩 스피너 등 각도 기반 디자인에 유용합니다. 순수 CSS로 도형을 그릴 때 활용해보세요.
  • 다중 색상 정지점: 색상을 3개 이상 추가하고 퍼센트 위치를 조정하면 선셋, 오로라 같은 복잡한 그라데이션도 만들 수 있습니다.