Как пользоваться: Генератор SVG-узоров
- Выберите узор: точки, сетка, линии, зигзаг, волны, плюсы, шахматка, круги, треугольники, перекрестная штриховка, ромбы или полосы.
- Задайте размер плитки, толщину линий и прозрачность; низкая прозрачность даёт тонкую текстуру.
- Выберите цвета узора и фона или прозрачный фон, чтобы наложить узор на свой цвет или градиент.
- Скопируйте CSS (SVG встраивается как data URI) или скачайте плитку в виде SVG-файла.
Зачем нужны SVG-узоры?
Плитка узора — это небольшой SVG, обычно меньше 300 байт, который браузер повторяет с помощью background-repeat. Она остаётся чёткой при любом масштабе и на экранах Retina, не требует дополнительного запроса при встраивании как data URI и мгновенно меняет цвет при изменении двух значений.
.hero {
background-color: #0f172a;
background-image: url("data:image/svg+xml,…");
background-size: 24px 24px;
}Узоры создаются так, чтобы их края идеально совпадали при повторении. Чтобы наложить узор на градиент, отметьте Прозрачный фон и укажите оба изображения: background-image: url(…узор…), linear-gradient(…). Для разделителей в шапке посмотрите Генератор SVG-волн и Генератор разделителей секций.
Также ищут как: css фон узор, бесшовный паттерн генератор, узор для фона css, точечный узор css, сетка css фон, svg pattern generator.
Инструменты, которые хорошо сочетаются с Генератор SVG-узоров
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор SVG блобов — Создавайте плавные органические блобы для фоновых изображений главных экранов, аватаров и иллюстраций.
- SVG в CSS конвертер — Вставьте SVG и получите компактный URL-закодированный data URI, а также готовые правила background-image и перекрашиваемые mask-image.
- Генератор глассморфизма — Создайте карточку с эффектом матового стекла с помощью ползунков и скопируйте кроссбраузерный CSS — с префиксом -webkit-backdrop-filter и запасным вариантом для старых браузеров.
Часто задаваемые вопросы
Как добавить фон с точечным узором в CSS?
Выберите «Точки», задайте размер и цвета и скопируйте CSS: в нём background-image указывает на встроенную SVG-плитку, а background-size задаёт её размер, поэтому точки бесшовно повторяются.
Можно ли наложить узор на градиент?
Да. Отметьте «Прозрачный фон», а затем добавьте градиент после узора: background-image: url(...), linear-gradient(...).
Замедляют ли SVG-узоры страницу?
Нет. Каждая плитка занимает несколько сотен байт внутри CSS, поэтому дополнительной загрузки нет, а SVG отрисовывается эффективно.
Можно ли использовать узор в Webflow?
Да. Вставьте CSS в Embed с тегом style, нацеленным на ваш класс, или скачайте SVG-плитку и задайте её как фоновое изображение с повтором.
Можно ли установить Генератор SVG-узоров как веб-приложение и пользоваться им офлайн?
Да. Генератор SVG-узоров — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.