CSS Tools Генератор CSS-градиентов
Создавайте линейные, радиальные и конические градиенты визуально и копируйте чистый CSS. Накладывайте несколько слоёв, добавляйте цветовые точки с прозрачностью и проводите прямо по превью, чтобы изменить направление.
CSS-градиент от черного до белого
У каждого градиента может быть несколько слоёв, и у каждого слоя свой тип, угол и цвета. На выходе чистый CSS без вендорных префиксов, его можно сразу вставить в проект. Ссылка на страницу сохраняет ваш градиент: им можно поделиться или вернуться к нему позже.
Как пользоваться генератором градиентов
Выберите тип градиента
Для каждого слоя выберите линейный, радиальный или конический. Линейный смешивает цвета вдоль прямой, радиальный расходится от центральной точки, конический вращает цвета вокруг центра.
Настройте цвета и слои
Нажмите на цветовую шкалу, чтобы добавить точку, перетащите её, чтобы изменить позицию, и задайте любой цвет с прозрачностью. Кнопка добавления слоя кладёт сверху ещё один градиент.
Проверьте результат на превью
Посмотрите градиент на шести фигурах: весь экран, квадрат, горизонтальный и вертикальный прямоугольник, круг и звезда. Фон за фигурой тоже можно поменять.
background: linear-gradient(90deg, #000000 0%, #ffffff 100%);