ВЕКТОРНЫЕ ФОНЫ · SVG · CSS
Соберите фон.
Настройте его под себя.
Шесть генераторов SVG-фонов в одном инструменте: полутон, точки, сетка, диагональные полосы, волны и перекрёстный штрих. Выберите превью, измените параметры и сразу оцените результат.
Создавайте масштабируемые фоновые узоры для сайтов, карточек, презентаций и макетов. Настраивайте размер полотна, цвет, прозрачность и параметры выбранного паттерна; скачивайте готовый SVG или используйте CSS-фон.
Выберите один из шести узоров: остальные превью скроются, а кнопка возврата снова покажет их все.
Какой фон создать?
Нажмите на карточку, чтобы открыть настройки выбранного генератора.
Генератор фона
Полотно и цвет
Общие настройкиПолутоновые точки
Размер точек меняется по маскеТочечный узор
Повторяющийся tile-паттернЛинейная сетка
Малые и крупные деленияДиагональные полосы
Ширина, интервал и уголПри нулевой ширине промежутка получится сплошная заливка.
Волнистые линии
Плавные векторные кривыеПерекрёстный штрих
Две пересекающиеся диагоналиИзмените настройки — превью и код обновятся автоматически.
ЖИВОЕ ПРЕВЬЮ
Результат
Шахматный фон показывает прозрачные области.
ГОТОВЫЙ КОД
Скопируйте или скачайте
SVG-генератор фонов для сайтов и макетов
Выберите один из шести стилей и настройте цвет, прозрачность, размеры полотна и параметры конкретного узора. Полутон создаёт затухающие точки, сетка подчёркивает крупные деления, а волны и штрихи добавляют фону больше движения и фактуры.
- шесть отдельных генераторов с собственными настройками;
- живое превью и возврат к общей галерее в один клик;
- экспорт готового SVG и CSS с data URL;
- прозрачный или цветной фон, настройка цвета узора и непрозрачности;
- русский интерфейс и кириллица в названиях скачиваемых файлов.
SVG остаётся векторным изображением и подходит для масштабирования. Код формируется на устройстве и не содержит удалённых ресурсов, поэтому его можно скачать, встроить в страницу или скопировать в проект.