Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Генератор градиентов CSS
Создавайте линейные и радиальные градиенты с двумя–восемью цветовыми точками и копируйте CSS.
Об инструменте
Настраивайте переходы фона положением цветовых точек. Предпросмотр и код используют одни и те же значения.
Как пользоваться
Выберите тип, цвета и позиции, а для линейного градиента — угол. Добавляйте и удаляйте точки, наблюдая результат. Точки сортируются по позиции; совпадающие позиции создают резкую границу. Доступны 2–8 точек от 0 до 100 % и углы от -360 до 360 градусов. Радиальный градиент — эллипс по центру.
Частые вопросы
Как сделать чёткую границу двух цветов?
Поставьте две точки разных цветов на одинаковую процентную позицию. Точки сортируются по положению. Скачивается CSS, а не изображение градиента.
Как задать направление градиента?
Линейные углы соответствуют CSS: 0° направлен вверх, 90° вправо. Радиальный режим использует эллипс по центру без настройки угла. Скопируйте полное объявление background в правило CSS.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0