Генератор CSS-градиентов
Создайте фоновый градиент визуально и скопируйте готовый CSS. Перетаскивайте точки цвета по полосе, щёлкните по полосе, чтобы добавить точку, меняйте угол или центр и делайте цвета прозрачными. В код включён сплошной запасной цвет для старых браузеров.
Как пользоваться
- Выберите линейный, радиальный или конический градиент либо начните с шаблона или случайного градиента.
- Щёлкните точку, чтобы изменить цвет, непрозрачность и положение; перетащите её или щёлкните по полосе, чтобы добавить новую.
- Скопируйте CSS и вставьте его в правило элемента.
Частые вопросы
Чем отличаются линейный, радиальный и конический градиенты?
Линейный градиент меняет цвет вдоль прямой под выбранным углом. Радиальный расходится от центра кругом или эллипсом. Конический вращается вокруг центра, как стрелки часов, что удобно для цветовых кругов и круговых диаграмм.
Работают ли CSS-градиенты во всех браузерах?
Да. Линейные, радиальные и конические градиенты работают во всех актуальных версиях Chrome, Edge, Firefox и Safari без префиксов. Первая строка фона — обычный цвет, он нужен только очень старым браузерам.
Как сделать полосы?
Поставьте две точки одного цвета в начале и в конце каждой полосы, чтобы цвет менялся резко, а не плавно, и включите «Повторять». Пример — последний шаблон.
🏷️ Генератор мета-тегов
🖼️ Генератор Open Graph
🔗 UTM-метки: конструктор ссылок
🔲 Генератор CSS box-shadow (тени блока)