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

Как создать CSS-градиент

1. Выберите тип градиента: линейный или радиальный.
2. Кликайте по контрольным точкам, чтобы задать их цвет — пипеткой или hex-кодом.
3. Перетаскивайте точки по шкале, управляя тем, где каждый цвет начинается и смешивается.
4. Задайте угол для линейного градиента либо форму и позицию для радиального.
5. Добавьте дополнительные точки, если хотите больше двух цветов.
6. Нажмите «Копировать CSS» и вставьте код в вашу таблицу стилей.

Что делает этот генератор градиентов

Инструмент позволяет собрать градиент визуально: выбрать контрольные точки цвета, перетащить их по шкале, задать угол или радиальную форму — а затем отдаёт вам готовый CSS для копирования. На выходе — стандартное объявление background, которое вы вставляете в таблицу стилей; никакого файла-картинки и шага экспорта, только код.

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

Как работает синтаксис CSS-градиентов

Линейный градиент записывается как linear-gradient(направление, точка-цвета, точка-цвета, ...). Направление — это угол вроде 90deg или ключевое слово вроде to right, а каждая точка — это цвет с необязательной позицией, например #ff6600 20%. Радиальный градиент использует radial-gradient() и описывает форму и позицию вместо угла, смешиваясь наружу от центральной точки.

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

Советы для градиентов, которые выглядят профессионально

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

Сдержанность тоже продаёт. Фоновый градиент между двумя тонами одного оттенка читается как глубина, а не как украшение. А для текста поверх фотографий стандартный приём — градиент к прозрачному чёрному: linear-gradient(rgba(0,0,0,.6), transparent).

Где градиенты оправдывают себя

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

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

Применение градиентов к тексту

Градиентный текст — популярный приём для заголовков. Задайте градиент фоном элемента, затем добавьте background-clip: text с прозрачным цветом текста, чтобы градиент проступал сквозь формы букв. Генератор создаёт саму градиентную часть — вы оборачиваете вокруг неё эти две дополнительные строки.

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

Заметки о доступности и производительности

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

Что до производительности, CSS-градиенты рисуются браузером и практически ничего не стоят при загрузке, в отличие от фонового изображения. Они ещё и независимы от разрешения, так что одно объявление выглядит чётко от телефона до 4K-дисплея — и вам не нужно поставлять несколько наборов ресурсов.

Связанные инструменты

Градиенты хороши ровно настолько, насколько хороши питающие их цвета, поэтому пипетка цвета — естественный спутник для подбора точек и считывания их значений HEX, RGB и HSL перед тем, как вставить их сюда.

Если дизайн выдаёт цвета в неподходящей нотации, конвертеры HEX в RGB и RGB в HEX переводят их точной математикой. Всё это работает полностью в вашем браузере, а сам генератор градиентов выдаёт обычный CSS, который вы просто копируете.

Часто задаваемые вопросы

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