CSS 그라디언트 생성기 (선형, 방사형, 원뿔)

CSS의 세 그라디언트 종류

선형 그라디언트: 색상이 주어진 각도의 직선을 따라 전환. 0°는 위, 90°는 오른쪽(기본 읽기 방향), 180°는 아래. 배경, 버튼, 히어로 섹션에 가장 흔함.

방사형 그라디언트: 색상이 중심점에서 바깥으로 전환. 모양이 원(우리 기본)이나 타원 가능. 스포트라이트 효과, 태양 같은 요소, 주의 끄는 중심에 최적.

원뿔 그라디언트: 색상이 색상 휠처럼 중심점 주위 회전. 덜 흔하지만 파이 차트, 시계 면, 장식 스피너에 강력. 2020년부터 현대 브라우저 지원.

색상 정지와 퍼센트 시스템

각 색상 정지는 색상과 0%부터 100% 위치 가짐. 0%는 그라디언트 시작, 100%는 끝. 두 정지가 부드러운 두 색상 그라디언트 제공. 중간에 세 번째 정지 추가가 위치에 따라 삼색 블렌드나 날카로운 띠 생성.

날카로운 전환(블렌드 없음)에는 같은 위치에 다른 색상의 두 정지 두기. 예: '#000 50%, #fff 50%'가 중간점에 날카로운 검정-흰색 분할 생성. 이렇게 '줄무늬' 배경 만듦.

성능과 접근성 팁

그라디언트는 배경 이미지와 달리 HTTP 요청 없이 네이티브 렌더. 품질 손실 없이 무한 확장. 애니메이션 친화적: background-position 통해 위치 전환 또는 사용자 정의 속성으로 그라디언트 정지 애니메이션.

접근성: 그라디언트 전반에 대비 변동하면 복잡한 그라디언트 위 텍스트 직접 두지 말기. 평면 색상 오버레이 사용, 그라디언트의 평균 밝기가 텍스트와 대비 보장, 또는 본 contrast checker로 테스트. WCAG AA가 일반 텍스트에 4.5:1, 큰 텍스트에 3:1 요구.