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

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

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

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

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

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

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

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

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

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

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