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

Создавайте линейные и радиальные CSS-градиенты с живым предпросмотром. Добавляйте цветовые точки, задавайте угол и копируйте чистый CSS для фона — всё прямо в браузере.

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

Градиент

Угол

90°

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

#f5530c

#ffa94d

CSS

background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);

Как пользоваться Генератор CSS-градиентов

1
Выберите тип градиента
Переключайтесь между линейным и радиальным типом. У линейного градиента можно также задать направление ползунком угла, который измеряется в градусах.
2
Добавьте и раскрасьте точки
Нажмите на образец, чтобы выбрать каждый цвет, и задайте его положение от 0 до 100 процентов. Используйте «Добавить цветовую точку» для многоцветных переходов или удалите точку, чтобы упростить градиент.
3
Смотрите живой предпросмотр
Панель предпросмотра показывает градиент ровно таким, каким он отобразится в браузере, и обновляется при каждом вашем изменении.

4
Скопируйте CSS
Скопируйте сгенерированную строку background и вставьте её в свою таблицу стилей. Это стандартный CSS, который работает в любом современном браузере.

Часто задаваемые вопросы

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

Выберите линейный или радиальный тип, задайте угол и добавьте столько цветовых точек, сколько нужно. Предпросмотр обновляется вживую, а готовый CSS появляется ниже в виде свойства background, которое можно сразу скопировать в таблицу стилей.

Чем отличается линейный градиент от радиального?

Линейный градиент смешивает цвета вдоль прямой линии, а его направление вы задаёте углом в градусах. Радиальный градиент расходится кругом от центра наружу. Оба используют одни и те же цветовые точки — меняется лишь форма перехода.

Что такое цветовые точки?

Цветовая точка — это цвет вместе с положением от 0 до 100 процентов вдоль градиента. Две точки дают простой переход между двумя цветами, а добавляя новые, можно собрать насыщенные многоцветные градиенты. Меняйте значение положения, чтобы передвинуть каждый цвет.

Как использовать градиент в своём проекте?

Скопируйте сгенерированную строку и вставьте её как свойство background любого элемента — например, div или section. Поскольку это обычный CSS, он работает в любом современном браузере без картинок и библиотек.

Загружаются ли мои данные на сервер?

Нет. Всё работает полностью в вашем браузере. Ничего из созданного вами не загружается, не записывается в журнал и не сохраняется, поэтому ваша работа остаётся полностью конфиденциальной, а инструмент продолжает работать даже офлайн.

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

Как пользоваться Генератор CSS-градиентов

Часто задаваемые вопросы

Похожие инструменты