Utilore

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

Двигайте ползунки и смотрите, как меняется полотно наверху. Понравилось — скопируйте строку и вставьте в свои стили, больше ничего не нужно.

Угол работает для линейного и конического; радиальный расходится из центра.

Точки цвета

    Как пользоваться

    1. Выберите тип: линейный идёт вдоль прямой, радиальный расходится из центра, конический вращается вокруг него.
    2. Задайте угол и подвиньте точки туда, где цвета должны встретиться.
    3. Добавьте точки, если двух цветов мало, или нажмите «Наугад».
    4. Скопируйте строку CSS под предпросмотром.

    Полезно знать

    Почему предпросмотр лежит на шахматке

    Градиент часто заканчивается прозрачным цветом, а на ровном белом полотне это выглядит ровно так же, как непрозрачный. Шахматка просвечивает всюду, где цвет неплотный, — и настроенное совпадает с увиденным. Ради этого её и завели графические редакторы.

    Точки сортируются до того, как соберётся код

    CSS не переставляет точки цвета за вас: точка на 70 %, записанная раньше точки на 30 %, заставляет браузер прижать вторую, и градиент молча теряет цвет. Тулза сортирует точки по положению при сборке строки, поэтому перетащенный за соседа ползунок результат не ломает.

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

    Чем три типа отличаются друг от друга?

    Линейный идёт вдоль прямой и принимает угол: 90deg — слева направо, 180deg — сверху вниз. Радиальный расходится кругами из центра, им хорошо делать свечение и подсветку. Конический вращается вокруг точки, как часовая стрелка, — из него собирают круговые диаграммы и цветовые круги.

    Как сделать градиент с прозрачностью?

    Выберите цвет и убавьте непрозрачность в самом выборе, если браузер даёт альфу, либо поправьте скопированную строку руками: rgba(31, 95, 214, 0) работает точкой не хуже плотного цвета. Растворение в прозрачность полезнее растворения в белый — оно ложится на любой фон.

    Можно ли залить им текст?

    Да, добавив две строки: градиент ставится в background-image, а рядом пишутся background-clip: text и color: transparent. Буквы сохраняют форму, а градиент виден сквозь них.

    Почему тот же угол в радиальном режиме выглядит иначе?

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

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