CSS 그라데이션 생성기
실시간 미리보기를 보며 CSS 선형·방사형 그라데이션을 디자인해 보세요. 색상 정지점을 추가하고 각도를 설정한 다음, 깔끔한 background CSS를 복사하면 됩니다. 모든 작업은 브라우저 안에서 이루어집니다.
미리보기
그라데이션
각도
90°
색상 정지점
#f5530c
%
#ffa94d
%
CSS
background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);
CSS 그라데이션 생성기 사용 방법
- 1
그라데이션 종류 선택하기
선형과 방사형 중에서 전환해 보세요. 선형 그라데이션에서는 각도 슬라이더로 방향을 도 단위로 지정할 수도 있습니다.
- 2
정지점 추가하고 색 지정하기
색상 견본을 클릭해 각 색을 고르고, 위치를 0부터 100퍼센트 사이로 지정하세요. 여러 색을 섞으려면 색상 정지점 추가를 누르고, 단순하게 만들려면 정지점을 삭제하면 됩니다.
- 3
실시간으로 미리보기
미리보기 패널은 브라우저에서 렌더링되는 모습 그대로 그라데이션을 보여 주며, 변경할 때마다 곧바로 업데이트됩니다.
- 4
CSS 복사하기
생성된 background 코드를 복사해 스타일시트에 붙여넣으세요. 모든 최신 브라우저에서 작동하는 표준 CSS입니다.
자주 묻는 질문
CSS 그라데이션은 어떻게 만드나요?
선형이나 방사형 중 하나를 고르고 각도를 설정한 뒤, 원하는 만큼 색상 정지점을 추가하세요. 미리보기는 실시간으로 바뀌고, 그 아래에는 바로 쓸 수 있는 CSS가 background 속성 형태로 표시되어 스타일시트에 그대로 복사할 수 있습니다.
선형 그라데이션과 방사형 그라데이션은 어떻게 다른가요?
선형 그라데이션은 색을 직선을 따라 섞으며, 방향은 각도(도 단위)로 조절합니다. 방사형 그라데이션은 중심에서 원형으로 바깥을 향해 색이 퍼집니다. 둘 다 같은 색상 정지점을 사용하고, 색이 섞이는 모양만 달라집니다.
색상 정지점이란 무엇인가요?
색상 정지점은 그라데이션 위에서 0부터 100퍼센트 사이의 위치와 짝지어진 색을 말합니다. 정지점이 두 개면 두 색이 단순하게 섞이고, 더 추가하면 여러 색이 풍부하게 어우러지는 그라데이션을 만들 수 있습니다. 위치 값을 바꾸면 각 색이 놓이는 자리를 옮길 수 있습니다.
만든 그라데이션을 프로젝트에 어떻게 적용하나요?
생성된 코드를 복사해 div나 section 같은 원하는 요소의 background 속성에 붙여넣으세요. 순수 CSS이기 때문에 이미지나 라이브러리 없이도 모든 최신 브라우저에서 작동합니다.
내 데이터가 서버에 업로드되나요?
아니요. 모든 작업은 전적으로 브라우저에서 실행됩니다. 만든 내용은 업로드되거나 기록·저장되지 않으므로 작업 내용이 완전히 비공개로 유지되며, 이 도구는 오프라인에서도 계속 작동합니다.
관련 도구
이런 편리한 도구도 함께 사용해 보세요