Генератор CSS-градиента

Настройте градиент в предпросмотре и скопируйте CSS для сайта.

Настройки CSS-градиента

Предпросмотр

Тип градиента

Настройки

Цветовые точки

2 из 8

Задайте цвет, прозрачность и положение каждой точки.

CSS для сайта

Готовые пресеты

Как создать градиент CSS

  1. Выберите тип. Линейный, радиальный или конический градиент.
  2. Настройте параметры. Укажите цвета, прозрачность, позиции и центр предпросмотра.
  3. Добавьте точки при необходимости. В градиенте может быть от 2 до 8 цветов.
  4. Скопируйте результат. Готовая строка CSS обновляется после каждого изменения.

Чем отличаются типы градиента

linear-gradient() меняет цвет по направлению, radial-gradient() расходится из центра, а conic-gradient() поворачивается вокруг центра. Все значения на этой странице представлены в современном CSS без устаревших префиксов.

Другие инструменты

Конвертер HEX, RGB и HSL поможет подготовить цвета, а проверка контраста цветов покажет читаемость текста. Для палитры из изображения используйте палитру из картинки.

Частые вопросы

Какие функции градиента поддерживаются?

Доступны linear-gradient, radial-gradient и conic-gradient, от двух до восьми цветовых точек, прозрачность, позиции, углы и настройка центра.

Можно ли использовать прозрачный цвет?

Да. Для каждой точки можно задать прозрачность от 0 до 1 с точностью до трёх знаков.

Что произойдёт при одинаковых позициях?

Точки останутся в порядке списка. Это позволяет задать резкую границу между цветами.

Значения отправляются на сервер?

Нет. Генератор работает в браузере и не делает сетевых запросов при настройке градиента.