Генератор CSS-градиентов (линейный, радиальный, конический)

Выберите тип градиента, задайте угол, добавляйте или удаляйте цветовые точки с позициями. Живой предпросмотр. Скопируйте CSS-объявление background одним кликом.

ТипУгол: 135°

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

0%
100%

CSS-кодbackground: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);

Как это работает

Три типа градиентов в CSS

Линейный градиент: цвета переходят вдоль прямой линии под заданным углом. 0° — направление вверх, 90° — вправо (стандартное направление), 180° — вниз. Наиболее распространён для фонов, кнопок, шапок страниц.

Радиальный градиент: цвета расходятся от центральной точки наружу. Форма может быть кружной (по умолчанию) или эллиптической. Идеален для эффектов прожектора, солнцеподобных элементов или акцентных центров.

Конический градиент: цвета вращаются вокруг центральной точки, как цветовое колесо. Менее распространён, но мощен для круговых диаграмм, циферблатов часов или декоративных вращающихся элементов. Поддерживается в современных браузерах с 2020 года.

Цветовые точки и система процентов

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

Для резких переходов (без плавного смешения) поставьте две точки на одной позиции с разными цветами. Например, '#000 50%, #fff 50%' создаёт резкий переход от чёрного к белому в середине. Так создаются «полосатые» фоны.

Производительность и советы по доступности

Градиенты рендерятся нативно без HTTP-запросов, в отличие от фоновых изображений. Они масштабируются бесконечно без потери качества. Их легко анимировать: смещайте фон через background-position или анимируйте цветовые точки через пользовательские свойства CSS.

Доступность: не размещайте текст прямо поверх сложного градиента, если контрастность меняется по его длине. Используйте накладку с однородным цветом, следите за средней яркостью градиента относительно текста или проверьте с помощью нашего инструмента проверки контраста. WCAG AA требует 4,5:1 для обычного текста и 3:1 для крупного.

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

›Поддерживаются ли градиенты в старых браузерах?

Линейные и радиальные градиенты работают во всех современных браузерах, включая Edge, Firefox, Chrome, Safari (с 2014 года). Конические градиенты требуют Chrome 69+, Firefox 83+, Safari 12.1+. Для старых браузеров используйте линейный как запасной вариант.

›Можно ли использовать их в React Native или мобильных приложениях?

Web CSS-градиенты не переносятся напрямую в React Native — используйте библиотеки типа `react-native-linear-gradient`. Цветовые точки переносятся, но синтаксис отличается. iOS и Android используют платформенные API.

›Можно ли использовать именованные цвета?

Да. Замените любой шестнадцатеричный код (например, #ff0000) на имя CSS-цвета (red, dodgerblue и т. д.) в текстовом поле рядом с выбором цвета.

›Почему мой конический градиент выглядит странно?

Конические градиенты вращаются по часовой стрелке от заданного угла. Лучше всего они выглядят при нескольких точках, охватывающих полный оборот 360°. С двумя точками они часто выглядят незавершёнными.

›Как создать эффект свечения?

Используйте радиальный градиент с полностью прозрачной конечной точкой: например, 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'.

›Можно ли анимировать градиент?

CSS не анимирует цветовые точки напрямую, но вы можете анимировать background-position для эффекта движения или использовать пользовательские свойства CSS и обновлять их через JavaScript.

›Почему CSS такой длинный?

Каждая точка добавляет цвет и позицию. Длинные градиенты со многими точками дают многословный CSS. Для более простых результатов ограничьтесь 2–3 точками.

›Данные отправляются на сервер?

Нет. Всё вычисляется локально в браузере.