গ্রেডিয়েন্ট জেনারেটর
লাইভ প্রিভিউ সহ CSS গ্রেডিয়েন্ট তৈরি করুন।
গ্রেডিয়েন্ট জেনারেটর সম্পর্কে
GuruAlpha গ্রেডিয়েন্ট জেনারেটর লাইভ প্রিভিউসহ লিনিয়ার, রেডিয়াল এবং কনিক CSS গ্রেডিয়েন্ট তৈরি করে। রঙ বাছাই করুন, কোণ ও দিক সামঞ্জস্য করুন, একাধিক কালার স্টপের স্তর তৈরি করুন এবং ব্যবহারের জন্য প্রস্তুত CSS কোড কপি করুন। ব্যাকগ্রাউন্ড, বোতাম, হিরো সেকশন এবং যেকোনো ডিজাইন উপাদানের জন্য উপযুক্ত যা মসৃণ রঙ পরিবর্তন থেকে উপকৃত হয়।
গ্রেডিয়েন্ট আধুনিক ওয়েব ডিজাইনে সবচেয়ে জনপ্রিয় ডিজাইন প্রবণতাগুলোর একটি। এগুলো ছবির প্রয়োজন ছাড়াই ফ্ল্যাট ডিজাইনে গভীরতা, ভিজ্যুয়াল আগ্রহ এবং পরিশীলন যোগ করে। গ্রেডিয়েন্ট জেনারেটর কাস্টম গ্রেডিয়েন্ট তৈরি করা সহজ করে — আপনার রঙ বাছাই করুন, কোণ সামঞ্জস্য করুন এবং ফলাফল রিয়েল-টাইমে দেখুন। তৈরি করা CSS কোড সরাসরি আপনার স্টাইলশিটে কপি করা যায়।
টুলটি তিন ধরনের গ্রেডিয়েন্ট সমর্থন করে। লিনিয়ার গ্রেডিয়েন্ট রঙকে একটি সরল রেখা বরাবর পরিবর্তন করে — সবচেয়ে সাধারণ ধরন, যা ব্যাকগ্রাউন্ড, বোতাম এবং ওভারলের জন্য ব্যবহৃত হয়। রেডিয়াল গ্রেডিয়েন্ট একটি কেন্দ্রীয় বিন্দু থেকে বিকিরণ করে — স্পটলাইট প্রভাব এবং বৃত্তাকার ডিজাইনের জন্য দুর্দান্ত। কনিক গ্রেডিয়েন্ট একটি কেন্দ্রীয় বিন্দুর চারপাশে ঘোরে — কালার হুইল এবং পাই চার্ট প্রভাবের জন্য উপযোগী।
মাল্টি-স্টপ এডিটর আপনাকে গ্রেডিয়েন্ট লাইন বরাবর কালার স্টপ যোগ, অপসারণ এবং পুনঃস্থাপন করতে দেয়। প্রতিটি স্টপে একটি নির্দিষ্ট রঙ এবং অবস্থান (0-100%) নির্ধারণ করা যায়, যা আপনাকে পরিবর্তনের উপর সুনির্দিষ্ট নিয়ন্ত্রণ দেয়। আপনি স্টপ সামঞ্জস্য করার সাথে সাথে রিয়েল-টাইম প্রিভিউ আপডেট হয়, তাৎক্ষণিক ভিজ্যুয়াল ফিডব্যাক প্রদান করে।
এক্সপোর্ট ফরম্যাটে সাধারণ CSS (linear-gradient), ব্রাউজার সামঞ্জস্যের জন্য ভেন্ডর প্রিফিক্সসহ CSS, Sass/SCSS ভেরিয়েবল, CSS কাস্টম প্রপার্টি এবং Tailwind আরবিট্রারি মান অন্তর্ভুক্ত। এটি সব আধুনিক ওয়েব ডেভেলপমেন্ট ওয়ার্কফ্লো কভার করে।
গ্রেডিয়েন্ট জেনারেটর-এর প্রধান বৈশিষ্ট্য
- লিনিয়ার, রেডিয়াল এবং কনিক গ্রেডিয়েন্ট ধরন
- পজিশনিংসহ মাল্টি-স্টপ কালার এডিটর
- রিয়েল-টাইম লাইভ প্রিভিউ
- কোণ ও দিক নিয়ন্ত্রণ
- CSS, SCSS, CSS ভেরিয়েবল, Tailwind হিসেবে এক্সপোর্ট
- অনুপ্রেরণার জন্য র্যান্ডম গ্রেডিয়েন্ট জেনারেটর
- কপির জন্য প্রস্তুত CSS কোড
- সব ডিভাইসে কাজ করে
গ্রেডিয়েন্ট জেনারেটর কীভাবে ব্যবহার করবেন
- GuruAlpha-তে গ্রেডিয়েন্ট জেনারেটর খুলুন।
- গ্রেডিয়েন্ট ধরন বাছুন: লিনিয়ার, রেডিয়াল বা কনিক।
- কালার স্টপ যোগ করতে গ্রেডিয়েন্ট বারে ক্লিক করুন।
- কালার পিকার ব্যবহার করে প্রতিটি স্টপের জন্য রঙ বাছুন।
- কোণ (লিনিয়ার) বা আকৃতি (রেডিয়াল/কনিক) সামঞ্জস্য করুন।
- ডেমো উপাদানে গ্রেডিয়েন্ট রিয়েল-টাইমে প্রিভিউ করুন।
- তৈরি করা CSS কোড কপি করুন।
গ্রেডিয়েন্ট জেনারেটর ব্যবহারের টিপস
- সরল, মার্জিত গ্রেডিয়েন্টের জন্য 2-3টি কালার স্টপ দিয়ে শুরু করুন।
- অনুপ্রেরণার জন্য র্যান্ডম গ্রেডিয়েন্ট জেনারেটর ব্যবহার করুন।
- 135 ডিগ্রিতে লিনিয়ার গ্রেডিয়েন্ট একটি জনপ্রিয় কর্ণ প্রভাব তৈরি করে।
- উজ্জ্বল কেন্দ্রসহ রেডিয়াল গ্রেডিয়েন্ট স্পটলাইট প্রভাব তৈরি করে।
- সর্বদা ব্রাউজার জুড়ে গ্রেডিয়েন্ট পরীক্ষা করুন — ভেন্ডর প্রিফিক্স সামঞ্জস্য নিশ্চিত করে।
গ্রেডিয়েন্ট জেনারেটর সম্পর্কে প্রায়শই জিজ্ঞাসিত প্রশ্ন
লিনিয়ার, রেডিয়াল এবং কনিকের মধ্যে পার্থক্য কী?
লিনিয়ার একটি রেখা (দিক) বরাবর পরিবর্তিত হয়। রেডিয়াল একটি কেন্দ্রীয় বিন্দু (বৃত্ত/উপবৃত্ত) থেকে বিকিরণ করে। কনিক একটি কেন্দ্রের চারপাশে ঘোরে (কালার হুইলের মতো)।
আমি কীভাবে আরও কালার স্টপ যোগ করব?
নতুন স্টপ যোগ করতে গ্রেডিয়েন্ট বারের যেকোনো জায়গায় ক্লিক করুন। পুনঃস্থাপন করতে স্টপ টেনে নিন। রঙ পরিবর্তন করতে কোনো স্টপে ক্লিক করুন।
CSS কোড কি ব্রাউজার-সামঞ্জস্যপূর্ণ?
এক্সপোর্টে পুরনো ব্রাউজারের সাথে সর্বাধিক সামঞ্জস্যের জন্য ভেন্ডর প্রিফিক্স (-webkit-, -moz-) অন্তর্ভুক্ত।
আমি কি গ্রেডিয়েন্টকে টেক্সট রঙ হিসেবে ব্যবহার করতে পারি?
হ্যাঁ। টেক্সটে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড প্রয়োগ করতে background-clip: text এবং -webkit-text-fill-color: transparent ব্যবহার করুন।