Создайте CSS-градиент и скопируйте код
Этот генератор CSS-градиентов визуально собирает фоны <code>linear-gradient()</code>, <code>radial-gradient()</code> и <code>conic-gradient()</code>. Щёлкните по полосе точек, чтобы добавить цвет, перетащите точки на место, задайте прозрачность каждой, затем настройте угол, форму или центр — превью обновляется сразу. Скопируйте CSS со сплошным резервным цветом, готовый класс Tailwind или экспортируйте градиент в PNG любого размера. Вставьте градиент из своей таблицы стилей, чтобы отредактировать его здесь. Всё работает локально в вашем браузере.
Как сделать CSS-градиент
- 1Выберите Линейный, Радиальный или Конический либо начните с одного из шаблонов.
- 2Щёлкните в любом месте полосы, чтобы добавить точку цвета, перетаскивайте точки, а чтобы удалить точку в фокусе, нажмите Delete. Стрелки сдвигают точку в фокусе на 1%, Shift+стрелка — на 10%.
- 3Выберите цвет и прозрачность каждой точки. Подходит любой цвет CSS: hex,
rgb(),hsl(),oklch()или название цвета. - 4Задайте угол на круговой шкале (удерживайте Shift для шага 15°), а для радиальных и конических градиентов перетаскивайте по превью, чтобы сместить центр.
- 5Скопируйте CSS или класс Tailwind либо задайте ширину и высоту и скачайте PNG.
Линейные, радиальные и конические градиенты
- linear-gradient()
- Цвета меняются вдоль прямой линии под заданным углом. <code>0deg</code> направлен вверх, <code>90deg</code> — вправо; ключевые слова <code>to right</code> и <code>to bottom left</code> означают то же самое словами. Линия градиента ровно такой длины, чтобы углы получили первый и последний цвет.
- radial-gradient()
- Цвета расходятся от центра кругом или эллипсом. Ключевое слово размера определяет, где окажутся 100%: <code>farthest-corner</code> (по умолчанию) достигает самого дальнего угла блока, <code>closest-side</code> останавливается у ближайшего края.
- conic-gradient()
- Цвета обходят центр, как стрелки часов, начиная с угла <code>from</code>. Резкие переходы позволяют рисовать круговые диаграммы и цветовые круги без картинок.
Точки цвета, резкие края и прозрачность
Каждая точка цвета — это цвет и позиция. Между двумя точками браузер плавно смешивает цвета; если у двух точек одна позиция, цвет меняется резко — так рисуют полосы, флаги и круговые диаграммы. Задайте один цвет двум соседним точкам, чтобы получить сплошную полосу.
Точки могут быть частично прозрачными, поэтому градиент может плавно растворять изображение в странице или затемнять низ главной картинки, чтобы белый текст оставался читаемым. Современные браузеры смешивают прозрачные точки в предумноженном цвете, так что переход к transparent больше не сереет посередине, но генератор всё равно пишет явный цвет rgba() для наглядности.
Повторяющиеся градиенты
repeating-linear-gradient() и его радиальный и конический аналоги повторяют узор между первой и последней точкой по всему блоку. Включите Повтор и передвиньте последнюю точку заметно раньше 100%, например на 10%, чтобы получить полосы, кольца или лучи. Если последняя точка стоит на 100%, повторяющийся градиент выглядит точно так же, как обычный.
Резервный цвет, Tailwind и экспорт в PNG
Градиенты — это изображения, поэтому браузер, который не умеет их рисовать, ничего не покажет под вашим текстом. Необязательная резервная строка сначала задаёт сплошной background — среднее значение ваших точек, а строка с градиентом после неё перекрывает его везде, где градиенты работают.
Вывод для Tailwind — это класс с произвольным значением, например bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Пробелы заменяются подчёркиваниями, потому что в именах классов Tailwind пробелов быть не может; это работает в Tailwind 3 и 4 без всякой настройки.
Экспорт в PNG рисует тот же градиент на canvas в выбранном размере, до 8192 пикселей по каждой стороне, — для обоев, картинок для соцсетей или дизайн-программ, которые не читают CSS. Подберите цвета под текст с помощью проверки контраста, переводите их между форматами в конвертере цветов или добавьте глубину в генераторе box-shadow.
Редактирование готового градиента
Вставьте градиент в поле Импорт: просто linear-gradient(…), целое объявление background: или background-image:, версию с префиксом -webkit- или класс Tailwind bg-[…]. Распознаются направления вроде to top right, углы в deg, turn или rad, точки с двумя позициями и точки без позиций. Позиции в пикселях и подсказки цвета нельзя показать на процентной полосе, поэтому они округляются, и импорт об этом сообщает.
Часто задаваемые вопросы
- Как сделать градиентный фон в CSS?
- Задайте свойству background (или background-image) функцию градиента, например background: linear-gradient(90deg, #ff7e5f, #feb47b);. Этот генератор напишет такую строку за вас, при желании со сплошным резервным цветом перед ней.
- Чем отличаются линейный, радиальный и конический градиенты?
- Линейный градиент меняет цвет вдоль прямой линии, радиальный расходится от центра кругами или эллипсами, а конический обходит центр, как стрелка часов.
- Как сделать резкий край или полосы?
- Поставьте две точки разного цвета в одну позицию. Для повторяющихся полос включите Повтор и поставьте последнюю точку на небольшое значение, например 10%.
- Может ли CSS-градиент быть прозрачным?
- Да. Уменьшите прозрачность точки, и генератор запишет её как rgba(). Градиент от цвета к прозрачности — распространённый способ плавно растворить изображение или наложение в странице.
- Как использовать градиент в Tailwind CSS?
- Скопируйте класс Tailwind — произвольное значение вроде bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)] — и добавьте его к элементу. Встроенные утилиты Tailwind from-/via-/to- покрывают только простые линейные градиенты, а произвольное значение поддерживает любой.
- Работают ли конические градиенты во всех браузерах?
- conic-gradient() работает во всех актуальных версиях Chrome, Edge, Firefox и Safari. Добавьте резервный цвет, если вы всё ещё поддерживаете очень старые браузеры.
- Можно ли скачать градиент как картинку?
- Да. Укажите ширину и высоту и скачайте PNG. Изображение рисуется в вашем браузере точно в этом размере, до 8192 × 8192 пикселей.
- Что-нибудь загружается на сервер?
- Нет. Превью, CSS и экспорт в PNG создаются прямо в вашем браузере.