لامحدود سٹاپس، OKLCH-aware interpolation، اور Tailwind v4 یوٹیلیٹی آؤٹ پٹ کے ساتھ linear، radial، اور conic gradients بنائیں۔ لائیو پیش نظارہ، 30+ presets، آپ کے براؤزر میں۔
Linear ایک منتخب زاویے پر ایک سیدھی لکیر کے ساتھ مل جاتا ہے (0° = اوپر کی طرف، 90° = دائیں طرف)۔ Radial ایک مرکزی نقطے سے باہر کی طرف مل جاتا ہے — circle یا ellipse، farthest-corner جیسے size keywords کے ساتھ۔ Conic ایک مرکزی نقطے کے گرد گھومتا ہے — کلر سٹاپس گھڑی کی سوئیوں کی طرح زاویوں پر بیٹھتے ہیں۔ Conic pie charts، dial readouts، اور synthetic color-wheel backgrounds کے لیے بہترین ہے۔
جب ایسے hues کے درمیان منتقل ہو رہے ہوں جو analogous نہ ہوں — مثلاً نیلا → پیلا، یا سرخ → سبز۔ default sRGB interpolation ایک گدلے سرمئی midpoint سے گزرتی ہے؛ OKLCH (CSS Color Module 4 in oklch) midpoint کو vivid رکھتی ہے کیونکہ یہ perceptually uniform space میں interpolate کرتی ہے۔ مماثل hues کے درمیان دو سٹاپس والے gradients کے لیے فرق چھوٹا ہے۔ multi-stop یا wide-hue-range gradients کے لیے OKLCH کہیں بہتر ہے۔
Linear / radial / conic، OKLCH-smooth، Tailwind-aware — اور کچھ چھوٹے ٹچز جو اسے واقعی استعمال میں مزیدار بناتے ہیں۔
Linear 0-360° زاویے کے ساتھ، radial circle/ellipse + size + position کے ساتھ، conic from-angle + position کے ساتھ۔ سب standards-compliant CSS Images Module Level 4 syntax تیار کرتے ہیں۔
کسی بھی فیصد پر سٹاپس شامل کریں، fine-tune کرنے کے لیے position slider کو drag کریں، رنگ منتخب کرنے یا HEX paste کرنے کے لیے swatch پر کلک کریں۔ آؤٹ پٹ پر سٹاپس خود بخود ترتیب پا جاتے ہیں۔ ہٹانے کے لیے × پر کلک کریں (کم از کم 2 سٹاپس)۔
default sRGB اور جدید in oklch interpolation کے درمیان سوئچ کریں۔ OKLCH perceptually smoother midpoints دیتا ہے — hue jumps میں کوئی گدلے سرمئی بینڈز نہیں۔ ان براؤزرز پر بھی graceful fallback جنہوں نے ابھی CSS Color 4 شپ نہیں کیا۔
تین آؤٹ پٹ پینل لائیو اپ ڈیٹ ہوتے ہیں: raw CSS (background-image: linear-gradient(...))، Tailwind v4 arbitrary-value یوٹیلیٹی (bg-[linear-gradient(...)])، اور Style Dictionary یا Figma Tokens کے لیے تیار JSON design-token snippet۔
Sunset، Ocean، Aurora، Cyber، Royal، Neon Pink، Iris، Bullseye، Conic Wheel — لوڈ کر کے ٹوئیک کرنے کے لیے کلک کریں۔ ہر preset ایک حقیقی production-quality نقطہ آغاز ہے، صرف نام نہیں۔
Preview native background-image کے ساتھ render ہوتا ہے، تو جو آپ دیکھتے ہیں وہی آپ کا stylesheet تیار کرتا ہے۔ ہر pixel مقامی طور پر چلتا ہے — DevTools → Network کھولیں اور صفر outbound requests کی تصدیق کریں۔
خالی صفحے سے production-ready CSS، Tailwind، یا JSON تک چار مراحل۔
Linear backgrounds، headers، hero sections کے لیے۔ Radial spotlights، vignettes، glowy buttons کے لیے۔ Conic pie charts، colour wheels، اور trendy synthetic backgrounds کے لیے۔ tabs کے ذریعے ان کے درمیان سوئچ کریں — آپ کے کلر سٹاپس سوئچ کے دوران محفوظ رہتے ہیں۔
picker کھولنے کے لیے colour swatch پر کلک کریں، یا فیلڈ میں براہ راست HEX paste کریں۔ سٹاپ کی پوزیشن 0-100% سیٹ کرنے کے لیے slider drag کریں۔ سب سے بڑے گیپ پر نیا سٹاپ داخل کرنے کے لیے + Add stop پر کلک کریں (midpoint رنگ کے ساتھ)۔ کل 12 تک سٹاپس۔
linear کے لیے زاویہ سیٹ کریں (0° اوپر، 90° دائیں)۔ radial کے لیے، شکل، size keyword، اور مرکزی پوزیشن منتخب کریں۔ conic کے لیے، starting زاویہ سیٹ کریں۔ multi-hue gradients میں perceptually smooth midpoints کے لیے Color interpolation کو OKLCH پر سوئچ کریں۔
تین پینل لائیو اپ ڈیٹ ہوتے ہیں: CSS (background-image:...)، Tailwind v4 (bg-[...])، JSON (design-token شکل)۔ ہر ایک پر کاپی آئیکن استعمال کریں، یا پروجیکٹ میں drop کرنے کے لیے تیار gradient.css فائل محفوظ کرنے کے لیے Download CSS دبائیں۔
چار عام منظرنامے جہاں ایک privacy-first براؤزر ٹول Figma + الگ gradient سائٹ کھولنے سے بہتر ہے۔
اپنے برانڈ کے قریب کوئی preset منتخب کریں، اپنے دو برانڈ رنگ سٹاپس میں ڈالیں، صاف midpoint کے لیے OKLCH interpolation پر سوئچ کریں۔ CSS کاپی کریں، اپنے hero کے stylesheet میں paste کریں۔ کل وقت: 2 منٹ سے کم۔
ایک بار 3-سٹاپ برانڈ gradient بنائیں، JSON design token کے طور پر کاپی کریں، Style Dictionary / Figma Tokens میں drop کریں۔ اب ہر پلیٹ فارم کا ہر بٹن + کارڈ حوالہ کے ذریعے ایک ہی gradient استعمال کرتا ہے۔ ایک جگہ اپ ڈیٹ کریں، ہر جگہ پھیل جاتا ہے۔
Synthetic conic gradients pie-chart visuals، progress dials، یا 'data-loading' shimmer states کے لیے بہترین ہیں۔ conic قسم منتخب کریں، from-angle سیٹ کریں، صحیح فیصدوں پر سٹاپس ڈالیں — math 0-360° زاویوں کو فیصد پوزیشنوں سے بالکل میچ کرتی ہے۔
gradient بنائیں، اپنے ٹارگٹ سے ملنے کے لیے aspect ratio سیٹ کریں (slides کے لیے 16:9، IG کے لیے 1:1، X header کے لیے 3:1)، preview کا screenshot لیں۔ یا CSS کو ایک عارضی HTML فائل میں کاپی کریں اور اپنے براؤزر میں اسی pixel سائز پر screenshot لیں جو آپ چاہتے ہیں۔
آپ کے رنگ اور gradients کبھی آپ کے ڈیوائس سے باہر نہیں جاتے۔ DevTools → Network کھولیں اور آپ کسی بھی operation کے دوران صفر outbound requests دیکھیں گے۔
background-image استعمال کرتا ہے — تو render شدہ gradient بالکل وہی میچ کرتا ہے جو آپ کا stylesheet آپ کے صارفین کے براؤزرز میں تیار کرے گا۔
CSS gradients، OKLCH interpolation، اور design-token systems پر منتخب مطالعہ۔
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linear ایک منتخب زاویے پر ایک سیدھی لکیر کے ساتھ مل جاتا ہے (0° = اوپر کی طرف، 90° = دائیں طرف)۔ Radial ایک مرکزی نقطے سے باہر کی طرف مل جاتا ہے — circle یا ellipse، farthest-corner جیسے size keywords کے ساتھ۔ Conic ایک مرکزی نقطے کے گرد گھومتا ہے — کلر سٹاپس گھڑی کی سوئیوں کی طرح زاویوں پر بیٹھتے ہیں۔ Conic pie charts، dial readouts، اور synthetic color-wheel backgrounds کے لیے بہترین ہے۔
جب ایسے hues کے درمیان منتقل ہو رہے ہوں جو analogous نہ ہوں — مثلاً نیلا → پیلا، یا سرخ → سبز۔ default sRGB interpolation ایک گدلے سرمئی midpoint سے گزرتی ہے؛ OKLCH (CSS Color Module 4 in oklch) midpoint کو vivid رکھتی ہے کیونکہ یہ perceptually uniform space میں interpolate کرتی ہے۔ مماثل hues کے درمیان دو سٹاپس والے gradients کے لیے فرق چھوٹا ہے۔ multi-stop یا wide-hue-range gradients کے لیے OKLCH کہیں بہتر ہے۔
ایک arbitrary-value یوٹیلیٹی جو آپ سیدھے JSX / Blade / HTML میں paste کر سکتے ہیں: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]۔ کسی tailwind.config.js تبدیلی کی ضرورت نہیں؛ کسی بھی Tailwind 4 پروجیکٹ پر کام کرتا ہے۔ اگر آپ named colour tokens پسند کرتے ہیں، تو CSS کاپی کریں اور ہاتھ سے تبدیل کریں۔
Linear اور radial gradients 2014 سے آفاقی طور پر معاون ہیں۔ Conic gradients 2021 تک تمام evergreen براؤزرز میں شپ ہو چکے تھے۔ in oklch interpolation keyword Chrome 111+، Safari 16.2+، Firefox 113+ میں معاون ہے۔ اگر آپ کو پرانے براؤزرز کو سپورٹ کرنا ہے، تو default sRGB interpolation استعمال کریں — بصری فرق سب سے زیادہ hue-jumping multi-stop gradients کے لیے اہم ہے۔
نہیں۔ Gradient string کی تیاری، CSS / Tailwind / JSON serialisation، اور لائیو پیش نظارہ سب آپ کے ڈیوائس پر JavaScript میں چلتا ہے۔ DevTools → Network کھولیں اور آپ کسی بھی operation کے دوران صفر outbound requests دیکھیں گے۔ برانڈ کلرز، اندرونی ٹوکنز paste کریں — کچھ بھی آپ کے لیپ ٹاپ سے باہر نہیں جاتا۔