Генератор градиента CSS онлайн — фон, текст и рамка

Градиентный фон блока или страницы

Он записывается в свойство background или background-image. Угол задаёт направление: 0deg — снизу вверх, 90deg — слева направо, 180deg — сверху вниз, так рисуется и запись без угла. Вместо градусов можно написать to right или to bottom right. У каждого цвета можно указать позицию в процентах. Две точки в одной позиции дают резкую границу без перехода, так делают полосы.

body {
  background: linear-gradient(135deg, #3BA7F5 0%, #5A67E8 100%);
  min-height: 100vh;
}

Чтобы фон растянулся на весь экран, у body должна быть высота. Иначе фон займёт только высоту контента и начнёт повторяться.

Градиент текста и надписи

Заливку задают фоном, обрезают по буквам через background-clip: text, а сам текст делают прозрачным. Safari до версии 15.4 понимает только вариант с префиксом -webkit-, поэтому в коде обе строки. Текст остаётся текстом: его видят поисковики и экранные дикторы, его можно выделить и скопировать.

h1 {
  background-image: linear-gradient(90deg, #FF9E6B, #E2587E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Кнопка с градиентом и плавным наведением

Для кнопки код тот же, что для фона. Сложность в наведении: смену одного градиента на другой браузер не анимирует через transition, цвета переключатся рывком. Рабочий приём — растянуть фон вдвое через background-size: 200% и сдвигать background-position: позиция анимируется плавно.

.button {
  background: linear-gradient(90deg, #1DD97A, #0F9D8C, #1DD97A);
  background-size: 200% 100%;
  transition: background-position 0.4s;
}
.button:hover { background-position: 100% 0; }

Градиентная рамка со скруглением

Очевидный способ — border-image, но со скруглёнными углами он не работает: border-radius на такую рамку не действует. Поэтому используют два слоя фона. Верхний слой заливает внутреннюю часть (padding-box), нижний с градиентом виден только под прозрачной рамкой (border-box). Такой код даёт режим «Рамка» в генераторе.

.card {
  border: 4px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #1DD97A, #0E9F8E) border-box;
}

Градиент поверх изображения

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

.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), transparent),
    url("photo.jpg") center / cover;
}

Линейный: переход по прямой

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

Радиальный: от центра наружу

Цвета расходятся кругом (circle) или эллипсом по пропорциям блока (ellipse). Размер фигуры задаётся словами: до ближней или дальней стороны, до ближнего или дальнего угла. Центр ставится через at: at top, at 30% 70%. Так делают подсветку, мягкие пятна света и виньетку по краям фотографии.

Конический: по кругу вокруг точки

Цвет меняется по углу, как стрелка по циферблату, начиная сверху. Параметр from поворачивает начало. С резкими границами получаются секторные диаграммы без JavaScript и картинок: conic-gradient(#1DD97A 0% 25%, #E4E8EC 25% 100%) — сектор в четверть круга. Поддерживается с Chrome 69, Firefox 83 и Safari 12.1.

Полосы, узоры и переливание

У repeating-linear-gradient узор между первой и последней точкой повторяется до края блока. Две пары точек в одинаковых позициях дают полосы: repeating-linear-gradient(45deg, #191B1E 0 10px, #F7C948 10px 20px). Анимированный градиент строится на сдвиге фона: его растягивают втрое и двигают через @keyframes. Галочка «Анимация» добавляет такой код и отключает движение у тех, кто включил в системе уменьшение анимации.