그라데이션 생성기

CSS 그라데이션(Gradient)은 두 개 이상의 색상 사이를 부드럽게 전환하는 효과입니다. 선형 그라데이션은 직선 방향으로 전환하고, 방사형 그라데이션은 중심점에서 바깥쪽으로 확산 전환합니다. 그라데이션은 배경, 버튼, 카드 등 요소에 사용하여 시각적 효과를 향상할 수 있습니다. 여러 사람이 함께 사용할 때는 입력, 전제, 기대 결과를 미리 맞춰 결과가 잘못 해석되지 않도록 해야 합니다.

CSS 그라데이션은 색상이 아닌 이미지 값입니다 — linear-gradient(), radial-gradient(), conic-gradient()는 브라우저가 background-image, mask-image, 또는 border-image 슬롯 안에서 래스터화하는 <image> 토큰으로 해석됩니다. 선형 형식은 각도(0deg는 위쪽, 90deg는 오른쪽, 시계 방향으로 증가) 또는 박스 대각선에서 계산되는 'to <side>' 키워드 뒤에 쉼표로 구분된 색상 중지점 목록(선택적 백분율 또는 길이 위치 포함)을 받습니다. 방사형 형식은 도형(circle | ellipse), 크기 키워드(기본값은 farthest-corner), 'at <position>' 앵커를 허용합니다. 원뿔형 형식은 'from <angle>'에서 시작하여 허브 주위를 스윕하며 Chrome 69+, Safari 12.1+, Firefox 83+에서 지원됩니다.<br /><br />색상 보간의 기본값은 sRGB로, 지각적으로 균일하지 않아 파랑과 노랑 같은 먼 색조 사이에 흐릿한 회색 띠가 생깁니다. CSS Color Level 4는 'in <colorspace>' 구문을 통해 명시적 색상 공간을 도입했습니다 — 'in oklch', 'in lab', 'in srgb-linear', 'in hsl longer hue' — 전반에 걸쳐 전환이 채도를 유지하도록 합니다. 단단한 색상 띠는 두 중지점에 동일한 위치를 부여하여 생성되고('red 50%, blue 50%'), 색상 힌트는 중지점을 삽입하지 않고 중간점을 이동시킵니다('red, 20%, blue').<br /><br />그라데이션이 CSS 파이프라인을 벗어나야 할 때, Canvas는 동일한 원시 함수를 제공합니다: CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1), createRadialGradient(x0, y0, r0, x1, y1, r1), createConicGradient(startAngle, x, y)는 addColorStop(offset, color)를 받을 수 있는 CanvasGradient 객체를 반환하며, toDataURL('image/png')로 내보내기 전에 fillStyle에 할당할 수 있습니다. SVG는 spreadMethod 값 'pad'(기본값), 'reflect', 'repeat'과 함께 <linearGradient> 및 <radialGradient> 마크업 등가를 제공하여 타일링 동작을 제어합니다.

• 선형 형식: linear-gradient(<angle> | to <side-or-corner>, <color-stop>+) — 0deg는 위쪽, 시계 방향으로 증가; 'to bottom right'는 박스 치수에 따라 계산되며 리터럴 135deg가 아님
• 방사형 형식: radial-gradient([<shape> <size>]? at <position>, <stops>) — 크기 키워드 closest-side, closest-corner, farthest-side, farthest-corner(기본값)
• 원뿔형 형식: conic-gradient(from <angle> at <position>, <stops>) — 허브 주위를 스윕; Chrome 69+, Safari 12.1+, Firefox 83+
• 색상 보간: CSS Color Level 4 'in oklch | lab | srgb-linear | hsl shorter|longer hue'가 먼 색조 사이의 회색 띠를 유발하는 지각적으로 균일하지 않은 sRGB 기본값을 오버라이드
• 하드 스톱과 힌트: 동일 위치의 두 중지점('red 50%, blue 50%')은 선명한 띠를 만들고, 단일 백분율('red, 20%, blue')은 50% 혼합 지점을 이동시키는 색상 힌트
• Canvas API: createLinearGradient(x0,y0,x1,y1), createRadialGradient(x0,y0,r0,x1,y1,r1), createConicGradient(angle,x,y)가 CanvasGradient 반환; addColorStop(offset, color) 후 fillStyle에 할당
• SVG 등가: <linearGradient> 및 <radialGradient>의 spreadMethod='pad'|'reflect'|'repeat'이 그라데이션 경계 너머의 타일링을 제어