CSS 그라데이션 생성기는 선형, 원형, 원뿔 그라데이션을 시각적으로 편집하면서 복사할 수 있는 CSS를 함께 만들어 줍니다. 색상 정지점은 끌어서 위치를 옮기고 빈 곳을 눌러 추가하며 색을 바꿀 수 있고, 최소 두 개는 남아 있어야 합니다. 선형은 0–359° 방향을 조절하고, 원형은 circle/ellipse와 중심 위치 아홉 곳을 고르며, 원뿔은 시작 각도와 중심 위치를 설정합니다. Web Crypto 난수 모듈을 쓰는 "랜덤 영감"은 유사색, 보색, 삼각 배색을 만들어 냅니다.

1. 01색상 정지점 막대에서 정지점을 선택, 이동, 추가하고 색과 0–100% 위치를 바꿉니다.
2. 02선형, 원형, 원뿔 유형을 고르고 유형에 맞는 각도, 모양, 중심을 설정합니다.
3. 03생성된 CSS를 복사합니다. 선형과 원형에는 예전 -webkit- 호환 표기도 함께 나오고 첫 줄에는 단색 대체값이 있습니다.
4. 04이미지가 필요하면 프리셋 해상도를 골라 PNG 배경 화면으로 내보냅니다.

• 색상 정지점 위치는 0–100%로 제한되고 최소 두 개를 남깁니다. 두 색 사이에 새 정지점을 넣으면 인접 색을 선형 보간한 값이 초기 색이 됩니다.
• 선형 각도는 화면에서 0–359°이고, 원형은 circle/ellipse를 지원하며 중심은 정해진 아홉 방향 중에서만 고릅니다.
• PNG 해상도 프리셋에는 1920×1080, 2560×1440, 3840×2160, 1080×1920, 1290×2796이 있습니다.
• Canvas의 원형 ellipse 내보내기는 좌표를 늘리고 줄여 CSS 타원 효과를 근사합니다. 브라우저마다 CSS 렌더링과 내보낸 픽셀이 미세하게 다를 수 있습니다.
• 하지 않는 일: 그라데이션 애니메이션을 만들지 않고, SVG로 내보내지도 않으며, 원격 이미지 라이브러리에서 배색을 받아오지도 않습니다.

배색, CSS, PNG가 모두 브라우저 안에서 계산·생성되며 원격 배색 서비스나 이미지 서비스를 호출하지 않습니다.