কীভাবে ব্যবহার করবেন
- একটি প্রিসেট বা ডিফল্ট গ্রেডিয়েন্ট দিয়ে শুরু করুন।
- রং যোগ করতে বারে ক্লিক করুন; স্টপ সরাতে সেগুলো টেনে নিন।
- লিনিয়ার, রেডিয়াল বা কনিক বেছে নিয়ে কোণ বা কেন্দ্র ঠিক করুন।
- CSS ডিক্লারেশন বা Tailwind ক্লাস কপি করুন।
অপশনগুলোর ব্যাখ্যা
- লিনিয়ার
- রং একটি সরলরেখা বরাবর বদলায়। 0° হলে দিক ওপরে, 90° হলে ডানদিকে এবং 180° হলে নিচের দিকে।
- রেডিয়াল
- রং একটি কেন্দ্রবিন্দু থেকে বৃত্ত বা উপবৃত্তের মতো ছড়িয়ে পড়ে, যা উপাদানটির ভেতর মানিয়ে যায়।
- কনিক
- রং একটি কেন্দ্রবিন্দুর চারদিকে রঙের চাকা বা পাই চার্টের মতো ঘুরে যায়।
- পুনরাবৃত্তি
- প্যাটার্নটি পুনরাবৃত্তি হয়; স্ট্রাইপ তৈরি করতে 0% থেকে 10%-এর মতো ছোট পরিসরের মধ্যে স্টপগুলো সেট করুন।
তৈরি কোড দেখতে কেমন
প্রতিটি ধরনে লেখা একই দুটি রং। স্টপ সবসময় শতাংশ অবস্থান দিয়ে লেখা হয়:
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)Tailwind সংস্করণ একই মান একটি arbitrary-value ক্লাসে মুড়ে দেয়। স্পেস আন্ডারস্কোর হয়ে যায় এবং কমার পরের স্পেস সরে যায়:
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]শেষ CSS লাইনে প্যাটার্নটি এলিমেন্টের প্রতি 10% পর পর পুনরাবৃত্ত হয়, ফলে চিকন ডোরা তৈরি হয়। কনিক গ্রেডিয়েন্টে কোণ হলো যেখান থেকে ঘূর্ণন শুরু হয়, আর র্যাডিয়াল গ্রেডিয়েন্টে দুটি শতাংশ হলো কেন্দ্র।
সচরাচর জিজ্ঞাসিত প্রশ্ন
এই গ্রেডিয়েন্টগুলো কোন কোন ব্রাউজারে সমর্থিত?
ভেন্ডর প্রিফিক্স ছাড়াই লিনিয়ার, রেডিয়াল এবং কনিক গ্রেডিয়েন্ট Chrome, Edge, Firefox ও Safari-এর বর্তমান সব সংস্করণে কাজ করে।
স্বচ্ছ গ্রেডিয়েন্ট কীভাবে তৈরি করব?
স্টপের রঙের ঘরে alpha channel-সহ একটি রং লিখুন, যেমন সম্পূর্ণ স্বচ্ছ কালোর জন্য #00000000।
Tailwind ক্লাসটি কীভাবে ব্যবহার করব?
Tailwind CSS 3 বা 4-এ কোনো উপাদানের class list-এ এটি যোগ করুন। এটি একটি arbitrary value ব্যবহার করে, তাই কোনো কনফিগারেশন দরকার নেই।
গোপনীয়তা
এই টুলটি পুরোপুরি আপনার ব্রাউজারে চলে। আপনার ফাইল ও লেখা আপনার ডিভাইসেই প্রসেস হয় এবং কখনো আমাদের সার্ভারে আপলোড হয় না।