Генератор CSS-градиентов
Собрать градиент, который не сереет в середине.
CSS
background: linear-gradient(90deg, #f27d14, #d7783f, #bc7354, #a26c63, #88656e, #6e5c77, #54537e, #3a4885, #1e3a8a);
Смешайте синий с жёлтым обычным способом — и середина станет грязно-серой, потому что прямая между ними в RGB уходит из насыщенной части пространства. Переход через OKLab её обходит. Оба варианта показаны рядом, чтобы разницу можно было увидеть, а не принять на веру.
Как пользоваться
- Выберите два цвета.
- Задайте угол и сравните два перехода.
- Скопируйте CSS.
Почему этот инструмент
Полная конфиденциальность
Всё работает внутри браузера. Ваши файлы и текст никогда не отправляются на сервер.
Бесплатно и без ограничений
Без регистрации, без водяных знаков и без лимита на количество использований.
Мгновенный результат
Не нужно ничего загружать и ждать очереди — результат появляется так быстро, как позволяет ваше устройство.
Работает на любом устройстве
Любой современный браузер на телефоне, планшете или компьютере. Ничего устанавливать не нужно.
Частые вопросы
- Почему в CSS девять цветов?
- Потому что браузер смешивает в sRGB, что бы вы ему ни дали. Выписать середину явно — единственный способ заставить все браузеры идти по пути OKLab, а не только самые новые, понимающие указание цветового пространства.
- Когда sRGB выглядит плохо?
- Всегда, когда цвета далеки по тону, особенно противоположные — синий и жёлтый, красный и зелёный. Два оттенка одного цвета выглядят почти одинаково в обоих вариантах.
- Можно больше двух цветов?
- Пока нет. Сделайте два градиента и соедините CSS вручную либо поставьте средний цвет концом одного и началом следующего.