Всі інструменти для кольору

Створюйте безшовні 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
Потрібна допомога?
Виникла проблема з цим інструментом? Повідомте нас.
Повідомити про проблему

Додайте цей безкоштовний інструмент на власний вебсайт: скопіюйте та вставте код нижче.