অসীম stop, OKLCH-সচেতন interpolation এবং Tailwind v4 utility আউটপুট সহ linear, radial ও conic gradient তৈরি করুন। লাইভ প্রিভিউ, 30+ preset, আপনার ব্রাউজারেই।
Linear একটি নির্দিষ্ট কোণে সরলরেখা বরাবর blend করে (0° = উপরে, 90° = ডানে)। Radial কেন্দ্রবিন্দু থেকে বাইরের দিকে blend করে — circle বা ellipse, farthest-corner-এর মতো size keyword সহ। Conic কেন্দ্রবিন্দুর চারপাশে ঘুরে — color stop ঘড়ির কাঁটার মতো কোণে বসে। Conic pie chart, dial readout এবং synthetic color-wheel ব্যাকগ্রাউন্ডের জন্য চমৎকার।
যখন এমন hue-এর মধ্যে ট্রানজিশন করছেন যেগুলো analogous নয় — যেমন নীল → হলুদ, বা লাল → সবুজ। ডিফল্ট sRGB interpolation একটি ঘোলাটে ধূসর midpoint দিয়ে যায়; OKLCH (CSS Color Module 4 in oklch) midpoint-কে প্রাণবন্ত রাখে কারণ এটি perceptually uniform space-এ interpolate করে। সদৃশ hue-এর মধ্যে দুই-stop gradient-এ পার্থক্য সামান্য। বহু-stop বা wide-hue gradient-এ OKLCH নাটকীয়ভাবে ভালো।
Linear / radial / conic, OKLCH-মসৃণ, Tailwind-সচেতন — এবং কয়েকটি ছোট ছোয়া যা ব্যবহার করাকে সত্যিই উপভোগ্য করে তোলে।
Linear 0-360° কোণে, radial circle/ellipse + size + position সহ, conic from-angle + position সহ। সবগুলোই standards-compliant CSS Images Module Level 4 syntax আউটপুট দেয়।
যেকোনো শতাংশে stop যোগ করুন, position slider drag করে fine-tune করুন, swatch ক্লিক করে রং বাছুন বা HEX paste করুন। আউটপুটে stop স্বয়ংক্রিয়ভাবে সাজানো হয়। সরাতে × ক্লিক করুন (ন্যূনতম 2টি stop)।
ডিফল্ট sRGB এবং আধুনিক in oklch interpolation-এর মধ্যে সুইচ করুন। OKLCH perceptually মসৃণ midpoint দেয় — hue jump-এ কোনো ঘোলাটে ধূসর ব্যান্ড নেই। যেসব ব্রাউজারে এখনও CSS Color 4 আসেনি, সেখানে gracefully fallback করে।
তিনটি আউটপুট pane লাইভ আপডেট হয়: raw CSS (background-image: linear-gradient(...)), Tailwind v4 arbitrary-value utility (bg-[linear-gradient(...)]), এবং Style Dictionary বা Figma Tokens-এর জন্য প্রস্তুত JSON design-token snippet।
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — ক্লিক করে লোড ও tweak করুন। প্রতিটি preset শুধু একটি নাম নয়, বরং সত্যিকারের প্রোডাকশন-মানের শুরুর বিন্দু।
প্রিভিউ native background-image দিয়ে রেন্ডার হয়, তাই আপনি যা দেখছেন আপনার stylesheet ঠিক তাই তৈরি করবে। প্রতিটি pixel স্থানীয়ভাবে চলে — DevTools → Network খুলে শূন্য outbound request যাচাই করুন।
ফাঁকা পাতা থেকে প্রোডাকশন-প্রস্তুত CSS, Tailwind বা JSON পর্যন্ত চার ধাপ।
Linear ব্যাকগ্রাউন্ড, header, hero সেকশনের জন্য। Radial spotlight, vignette, glow-যুক্ত বোতামের জন্য। Conic pie chart, color wheel এবং ট্রেন্ডি synthetic ব্যাকগ্রাউন্ডের জন্য। ট্যাব দিয়ে এদের মধ্যে সুইচ করুন — সুইচের মধ্যেও আপনার color stop সংরক্ষিত থাকে।
Picker খুলতে color swatch-এ ক্লিক করুন, বা সরাসরি ফিল্ডে HEX paste করুন। Stop-এর position 0-100% সেট করতে slider drag করুন। সবচেয়ে বড় গ্যাপে নতুন stop ঢোকাতে + Add stop ক্লিক করুন (মিডপয়েন্ট রং সহ)। মোট 12টি পর্যন্ত stop।
Linear-এর জন্য কোণ সেট করুন (0° উপরে, 90° ডানে)। Radial-এর জন্য shape, size keyword এবং কেন্দ্র position বাছুন। Conic-এর জন্য শুরুর কোণ সেট করুন। Multi-hue gradient জুড়ে perceptually মসৃণ midpoint পেতে Color interpolation OKLCH-এ সুইচ করুন।
তিনটি pane লাইভ আপডেট হয়: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (design-token shape)। প্রতিটির copy আইকন ব্যবহার করুন, অথবা প্রজেক্টে drop করার জন্য প্রস্তুত একটি gradient.css ফাইল সেভ করতে Download CSS চাপুন।
চারটি সাধারণ পরিস্থিতি যেখানে privacy-first ব্রাউজার টুল Figma + আলাদা gradient সাইট খোলার চেয়ে ভালো।
আপনার ব্র্যান্ডের কাছাকাছি একটি preset বাছুন, stop-এ আপনার দুটি ব্র্যান্ড কালার ফেলুন, পরিচ্ছন্ন midpoint-এর জন্য OKLCH interpolation-এ সুইচ করুন। CSS কপি করুন, hero-এর stylesheet-এ paste করুন। মোট সময়: 2 মিনিটেরও কম।
একবার একটি 3-stop ব্র্যান্ড gradient তৈরি করুন, JSON design token হিসেবে কপি করুন, Style Dictionary / Figma Tokens-এ drop করুন। এখন প্রতিটি প্ল্যাটফর্মের প্রতিটি বোতাম + কার্ড একই gradient রেফারেন্সে ব্যবহার করে। এক জায়গায় আপডেট, সর্বত্র ছড়িয়ে পড়ে।
Synthetic conic gradient pie-chart ভিজ্যুয়াল, progress dial বা 'data-loading' shimmer state-এর জন্য নিখুঁত। Conic টাইপ বাছুন, from-angle সেট করুন, সঠিক শতাংশে stop drop করুন — গণিত 0-360° কোণকে ঠিকঠাক percent position-এর সাথে মিলিয়ে দেয়।
Gradient তৈরি করুন, আপনার লক্ষ্যের সাথে মেলাতে aspect ratio সেট করুন (স্লাইডের জন্য 16:9, IG-এর জন্য 1:1, X header-এর জন্য 3:1), প্রিভিউ স্ক্রিনশট নিন। অথবা CSS-টি একটি one-off HTML ফাইলে কপি করুন এবং আপনার প্রয়োজনীয় ঠিক pixel সাইজে ব্রাউজারে স্ক্রিনশট নিন।
আপনার রং ও gradient কখনো আপনার ডিভাইস ছাড়ে না। DevTools → Network খুলুন, যেকোনো অপারেশনের সময় শূন্য outbound request দেখতে পাবেন।
background-image ব্যবহার করে — তাই rendered gradient ঠিক সেটিই দেখাবে যা আপনার stylesheet আপনার ব্যবহারকারীদের ব্রাউজারে তৈরি করবে।
CSS gradient, OKLCH interpolation এবং design-token সিস্টেম নিয়ে যত্নে নির্বাচিত পঠন।
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 একটি নির্দিষ্ট কোণে সরলরেখা বরাবর blend করে (0° = উপরে, 90° = ডানে)। Radial কেন্দ্রবিন্দু থেকে বাইরের দিকে blend করে — circle বা ellipse, farthest-corner-এর মতো size keyword সহ। Conic কেন্দ্রবিন্দুর চারপাশে ঘুরে — color stop ঘড়ির কাঁটার মতো কোণে বসে। Conic pie chart, dial readout এবং synthetic color-wheel ব্যাকগ্রাউন্ডের জন্য চমৎকার।
যখন এমন hue-এর মধ্যে ট্রানজিশন করছেন যেগুলো analogous নয় — যেমন নীল → হলুদ, বা লাল → সবুজ। ডিফল্ট sRGB interpolation একটি ঘোলাটে ধূসর midpoint দিয়ে যায়; OKLCH (CSS Color Module 4 in oklch) midpoint-কে প্রাণবন্ত রাখে কারণ এটি perceptually uniform space-এ interpolate করে। সদৃশ hue-এর মধ্যে দুই-stop gradient-এ পার্থক্য সামান্য। বহু-stop বা wide-hue gradient-এ OKLCH নাটকীয়ভাবে ভালো।
একটি arbitrary-value utility যা সরাসরি JSX / Blade / HTML-এ paste করতে পারেন: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]। কোনো tailwind.config.js পরিবর্তন দরকার নেই; যেকোনো Tailwind 4 প্রোজেক্টে কাজ করে। যদি named color token পছন্দ করেন, তাহলে CSS-টি কপি করে হাতে রূপান্তর করে নিন।
Linear ও radial gradient 2014 সাল থেকে সর্বজনীনভাবে সমর্থিত। Conic gradient 2021 সালের মধ্যে সব evergreen ব্রাউজারে এসেছে। in oklch interpolation keyword Chrome 111+, Safari 16.2+, Firefox 113+-এ সমর্থিত। পুরোনো ব্রাউজার সমর্থন করতে চাইলে ডিফল্ট sRGB interpolation ব্যবহার করুন — দৃশ্যগত পার্থক্য সবচেয়ে বেশি গুরুত্বপূর্ণ hue-jump করা multi-stop gradient-এর ক্ষেত্রে।
না। Gradient string তৈরি, CSS / Tailwind / JSON serialisation, এবং লাইভ প্রিভিউ — সবই আপনার ডিভাইসে JavaScript-এ চলে। DevTools → Network খুলুন, যেকোনো অপারেশনের সময় শূন্য outbound request দেখতে পাবেন। ব্র্যান্ড কালার, অভ্যন্তরীণ token paste করুন — কিছুই আপনার ল্যাপটপ ছাড়ে না।