تمام کلر ٹولز

تقریباً 2000 ڈیزائنوں سے بغیر جوڑ SVG بیک گراؤنڈ پیٹرن بنائیں: رنگ، زوم، فاصلہ اور زاویہ بدلیں، پھر CSS کاپی کریں یا SVG، PNG اور WebP ڈاؤن لوڈ کریں۔

مفت

1پیٹرن منتخب کریں

آپ کی سرخی یہاں

دیکھیں کہ پیٹرن حقیقی مواد کے پیچھے کیسا لگتا ہے۔

شروع کریں
پیٹرن

مجموعے کے مطابق دیکھیں


پیٹرن جنریٹر کے بارے میں

پیٹرن جنریٹر تقریباً 2000 تیار ڈیزائنوں کو ایسے بیک گراؤنڈز میں بدل دیتا ہے جنہیں آپ ترتیب دے کر فوراً استعمال کر سکتے ہیں۔ 14 مجموعے دیکھیں، لہروں، پولکا نقطوں اور ٹیسلیشنز سے لے کر ٹارٹن، جاپانی سیگائیہا، اسلامی ستاروں، آرٹ ڈیکو پنکھوں، پکسل اسپرائٹس اور چھلاوے تک، اور ہر ایک کو اپنے رنگوں میں دیکھیں۔

ہر ڈیزائن ویکٹر آرٹ کے طور پر بنا ہے اور کسی بھی زوم اور کسی بھی زاویے پر بغیر نظر آنے والے جوڑ کے دہرایا جاتا ہے۔ چھ رنگوں تک، زوم، مقام، فاصلہ، لکیر کی موٹائی اور زاویہ بدلیں، بھری ہوئی شکلوں کو خاکوں میں بدلیں، یا پیٹرن کو دہرائی جانے والی اینیمیشن کے ساتھ حرکت دیں۔ ٹوپوگرافک نقشے، ورونوئی خلیے اور ٹروشے ٹائلیں جیسے جنریٹیو پیٹرنز ہر کلک پر نئی صورت بناتے ہیں۔

جب نتیجہ پسند آ جائے تو اسے CSS، SCSS، Tailwind کنفیگ، ان لائن SVG، Data URI یا React کمپونینٹ کے طور پر کاپی کریں، یا 8000 پکسل تک کسی بھی سائز میں SVG، PNG، JPG یا WebP ڈاؤن لوڈ کریں، جس میں آپ کے اپنے دہراؤ کے لیے ایک اکیلا ٹائل بھی شامل ہے۔ سب کچھ آپ کے براؤزر میں چلتا ہے: کچھ اپ لوڈ نہیں ہوتا اور اکاؤنٹ کی ضرورت نہیں۔

پیٹرن جنریٹر استعمال کرنے کا طریقہ

  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
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔
مسئلہ رپورٹ کریں

اس مفت ٹول کو اپنی ویب سائٹ پر شامل کریں: نیچے دیا گیا کوڈ کاپی اور پیسٹ کریں۔