Цвет · градиентГенератор CSS-градиентов
Соберите линейный, радиальный или конический градиент, перетаскивая цветовые точки, и скопируйте готовый CSS. С проверкой читаемости текста и подсказкой, когда переход грязнит.
Работает в браузере
01
Конструктор
двигайте точки — CSS собирается сразу02
Читаемость текста
контраст WCAG по всей длине градиента, а не в одной точке03
Рецепты
готовый код и живой пример — на ваших цветах04
О градиентах
Градиент в CSS — это плавный переход между цветами. Задаются две вещи: направление (угол, центр или сектор) и цветовые точки — цвета с необязательными позициями. Всё остальное браузер считает сам, и именно от того, как он смешивает цвета, зависит, получится переход чистым или грязным.
Три типа
Основаlinear · radial · conic
Линейный ведёт цвет вдоль линии, радиальный — от центра наружу, конический — по кругу вокруг центра. Конический используют для диаграмм и цветовых колёс.
Цветовые точки
Стопы#f00 0%, #00f 100%
Каждая точка — цвет и позиция. Две точки на одной позиции дают резкую границу — так делают полосы и двухцветные фоны без картинок.
Мёртвая серая зона
Проблемасиний → жёлтый
При обычном смешивании переход между противоположными цветами проваливается в грязно-серый. Это не ошибка браузера, а свойство sRGB.
OKLCH спасает
Решениеin oklch
Добавление in oklch заставляет браузер смешивать в перцептивном пространстве: переход остаётся чистым и равномерным по яркости.
Текст поверх
Доступностьхудшая точка
Текст на градиенте читается по-разному в разных местах: там, где фон светлеет, контраст может упасть ниже нормы. Проверять нужно всю длину, а не один цвет.
Полосатость
Печать и экрандизеринг
На больших плавных переходах видны ступени. Помогает лёгкий шум поверх градиента или более контрастные цвета.
05
Частые вопросы
Обновлено