CSS 그라데이션 생성기

컬러 스톱

막대를 클릭하면 스톱이 추가되고, 스톱을 드래그하면 이동합니다. 스톱을 선택한 상태에서는 화살표 키로 이동하고 Delete 키로 삭제할 수 있습니다.

색상 혼합 방식

같은 스톱을 세 가지 방식으로 혼합한 결과입니다. 기존 sRGB는 거리가 먼 색 사이에서 회색빛이 돌거나 탁해질 수 있지만, OKLab은 밝기를 고르게 유지하고 OKLCH는 색을 선명하게 유지합니다. OKLab이나 OKLCH를 지원하지 않는 브라우저에는 똑같아 보이는 sRGB 폴백이 적용됩니다.

위에 올린 텍스트

흰색 텍스트

2.1:1

너무 낮음

검은색 텍스트

4.2:1

AA (큰 텍스트만)

그라데이션 전체에서 가장 낮은 대비입니다. WCAG AA는 본문 텍스트에 4.5:1, 큰 텍스트에 3:1을 요구합니다.

코드

background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);