Генератор градиентов CSS
Постройте градиент на глаз и скопируйте CSS.
Перетащите маркер, чтобы переместить точку, или щёлкните по полосе, чтобы добавить новую. Маркеры также двигаются клавишами со стрелками.
Цветовые точки
- %
- %
- %
Работает в браузере. То, что вы вводите, никуда не отправляется.
- Перетаскивание точек
- Линейный, радиальный, конический
- 8 готовых вариантов
Как создать градиент CSS
- Выберите готовый вариант или задайте цвет каждой точки.
- Перетаскивайте маркеры на полосе и щёлкайте по ней, чтобы добавить точку.
- Скопируйте CSS и вставьте его в свою таблицу стилей.
Сравнение типов градиента
| Тип | Как распространяется | Функция CSS |
|---|---|---|
| Линейный | Вдоль прямой линии под углом | linear-gradient() |
| Радиальный | От центральной точки наружу | radial-gradient() |
| Конический | Вокруг центральной точки, как цветовое колесо | conic-gradient() |
Поддержка браузерами по типу градиента
| Тип градиента | Нужна как минимум |
|---|---|
| Линейный и радиальный | Любой современный браузер, вплоть до IE10 с префиксом |
| Конический | Chrome 69, Firefox 83, Safari 12.1 |
CSS, который выдаёт эта страница, всегда начинается с обычной строки background-color, поэтому браузер, который не умеет рисовать градиент, всё равно покажет цвет первой точки вместо пустого блока.
Советы для более плавных градиентов
- Добавьте третью точку в середине, чтобы градиент читался как два цвета, переходящих друг в друга через третий, а не как плоский двухцветный переход.
- Для резкой границы вместо плавного перехода задайте двум соседним точкам одинаковую позицию.
- 0deg идёт снизу вверх, а 90deg слева направо. Прибавьте 180 к любому углу, чтобы развернуть направление градиента, не перепечатывая каждую точку заново.
- Подбирайте радиальную форму под блок: круг для квадратных элементов, эллипс для широких, чтобы градиент не выглядел растянутым.
Частые вопросы о Генератор градиентов CSS
Как сделать градиент в CSS?
Задайте свойству background функцию градиента, например background: linear-gradient(90deg, #ff7e5f, #feb47b). Первое значение это направление, затем идут цвета, у каждого может быть своя позиция.
В чём разница между линейным, радиальным и коническим градиентом?
Линейный градиент меняет цвет вдоль прямой линии, радиальный расходится от центральной точки, а конический вращается вокруг центральной точки, как цветовое колесо или круговая диаграмма.
В какую сторону направлен угол?
0deg идёт снизу вверх, 90deg слева направо, 180deg сверху вниз и 270deg справа налево. Для конических градиентов угол задаёт, где начинается вращение.
Как сделать чёткую границу между двумя цветами?
Задайте двум соседним точкам одинаковую позицию, например red 50% и blue 50%. Тогда цвет переключится в этой точке вместо плавного перехода.
Градиенты CSS работают в каждом браузере?
Линейные и радиальные градиенты работают в каждом современном браузере. Конические градиенты требуют Chrome 69, Firefox 83 или Safari 12.1 и новее. CSS здесь начинается со сплошного цвета как запасного варианта.
Можно анимировать градиент CSS?
Можно анимировать background-position или background-size на увеличенном градиенте для эффекта движения. Анимация самих цветов точек требует правила CSS @property или небольшого скрипта, ведь браузеры не умеют плавно переходить между двумя полными значениями градиента сами по себе.
Можно использовать градиент как цвет текста?
Да. Скопируйте CSS градиента сюда в background, затем добавьте текстовому элементу background-clip: text и color: transparent, чтобы градиент был виден сквозь буквы вместо заливки блока.