Все инструменты для цвета

Создавайте бесшовные SVG-узоры для фона из почти 2000 дизайнов: меняйте цвета, масштаб, интервалы и угол, затем копируйте CSS или скачивайте SVG, PNG, WebP.

Бесплатно

1Выберите узор

Здесь будет ваш заголовок

Посмотрите, как узор выглядит за настоящим содержимым.

Начать
Узор

Обзор по коллекциям


О Генератор узоров

Генератор узоров превращает почти 2000 готовых дизайнов в фоны, которые можно настроить и сразу использовать. Просматривайте 14 коллекций: от волн, горошка и тесселяций до тартанов, японских сэйгайха, исламских звёзд, вееров ар-деко, пиксельных спрайтов и камуфляжа, и смотрите каждый узор в своих цветах.

Каждый дизайн нарисован как векторная графика и повторяется без видимых швов при любом масштабе и любом угле. Меняйте до шести цветов, масштаб, положение, интервалы, толщину линий и угол, превращайте залитые формы в контуры или добавьте узору зацикленную анимацию. Генеративные узоры, такие как топографические карты, ячейки Вороного и плитки Трюше, могут давать новый вариант при каждом нажатии.

Когда результат вас устроит, скопируйте его как CSS, SCSS, конфигурацию Tailwind, встроенный SVG, data URI или компонент React либо скачайте SVG, PNG, JPG или WebP любого размера до 8000 пикселей, в том числе отдельную плитку для собственного повтора. Всё работает в вашем браузере: ничего не загружается на сервер, регистрация не нужна.

Как использовать Генератор узоров

  1. Выберите узор: ищите по названию или фильтруйте по коллекции и количеству цветов.
  2. Выберите цвета с помощью палитры, готового набора или кнопки «Новая палитра».
  3. Настройте масштаб, положение, интервалы, толщину линий и угол. Зафиксируйте любое значение перед нажатием «Вдохновите меня».
  4. Проверьте результат в режимах «Показать плитку», «На странице» и «В тексте».
  5. Скопируйте код или скачайте файл, а с помощью «Копировать ссылку» вы сможете позже вернуться именно к этому узору.

Часто задаваемые вопросы

Да. Инструмент бесплатный, без регистрации и без ограничений: каждый узор рисуется в вашем браузере, поэтому файлы не отправляются на сервер.

Да. Экспортированные узоры можно использовать в личных и коммерческих работах, например на сайтах, в приложениях, упаковке и печати, без обязательного указания авторства.

Нет. Каждая форма, пересекающая край плитки, рисуется заново на противоположной стороне, поэтому повтор получается бесшовным. В режиме «Показать плитку» можно точно увидеть, где плитка начинается и заканчивается.

Проще всего CSS: вставьте правило в таблицу стилей и примените его к любому элементу. При углах 0, 90, 180 и 270 градусов используется одна небольшая плитка с background-size, при других углах используется SVG, заполняющий элемент. Версии для Tailwind, SCSS, React и data URI содержат тот же узор.

Анимация встроена в SVG, поэтому не требует скриптов и работает также в роли CSS-фона в современных браузерах. Проверьте её в браузерах, которые вы поддерживаете. Файлы PNG, JPG и WebP остаются изображениями, поэтому сохраняют только первый кадр.

Органические дизайны, такие как камуфляж и топографические карты, содержат много кривых. Размер кода показан рядом с кнопкой копирования. Если он слишком велик для страницы, выберите дизайн с меньшей плиткой или используйте плитку PNG.

Да, почти для любого узора: включите «Прозрачный фон» и экспортируйте в CSS, SVG, PNG или WebP. В некоторых узорах с наложением формы скрываются цветом фона, поэтому им нужен сплошной фон. Файлы JPG не поддерживают прозрачность.

Поделиться

Популярные запросы
генератор svg узоров генератор бесшовных узоров css узор для фона создать повторяющийся узор бесплатные узоры для фона генератор геометрических узоров tailwind узор для фона бесшовная плитка png
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.
Сообщить о проблеме

Добавьте этот бесплатный инструмент на свой сайт: скопируйте и вставьте код ниже.