---

Что такое CSS-градиент?

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

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

1. Выберите готовый вариант из образцов или настройте собственный градиент.

2. Выберите тип градиента: linear, radial или conic.

3. Настройте угол (для linear/conic) или форму (для radial).

4. Редактируйте цветовые точки — меняйте цвета и позиции (0–100%).

5. Добавляйте или удаляйте цветовые точки по необходимости.

6. Скопируйте CSS и вставьте его в свою таблицу стилей.

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

Как сделать прозрачный градиент? Используйте значения цвета rgba() или hsla() с альфа-каналом 0 для полной прозрачности. Например, точка цвета rgba(0,0,0,0) — это полностью прозрачный чёрный, полезный для плавного затемнения на изображениях.

Как создать жёсткую точку остановки цвета (без переходов)? Поместите две точки остановки цвета в одну позицию — одну заканчивающуюся и одну начинающуюся в этой точке. Например, red 50%, blue 50% создаёт мгновенный переход от красного к синему в середине без переходов градиента.

Какие браузеры поддерживают конические градиенты? Конические градиенты поддерживаются во всех современных браузерах (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Не поддерживаются в Internet Explorer.

Могу ли я использовать несколько градиентов на одном элементе? Да. CSS background принимает список слоёв, разделённых запятыми. Вы можете накладывать градиенты, комбинировать их с фоновыми изображениями и независимо управлять позицией и размером каждого слоя.

Keywords: генератор CSS-градиента, линейный градиент, радиальный градиент, конический градиент, генератор CSS-фона, выбор цвета для градиента, инструмент CSS-градиент