GGogotem
Вернуться на главную

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

Настройте цвета, направление, точки и контраст текста для линейного, радиального или конического градиента и скопируйте готовый CSS.

Категории Ожидание результата
Сообщить о проблеме

Помощник дизайнераУровень AA

Живой просмотр

Читаемый текст поверх градиента

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

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

Проверка читаемости

Контраст

4.58 : 1

Цвет текста

#ffffff

Перед публикацией проверьте результат на мобильной ширине.

Готовый код

CSS background

background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);

Inline-стиль

style="background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);"

Рекомендации

done

Сохраняйте достаточный контраст текста и фона.

done

Не добавляйте много цветовых точек без необходимости.

done

Для форм и панелей используйте спокойный фон.

done

Перед публикацией проверьте результат на мобильной ширине.

Важные замечания

Расчёты основаны на стандартных формулах. Значения могут округляться для удобства чтения. Для важных решений проверьте официальный источник.

Рабочая область результатов

Сохраните результат, сравните его с предыдущими расчетами или поделитесь отчетом.

Что делает CSS-градиент удачным

Направление, расстояние между цветами, контраст текста и содержимое поверх фона определяют, будет ли градиент аккуратным или перегруженным.

Важные замечания

  • Линейный градиент использует угол и упорядоченные цветовые точки.
  • Радиальный градиент использует форму, центр и цветовые точки.
  • Конический градиент вращает цвета вокруг центра.
  • Просмотр и скопированный код используют одно значение background.

Частые вопросы

Можно использовать больше двух цветов?expand_more

Да. Добавьте до шести точек и настройте положение каждой.

Почему текст плохо читается?expand_more

Вероятно, контраст низкий. Проверьте отношение и смените цвет текста.

Код подходит для Vue, React и Tailwind?expand_more

Да. CSS background или inline-стиль можно использовать в любом веб-фреймворке.