مفت کنورٹر

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

لائیو پیش نظارہ کے ساتھ بصری طور پر CSS گریڈینٹ تیار کریں۔ اپنی مرضی کے مطابق رنگ کے اسٹاپس کے ساتھ لکیری، ریڈیل، اور کونک گریڈینٹ بنائیں — مفت اور کلائنٹ سائیڈ۔

لائیو پیش نظارہ
سی ایس ایس آؤٹ پٹ
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
زاویہ (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

اس ٹول کے بارے میں

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

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

  1. تدریجی قسم کا انتخاب کریں: لکیری یا ریڈیل۔
  2. گریڈینٹ بار پر کلک کرکے اور رنگوں کو منتخب کرکے کلر اسٹاپس شامل کریں۔
  3. کنٹرولز کا استعمال کرتے ہوئے گریڈینٹ اینگل (لکیری) یا پوزیشن (ریڈیل) کو ایڈجسٹ کریں۔
  4. آؤٹ پٹ پینل سے تیار کردہ CSS کوڈ کو کاپی کریں۔

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

کیا CSS گریڈینٹ تمام براؤزرز میں کام کرتے ہیں؟
کروم، فائر فاکس، سفاری، اور ایج سمیت تمام موجودہ براؤزرز میں جدید CSS گریڈیئنٹس (لکیری-گریڈینٹ، ریڈیل-گریڈینٹ) تعاون یافتہ ہیں۔ یہ ٹول اختیاری طور پر پرانے براؤزر ورژنز کے لیے -webkit- سابقے پیدا کر سکتا ہے۔
کیا میں ملٹی کلر گریڈینٹ بنا سکتا ہوں؟
جی ہاں آپ کو ضرورت کے مطابق زیادہ سے زیادہ رنگین اسٹاپ شامل کریں۔ آپ ہر اسٹاپ کی پوزیشن کو یہ کنٹرول کرنے کے لیے بھی ایڈجسٹ کر سکتے ہیں کہ رنگ کہاں ملتے ہیں۔ یہ پیچیدہ اندردخش، غروب آفتاب، یا حسب ضرورت برانڈ گریڈینٹ کی اجازت دیتا ہے۔
لکیری اور ریڈیل گریڈینٹ میں کیا فرق ہے؟
لکیری گریڈیئنٹس رنگوں کو سیدھی لکیر کے ساتھ منتقل کرتے ہیں (اوپر سے نیچے، بائیں سے دائیں، اخترن، یا کوئی زاویہ)۔ ریڈیل گراڈینٹ رنگوں کو ایک گول یا بیضوی شکل میں مرکز کے نقطہ سے باہر کی طرف منتقل کرتے ہیں۔
کیا میں متن کے پس منظر کے طور پر میلان استعمال کر سکتا ہوں؟
جی ہاں بیک گراؤنڈ-کلپ استعمال کریں: متن کے ساتھ -webkit-text-fill-color: شفاف متن پر گریڈینٹ لگانے کے لیے۔ تیار کردہ CSS گریڈینٹ تعریف فراہم کرتا ہے — اسے گریڈینٹ ٹیکسٹ کے لیے ان خصوصیات کے ساتھ جوڑیں۔