Генератор mesh gradient
Выберите до пяти цветов и создавайте варианты, пока не понравится. Фон сделан через radial-gradient в CSS, и его также можно скачать как изображение.
Как пользоватьсяГрадиенты из нескольких цветов
Доступно на: 
Генератор mesh gradient: для чего нужен
Mesh gradient — это градиент с несколькими смешивающимися цветовыми пятнами, который часто используют в фонах сайтов, презентаций и постов.
Здесь вы выбираете от двух до пяти цветов, перемешиваете положения, пока не понравится, и копируете CSS из слоёв radial-gradient, которые браузер рисует без загрузки изображения. При желании скачайте PNG в размерах экрана, поста, сторис или превью ссылки.
Как пользоваться
- Выберите цвета и фон.
- Нажимайте «перемешать», пока композиция не понравится.
- Скопируйте CSS или скачайте PNG нужного размера.
Когда использовать
- Фон верхнего блока (hero) сайта.
- Обложка презентации или поста.
- Фоновое изображение для телефона.
Частые вопросы
Что такое mesh gradient?
Это градиент с несколькими цветовыми пятнами, которые смешиваются в разных направлениях, а не идёт от одной стороны к другой. Он выглядит органично, как северное сияние или чернила в воде, и часто используется в фонах сайтов и презентаций.
Как это делается в CSS?
Несколькими слоями radial-gradient, каждый с цветом в своей позиции и прозрачный по краям, поверх цвета фона. Браузер рисует всё сам, без загрузки изображения.
А текст поверх?
Выбирайте цвета с похожей яркостью и берите для текста цвет, контрастный ко всем, либо используйте полупрозрачный слой под текстом. Проверьте контраст перед публикацией.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.