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

Генератор CSS-градиентов mePage создаёт плавные переходы между цветами и сразу показывает результат. Вы выбираете палитру, регулируете направление и положения цветовых точек, а инструмент формирует CSS для фона элемента.

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

linear-gradient() распределяет цвета вдоль прямой. Направление задаётся углом: 0° направлено вверх, 90° вправо, 180° вниз, 270° влево. Диагональный вариант удобен для фона крупного блока, где нужно выделить одну из сторон.

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

conic-gradient() располагает цвета вокруг центра, словно секторы цветового круга. Угол определяет начало обхода, а позиции цветовых точек задают доли полного оборота. Этот вариант подходит для декоративных дисков и акцентных фонов.

Добавьте от двух до шести цветов. Для каждого выберите оттенок в палитре или введите HEX-код из шести символов, например #7C6EE8. Сокращённая запись из трёх символов, например #ABC, тоже принимается и разворачивается в полный код.

Позиция определяет, где находится цветовая точка на шкале от 0 до 100%. Чем ближе две точки, тем короче переход между ними. Одинаковые позиции создают резкую границу. Значения можно менять числом, перетаскиванием маркеров или клавишами направления после выбора маркера.

Непрозрачность 100% означает сплошной цвет, 0% делает его полностью прозрачным. Шахматный фон предпросмотра помогает увидеть прозрачные области. В сгенерированном CSS полупрозрачные оттенки записываются через rgba().

Нажмите «Скопировать CSS» и вставьте объявления внутрь правила нужного элемента. Кнопка скачивания сохраняет файл с классом .mepage-gradient; назначьте этот класс своему блоку.

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

В конструкторе сайтов найдите настройки пользовательского CSS или фона нужного блока. Возможность вставки собственного CSS зависит от выбранного конструктора и его настроек.

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

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

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

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

Если фон не появился, проверьте размеры блока и правила, которые могут переопределять background или background-image. Сначала примените скачанный класс к простому элементу, затем перенесите настройки в ваш компонент.

Готовому фону нужен сайт с понятной структурой. Попробуйте mePage для создания сайта с помощью ИИ: опишите проект и подготовьте страницу под свою задачу. Возможности и тарифы конструктора доступны на главной странице.