Генератор фоновых узоров
Создавайте бесшовные фоновые узоры: точки, сетка, полосы, шахматка, зигзаг, волны, треугольники, плюсы, шестиугольники, круги, ромбы и кирпичи. CSS, SVG или PNG.
Загрузка: Генератор узоров…
Ваши файлы не покидают устройство
Как пользоваться: Генератор узоров
- 1
Откройте «Генератор узоров» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Ненавязчивые узоры добавляют фактуру разделам сайта, слайдам, макетам и графике для соцсетей без тяжести фотографии. Этот генератор узоров создаёт бесшовные повторяющиеся фоны на основе двенадцати классических мотивов. Настройте размер, толщину, прозрачность и цвета, посмотрите, как плитка повторяется в реальном времени, и скопируйте CSS-фон или скачайте узор как изображение.
Доступные узоры
Точки, сетка, полосы, шахматка, зигзаг, волны, треугольники, плюсы, шестиугольники, круги, ромбы и кирпичи.
Как создать узор
- Выберите стиль узора или нажмите Random, чтобы получить сюрприз.
- Задайте размер, толщину линий и прозрачность.
- Выберите цвет узора и цвет фона.
- Скопируйте CSS background в свою таблицу стилей или скачайте плитку в SVG или PNG.
Как удачно использовать узоры
- Держите контраст низким под текстом: узор, отличающийся от фона на несколько оттенков, добавляет фактуру и не мешает чтению.
- Используйте SVG или CSS на сайтах: оба формата очень лёгкие и остаются чёткими на любом экране.
- Подбирайте масштаб под носитель: крупные и яркие узоры для плакатов и слайдов, более мелкие для разделов сайта.
- Сочетайте с наложением градиента, чтобы узор плавно исчезал к краям.
Идеи
- Фоны главного блока (hero) и подвала сайта.
- Обложки записей в блоге и превью для YouTube.
- Слайды презентаций и бейджи мероприятий.
- Упаковочная бумага, наклейки и печатные фоны (скачайте большой PNG или SVG).
Для отдельных фигур попробуйте генератор блобов, а для плавных цветных фонов подойдёт генератор CSS-градиентов.
Частые вопросы
Узоры бесшовные?
Да. Каждый узор представляет собой плитку, которая повторяется без видимых швов во всех направлениях.
Как использовать узор на своём сайте?
Скопируйте CSS-фон и вставьте его в стиль любого элемента или скачайте SVG и используйте его как background-image.
Какие стили узоров есть?
Точки, сетка, полосы, шахматка, зигзаг, волны, треугольники, плюсы, шестиугольники, круги, ромбы и кирпичи.
Можно ли скачать узор как изображение?
Да, в SVG для чёткого масштабирования или в PNG для приложений, которые не принимают SVG.
Можно ли использовать узоры в коммерческих целях?
Да. Созданные узоры можно свободно использовать в личных и коммерческих проектах.
Замедлит ли узор мой сайт?
Нет. Узоры в CSS и SVG весят всего несколько сотен байт, намного меньше фоновой фотографии.