CSS গ্রেডিয়েন্ট জেনারেটর কী?
ফ্রি অনলাইন CSS গ্রেডিয়েন্ট জেনারেটর। লিনিয়ার, রেডিয়াল এবং কনিক গ্রেডিয়েন্ট তৈরি করুন রিয়েল-টাইম প্রিভিউ সহ এবং সংশ্লিষ্ট CSS কোড জেনারেট করুন।
CSS গ্রেডিয়েন্ট বহিরাগত ইমেজের উপর নির্ভর না করেই একটি ওয়েব ডিজাইনে গভীরতা, পরিবেশ এবং ভিজ্যুয়াল আগ্রহ যোগ করার সবচেয়ে কার্যকর উপায়গুলোর একটি। একটি সুপরিকল্পিত গ্রেডিয়েন্ট একটি সমতল ব্যাকগ্রাউন্ডকে পরিশীলিত এবং উদ্দেশ্যপূর্ণ অনুভব করা কিছুতে রূপান্তর করতে পারে। CSS গ্রেডিয়েন্ট জেনারেটর এই গ্রেডিয়েন্ট তৈরি করা স্বজ্ঞাত করে: লিনিয়ার বা রেডিয়াল চয়ন করুন, আপনার রং বাছুন, কোণ বা অবস্থান সামঞ্জস্য করুন এবং ব্যবহারের জন্য প্রস্তুত CSS কোড কপি করুন।
লিনিয়ার গ্রেডিয়েন্ট একটি সরল রেখা বরাবর রং রূপান্তর করে। কোণ 0 থেকে 360 ডিগ্রি সামঞ্জস্য করুন — 0deg নিচ থেকে উপরে যায়, 90deg বাম থেকে ডানে যায়, 180deg উপরে থেকে নিচে যায় এবং 270deg ডান থেকে বামে যায়। রেডিয়াল গ্রেডিয়েন্ট একটি কেন্দ্র বিন্দু থেকে বৃত্তাকার বা উপবৃত্তাকার প্যাটার্নে বাইরের দিকে বিকিরণ করে। অনুভূমিক এবং উল্লম্ব স্লাইডার ব্যবহার করে কেন্দ্র অবস্থান করুন, তাই গ্রেডিয়েন্ট ডিফল্ট কেন্দ্রের পরিবর্তে যেকোনো কোণ বা প্রান্ত থেকে উৎপন্ন হতে পারে।
উভয় গ্রেডিয়েন্ট ধরন 2 থেকে 3টি কালার স্টপ সমর্থন করে। প্রতিটি স্টপের নিজস্ব কালার পিকার আছে, তাই আপনি রূপান্তরের প্রতিটি রং সূক্ষ্মভাবে টিউন করতে পারেন। আপনি যেকোনো প্যারামিটার সামঞ্জস্য করার সাথে সাথে লাইভ প্রিভিউ আপডেট হয়, তাৎক্ষণিক ভিজ্যুয়াল প্রতিক্রিয়া দেয়। শুরুর পয়েন্ট হিসেবে ছয়টি প্রিসেট গ্রেডিয়েন্ট অন্তর্ভুক্ত রয়েছে — একটি ক্লিক করে এডিটরে লোড করুন, তারপর আপনার ডিজাইনের সাথে মেলাতে রং এবং কোণ কাস্টমাইজ করুন।
কপি করা CSS কোড প্রোডাকশন-প্রস্তুত। এটি প্রয়োজনে ভেন্ডর প্রিফিক্সসহ স্ট্যান্ডার্ড linear-gradient() বা radial-gradient() সিনট্যাক্স ব্যবহার করে, তাই Chrome, Firefox, Safari এবং Edge-এ কাজ করে। এটি সরাসরি আপনার স্টাইলশিটের background বা background-image প্রপার্টিতে পেস্ট করুন। কোনো পরিষ্কার বা পরিবর্তনের প্রয়োজন নেই — কোডটি পরিষ্কারভাবে ফরম্যাট করা এবং তাৎক্ষণিক ব্যবহারের জন্য প্রস্তুত।
গ্রেডিয়েন্ট সাধারণ ব্যাকগ্রাউন্ডের বাইরেও বহুমুখী। এগুলো ওভারলে ইফেক্টের জন্য ব্যবহার করুন — একটি হিরো ইমেজের উপর একটি আধা-স্বচ্ছ গ্রেডিয়েন্ট ওভারলে প্রান্ত অন্ধকার করে টেক্সট পঠনযোগ্যতা উন্নত করে যখন কেন্দ্র হালকা রাখে। প্রগ্রেস বার ফিল তৈরি করুন যেখানে রং আপনার ব্র্যান্ড রঙ থেকে একটি পরিপূরক ছায়ায় রূপান্তরিত হয় যা সমাপ্তি স্তর নির্দেশ করে। CSS background-clip ব্যবহার করে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডের সাথে একটি স্বচ্ছ ভেতরের অংশ একত্রিত করে সূক্ষ্ম গ্রেডিয়েন্ট বর্ডারসহ কার্ড কম্পোনেন্ট ডিজাইন করুন। এবং আধুনিক গ্লাসমরফিজম ইফেক্টের জন্য, একটি ব্লারড ব্যাকড্রপের উপর একটি আধা-স্বচ্ছ গ্রেডিয়েন্ট স্তর রাখুন — গ্রেডিয়েন্টটি অন্যথায় একটি ফ্ল্যাট ফ্রস্টেড-গ্লাস প্যানেল হবে তাতে গভীরতা যোগ করে।