سی ایس ایس گریڈینٹ جنریٹر

بغیر کسی ڈیزائن ٹولز کے شاندار CSS گریڈینٹ بنائیں

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

سی ایس ایس گریڈینٹ کی اقسام

لکیری گریڈینٹ ایک سیدھی لائن میں ایک رنگ سے دوسرے رنگ میں منتقلی۔ زاویہ سمت کا تعین کرتا ہے: 0° نیچے سے اوپر جاتا ہے، 90° بائیں سے دائیں جاتا ہے، 180° اوپر سے نیچے جاتا ہے، اور 270° دائیں سے بائیں جاتا ہے۔ ڈیزائن کے لیے سب سے عام زاویہ 135° (اختر) اور 90° (افقی) ہیں۔ 0° اور 360° کے درمیان کوئی بھی زاویہ درست ہے۔

CSS: لکیری-گریڈینٹ(135deg, #667eea, #764ba2)

شعاعی میلان دائرہ یا بیضوی شکلوں میں مرکز کے نقطہ سے باہر کی طرف نکلتے ہیں۔ وہ اسپاٹ لائٹ اثرات، بٹن ہوور اسٹیٹس، اور مرکزی فوکل عناصر کے لیے مفید ہیں۔

CSS: ریڈیل-گریڈینٹ (دائرہ، #667eea, #764ba2)

ہر جدید براؤزر میں میلان کے لیے سپورٹ

لکیری اور ریڈیل گریڈینٹ تمام جدید براؤزرز میں بغیر کسی وینڈر کے سابقہ ​​کے تعاون یافتہ ہیں۔ سفاری اور کروم کے پرانے ورژنوں کو ایک بار درست طریقے سے رینڈر کرنے کے لیے گریڈیئنٹس کے لیے ویب کٹ کا سابقہ ​​درکار ہوتا تھا، ابتدائی دنوں کا ایک بچا جب CSS گریڈینٹ نحو کو ابھی بھی معیاری بنایا جا رہا تھا، لیکن یہ کئی سالوں سے عام استعمال میں کسی بھی براؤزر کے لیے ضروری نہیں ہے، اس لیے یہ جنریٹر ہر جگہ بغیر کسی ترمیم کے کام کرتا ہے۔

مزید رنگ شامل کرنا رک جاتا ہے۔

جنریٹر دو رنگوں کا استعمال کرتا ہے، لیکن CSS گریڈینٹ کسی بھی پوزیشن پر کسی بھی تعداد میں کلر اسٹاپ کی حمایت کرتے ہیں۔ وسط میں تیسرا رنگ شامل کرنے کے لیے:

لکیری-گریڈینٹ(135deg, #667eea 0%, #ff6b6b 50%, #764ba2 100%)

منتقلی کہاں ہوتی ہے اس کو کنٹرول کرنے کے لیے آپ مخصوص فیصد پر اسٹاپس کی بھی وضاحت کر سکتے ہیں:

لکیری میلان

یہ تدریجی کے بجائے ایک تیز تقسیم پیدا کرتا ہے - مخصوص ڈیزائن اثرات کے لیے مفید۔

مقبول گریڈینٹ پیلیٹ

کچھ اچھی طرح سے پیار کرنے والے میلان کے مجموعے:

• Ocean: #2193b0 → #6dd5ed
• غروب آفتاب: #FF512F → #DD2476
• جنگل: #134E5E → #71B280
• جامنی خواب: #667eea → #764ba2
• فائر: #f7971e → #ffd200
• رات کا آسمان: #0f0c29 → #302b63 → #24243e

CSS میں گریڈیئنٹس کا استعمال

بیک گراؤنڈ شارٹ ہینڈ پراپرٹی یا بیک گراؤنڈ امیج پراپرٹی گریڈینٹ افعال کو براہ راست قبول کرتی ہے:

.header {

پس منظر: لکیری-گریڈینٹ(135deg, #667eea, #764ba2)؛

}

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

تصاویر کے ساتھ میلان کا امتزاج

سی ایس ایس متعدد پس منظر کی تہوں کا استعمال کرتے ہوئے پس منظر کی تصویر کے ساتھ میلان کو یکجا کرنے کی اجازت دیتا ہے:

.ہیرو {

پس منظر: لکیری-گریڈینٹ(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('photo.jpg') مرکز/کور؛

}

یہ ہیرو سیکشنز پر متن پڑھنے کی اہلیت کو بہتر بنا کر، ایک تصویر پر نیم شفاف گہرا میلان چڑھاتا ہے۔

جنریٹر کا استعمال کیسے کریں۔

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

سی ایس ایس گریڈیئنٹس امیج گریڈینٹ کو کیوں شکست دیتے ہیں۔

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

ایسے رنگوں کا انتخاب کرنا جو ایک ساتھ اچھی طرح کام کریں۔

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

متن اور دیگر عناصر پر گریڈینٹ

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

نجی اور فوری

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