Всички инструменти за цветове

Създавайте безшевни 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
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.
Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт: копирайте и поставете кода по-долу.