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

Визуальный генератор CSS-градиентов: линейных, радиальных и конических. Добавляйте точки цвета, меняйте угол и копируйте готовый CSS для фонов и кнопок, бесплатно в браузере.

Повтор

각도: 135deg

Точка градиента

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Встроить

<iframe src="https://devtools.patrache.studio/ru/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Генератор CSS-градиентов — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/ru/generators/css-gradient/">Генератор CSS-градиентов</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Последнее обновление: 2026 · Бесплатный онлайн-инструмент

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

Как использовать

1
Выберите тип— Выберите тип градиента (линейный, радиальный, конический).
2
Настройте цветовые точки— Настройте цвет и позицию каждой цветовой точки.
3
Предпросмотр— Проверьте результат в реальном времени в предпросмотре.
4
Скопируйте CSS-код— Скопируйте CSS-код в буфер обмена с помощью кнопки «Копировать».

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

Генератор CSS box-shadowГенератор CSS box-shadow с настройкой смещения, размытия, растяжения, цвета и inset и живым предпросмотром тени. Скопируйте готовый CSS-код, бесплатно в браузере.

Генератор CSS border-radiusГенератор CSS border-radius с восемью независимыми угловыми маркерами, ползунками и живым предпросмотром скруглённой формы. Скопируйте готовый CSS-код, бесплатно в браузере.

Конвертер цветовых кодовКонвертер цветов между кодами HEX, RGB, HSL и OKLCH, с расчётом коэффициента контраста WCAG для двух цветов. Проверяйте доступность прямо при подборе палитры, бесплатно.

Генератор SVG-волнБесплатный онлайн-генератор SVG-волн с визуальным редактором для плавных форм. Настройте амплитуду, цвета и слои, примените готовые пресеты и скопируйте полученный CSS- и SVG-код для фонов и разделителей.

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

Ограничений нет, но типично 2-6. Слишком много может повлиять на производительность.

Да. Включите флажок «Повторить», чтобы добавить префикс repeating.

Предоставляется пять пресетов: Sunset, Ocean, Forest, Midnight и Rainbow.

В настоящее время выводится только чистый CSS. Конвертация в Tailwind планируется в будущем обновлении.

Нет. Вся обработка выполняется в браузере.