CSS গ্রেডিয়েন্ট জেনারেটর

CSS গ্রেডিয়েন্ট কীভাবে বানাবেন

1. ধরন বেছে নিন: লিনিয়ার আপনার ঠিক করা কোণে সোজা চলে, রেডিয়াল মাঝখান থেকে বৃত্তাকারে ছড়ায়, আর কনিক আপনার ঠিক করা কোণ থেকে মাঝখানের চারপাশে ঘোরে।
2. প্রতিটি রং বদলান আর তার স্লাইডার টেনে 0% থেকে 100%-এর মধ্যে জায়গা ঠিক করুন। “রং যোগ করুন” সবচেয়ে চওড়া ফাঁকে নতুন রং বসায়, ছয়টি পর্যন্ত; ✕ একটি সরায়।
3. অথবা কোনো প্রিসেট থেকে শুরু করতে সেটি চাপুন। প্রিভিউ সঙ্গে সঙ্গে বদলায়; “CSS কপি করুন” লাইনগুলো কপি করে, যাতে স্টাইলশিটে পেস্ট করতে পারেন।

সাধারণ প্রশ্ন

background-এর দুটি লাইন কেন?

প্রথমটি সাদামাটা রং, সেই বিরল ব্রাউজারের জন্য যা গ্রেডিয়েন্ট আঁকতে পারে না; বাকি সব জায়গায় দ্বিতীয় লাইন সেটির জায়গা নেয়।

কোণের মানে কী?

লিনিয়ার গ্রেডিয়েন্টে 0deg নিচ থেকে ওপরে, 90deg বাঁ থেকে ডানে আর 180deg ওপর থেকে নিচে যায়। কনিকে এটি সেই জায়গা যেখানে প্রথম রং শুরু হয়, ওপর থেকে ঘড়ির কাঁটার দিকে।

গ্রেডিয়েন্ট কি লেখা বা বর্ডারে লাগানো যায়?

হ্যাঁ। লেখার জন্য এটিকে ব্যাকগ্রাউন্ড করুন আর background-clip: text ও color: transparent যোগ করুন। বর্ডারের জন্য border-image-এ border-image-slice: 1 সহ ব্যবহার করুন।