CSS 그라데이션 생성기

CSS 그라데이션은 브라우저가 직접 그리는 이미지라 크기와 상관없이 선명하고 내려받을 파일도 없습니다. 이 생성기는 색상 지점으로 선형, 원형, 원뿔형 그라데이션을 만들고, 줄무늬 반복과 탁한 회색 중간을 피하는 최신 CSS Color 4 보간(in oklch, in oklab)을 지원하며, 복사할 CSS 그대로 사용자의 브라우저가 그린 미리보기를 보여 줍니다.

사용 방법

1. 프리셋을 고르거나 "직접 입력"을 유지하고 한 줄에 지점 하나씩, 색과 선택적인 위치를 입력합니다.
2. 선형, 원형, 원뿔형 중에서 고른 뒤 각도나 중심을 정합니다.
3. 줄무늬를 원하면 "반복"을 켜고, 필요하면 보간 방식을 고릅니다.
4. CSS 블록을 복사해 스타일시트에 붙여 넣습니다. 미리보기는 그 코드가 그리는 그대로입니다.

계산식

linear-gradient(<angle> [in <space>], <color> <pos>, …) · radial-gradient(<shape> at <position>, …) · conic-gradient(from <angle> at <position>, …)

각도는 CSS 기준으로 0deg가 위쪽, 90deg가 오른쪽입니다. 위치를 두 개 쓴 지점(red 10px 20px)은 딱 떨어지는 띠가 됩니다. 위치를 쓰지 않으면 브라우저가 지점을 고르게 배치합니다.

예시

기본 지점 #ff7e5f 0%와 #feb47b 100%를 90°로 쓰면 background-image: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);가 됩니다. 왼쪽 코랄에서 오른쪽 복숭아색으로 이어지며, 대체 줄로 background-color: #ff7e5f;가 함께 나옵니다.