Генератор UUID
Генерируйте случайные UUID пачками.
Генератор CSS-градиентов
Создайте линейный, радиальный или конический градиент и скопируйте CSS.
Цветовые остановки
0%
100%
Ваши файлы остаются на устройстве
Как это работает
- 1Выберите линейный, радиальный или конический.
- 2Задайте угол или форму для радиального.
- 3Выберите цвета и перетащите каждую остановку на нужное место. Добавляйте остановки кнопкой «Добавить цветовую остановку».
- 4Скопируйте CSS и вставьте его в таблицу стилей.
Что делают параметры
- Линейный
- Цвета переходят вдоль прямой линии. Угол задаёт направление: 0 градусов вверх, 90 вправо, 180 вниз.
- Радиальный
- Цвета расходятся от центра в виде круга или эллипса.
- Конический
- Цвета разворачиваются вокруг центра, как цветовой круг или круговая диаграмма. Угол поворачивает начало.
- Цветовые остановки
- Каждая остановка это цвет в позиции от 0 до 100 процентов. До восьми.
Конфиденциальность
Всё выполняется в вашем браузере. Введённые данные не отправляются на сервер.
Частые вопросы
Какие браузеры поддерживают эти градиенты?
Линейные и радиальные градиенты работают во всех современных браузерах. Конические градиенты работают во всех текущих версиях Chrome, Edge, Firefox и Safari.
Как сделать резкую границу вместо плавного перехода?
Поставьте две остановки в одну позицию, например красный на 50% и синий на 50%. Расстояния для перехода между ними нет, поэтому смена получается резкой.
Можно ли использовать это как цвет текста или рамки?
Да. Используйте то же значение в background-image вместе с background-clip: text для текста или border-image для рамок.
Почему на странице цвет отличается от выбранного?
Палитра использует значения hex в sRGB. Экраны с широким цветовым охватом могут показывать их немного иначе, но значения CSS точные.
Как добавить прозрачность?
Этот инструмент выдаёт сплошные цвета hex. Отредактируйте код и замените цвет на восьмизначный hex, например #4f46e580, или на rgba().