অসীম সংখ্যক কালার স্টপ দিয়ে linear, radial আর conic গ্রেডিয়েন্ট তৈরি করুন, আর দেখুন real color-space interpolation কতটা পার্থক্য তৈরি করে — বেশিরভাগ টুল শুধু ঘোলাটে ডিফল্টটাই দেয়।
CSS পাঠগুলো দেখুননতুন স্টপ যোগ করতে বারে ক্লিক করুন। সরাতে হ্যান্ডেল টেনে আনুন।
একটি গ্রেডিয়েন্টে অন্তত দুটি স্টপ লাগবে।
sRGB বনাম OKLCH — একই স্টপ, আসল ব্রাউজার রেন্ডারিং
প্রতিটি গ্রেডিয়েন্ট টুল ডিফল্টভাবে sRGB ব্যবহার করে: রং RGB স্পেসের মধ্য দিয়ে সরলরেখায় মিশে যায়, যা দুটি গাঢ়, খুব আলাদা hue-এর (যেমন কমলা আর নীল) মাঝে একটি নিষ্প্রাণ, ঘোলাটে ধূসর রঙের মধ্য দিয়ে যায়। OKLCH তার বদলে একটি perceptual color space দিয়ে মেশে — একই দুটি রং ধূসরের বদলে উজ্জ্বল, মাঝামাঝি hue-এর মধ্য দিয়ে যায়। এখানকার দুটো রেন্ডারই ব্রাউজার আসলেই CSS-এর `in oklch` সিনট্যাক্স দিয়ে interpolate করছে, কোনো সিমুলেশন নয়।
OKLCH প্রিভিউ যদি sRGB-র মতোই দেখায়, তাহলে হয়তো এই ব্রাউজার এখনও `in oklch` সিনট্যাক্স সাপোর্ট করে না — এটি নিঃশব্দে ফলব্যাক করে।
নিচের দুটো প্রিভিউ সবসময় sRGB আর OKLCH পাশাপাশি দেখায় — এটি শুধু ঠিক করে কোনটি আপনার কপি করা কোডে যাবে।
.gradient {
background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}অনেক স্টপসহ radial আর conic গ্রেডিয়েন্ট দুই-স্টপের linear-এর চেয়ে বেশি পেইন্ট-টাইম খরচ করে — একটি কার্ডের জন্য ঠিক আছে, বড় স্কেলে যাচাই করে নেওয়া ভালো।