utilbox
목록으로 돌아가기
디자인

CSS 그라디언트 생성기

Linear · Radial · Conic 그라디언트를 시각적으로 만들고 CSS 코드를 바로 복사합니다.

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
그라디언트 유형
방향 / 각도
deg
컬러 스탑
%
%
프리셋
추가 CSS 형식
backgroundbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-imagebackground-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

사용 방법

  1. 유형 선택 — Linear(선형), Radial(방사형), Conic(원뿔형) 중 하나를 선택합니다.
  2. 방향·각도 조정 — Linear는 방향 버튼이나 슬라이더로 각도를 설정합니다.
  3. 색상 편집 — 색상 사각형을 클릭해 색상 피커를 열고, 슬라이더로 위치(0–100%)를 조정합니다.
  4. 스탑 추가 — 최대 8개까지 추가하거나 랜덤 버튼으로 즉시 생성합니다.
  5. 복사 — CSS 코드를 복사해 스타일시트에 바로 붙여넣습니다.

관련 툴

CSS Box Shadow 생성기

슬라이더로 X·Y·blur·spread·색상·inset 조절 → CSS box-shadow 코드 즉시 생성. 다중 그림자 지원.

비밀번호 생성기

안전한 무작위 비밀번호를 즉시 생성합니다. 브라우저에서만 처리되어 외부로 전송되지 않습니다.

UUID 생성기

UUID v4와 Short ID를 원하는 개수만큼 즉시 생성합니다.

CSS 그라디언트 생성기 자세히 알아보기

Linear(선형)·Radial(방사형)·Conic(원뿔형) 세 종류의 CSS 그라디언트를 GUI로 만들어 실시간 미리보기를 확인하고 background CSS 코드를 한 번에 복사하는 도구입니다. 컬러 스탑은 최대 8개까지 추가해 다단계 그라디언트를 구성할 수 있고, 색상 피커·위치 슬라이더·각도 조절·중심점(X/Y) 설정·8개 디자인 프리셋(선셋·오션·오로라·네온 등)·랜덤 생성까지 지원합니다. "CSS 그라디언트 생성기", "linear-gradient 만들기", "그라데이션 코드"가 대표 검색어입니다.

더 알아보기

Linear는 방향(0~360°)·각도 직접 입력, Radial은 ellipse/circle 모양과 중심 좌표, Conic은 시작 각도와 중심 좌표를 따로 조절합니다. 결과는 background와 background-image 두 형태로 모두 제공되어 어떤 컨텍스트에서도 그대로 붙여넣을 수 있습니다.

이럴 때 사용하세요

  • •히어로 섹션 배경, 카드 배경, 버튼 hover 강조에 자연스러운 그라디언트가 필요할 때
  • •Conic으로 원형 차트·로딩 인디케이터·무지개 효과를 만들 때
  • •Radial로 스포트라이트·비네트(가장자리 어둡게) 효과를 줄 때
  • •프리셋(선셋·오션·네온 등)에서 영감을 얻고 빠르게 변형해 시안 작업할 때
  • •디자이너가 만든 Figma 그라디언트를 CSS로 옮길 때 미세 조정용

CSS 그라디언트 생성기 자주 묻는 질문

Linear, Radial, Conic은 언제 어느 것을 쓰나요?
Linear는 가장 흔한 "한 방향으로 흐르는 그라디언트"로 배경에 적합합니다. Radial은 한 점에서 동심원으로 퍼지는 효과(스포트라이트), Conic은 한 점을 축으로 시계 방향 회전하는 효과(원형 차트·무지개링)에 씁니다.
왜 background와 background-image 두 가지를 보여주나요?
background는 단축 속성으로 색·이미지·반복·위치를 한 줄에 묶지만, background-image는 그라디언트만 따로 지정해 다른 background-color나 이미지와 겹쳐 쓸 수 있습니다. 기존 스타일과 충돌을 피하려면 background-image가 안전합니다.
컬러 스탑 위치(%)는 무엇을 의미하나요?
그라디언트 진행 방향을 0~100%로 보고 각 색이 "몇 퍼센트 지점에서 가장 진해지는지" 지정하는 값입니다. 동일한 두 색의 위치를 가깝게 두면 단단한 경계선이 생기고, 멀리 두면 부드러운 전환이 됩니다.
오래된 브라우저도 지원하나요?
Linear/Radial은 모든 모던 브라우저에서 지원되며 IE는 -ms- 접두사도 필요하지 않습니다(IE10+ 정상 동작). Conic은 Chrome 69+, Safari 12.1+, Firefox 83+에서 지원되며 그 이전 버전에서는 표시되지 않으니 fallback color를 함께 두는 것이 안전합니다.
색이 중간에 흐릿한 회색으로 보이는 이유는?
RGB 색공간에서 보색끼리 직선 보간하면 중간 지점이 채도가 빠진 회색에 가까워집니다. 자연스러운 그라디언트가 필요하면 비슷한 색조끼리(유사색·단계 변경) 묶거나, 중간에 한 단계 더 컬러 스탑을 끼워 넣어 보세요.