خوبصورت لکیری، ریڈیئل اور کونک CSS گریڈیئنٹس بصری طور پر بنائیں اور حسبِ ضرورت بنائیں۔ کراس براؤزر CSS فوری کاپی کریں۔ 100٪ مفت۔ رجسٹریشن نہیں۔
background: #8B5CF6;
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);bg-[linear-gradient(135deg,_#8B5CF6_0%,_#EC4899_100%)]سخت پرائیویسی، فوری عمل اور صفر رگڑ کے لیے بنایا گیا۔ کوئی سبسکرپشن، پے وال یا اکاؤنٹ نہیں۔
بصری ٹائم لائن پر کلر اسٹاپس شامل، ہٹا اور کھینچ کر کئی رنگوں کے گریڈیئنٹس بالکل ملا لیں۔
لکیری (سمتی)، ریڈیئل (دائروی) اور کونک (گھومتی) CSS گریڈیئنٹ موڈز کے درمیان آسانی سے سوئچ کریں۔
زیادہ سے زیادہ سپورٹ کے لیے وینڈر پریفکس سمیت کراس براؤزر مطابقت والا CSS کوڈ خود بناتا ہے۔
مکمل کلائنٹ سائیڈ JavaScript۔ سرور لیگ نہیں، انتظار نہیں، صرف فوری بصری فیڈ بیک۔
ہمارے لوکل فرسٹ WebAssembly انجن کا لیگیسی کلاؤڈ ٹولز سے موازنہ کریں۔
| فیچر | Utiliome (مقامی براؤزر) | لیگیسی کلاؤڈ کنورٹرز |
|---|---|---|
| گریڈیئنٹ اقسام | لکیری، ریڈیئل، کونک | عموماً صرف لکیری |
| کوڈ آؤٹ پٹ | Vanilla CSS اور Tailwind کلاسز | صرف بنیادی CSS |
| کارکردگی | صفر لیٹنسی HTML5 کینوس | سست DOM ری پینٹس |
| لاگت | ہمیشہ 100٪ مفت | پریمیم فیچرز پے وال کے پیچھے |
سافٹ ویئر انسٹال کرنے کی ضرورت نہیں۔ سب کچھ براہِ راست ویب براؤزر میں چلتا ہے۔
ٹائم لائن پر کلر اسٹاپس کلک کر کے آغاز اور اختتام کے HEX کوڈز چنیں۔
اینگل ڈائل سے لکیری گریڈیئنٹ گھمائیں، یا مرکز سے باہر پھیلنے والے اثر کے لیے ریڈیئل موڈ چنیں۔
کاپی بٹن دبا کر سٹائل شیٹ کے لیے مکمل فارمیٹڈ 'background-image' CSS کوڈ لیں۔
فوری جواب: CSS گریڈیئنٹس براؤزر ریاضی سے بناتا ہے، اس لیے صفر HTTP نیٹ ورک درخواستیں، Retina اسکرینز پر بغیر پکسلیشن اسکیل، اور فائل سائز صرف چند بائٹس متن۔
ایک دہائی پہلے ویب ڈیزائنرز Photoshop میں خوبصورت گریڈیئنٹ پس منظر بناتے، بڑی JPG تصاویر کاٹتے، اور دہرائے پس منظر پیٹرن لگاتے۔ یہ SEO کے لیے برا تھا، صفحہ لوڈ سست کرتا، اور جدید 4K مانیٹرز پر شدید پکسلیٹ دکھتا۔
جدید براؤزرز نے linear-gradient() CSS فنکشن دیا۔ یہ جامد تصویر نہیں ریاضیاتی ہدایت ہے اس لیے براؤزر کا GPU رنگ ملاوٹ حقیقی وقت میں رینڈر کرتا ہے۔ Utiliome کے جنریٹر سے پیچیدہ، ملٹی اسٹاپ گریڈیئنٹس فوری لوڈ ہوتے ہیں اور صارف کی موبائل یا ڈیسک ٹاپ اسکرین کی چوڑائی کے مطابق ڈھلتے ہیں۔
فوری جواب: لکیری گریڈیئنٹس رنگ سیدھی لکیر پر ملاتے ہیں (مثلاً اوپر سے نیچے)۔ ریڈیئل گریڈیئنٹس مرکزی نقطے سے دائرے کی طرح باہر پھیلتے ہیں۔ کونک گریڈیئنٹس رنگ مرکزی محور کے گرد گھماتے ہیں جیسے پائی چارٹ یا کلر وہیل۔
تین بنیادی CSS گریڈیئنٹ اقسام سمجھنا وسیع تخلیقی آزادی دیتا ہے:
45deg یا to right bottom) اور رنگ اس محور پر ہموار منتقل ہوں۔فوری جواب: کلر اسٹاپس بتاتے ہیں کہ گریڈیئنٹ لائن پر کوئی رنگ اپنی زیادہ سے زیادہ شدت کہاں پہنچے۔ کئی کلر اسٹاپس (مثلاً red 0%، yellow 50%، blue 100%) سے پیچیدہ، کئی پٹیوں والے پس منظر بنتے ہیں۔
بنیادی گریڈیئنٹ کو صرف دو رنگ چاہیے: آغاز اور اختتام۔ مگر Utiliome ٹائم لائن پر لامحدود کلر اسٹاپس شامل کرنے دیتا ہے۔
مثلاً اگر آپ linear-gradient(to right, red 0%, green 50%, blue 100%) لکھیں تو براؤزر اسکرین کے آدھے حصے تک سرخ سے سبز، پھر آخر تک سبز سے نیلا ہموار منتقل کرے گا۔
آپ "Hard Stops" (ہموار ملاوٹ کی بجائے تیز لکیریں) بھی بنا سکتے ہیں دو مختلف رنگ ایک ہی فیصد پر دے کر (مثلاً red 50%, blue 50%)۔ یہی تکنیک خالص CSS دھاری دار پیٹرنز اور جھنڈے بناتی ہے۔
فوری جواب: گریڈیئنٹس ٹائپوگرافی پر 'background-clip: text' اور '-webkit-text-fill-color: transparent' سے لگاتے ہیں، جو گریڈیئنٹ پس منظر کو فونٹ کی شکل تک کاٹ دیتے ہیں۔
جدید ویب ڈیزائن کا مقبول ٹرینڈ بڑی ٹائپوگرافی پر چمکدار گریڈیئنٹس لگانا ہے، عموماً H1 ہیرو ہیڈرز میں (Apple اور Stripe نے مقبول کیا)۔
اس کے لیے Utiliome سے معیاری گریڈیئنٹ بنائیں، مگر تین مخصوص CSS رولز کے ساتھ لگائیں:
background-image: linear-gradient(...);-webkit-background-clip: text; background-clip: text;-webkit-text-fill-color: transparent;اس سے متن مکمل منتخب اور SEO دوستانہ رہتا ہے، اور بصری طور پر شاندار لگتا ہے۔
فوری جواب: جدید براؤزرز گریڈیئنٹس نیٹو سپورٹ کرتے ہیں، مگر لیگیسی براؤزرز (پرانا Safari اور Internet Explorer) درست CSS پارسنگ کے لیے مخصوص '-webkit-' اور '-moz-' وینڈر پریفکس مانگتے تھے۔
تاریخی طور پر CSS گریڈیئنٹس لکھنا ڈراؤنا تھا کیونکہ نحو کی وضاحت کئی بار بدلی۔ Firefox، Safari اور Chrome پر گریڈیئنٹ دکھانے کے لیے پانچ مختلف لائنیں لکھنی پڑتیں۔
آج معیاری linear-gradient() نحو عالمی طور پر اپنایا گیا ہے۔ تاہم لیگیسی موبائل ڈیوائسز سپورٹ کرنے والی انٹرپرائز ایپس کی زیادہ سے زیادہ حفاظت کے لیے Utiliome کا جنریٹر ضروری -webkit- فال بیک پریفکس ایکسپورٹڈ کوڈ میں خود داخل کر سکتا ہے۔
فوری جواب: Tailwind CSS میں گریڈیئنٹس کے لیے بلٹ ان یوٹیلیٹی کلاسز ہیں (مثلاً 'bg-gradient-to-r from-cyan-500 to-blue-500')۔ Utiliome گریڈیئنٹ بصری ڈیزائن کر کے فوری Tailwind کلاس سٹرنگ ایکسپورٹ کرنے دیتا ہے۔
اگر آپ React یا Next.js ایپ Tailwind CSS سے بنا رہے ہیں تو vanilla CSS کے style ایٹریبیوٹس یوٹیلیٹی فرسٹ ورک فلو توڑتے ہیں۔
Utiliome یہ خلا پر کرتا ہے۔ بصری کینوس پر گریڈیئنٹ حتمی کرنے کے بعد Tailwind ایکسپورٹ آپشن چنیں۔ انجن آپ کے کسٹم HEX کوڈز کو arbitrary Tailwind ویلیوز میں میپ کرتا ہے (جیسے from-[#ff0000] via-[#00ff00] to-[#0000ff]) تاکہ JSX کمپوننٹس میں چسپاں کرنے کے لیے مکمل فارمیٹڈ کلاس سٹرنگ ملے۔
Utiliome کے مفت آن لائن CSS گریڈیئنٹ جنریٹر کے بارے میں وہ سب جو آپ کو جاننا چاہیے۔
گریڈیئنٹ بنائیں، پھر CSS پراپرٹیز شامل کریں: 'background-clip: text;' اور '-webkit-text-fill-color: transparent;' تاکہ گریڈیئنٹ فونٹ تک کٹے۔
کونک گریڈیئنٹ رنگ مرکزی محور کے گرد گھماتا ہے (جیسے ریڈار سوئپ یا پائی چارٹ) بجائے سیدھی لکیر پر منتقل ہونے کے۔
ہاں۔ Utiliome کے ایکسپورٹر میں Tailwind ٹیب ہے جو React/Next.js پروجیکٹس کے لیے درست یوٹیلیٹی کلاسز (مثلاً bg-gradient-to-r from-red-500) بناتا ہے۔
نہیں۔ CSS گریڈیئنٹس GPU ریاضی سے رینڈر ہوتے ہیں۔ پس منظر تصاویر سے کہیں بہتر: صفر نیٹ ورک درخواستیں اور صرف بائٹس ڈیٹا۔
ہاں، 100٪ مفت: حد نہیں، اشتہار نہیں، اکاؤنٹ رجسٹریشن نہیں۔