CSS 그라디언트 생성기
최대 8개의 컬러 스톱을 섞어 선형, 방사형, 원뿔형 그라디언트를 만들고, 드래그·조정·프로덕션급 코드 복사까지.
그라디언트 생성기 사용법
- 그라디언트 유형 선택: 선형, 방사형, 원뿔형.
- 그라디언트 바를 클릭해 컬러 스톱을 추가하고, 바를 따라 드래그해 위치를 변경하세요.
- 스톱을 선택해 색상, 불투명도, 정확한 위치를 변경합니다(최대 8개).
- 각도(선형/원뿔형), 모양(방사형), 중심점을 조정해 원하는 모습으로 만드세요.
- CSS background 선언을 복사하거나 Tailwind 탭에서 유틸리티 클래스를 가져오세요.
이 그라디언트 생성기에 대해
CSS 그라디언트는 브라우저가 생성하는 이미지입니다: linear-gradient는 직선을 따라 그리고, radial-gradient는 중심점에서 방사되며, conic-gradient는 컬러 휠처럼 중심 주위를 스윕합니다. 각각 선택적 위치를 가진 2개 이상의 컬러 스톱을 받습니다. 손으로 작성하는 것은, 특히 스톱이 많거나 rgba 투명도가 있을 때, 느리고 오류가 나기 쉽습니다.
이 생성기는 컬러 스톱을 바를 따라 드래그하거나, 각도를 돌리거나, 중심점을 옮길 때마다 그라디언트를 라이브로 렌더링합니다. 10가지 엄선된 프리셋(선셋, 오션, 캔디, 레인보우…)에서 시작해 나만의 것으로 만드세요. 출력은 모든 최신 브라우저에서 동작하는 하나의 background 선언입니다. Tailwind 탭은 같은 그라디언트를 임의값 구문으로 감싸 유틸리티 우선 워크플로에 맞춥니다.
그라디언트 자주 묻는 질문
컬러 스톱은 몇 개까지 추가할 수 있나요?
최대 8개입니다. 그라디언트 바의 아무 곳이나 클릭하면 그 위치에 새 스톱이 삽입되고 색상은 이웃 스톱에서 자동 보간됩니다. 드래그로 위치를 바꾸고, 선택해 색상과 불투명도를 편집하고, 「스톱 삭제」 버튼으로 제거하세요(최소 2개 유지).
선형, 방사형, 원뿔형 그라디언트의 차이는?
선형 그라디언트는 주어진 각도의 직선을 따라 색을 전환합니다. 방사형 그라디언트는 중심점에서 원 또는 타원으로 바깥쪽으로 퍼집니다. 원뿔형 그라디언트는 중심점 주위로 색을 회전시키고(파이 차트나 컬러 휠처럼) from 시작 각도를 지원합니다.
투명도가 있는 그라디언트는 어떻게 만드나요?
아무 컬러 스톱이나 선택하고 불투명도 슬라이더를 낮추세요. 생성기가 해당 스톱에 rgba() 색상을 출력하므로 투명하게 페이드하거나 아래 배경 이미지·색상 위에 블렌딩할 수 있습니다.
색상 방향을 반전하려면?
「반전」 버튼을 클릭하면 모든 스톱 위치를 미러링(0%가 100%로 등)해 각도 변경 없이 그라디언트를 뒤집습니다. 선형 그라디언트는 각도 슬라이더를 180° 돌려도 됩니다.
background 대신 background-image로 쓸 수 있나요?
네. 생성된 값(linear-gradient(...), radial-gradient(...), conic-gradient(...))은 CSS의