🌗 Цвета ✓ Бесплатно

Генератор
градиента

Соберите переход из двух-шести цветов, задайте угол и тип — и заберите готовое свойство CSS. Точки можно двигать ползунками, добавлять и убирать, а превью обновляется сразу.

📐Три типа

🎚️До 6 точек

🧭Угол 0–360°

⧉Готовый CSS

Тип

Угол — 135°, отсчёт от направления вверх по часовой стрелке

°135

Точки перехода — от 2 до 6

0%
100%

Готовые градиенты:

Угол в CSS отсчитывается от направления вверх по часовой стрелке: ноль градусов даёт переход снизу вверх, девяносто — слева направо. В математике принято иначе, и на этом часто путаются.

Линейный · 135° · 2 точки

Готовое свойство CSS

background: linear-gradient(135deg, #4F8EF7 0%, #E879F9 100%);

Точки перехода

Точка 1	#4F8EF7	0 %
Точка 2	#E879F9	100 %

Справка

Угол, на котором все спотыкаются

В CSS отсчёт идёт от направления вверх и по часовой стрелке. Ноль градусов означает переход снизу вверх, девяносто — слева направо, сто восемьдесят — сверху вниз. В математике принято иначе: там ноль указывает вправо, а отсчёт против часовой. Отсюда и постоянная путаница, когда градиент уезжает не туда.

Есть и словесная запись — to right, to bottom left и подобные. Она нагляднее, но работает только для восьми направлений, а угловая позволяет любое. Обратите также внимание, что to top right не равно 45 градусам: словесная форма ведёт точно в угол блока и зависит от его пропорций, а угловая — нет.

0deg — снизу вверх
90deg — слева направо
180deg — сверху вниз
270deg — справа налево
135deg — по диагонали вниз-вправо

Линейный фоны, кнопки, шапки

Радиальный свечение, виньетка

Конический диаграммы, цветовой круг

Повторяющиеся полоски и текстуры

Текст поверх проверить контраст

Переход в прозрачность задавать rgba, не transparent

Полосы на растяжке добавить точку посередине

Градиент на тексте background-clip: text

FAQ

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

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

Углом в градусах или словами. Угол отсчитывается от направления вверх по часовой стрелке: 0deg даёт переход снизу вверх, 90deg — слева направо. Словесная запись вроде to right читается понятнее, но покрывает только восемь направлений.

Почему to top right не то же самое, что 45deg?

Потому что словесная форма ведёт точно в угол блока и подстраивается под его пропорции: у широкого прямоугольника этот угол будет далеко не 45 градусов. Угловая запись задаёт направление жёстко, независимо от размеров элемента.

Как сделать переход цвета в прозрачность?

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

Откуда берутся полосы на плавном переходе?

Это бандинг — результат того, что на восьмибитный канал приходится всего 256 градаций. На больших площадях с малой разницей цветов ступеньки становятся заметны. Помогает добавление промежуточной точки, лёгкий шум поверх или более контрастная пара.

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

Радиальный расходится кольцами от центра наружу, меняя цвет с расстоянием. Конический обходит вокруг центра по кругу, меняя цвет с углом, — получаются секторы, как в круговой диаграмме. Именно им обычно рисуют цветовой круг.

Можно ли наложить градиент на текст?

Да, связкой из фонового градиента, background-clip со значением text и прозрачного цвета текста. Приём работает во всех современных браузерах, но помните о читаемости: контраст у такого текста заметно ниже сплошной заливки.

Генератор градиента

Угол, на котором все спотыкаются

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

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

Генератор градиента

Генератор палитры

Именованные цвета CSS

Конвертер цветов

Генератор
градиента