گریڈینٹ جنریٹر

تمام ٹولز

قابلِ ڈریگ ملٹی اسٹاپ کنٹرول اور تیار پری سیٹس کے ساتھ لینئر، ریڈیل اور کونک CSS گریڈینٹس بنائیں۔ فوری استعمال کے لیے تیار CSS کاپی کریں۔

لائیو پریویو
پری سیٹس
گریڈینٹ کی قسم
زاویہ
°
رنگ اسٹاپس
ایک اسٹاپ کو منتقل کرنے کے لیے ہینڈل ڈریگ کریں، یا ایک شامل کرنے کے لیے بار پر کلک کریں۔ اس کا رنگ ترمیم کرنے کے لیے ایک اسٹاپ منتخب کریں۔
منتخب اسٹاپ
%
CSS
background: —;

سب کچھ آپ کے براؤزر میں لائیو حساب ہوتا ہے — کوئی سائن اپ نہیں، مکمل مفت۔

گریڈینٹ جنریٹر کے بارے میں

گریڈینٹ جنریٹر صفر سے کسٹم CSS گریڈینٹس بناتا ہے۔ linear، radial یا conic قسم منتخب کریں، زاویہ مقرر کریں، اور ملٹی اسٹاپ ایڈیٹر سے بلینڈ کو شکل دیں: اسٹاپس منتقل کرنے کے لیے ہینڈلز گھسیٹیں، نئے شامل کرنے کے لیے بار پر کلک کریں، اور پکر سے کسی بھی اسٹاپ کا رنگ بدلیں — کام کرتے ہوئے لائیو پیش منظر اپ ڈیٹ ہوتا رہتا ہے۔

جب آپ خالی صفحے سے شروع نہیں کرنا چاہتے تو منتخب پری سیٹس ایک مضبوط ابتدائی نقطہ دیتے ہیں، اور ایک کلک والے ایکشنز — random، reverse، rotate 45° — ایکسپلوریشن کو تیز بناتے ہیں۔ بنایا گیا CSS ہمیشہ نظر آتا ہے اور پیش منظر کے ساتھ ہم آہنگ رہتا ہے، اس لیے جو آپ کاپی کرتے ہیں وہ بالکل وہی ہوتا ہے جو آپ نے دیکھا۔

سب کچھ آپ کے براؤزر میں بلا معاوضہ لائیو حساب کیا جاتا ہے۔ مکمل CSS رول یا صرف بیک گراؤنڈ ویلیو کاپی کریں اور اسے اسٹائل شیٹ، بٹن اسٹائل یا ہیرو سیکشن میں پیسٹ کریں — بیک گراؤنڈز، اوورلیز اور UI ایکسنٹس کے لیے ایک سیدھا سادہ CSS گریڈینٹ جنریٹر۔

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

  1. ایک گریڈینٹ قسم منتخب کریں: linear، radial یا conic۔
  2. کسی پری سیٹ سے شروع کریں یا فوری ابتدائی نقطے کے لیے "Random" پر کلک کریں۔
  3. رنگ ترتیب دینے کے لیے اسٹاپ ہینڈلز گھسیٹیں، اسٹاپس شامل کرنے کے لیے بار پر کلک کریں، اور ہر اسٹاپ کا رنگ ایڈٹ کریں۔
  4. زاویہ ایڈجسٹ کریں، یا بلینڈ کی سمت بدلنے کے لیے "Reverse" اور "Rotate 45°" استعمال کریں۔
  5. CSS رول یا بیک گراؤنڈ ویلیو کاپی کریں اور اسے اپنے پراجیکٹ میں پیسٹ کریں۔

اکثر پوچھے جانے والے سوالات

جی ہاں۔ ٹول مکمل طور پر کلائنٹ سائیڈ ہے — کوئی سائن اپ نہیں، کوئی کریڈٹس نہیں اور آپ کتنے گریڈینٹس بناتے یا کاپی کرتے ہیں اس کی کوئی حد نہیں۔

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

کسی بھی گریڈینٹ کو کم از کم دو اسٹاپس درکار ہوتے ہیں، اور مزید شامل کرنے کے لیے آپ بار پر کلک کرتے رہ سکتے ہیں۔ ہر اسٹاپ کا اپنا رنگ اور گھسیٹی جانے والی پوزیشن ہوتی ہے، اس لیے پیچیدہ ملٹی کلر بلینڈز بنانا آسان ہے۔

Linear اور radial گریڈینٹس ہر جگہ سپورٹ ہوتے ہیں۔ Conic گریڈینٹس تمام جدید براؤزرز میں سپورٹ ہوتے ہیں لیکن بہت پرانوں میں نہیں، اس لیے اگر آپ کو پرانے ورژنز کو سپورٹ کرنا ہو تو ایک فال بیک background-color فراہم کریں۔

جی ہاں — ساتھی Gradient Generator from Image ٹول استعمال کریں، جو اپ لوڈ کی گئی تصویر کے غالب رنگ نکالتا ہے اور انہیں قابلِ ترمیم گریڈینٹ اسٹاپس میں بدل دیتا ہے۔ یہ ٹول صفر سے شروع ہونے والا ہم منصب ہے۔
شیئر کریں
متعلقہ ٹولز
تصویر سے گریڈینٹ جنریٹر کسی بھی تصویر سے خوبصورت گریڈینٹ نکالیں — ایک تصویر ڈالیں، موڈ چنیں، اور غالب رنگ قابلِ ڈریگ گریڈینٹ اسٹاپس بن جاتے ہیں۔ فوری استعمال کے لیے تیار CSS کاپی کریں۔ مفت
رنگ پیلیٹ جنریٹر ایک انٹرایکٹو رنگ چکر سے ہم آہنگ رنگ پیلیٹ بنائیں — انالوگس، کمپلیمینٹری یا ٹرائیڈ جیسے ہارمنی قواعد لاگو کریں، پھر کوئی بھی قیمت فوری کاپی کریں۔ مفت
رنگ ملانے والا ایک شروعاتی رنگ کو ختمی رنگ میں ۱۰ مراحل تک ملائیں — گریڈینٹ کا پریویو دیکھیں، ہر شیڈ لیں اور کوئی بھی فارمیٹ فوری کاپی کریں۔ مفت
ویب-سیف رنگ پیلیٹ کلاسک 216 ویب-سیف رنگوں کو ایک قابلِ کلک سواچ گرڈ کے طور پر دیکھیں — رنگت یا کیوب ترتیب سے ترتیب دیں، hex سے فلٹر کریں، اور کوئی بھی HEX یا rgb() قیمت فوری کاپی کریں۔ مفت
فونٹ پیئرنگ اور Google Fonts ڈائریکٹری لائیو پریویوز کے ساتھ مقبول Google Fonts کی منتخب ڈائریکٹری دیکھیں، زمرے سے فلٹر کریں اور نام سے تلاش کریں، پھر استعمال کے لیے تیار CSS کاپی کریں اور تجویز کردہ فونٹ پیئرنگز دریافت کریں — سب کچھ آپ کے براؤزر میں۔ مفت
تصویر رنگ نکالنے والا کسی بھی تصویر سے نفیس، کاپی کے لیے تیار رنگ پیلیٹ نکالیں۔ مفت
مقبول تلاشیں
گریڈینٹ جنریٹر css گریڈینٹ میکر لینیئر گریڈینٹ جنریٹر ریڈیئل گریڈینٹ میکر کونک گریڈینٹ css مفت گریڈینٹ جنریٹر
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔
مسئلہ رپورٹ کریں

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