CSS গ্রেডিয়েন্ট জেনারেটর
একটি ধরন ও রঙ বাছুন — পরিচ্ছন্ন, কপি-প্রস্তুত CSS গ্রেডিয়েন্ট লাইভ হালনাগাদ হয়, সঙ্গে দেখার মতো প্রিভিউ।
প্রিভিউ
কীভাবে ব্যবহার করবেন
- পেজ খুললেই পর্দায় একটি গ্রেডিয়েন্ট থাকে — প্রথম ফলাফলের জন্য কোনো ক্লিক দরকার নেই।
- একটি ধরন বাছুন: "লিনিয়ার" একটি কোণ ধরে যায়, "রেডিয়াল" বৃত্ত থেকে ছড়ায়, "কোনিক" কেন্দ্রের চারপাশে ঘোরে। লিনিয়ার ও কোনিকে স্লাইডার দিয়ে কোণ বদলান।
- সোয়াচ দিয়ে রঙ ঠিক করুন এবং প্রতিটি অবস্থান (0–100%) টেনে নিন। বহু-স্টপ গ্রেডিয়েন্ট চাইলে "+ রঙ যোগ করুন" দিয়ে আরও রঙ যোগ করুন; দুটি পর্যন্ত কমিয়ে আনুন।
- CSS নিচে লাইভ হালনাগাদ হয় — এক ক্লিকে কপি করে CSS নেয় এমন যেকোনো জায়গায় পেস্ট করুন।
উদাহরণ
সেটিংস
লিনিয়ার · 90° · #FF5733 @0% → #33A1FF @100%
CSS
linear-gradient(90deg, #FF5733 0%, #33A1FF 100%)
এটি বাঁ দিকে #FF5733 থেকে ডান দিকে #33A1FF পর্যন্ত একটি প্রমিত লিনিয়ার গ্রেডিয়েন্ট; 90deg মানে "ডান দিকে"। "রেডিয়াল" দেয় radial-gradient(circle, #FF5733 0%, #33A1FF 100%), আর "কোনিক" দেয় conic-gradient(from 90deg, #FF5733 0%, #33A1FF 100%)। সবকিছু সাধারণ ASCII এবং কোনো পরিবর্তন ছাড়াই যেকোনো CSS-এ পেস্ট করা যায়।
পরিধি, সীমাবদ্ধতা ও সাধারণ প্রশ্ন
- কেবল অস্বচ্ছ রঙ: সোয়াচগুলো ব্রাউজারের রঙ পিকার এবং আলফা দেখায় না। স্বচ্ছতার জন্য আগে রঙটিকে আলফা রূপে রূপান্তর করুন, তারপর ফিরে আসুন।
- কেবল একটি প্রমিত সেগমেন্ট: লিনিয়ার, রেডিয়াল বা কোনিক — কোনো -webkit- প্রিফিক্স নেই, স্তরযুক্ত/একাধিক ব্যাকগ্রাউন্ডের কৌশল নেই, রেডিয়াল সাইজিং বা কেন্দ্র স্থাপন নেই।
- স্টপগুলো আপনি যে ক্রমে যোগ করেছেন সেই ক্রমেই থাকে — স্বয়ংক্রিয়ভাবে সাজানো হয় না, তাই ক্রমবহির্ভূত অবস্থান ইচ্ছাকৃতভাবে তীক্ষ্ণ লাফ তৈরি করে।
- 2 থেকে 8টি স্টপ। একটিতে নামালে গ্রেডিয়েন্ট বন্ধ হয় (নোটিশসহ), বানিয়ে দেখানো হয় না।
- কোনো প্রিসেট লাইব্রেরি নেই, পুরো পেজে ব্যাকগ্রাউন্ড প্রয়োগ নেই, গ্রেডিয়েন্ট বহনকারী শেয়ার লিংক নেই — শেয়ার বোতাম কেবল পেজের URL শেয়ার করে; কিছুই আপলোড, সংরক্ষণ বা URL-এ লেখা হয় না।
- রেডিয়াল গ্রেডিয়েন্টে কোণ অর্থহীন, তাই কোণের নিয়ন্ত্রণ লুকায় এবং তৈরি কোডে কোণ থাকে না।
সম্পর্কিত টুল
গ্রেডিয়েন্ট তৈরি হলে সাধারণত যা দরকার।