색·각도·타입을 조작해 CSS 그라디언트를 만들고 코드를 원클릭 복사하세요
각도
45°
색상 형식
출력 속성
색상 스톱
2개 색상
0%
100%
프리셋
선셋
오션
퍼플
파이어
포레스트
블러셔
오로라
스포트라이트
광고
관련 계산기
CSS 그라디언트 문법 한눈에
- 선형(linear):
linear-gradient(각도deg, 색 위치%, ...)— 각도 0°는 아래→위, 90°는 왼쪽→오른쪽 방향입니다. - 원형(radial):
radial-gradient(형태 at 중심, 색 위치%, ...)— 중심에서 바깥으로 퍼집니다. - 원뿔형(conic):
conic-gradient(from 시작각deg at 중심, ...)— 중심을 기준으로 각도를 따라 회전합니다. - 색상 스톱의 위치(%)는 그라디언트에서 해당 색이 위치하는 지점입니다. 스톱은 최소 2개, 최대 8개까지 추가할 수 있습니다.
출처: MDN Web Docs — CSS gradients (developer.mozilla.org)
* conic-gradient·radial-gradient의 일부 문법은 구형 브라우저에서 지원되지 않을 수 있습니다. 실제 사용 환경의 브라우저 호환성은 별도로 확인하세요. 편집 내용과 산출물은 서버로 전송되지 않고 100% 브라우저에서 처리됩니다. 문법 참고
이 계산기는 무엇인가요
CSS 그라디언트 생성기는 색상 스톱과 각도, 그라디언트 타입을 시각적으로 조작하면 표준 background CSS 코드가 자동으로 만들어지는 도구입니다. linear(선형), radial(원형), conic(원뿔형) 세 가지 타입을 모두 지원하며 결과는 큰 미리보기에 실시간으로 반영됩니다.
버튼이나 히어로 섹션 배경에 쓸 그라디언트 코드가 필요한 웹 개발자, 코드를 직접 만지지 않고 색 조합을 실험해 보고 싶은 디자이너에게 유용합니다. 모든 처리는 브라우저에서 이뤄집니다.
사용 방법
그라디언트 타입을 고른 뒤 색상 스톱을 추가·삭제하고 각 스톱의 색과 위치를 조절하면 미리보기와 CSS 코드가 즉시 갱신됩니다. 완성된 코드는 버튼 한 번으로 복사해 스타일시트에 붙여넣으면 됩니다.
각도는 다이얼, 슬라이더, 숫자 입력 세 가지가 동기화되어 있어 편한 방식으로 조절할 수 있습니다. 색상 값은 HEX, RGB, HSL 형식 중 원하는 표기로 전환할 수 있고, 프리셋 팔레트와 랜덤 생성으로 아이디어를 빠르게 얻을 수도 있습니다.
세 가지 그라디언트 타입
linear-gradient는 지정한 각도 방향으로 색이 직선으로 변하는 가장 흔한 형태이고, radial-gradient는 중심점에서 바깥으로 퍼지는 원형 그라디언트입니다. conic-gradient는 중심을 축으로 시계 방향으로 색이 도는 형태로 파이 차트나 색상환 표현에 쓰입니다.
색상 스톱의 위치(%)를 조절하면 색이 전환되는 구간을 제어할 수 있습니다. 두 스톱의 위치를 같게 하면 경계가 뚜렷한 색 분할 효과도 만들 수 있습니다.
활용 팁
만든 그라디언트는 저장해 두거나 딥링크 URL로 공유할 수 있어 팀원과 시안을 주고받기 편합니다. 텍스트가 올라가는 배경이라면 그라디언트의 밝기 변화 구간에서 글자 대비가 떨어지지 않는지 확인하는 것이 좋습니다.
자주 묻는 질문
- 생성된 코드는 어떤 브라우저에서 동작하나요?
- 표준 CSS 문법으로 생성되므로 최신 주요 브라우저에서 모두 동작합니다. conic-gradient도 현재 널리 지원되는 표준 기능입니다.
- 그라디언트 각도 0deg는 어느 방향인가요?
- CSS linear-gradient에서 0deg는 아래에서 위로 향하는 방향이고, 90deg는 왼쪽에서 오른쪽입니다. 다이얼로 조절하면 방향을 직관적으로 확인할 수 있습니다.
- 색상 스톱은 몇 개까지 넣을 수 있나요?
- 여러 개의 스톱을 자유롭게 추가할 수 있습니다. 다만 색이 너무 많으면 탁해 보이기 쉬우므로 2~4개로 시작해 다듬는 것을 권장합니다.
- 만든 그라디언트를 이미지 파일로 받을 수 있나요?
- 이 도구는 CSS 코드 생성에 초점을 맞추고 있습니다. CSS 배경은 이미지와 달리 해상도에 무관하게 선명하고 용량이 없다는 장점이 있습니다.