Tool Hub

그래디언트 생성기

CSS linear / radial / conic 그래디언트 — 색상 스탑·미리보기·코드 복사

CSS 그래디언트 (linear, radial, conic) 를 색상 스탑과 각도로 만듭니다. 각 스탑을 조정하면 라이브 미리보기가 업데이트되고, 생성된 CSS 를 바로 복사해 스타일시트에 붙여넣을 수 있습니다.

색상 스탑

프리셋 갤러리

미리보기

CSS
background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

사용 방법

  1. 그래디언트 유형을 선택합니다: linear, radial 또는 conic.
  2. 색상 stop을 추가하고 드래그해 각 색상의 위치를 설정합니다. linear와 conic의 경우 각도를 도 단위로 설정합니다.
  3. 미리보기 창이 편집하면서 실시간으로 업데이트됩니다.
  4. 생성된 CSS background 값을 스타일시트에 직접 복사합니다.

예제

  • 90deg linear 그래디언트에서 #ff7e5f (0%)와 #feb47b (100%)의 두 stop은 linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%) CSS background를 생성합니다.
  • radial 유형으로 전환하고 같은 stop을 사용하면 중앙에서 바깥쪽으로의 부드러운 빛이 생성되어 미리보기에 실시간으로 표시됩니다.

프로덕션 사용 전 출력을 검증하십시오. 보증 없음 — 자세한 내용은 이용약관.