CSS 그라데이션 생성기
색상과 방향(각도), 원하는 개수의 색상 정지점을 골라 선형·방사형·원뿔형 그라데이션을 만듭니다. 미리보기가 실시간으로 갱신되며, 생성된 CSS 선언을 복사할 수 있습니다.
90°
0%
100%
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);사용 방법
- 그라데이션 종류를 고르고 색상 정지점을 추가합니다.
- 각도와 정지점 위치를 조정합니다.
- 생성된 CSS를 복사합니다.
자주 묻는 질문
- 선형·방사형·원뿔형의 차이는 무엇인가요?
- 선형은 직선 각도를 따라 이동하고, 방사형은 중심점에서 바깥으로 퍼지며, 원뿔형은 색상환처럼 중심점을 중심으로 돌아갑니다.
- 색상 정지점은 몇 개까지 추가할 수 있나요?
- 각각 고유한 색상과 위치를 가진 정지점을 최대 10개까지 추가할 수 있습니다.
개인정보 처리
그라데이션은 브라우저에서 생성되며 서버로 전송되지 않습니다.
관련 도구
- HEX RGB 색상 변환기
HEX·RGB·HSL 사이에서 색상값을 변환하고 스타일시트나 디자인 도구에 필요한 표기를 복사합니다. 모든 변환이 브라우저에서 이루어집니다.
- 컬러 팔레트 생성기
기준 색상과 보색·삼각 배색 같은 조화 규칙으로 어울리는 컬러 팔레트를 생성합니다. 모든 색상을 HEX로 복사할 수 있습니다.
- CSS 박스 그림자 생성기
CSS box-shadow를 실시간 미리보기로 만듭니다. 그림자 레이어를 여러 개 쌓고, 오프셋·흐림·확산·색상을 조정한 뒤 CSS를 복사하세요.