Генератор 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%);