مفت CSS گریڈینٹ جنریٹر
لائیو پریویو کے ساتھ linear، radial، اور conic CSS گریڈینٹس بنائیں۔ ایک کلک میں CSS کاپی کریں۔
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);بہت مختلف رنگوں کے درمیان سرمئی درمیانی نقطوں سے بچاتا ہے۔ پرانے براؤزرز کے لیے متبادل کے طور پر سادہ sRGB لائن شامل کرتا ہے۔
پری سیٹس
عام استعمالات
- Hero سیکشنز کے لیے Gradients بنائیںویب سائٹ کے hero سیکشنز اور لینڈنگ صفحات کے لیے مکمل صفحہ gradient backgrounds ڈیزائن کریں۔
- Gradient بٹن اور CTAs بنائیںcalls-to-action کے لیے نمایاں gradient button backgrounds ڈیزائن کریں جو نظر آئیں۔
- کارڈز کے لیے Gradient Backgrounds بنائیںکارڈز، modals، sidebars، اور UI کے اجزاء کی backgrounds کے لیے gradient fills ڈیزائن کریں۔
- سوشل میڈیا گرافکس کے لیے Gradients بنائیںInstagram پوسٹس، YouTube thumbnails، اور Twitter کارڈز کے لیے متحرک gradient backgrounds ڈیزائن کریں۔
- چارٹس کے لیے رنگ کے پیمانے بنائیںheatmaps، progress bars، اور ڈیٹا کی نمائندگی کے لیے gradient رنگ کے پیمانے تیار کریں۔
یہ کیسے کام کرتا ہے
گریڈینٹ جنریٹر براہ راست براؤزر میں CSS گریڈینٹ اسٹرنگز بناتا ہے — نہ لائبریری، نہ سرور، نہ اپ لوڈ۔ ایک ہاتھ سے لکھا فنکشن آپ کے رنگی نقاط اور زاویے سے حقیقی وقت میں درست linear-gradient، radial-gradient یا conic-gradient نحو جوڑتا ہے، پھر نتیجے کو آپ کے منتخب آؤٹ پٹ کے لیے فارمیٹ کرتا ہے۔
- 1نقاط اور سمت ترتیب دیںآپ براؤزر کے مقامی رنگ منتخب کنندہ سے 2 سے 6 رنگی نقاط مقرر کرتے ہیں، پھر رینج سلائیڈر سے ہر نقطے کو 0–100% محور پر رکھتے ہیں۔ Linear اور conic گریڈینٹس کے لیے آپ زاویہ (0–360°) بھی چنتے ہیں؛ radial گریڈینٹس کے لیے شکل (ellipse یا circle) اور سائز کا کلیدی لفظ چنتے ہیں جو طے کرتا ہے کہ گریڈینٹ کتنا پھیلے۔
- 2buildCss گریڈینٹ اسٹرنگ جوڑتا ہےہر تبدیلی پر ایک مقامی buildCss فنکشن آپ کے پیرامیٹرز کو درست CSS فنکشن کال میں جوڑتا ہے — مثلاً linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)۔ کوئی لائبریری شامل نہیں؛ اسٹرنگ سادہ JavaScript ٹیمپلیٹ منطق سے بنتی اور براہ راست نقاط کی array سے جوڑی جاتی ہے۔
- 3لائیو پیش منظر inline style سے بنتا ہےبنی ہوئی گریڈینٹ اسٹرنگ براہ راست div عنصر پر inline background style کے طور پر لگتی ہے، اس لیے براؤزر کا اپنا CSS انجن پیش منظر بناتا ہے۔ کوئی canvas یا تصویر شامل نہیں — آپ جو دیکھتے ہیں وہ لفظی طور پر لاگو ہوتی CSS پراپرٹی ہے۔
- 4چار فارمیٹس میں کاپی کے لیے تیار آؤٹ پٹفارمیٹ منتخب کنندہ اسی گریڈینٹ اسٹرنگ کو سادہ CSS (background: ...)، ٹھوس متبادل والے CSS بلاک، Tailwind arbitrary-value کلاس یا SCSS متغیر ڈیکلریشن میں بدلتا ہے۔ کاپی پر کلک کرنے سے navigator.clipboard.writeText منتخب آؤٹ پٹ کلپ بورڈ پر لکھتا ہے۔ موجودہ گریڈینٹ URL hash میں بھی درج ہوتا ہے تاکہ آپ اسے بک مارک یا شیئر کر سکیں۔
متعلقہ ٹولز
CSS گرڈ جنریٹر
CSS گرڈ کو بصری طور پر ڈیزائن کریں — ٹریکس، یونٹ اور gaps — اور تیار شدہ CSS اور HTML کو کاپی کریں۔
CSS Flexbox جنریٹر
flex سمت، wrap، justify اور align کے ساتھ براہ راست اشیاء کے ساتھ تجربہ کریں — اور CSS کو کاپی کریں۔
میٹرکس کیلکولیٹر
میٹرکس کو جمع، منفی، ضرب، ٹرانسپوز، انورٹ اور ریڈیوس کریں، نیز ڈیٹرمیننٹ، رینک، آئیگن ویلیوز اور Ax = b حل کریں — 8×8 تک، ایک ٹیپ سے کاپی۔ مفت اور نجی۔