CSS Gradient 생성기

처음부터 결과 확인까지

1. 1

   선형, 방사형 또는 원뿔형 중 표현 목적에 맞는 유형을 선택합니다.

2. 2

   두 색을 정하고 각각의 색상 지점이 앞에서 뒤로 이어지도록 설정합니다.

3. 3

   선형과 원뿔형은 각도를 조절합니다. 방사형은 중앙 원형으로 고정되며 각도는 적용하지 않습니다.

4. 4

   고정된 미리보기에서 색상 흐름을 확인한 뒤 실제 요소 크기에서도 결과를 확인합니다.

5. 5

   필요하면 유효한 CSS 선택자와 --로 시작하는 사용자 정의 속성 이름을 입력합니다.

6. 6

   코드를 한 번 생성하면 유효한 입력 변경은 자동 반영됩니다. 오류를 수정한 뒤 복사·저장하고 실제 배경 위 텍스트 대비를 검사합니다.

계산·처리 기준

선택한 유형에 따라 linear-gradient(), radial-gradient() 또는 conic-gradient() 함수를 만들고 각 색상과 지점을 background-image에 배치합니다. 선택자는 문법과 위험 문자를 제한하고, 사용자 정의 속성은 --로 시작하는 유효한 이름만 허용합니다.

알아둘 한계

• 반복 그라디언트, 투명도, 중심 위치·방사형 모양 조절은 제공하지 않습니다.
• 두 개의 색상 지점만 지원하며 다중 색상·색상 보간 공간은 직접 편집해야 합니다.
• conic-gradient와 일부 고급 문법은 오래된 브라우저에서 지원이 다를 수 있습니다.
• 그라데이션 위 텍스트의 WCAG 대비율을 자동 계산하지 않습니다.
• 배경 이미지 대체색과 인쇄 환경은 생성 코드에 자동 포함되지 않습니다.