Перейти к содержимому
Александр НекрасовЛичный блог · Полезное на практике
Поиск
Разработка

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

Генератор CSS-градиентов онлайн: 16 шаблонов, 3 типа перехода, примеры кнопки, карточки, текста и рамки. Настройка цветов, CSS и HTML.

Александр НекрасовИзменено:

Создайте линейный, радиальный или конический CSS-градиент. Настройте цвета и проверьте его на фоне, кнопке, карточке, тексте или рамке.

Цвета. Настроение. Готовый CSS.

Соберите свой градиент

Настройте переход, выберите пример — от фона до градиентной рамки — и заберите готовые CSS и HTML. Можно начать с одного из 16 шаблонов.

16 готовых сочетаний

Шаблон задаёт цвета, тип и направление. Затем можно настроить его под себя.

Выбран шаблон: Бирюзовый

Как будет выглядеть

Предпросмотр
Начните с красивой детали

Меняйте пример и его окружение, чтобы увидеть, как градиент будет выглядеть в вашем проекте.

Код для проекта

CSS-файл содержит готовый класс.
Добавьте элементу класс my-gradient.

Настройки градиента

Градиент

Переход цветов вдоль выбранного направления.

0° — снизу вверх, 90° — слева направо.

Например, точки в диапазоне 0–25% создают повторяющийся узор. Попробуйте «Полосы» или «Кольца» во вкладке «Узоры» в готовых сочетаниях.

Цветовые точки

2 из 8

Цвет и место перехода: 0% — начало, 100% — конец.

Нужно минимум 2 цвета. Можно добавить до 8.

Оформление примера

Проверьте текст, форму и фон вокруг элемента.

Этот фон нужен для предпросмотра. В примере рамки он также заполняет её внутреннюю область.

До 120 символов. Подставьте свой заголовок или надпись на кнопке.

В режиме «Текст» сами буквы окрашивает градиент.

Применить на практике

От палитры до вашего проекта

  1. Настройте переход

    Выберите палитру или свои цвета. Меняйте позиции точек, чтобы сделать переход плавнее или резче.

  2. Посмотрите в контексте

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

  3. Вставьте CSS

    Скопируйте CSS и HTML из соответствующих вкладок или скачайте CSS-файл. В файле уже есть класс my-gradient.

Несколько полезных ответов

Чем отличаются три типа градиента?

Линейный градиент идёт вдоль прямой. Радиальный расходится от выбранного центра к краям. Конический обходит центр по кругу: угол задаёт его начальный поворот.

Зачем нужны позиции цветовых точек?

Процент задаёт место цвета в переходе. Близкие позиции дают более резкую границу, удалённые — более длинный переход. В готовом CSS точки упорядочены по позиции; при совпадении процентов сохраняется порядок строк.

Почему код меняется вместе с примером?

Кнопке нужны отступы и скругление, тексту — обрезка градиента по буквам, рамке — два слоя фона. Генератор показывает CSS и HTML именно выбранного элемента. Окружение служит предпросмотром; для рамки его цвет также становится внутренней заливкой в CSS.

Можно ли удалить все цвета или сохранить работу?

Для градиента нужны минимум две точки, поэтому последние две удалить нельзя. Настройки не сохраняются после перезагрузки: чтобы не потерять результат, скопируйте CSS. Кнопка «Сбросить» возвращает начальный бирюзовый вариант.

Продолжить оформление

Для настройки углов и теней пригодится генератор скругления и тени. Градиент и эти свойства можно объединить в одном CSS-правиле для вашей кнопки или карточки.

Продолжить тему

Что почитать дальше