Генератор CSS-градиентов
색상 정지점
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Последнее обновление: 2026 · Бесплатный онлайн-инструмент
Что такое Генератор CSS-градиентов?
Бесплатный визуальный генератор CSS-градиентов: создавайте линейные, радиальные и конические градиенты, настраивайте цветовые точки и угол и копируйте готовый CSS-код.
Как использовать
- 1 Выберите тип — Выберите тип градиента (линейный, радиальный, конический).
- 2 Настройте цветовые точки — Настройте цвет и позицию каждой цветовой точки.
- 3 Предпросмотр — Проверьте результат в реальном времени в предпросмотре.
- 4 Скопируйте CSS-код — Скопируйте CSS-код в буфер обмена с помощью кнопки «Копировать».
Связанные инструменты
Генератор CSS box-shadow Бесплатный онлайн-генератор CSS box-shadow с настройками смещения, размытия, растяжения, цвета и inset, дающий живой предпросмотр тени и готовый к копированию CSS-код box-shadow для любого элемента.
Генератор CSS border-radius Бесплатный онлайн-генератор CSS border-radius с восемью независимыми угловыми ручками и ползунками, дающий живой предпросмотр скруглённой формы и готовый к копированию CSS-код border-radius.
Конвертер цветовых кодов Бесплатный онлайн-конвертер цветов, мгновенно переводящий между кодами HEX, RGB, HSL и OKLCH и вычисляющий коэффициент контраста WCAG для двух цветов, чтобы легко проверить соответствие доступности.
Часто задаваемые вопросы
Ограничений нет, но типично 2-6. Слишком много может повлиять на производительность.
Да. Включите флажок «Повторить», чтобы добавить префикс repeating.
Предоставляется пять пресетов: Sunset, Ocean, Forest, Midnight и Rainbow.
В настоящее время выводится только чистый CSS. Конвертация в Tailwind планируется в будущем обновлении.
Нет. Вся обработка выполняется в браузере.