색상 · 디자인 도구
그라데이션 생성기
색상과 위치를 선택해 원하는 그라데이션을 만들고 CSS 코드 또는 PNG 이미지로 저장하세요.
Gradient settings
그라데이션 설정
Live preview
실시간 미리보기
색상이나 위치를 변경하면 결과가 바로 반영됩니다.
사용 안내
그라데이션 생성기 사용 방법
웹 배경부터 썸네일과 프레젠테이션 이미지까지 같은 색상 조합을 CSS와 PNG로 활용할 수 있습니다.
종류 선택
선형, 원형, 원뿔형 중 원하는 형태를 선택합니다. 선형과 원뿔형은 각도, 원형과 원뿔형은 중심 위치를 조절할 수 있습니다.
색상 조절
2~6개의 색상 스톱을 구성하고 각 색상의 위치를 0%부터 100% 사이에서 설정합니다.
결과 사용
웹페이지에는 CSS 코드를 복사하고, 디자인 파일이 필요하면 이미지 규격을 선택해 PNG로 다운로드합니다.
선형 그라데이션
linear-gradient()는 한 방향에서 다른 방향으로 색상이 이어집니다. 0°는 아래에서 위, 90°는 왼쪽에서 오른쪽이며 버튼, 배경, 배너에 폭넓게 사용됩니다.
원형 그라데이션
radial-gradient()는 중심점에서 바깥쪽으로 색상이 퍼집니다. 중심 위치를 옮기면 빛이 비치는 듯한 배경이나 강조 효과를 만들 수 있습니다.
원뿔형 그라데이션
conic-gradient()는 중심을 기준으로 색상이 회전하며 이어집니다. 색상환, 차트 배경, 원형 장식에 적합하며 각도로 시작 지점을 바꿀 수 있습니다.
색상 스톱 위치
스톱 위치는 해당 색상이 기준이 되는 지점입니다. 위치가 가까우면 전환이 짧고 선명해지며, 멀수록 부드럽게 섞입니다. 같은 위치를 사용하면 경계가 뚜렷한 그라데이션도 만들 수 있습니다.
CSS 적용 예시
.hero {
background: linear-gradient(135deg, #0f766e 0%, #2563eb 50%, #7c3aed 100%);
}생성된 코드는 배경을 적용할 요소의 background 또는 background-image 속성에 사용할 수 있습니다.
PNG 이미지는 선택한 해상도로 현재 브라우저에서 직접 생성됩니다. 색상 정보나 이미지가 서버에 업로드되지 않습니다. 일부 오래된 브라우저는 원뿔형 그라데이션 CSS 또는 이미지 생성을 지원하지 않을 수 있습니다.