হাতে করে gradient-এর syntax লেখা বেশ ঝামেলার: angle, stop-এর ক্রম আর শতাংশের অবস্থান একে অপরের সঙ্গে জড়িয়ে থাকে, আর একটা ছোট টাইপো নিঃশব্দে পুরো background ভেঙে দিতে পারে। এই generator নিশ্চিত করে যে প্রিভিউ আর কোড সবসময় একই রকম থাকে - আপনি যা দেখছেন, ঠিক সেই CSS-ই কপি হবে। এটি সম্পূর্ণভাবে ব্রাউজারের ভেতরেই চলে, তাই আপনার ডিজাইন করা কিছুই কোথাও আপলোড হয় না।
বিনামূল্যে CSS Gradient Generator
পুরোটাই আপনার ব্রাউজারে চলে - কিছু আপলোড নেই, সাইন-আপ নেই।
ধরন
Color stop
CSS কোড
CSS gradient generator কী?
CSS gradient generator হলো এমন একটি ভিজ্যুয়াল টুল যা আপনার জন্য linear-gradient(), radial-gradient() বা conic-gradient() কোড তৈরি করে দেয়। আপনি রং বেছে নিন, প্রতিটি stop-এর অবস্থান টেনে সরান, angle ঠিক করুন, আর সরাসরি পেস্ট করার মতো CSS কপি করুন - লাইভ প্রিভিউতে ব্রাউজার ঠিক কী দেখাবে তা আগেই দেখা যাবে। সবকিছুই চলে আপনার ব্রাউজারের ভেতরে।
যেভাবে ব্যবহার করবেন
- 1একটি gradient টাইপ বেছে নিন. linear, radial বা conic থেকে বেছে নিন। linear-এ একটি angle স্লাইডার থাকে; radial-এ shape (circle বা ellipse) আর position যোগ হয়; conic-এ থাকে from-angle আর position।
- 2আপনার color stop সেট করুন. রং বেছে নিতে প্রতিটি swatch-এ ক্লিক করুন এবং gradient বরাবর stop সরাতে তার স্লাইডার টেনে দিন। সর্বোচ্চ ৮টি stop যোগ করা যায়, আবার কমিয়ে ২টি পর্যন্তও রাখা যায়।
- 3দিক ঠিক করুন. angle স্লাইডার (০-৩৬০ ডিগ্রি) টেনে সরান বা একটি position কিওয়ার্ড বেছে নিন। প্রতিটি পরিবর্তনের সঙ্গে সঙ্গে প্রিভিউ লাইভ আপডেট হবে।
- 4CSS কপি করুন. background declaration নিতে Copy চাপুন, এর সঙ্গে একটি সলিড-কালার fallback লাইনও থাকবে, তারপর সেটা আপনার stylesheet-এ পেস্ট করুন।
কাদের জন্য
- ফ্রন্ট-এন্ড ডেভেলপাররা যাদের hero, card বা button-এর জন্য background দরকার এবং syntax মুখস্থ না করেই ঠিকঠাক
linear-gradient()লাইন চান। - ওয়েব ও UI ডিজাইনাররা যারা কোনো mockup মেলাতে চান: প্রথমে ভিজ্যুয়ালি gradient বানিয়ে নিন, তারপর তৈরি হওয়া CSS সরাসরি ডেভ টিমের হাতে তুলে দিন।
- ইমেইল ও ল্যান্ডিং পেজ বানানোর কাজে যুক্তরা যাদের একটি সলিড-কালার fallback লাইন দরকার যাতে পুরনো ইমেইল ক্লায়েন্টেও ডিজাইনটা ভালোভাবে দেখা যায় - এই আউটপুটে সেটা এমনিতেই যোগ হয়ে থাকে।
- CSS শিখছেন এমন শিক্ষার্থীরা যারা দেখতে চান angle, color stop আর gradient-এর ধরন বদলালে রেজাল্ট রিয়েল-টাইমে কীভাবে বদলে যায়।
সাধারণ প্রশ্ন
এই CSS gradient generator কি বিনামূল্যে?
হ্যাঁ - ১০০% বিনামূল্যে, কোনো সাইন-আপ নেই, ওয়াটারমার্ক নেই, কোনো সীমাও নেই। যত ইচ্ছা gradient বানান আর CSS সরাসরি আপনার প্রজেক্টে কপি করুন।
কোনো তথ্য কি সার্ভারে আপলোড হয়?
না। gradient সম্পূর্ণভাবে আপনার ব্রাউজারে সাধারণ JavaScript দিয়ে তৈরি ও প্রিভিউ করা হয়। কোনো রং, কোড বা ব্যবহারের তথ্য কোথাও পাঠানো হয় না।
linear, radial আর conic gradient-এর মধ্যে পার্থক্য কী?
linear gradient আপনার বেছে নেওয়া angle বরাবর একটি সরলরেখায় রং মেশায়। radial gradient একটি কেন্দ্রবিন্দু থেকে circle বা ellipse আকারে বাইরের দিকে ছড়িয়ে পড়ে। conic gradient একটি কেন্দ্রবিন্দুর চারপাশে রং ঘুরিয়ে দেয়, অনেকটা কালার হুইল বা পাই চার্টের মতো।
CSS gradient-এ color stop কীভাবে কাজ করে?
প্রতিটি stop একটি রংকে gradient লাইন বরাবর ০% থেকে ১০০% পর্যন্ত কোনো অবস্থানের সঙ্গে জোড়ে। পাশাপাশি থাকা stop-গুলোর মধ্যে ব্রাউজার মসৃণভাবে রং মেশায়। দুটি stop একই অবস্থানে রাখলে মসৃণ মিশ্রণের বদলে একটি স্পষ্ট প্রান্ত তৈরি হয় - যা স্ট্রাইপ বা পাই-চার্ট এফেক্টের জন্য কাজে লাগে।
কোন কোন ব্রাউজার এই gradient সাপোর্ট করে?
সব আধুনিক ব্রাউজার - Chrome, Firefox, Safari আর Edge - unprefixed linear-gradient() আর radial-gradient() সাপোর্ট করে; conic-gradient() ২০২০ সাল থেকে সব জায়গায় সাপোর্টেড। কপি করা কোডে পুরনো ব্রাউজারের জন্য একটি সলিড-কালার fallback-ও থাকে।
তৈরি হওয়া gradient কি টেক্সটের রং হিসেবে ব্যবহার করা যায়?
সরাসরি না - gradient হলো একটি ছবি, রং নয়। টেক্সট এলিমেন্টে gradient-টিকে background-image হিসেবে বসান, তারপর background-clip: text আর color: transparent যোগ করুন যাতে অক্ষরগুলোর ভেতর দিয়ে gradient দেখা যায়।
আমার gradient-এ banding কেন দেখা যাচ্ছে?
banding তখনই দেখা দেয় যখন দূরের দুটি stop একইরকম রংয়ের ওপর দিয়ে একটা লম্বা পথে মেশে, যাতে 8-bit কালারের ধাপগুলো চোখে পড়ে যায়। মাঝখানে একটি color stop যোগ করে, মেশানোর দূরত্ব কমিয়ে, বা hue-এর পাশাপাশি lightness-এও ভিন্ন এমন রং বেছে নিয়ে এটা কমানো যায়।