0%
100%
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

📐 Руководство по генератору CSS-градиентов

Генератор CSS-градиентов EVEDAYS — бесплатный визуальный инструмент для веб-дизайнеров и фронтенд-разработчиков. Комбинируйте цвета в реальном времени, чтобы мгновенно получить красивый код CSS-градиента и скопировать его. Поддерживаемые типы градиентов: • Линейный (Linear): самый распространённый градиент, соединяющий две точки по прямой. Угол можно свободно задать от 0° до 360°. • Радиальный (Radial): круговой градиент, расходящийся от центра наружу. Хорошо добавляет глубину кнопкам и фонам карточек. • Конический (Conic): градиент, цвета которого меняются по кругу вокруг центральной точки. Используется для круговых диаграмм и цветовых кругов. Основные возможности: • Несколько опорных цветов: добавьте два цвета и больше, чтобы создать сложный градиент. • Настройка положения: точно задайте положение (%) каждого опорного цвета ползунком. • Пресеты: применяйте популярные сочетания градиентов в один клик. • Случайный: создавайте случайные сочетания цветов, когда нужно вдохновение. • Предпросмотр в реальном времени: все изменения сразу видны в превью.

🎨 Советы по применению

• Hero-блоки сайтов: линейный градиент в качестве фона создаёт современное и стильное первое впечатление. • Эффекты наведения на кнопки: разные градиенты для обычного состояния и hover создают ощущение интерактивности. • Градиентный текст: вместе с background-clip: text градиент можно применить к тексту. • Рамки карточек: градиент в border-image даёт элегантную рамку. • Анимации загрузки: animation для конического градиента создаёт вращающийся индикатор загрузки.

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

В. Работают ли градиенты в старых браузерах? О. linear-gradient и radial-gradient поддерживаются всеми современными браузерами, включая IE10+. conic-gradient поддерживается в Chrome 69+, Firefox 83+ и Safari 12.1+. В. Сколько опорных цветов можно добавить? О. Технических ограничений нет, но для читаемости и производительности рекомендуется 2–5. В. Можно ли использовать полученный код в коммерческих целях? О. Конечно. Код CSS-градиента не охраняется авторским правом, поэтому используйте его свободно.