CSS গ্রেডিয়েন্ট জেনারেটর
নতুনলাইভ প্রিভিউ সহ linear, radial ও conic CSS গ্রেডিয়েন্ট তৈরি করুন।
Click the bar to add a stop · drag a handle to move it.
Runs entirely in your browser. Nothing is uploaded.
আপনার ব্রাউজারে চলা একটি ভিজ্যুয়াল CSS গ্রেডিয়েন্ট জেনারেটর
এই CSS গ্রেডিয়েন্ট জেনারেটর খুঁতখুঁতে linear-gradient(), radial-gradient() এবং conic-gradient() সিনট্যাক্সকে কয়েক ক্লিকে রূপান্তরিত করে। গ্রেডিয়েন্ট বারে কালার স্টপ যোগ ও টেনে নিন, অ্যাঙ্গেল বা কেন্দ্র সেট করুন, এবং আপনি এগিয়ে যাওয়ার সাথে সাথে একটি পূর্ণ-আকারের লাইভ প্রিভিউ আপডেট হতে দেখুন। ঠিকঠাক দেখালে, প্রোডাকশন-রেডি কোড কপি করুন। কিছু ইনস্টল করার নেই এবং কোনো অ্যাকাউন্ট তৈরির নেই, এবং প্রতিটি গ্রেডিয়েন্ট স্থানীয়ভাবে রেন্ডার হয়, তাই আপনি যা তৈরি করেন তা কখনও আপলোড হয় না।
এটি ডিজাইন করা হয়েছে একমাত্র গ্রেডিয়েন্ট টুল হিসেবে যা আপনার দরকার হবে: cssgradient.io-এর মতো একক-উদ্দেশ্যের জেনারেটরের চেয়ে (কনিক সাপোর্ট নেই, Tailwind আউটপুট নেই) বা Colorzilla-র ব্রাউজার এক্সটেনশনের চেয়ে (PNG এক্সপোর্ট নেই) বেশি সম্পূর্ণ। Canva-র গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড টুলের বিপরীতে যা ফিচার একটি অ্যাকাউন্টের পেছনে লক করে, বা Adobe-এর গ্রেডিয়েন্ট টুলের বিপরীতে যাতে Creative Cloud সাবস্ক্রিপশন প্রয়োজন, এখানে সবকিছুই ফ্রি।
লিনিয়ার, রেডিয়াল ও কনিক — প্রতিটি গ্রেডিয়েন্ট টাইপ
একটি লিনিয়ার গ্রেডিয়েন্ট জেনারেটর (একটি অ্যাঙ্গেল বরাবর মিশ্রণ), একটি রেডিয়াল গ্রেডিয়েন্ট জেনারেটর (একটি কেন্দ্র থেকে স্পটলাইট, বৃত্ত বা ডিম্বাকৃতি, সাইজ ও পজিশন নিয়ন্ত্রণসহ) এবং একটি কনিক গ্রেডিয়েন্ট জেনারেটর (হুইল ও চার্টের জন্য একটি বিন্দুর চারপাশে ঘোরানো রঙ)-এর মধ্যে সুইচ করুন। প্রতিটি টাইপ ঠিক যা প্রয়োজন তাই প্রকাশ করে: লিনিয়ারের জন্য একটি অ্যাঙ্গেল, রেডিয়ালের জন্য শেপ/সাইজ/পজিশন, কনিকের জন্য একটি শুরুর অ্যাঙ্গেল এবং কেন্দ্র।
সীমাহীন কালার স্টপ যোগ করুন, পুনঃস্থাপন করতে টেনে নিন, এবং rgba() দিয়ে মসৃণ স্বচ্ছ গ্রেডিয়েন্ট তৈরি করতে প্রতি-স্টপ অস্বচ্ছতা সেট করুন। আপনি যেখানে নির্দেশ করবেন ঠিক সেখানে একটি নতুন স্টপ ফেলতে বারে ক্লিক করুন। Colorzilla-র মতো বেশিরভাগ প্রতিদ্বন্দ্বী টুল শুধু দুই বা তিনটি স্টপ সমর্থন করে; এখানে কোনো সীমা নেই, তাই জটিল পাঁচ- বা ছয়-স্টপ গ্রেডিয়েন্ট সহজ দুই-রঙের মিশ্রণের মতোই সহজ।
CSS, Tailwind বা SCSS কপি করুন — এবং একটি PNG এক্সপোর্ট করুন
আউটপুট এক ট্যাব দূরে। CSS ট্যাব একটি ঐচ্ছিক -webkit- ফলব্যাকসহ (লিগ্যাসি ব্রাউজারের জন্য সঠিকভাবে অ্যাঙ্গেল-রূপান্তরিত) একটি প্রস্তুত background ডিক্লারেশন দেয়। Tailwind ট্যাব লিনিয়ার গ্রেডিয়েন্টের জন্য বাস্তবসম্মত bg-gradient-to-r from-[...] to-[...] ইউটিলিটি তৈরি করে, রেডিয়াল ও কনিকের জন্য একটি bg-[linear-gradient(...)] arbitrary মানে ফিরে যায়। SCSS ট্যাব মানটিকে একটি পুনঃব্যবহারযোগ্য $gradient ভেরিয়েবলে মোড়ায়।
একটি রাস্টার দরকার? Download PNG সঠিক গ্রেডিয়েন্টটিকে ১৬০০x৯০০-এ একটি ক্যানভাসে আঁকে — একটি সত্যিকারের গ্রেডিয়েন্ট PNG ডাউনলোড কোনো ওয়াটারমার্ক ছাড়া এবং কোনো সার্ভার রাউন্ড-ট্রিপ ছাড়া। Adobe Express এটি একটি সাবস্ক্রিপশনের পেছনে রাখে। TinyWow একটি ফাইল আপলোড প্রয়োজন করে। এখানে এটি ফ্রি এবং আপনার ডিভাইস থেকে কিছুই বের হয় না।
একটি ছবি থেকে গ্রেডিয়েন্ট তৈরি করুন
একটি ব্র্যান্ড ফটো, স্ক্রিনশট বা প্রোডাক্ট শটের সাথে মিলে যায় এমন গ্রেডিয়েন্ট চান? From image ব্যবহার করুন: টুলটি আপনার ব্রাউজারেই ছবির পিক্সেল স্যাম্পল করে, এর প্রধান রঙ খুঁজে বের করে, এবং সেগুলো থেকে একটি মাল্টি-স্টপ গ্রেডিয়েন্ট তৈরি করে, হালকা থেকে গাঢ় ক্রমে মসৃণ মিশ্রণের জন্য। বিশ্লেষণ স্থানীয়ভাবে ঘটে বলে, ছবিটি কখনও কোথাও আপলোড হয় না।
সেখান থেকে আপনি নিষ্কাশিত স্টপগুলো সামান্য পাল্টাতে পারেন, অ্যাঙ্গেল পাল্টাতে পারেন, একটি রঙের অস্বচ্ছতা কমাতে পারেন, বা একটি রেডিয়াল বা কনিক মিশ্রণে সুইচ করতে পারেন। এটি একটি বিদ্যমান ছবির সাথে একটি হিরো সেকশন, কার্ড বা বাটনকে যুক্ত করা গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড CSS স্নিপেট তৈরির দ্রুততম উপায় — কোনো Figma প্লাগইন বা Adobe এক্সটেনশনের দরকার নেই।
প্রিসেট, র্যান্ডমাইজার ও শেয়ারযোগ্য লিংক
আইডিয়া নিয়ে আটকে গেছেন? একটি সাজানো প্রিসেট-এ ট্যাপ করুন — সানসেট, ওশান, অরোরা, মিন্ট, পীচ ইত্যাদি — একটি পালিশ করা গ্রেডিয়েন্ট লোড করতে, তারপর সেখান থেকে সমন্বয় করুন। একটি নতুন, সুরেলা দুই- বা তিন-রঙের সংমিশ্রণের জন্য Random-এ ক্লিক করুন। কালার থিওরিতে সময় ব্যয় না করে ভালো দেখায় এমন কিছু দরকার হলে এটি একটি ভালো শুরুর বিন্দু।
আপনার প্রতিটি পরিবর্তন পেজের URL-এ এনকোড করা হয়, তাই Copy link একজন সহকর্মীর হাতে আপনি যে সঠিক গ্রেডিয়েন্ট দেখছেন তা তুলে দেয় — কোনো এক্সপোর্ট নেই, অ্যাকাউন্ট নেই, স্ক্রিনশট নেই। লিংকটিতে রঙ, টাইপ, অ্যাঙ্গেল এবং স্টপ থাকে, তাই এটি কোনো সার্ভার লুকআপ ছাড়াই সম্পূর্ণভাবে ক্লায়েন্ট-সাইডে কাজ করে। এমন কিছু যা Figma ও Canva-র মতো টুল অ্যাকাউন্ট ছাড়া করতে পারে না।
প্রাইভেট এবং ফ্রি — আপলোড নেই, অ্যাকাউন্ট নেই
কোনো সাইনআপ নেই, কোনো খরচ নেই, এবং আপলোড করার কিছু নেই। এই CSS গ্রেডিয়েন্ট মেকার সম্পূর্ণভাবে আপনার ডিভাইসে JavaScript এবং একটি HTML ক্যানভাস ব্যবহার করে চলে, তাই গোপনীয় ব্র্যান্ড রঙ এবং অপ্রকাশিত ডিজাইন কখনও আপনার ব্রাউজার ছেড়ে যায় না। ব্যাকগ্রাউন্ড, বাটন, হিরো সেকশন, ওভারলে এবং চার্টের জন্য আপনার যাওয়া-আসার লিনিয়ার, রেডিয়াল ও কনিক গ্রেডিয়েন্ট জেনারেটর হিসেবে এটি বুকমার্ক করুন। যখনই আপনার একটি দরকার হয়, CSS, Tailwind বা SCSS কপি করুন, বা একটি PNG এক্সপোর্ট করুন। আইফোন, অ্যান্ড্রয়েড, উইন্ডোজ এবং ম্যাকে সমানভাবে কাজ করে।
গভীরভাবে CSS গ্রেডিয়েন্ট সিনট্যাক্স: অ্যাঙ্গেল, শেপ এবং হার্ড স্টপ
linear-gradient একটি কীওয়ার্ড দিক (to right, to bottom right) বা একটি ডিগ্রি মান গ্রহণ করে। ডিগ্রি মান ১২টার শুরু থেকে ঘড়ির কাঁটার দিকে গ্রেডিয়েন্ট লাইনের অ্যাঙ্গেল পরিমাপ করে: 0deg নিচ থেকে ওপরে যায়, 90deg বাম থেকে ডানে যায়, 180deg ওপর থেকে নিচে যায়, এবং 45deg নিচের-বাম কোণ থেকে তির্যকভাবে কাটে। to right এবং 90deg অভিন্ন; কীওয়ার্ড রূপ পড়তে সহজ, ডিগ্রি রূপ 37deg-এর মতো ভগ্নাংশ অ্যাঙ্গেল নির্ভুলভাবে সেট করতে দেয়।
radial-gradient তিনটি স্বতন্ত্র অক্ষে নিয়ন্ত্রণ দেয়: শেপ (circle বা ellipse), সাইজ (কীওয়ার্ড closest-side, closest-corner, farthest-side, বা farthest-corner, যা নির্ধারণ করে কন্টেইনিং বক্সের সাপেক্ষে গ্রেডিয়েন্ট কোথায় শেষ হয়), এবং পজিশন (যেকোনো বৈধ CSS ব্যাকগ্রাউন্ড-পজিশন মান, ডিফল্ট center)। conic-gradient একটি পাই চার্টের মতো একটি কেন্দ্রীয় বিন্দুর চারপাশে রঙ ঘোরায়। একটি from <angle> আর্গুমেন্ট যোগ করলে সুইপের শুরু ঘোরে, তাই conic-gradient(from 90deg, red, blue) ওপরের বদলে ডানে নির্দেশ করে সুইপ শুরু করে। কনিক গ্রেডিয়েন্ট কোনো SVG বা JavaScript ছাড়াই কালার হুইল, পাই চার্ট, প্রোগ্রেস রিং এবং অ্যাঙ্গুলার গ্লো ইফেক্ট তৈরি করে।
রিপিটিং গ্রেডিয়েন্ট — repeating-linear-gradient এবং repeating-radial-gradient — এলিমেন্ট পূরণ করতে সংজ্ঞায়িত স্টপ ক্রম টাইল করে, একক প্রোপার্টিতে CSS-শুধু স্ট্রাইপ, হ্যাচ প্যাটার্ন এবং সানবার্স্ট ইফেক্ট তৈরি করতে দেয়। একই পজিশনে দুটি কালার স্টপ রেখে একটি হার্ড স্টপ তৈরি হয়: linear-gradient(red 50%, blue 50%) কোনো মিশ্রণ ছাড়াই একটি পরিষ্কার ৫০/৫০ বিভাজন তৈরি করে। হার্ড স্টপ চেকারবোর্ড ব্যাকগ্রাউন্ড, CSS-শুধু পতাকা, এবং দুই রঙের মধ্যে একটি ধারালো প্রান্ত প্রয়োজন এমন যেকোনো ডিজাইনের ভিত্তি — কোনো ছবি নেই, কোনো clip-path প্রয়োজন নেই।
রঙ ইন্টারপোলেশন সমস্যা — এবং কেন OKLCH গ্রেডিয়েন্ট ভালো দেখায়
ডিফল্টরূপে, ব্রাউজার sRGB কালার স্পেসে গ্রেডিয়েন্ট রঙ ইন্টারপোলেট করে, যা একটি সুপরিচিত ভিজ্যুয়াল আর্টিফ্যাক্ট তৈরি করে: লাল থেকে নীলে একটি গ্রেডিয়েন্ট একটি বিবর্ণ ধূসর-বেগুনি মধ্যবিন্দু দিয়ে যায়। সমস্যাটি জ্যামিতিক — sRGB-এর তিনটি অক্ষ দৃষ্টিগতভাবে সমান নয়, তাই দুটি প্রাণবন্ত হিউর মধ্যে সরলরেখার পথ কম ক্রোমার একটি অঞ্চল অতিক্রম করে। ফলাফলটি মাঝখানে ঘোলাটে দেখায় যদিও শুরু ও শেষের রঙ সম্পূর্ণ স্যাচুরেটেড।
CSS Color Level 4 একটি সমাধান চালু করেছে: প্রথম আর্গুমেন্ট হিসেবে in <colorspace> লিখে ইন্টারপোলেশনের জন্য কোন কালার স্পেস ব্যবহার করবেন তা ঘোষণা করতে পারেন। linear-gradient(in oklch, red, blue) OKLCH-এ ইন্টারপোলেট করে — একটি দৃষ্টিগতভাবে অভিন্ন স্পেস যেখানে সমান সাংখ্যিক ধাপ সমান-দেখতে উজ্জ্বলতা পরিবর্তন তৈরি করে — এবং মধ্যবিন্দু পুরোটা জুড়ে প্রাণবন্ত ও স্যাচুরেটেড থাকে। OKLCH গ্রেডিয়েন্ট ২০২৩ (Chrome 111, Firefox 113, Safari 16.2) থেকে সব প্রধান ব্রাউজারে সমর্থিত। in hsl অপশন একটি হালকা বিকল্প যা হিউ-সংলগ্ন রঙে ধূসর মধ্যবিন্দু এড়ায় কিন্তু দীর্ঘ হিউ চাপে উজ্জ্বলতায় এখনও ডুবে যেতে পারে; in lch হলো LCH ইন্টারপোলেশন, দৃষ্টিগতভাবে অভিন্ন কিন্তু OKLCH-এর উন্নত নীল-বেগুনি হ্যান্ডলিং ছাড়া।
ব্যবহারিক গ্রহণযোগ্যতা হলো: আপনি যখনই একটি মাল্টি-হিউ গ্রেডিয়েন্ট তৈরি করেন — বিশেষত লাল→নীল, সবুজ→বেগুনি, বা রঙচক্রে ৯০°-এর বেশি আলাদা যেকোনো জোড়া — in oklch-এ সুইচ করলে অতিরিক্ত কোনো স্টপ ছাড়াই সমৃদ্ধ রঙ পাওয়া যায়। একই হিউর দুই শেডের মধ্যে গ্রেডিয়েন্টের জন্য (যেমন, হালকা নীল থেকে গাঢ় নীল), sRGB এবং OKLCH প্রায় একই রকম দেখায়, তাই ডিফল্টই ঠিক আছে। এই টুলের অ্যাডভান্সড প্যানেলে কালার স্পেস সেটিং নিয়ে পরীক্ষা করে আপনার ব্রাউজারে লাইভ ইন্টারপোলেশন পার্থক্য দেখতে পারেন।
গ্রেডিয়েন্ট ডিজাইনের ইতিহাস: স্কিউমরফিজম থেকে মেশ গ্রেডিয়েন্ট পর্যন্ত
গ্রেডিয়েন্ট UI ডিজাইনের স্কিউমরফিক যুগে (মোটামুটি ২০০৭–২০১২) সর্বব্যাপী ছিল, যেখানে চকচকে বাটন বেভেল এবং চামড়া-টেক্সচারযুক্ত সাইডবার শারীরিক পৃষ্ঠ অনুকরণ করতে রেডিয়াল হাইলাইট এবং লিনিয়ার হালকা-থেকে-গাঢ় শেডিংয়ের ওপর নির্ভর করত। যখন Apple-এর iOS 7 (২০১৩) এবং Google-এর Material Design (২০১৪) ফ্ল্যাট ডিজাইন নিয়ে আসে, গ্রেডিয়েন্ট তীব্রভাবে ফ্যাশনের বাইরে চলে যায় — একটি একক ফ্ল্যাট রঙ আধুনিক রুচির চিহ্ন হয়ে ওঠে। CSS গ্রেডিয়েন্ট জেনারেটর মন্দা দেখে, এবং অনেক স্টাইল গাইড এগুলো সম্পূর্ণ নিষিদ্ধ করে।
গ্রেডিয়েন্ট রেনেসাঁ শুরু হয় ২০১৬ সালের জুনে যখন Instagram তার ক্যামেরা আইকনকে একটি সাহসী প্রবাল-থেকে-বেগুনি গ্রেডিয়েন্ট লোগো দিয়ে প্রতিস্থাপন করে — আগের ফ্ল্যাট-বাদামি মনোগ্রামের একটি ইচ্ছাকৃত প্রত্যাখ্যান। রিডিজাইনটি প্রায় ৪৮ ঘণ্টা বিতর্কিত ছিল এবং তারপর ব্যাপকভাবে প্রভাবশালী হয়ে ওঠে: এক বছরের মধ্যে, প্রাণবন্ত মাল্টি-হিউ গ্রেডিয়েন্ট অ্যাপ আইকন, ল্যান্ডিং পেজ এবং ব্র্যান্ড আইডেন্টিটি জুড়ে ছড়িয়ে পড়ে। duotone ইফেক্ট — একটি গ্রেস্কেল ছবির ওপর একটি দুই-রঙের গ্রেডিয়েন্ট ওভারলে, Spotify-র ২০১৫–২০১৬ ফেস্টিভাল ক্যাম্পেইন দ্বারা জনপ্রিয় — সম্পাদকীয় ও সঙ্গীত-শিল্পের ডিজাইনের একটি প্রধান উপাদান হয়ে ওঠে।
মেশ গ্রেডিয়েন্ট ২০২১ থেকে প্রভাবশালী প্রবণতা হিসেবে আবির্ভূত হয়। CSS গ্রেডিয়েন্টের বিপরীতে, যা একটি অক্ষ বরাবর বা একক বিন্দু থেকে পরিবর্তিত হয়, একটি মেশ গ্রেডিয়েন্ট একাধিক রঙের নোড নির্বিচারী অবস্থানে রাখে এবং সবগুলোর মধ্যে একসাথে ইন্টারপোলেট করে, জৈব ব্লব-এর মতো রঙের ক্ষেত্র তৈরি করে। বিশুদ্ধ CSS সত্যিকারের মেশ গ্রেডিয়েন্ট তৈরি করতে পারে না (তাদের SVG <feComposite> ফিল্টার বা ক্যানভাস-আঁকা বেজিয়ার ক্ষেত্র প্রয়োজন), কিন্তু ভিজ্যুয়াল স্টাইলটি কম অস্বচ্ছতায় ওভারল্যাপিং রেডিয়াল গ্রেডিয়েন্ট দিয়ে ব্যাপকভাবে অনুকরণ করা হয়। একইভাবে, গ্লাসমরফিজম — একটি ব্লার করা গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডের ওপর ভাসমান একটি ফ্রস্টেড-গ্লাস প্যানেল — ২০২১ সালে জনপ্রিয় হয় এবং ব্লার ইফেক্টকে পাঠযোগ্য করতে সম্পূর্ণভাবে একটি প্রাণবন্ত অন্তর্নিহিত গ্রেডিয়েন্টের ওপর নির্ভর করে। এই ইতিহাস বোঝা আপনাকে আপনার প্রজেক্টের জন্য সঠিক যুগ ও নান্দনিকতা সংকেত দেয় এমন একটি গ্রেডিয়েন্ট স্টাইল বেছে নিতে সাহায্য করে।
অ্যাক্সেসিবিলিটি: গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডে কনট্রাস্ট
WCAG 1.4.3 সাধারণ টেক্সট ও তার ব্যাকগ্রাউন্ডের মধ্যে ন্যূনতম ৪.৫:১ কনট্রাস্ট অনুপাত দাবি করে (বড় টেক্সটের জন্য ৩:১), এবং এই প্রয়োজনীয়তা প্রতিটি বিন্দুতে প্রযোজ্য যেখানে টেক্সট বসে — শুধু গ্রেডিয়েন্টের গড় রঙে নয়। একটি হেডলাইন যদি প্রায়-সাদা থেকে গাঢ় নেভি পর্যন্ত মিশ্রিত একটি ব্যাকগ্রাউন্ড জুড়ে থাকে, কনট্রাস্ট অবশ্যই সবচেয়ে খারাপ-কেস বিন্দুতে পাস করতে হবে: টেক্সটের কভার করা গ্রেডিয়েন্টের সবচেয়ে হালকা অংশের বিপরীতে টেক্সট রঙ যাচাই করতে হবে। একটি গ্রেডিয়েন্ট যা গাঢ় অঞ্চলে পাস করে তা হালকা অঞ্চলে ব্যর্থ হতে পারে, এবং পুরো এলিমেন্ট মানদণ্ডে ব্যর্থ হয়।
ব্যবহারিক পদ্ধতি হলো টেক্সটের নিচে গ্রেডিয়েন্টের উভয় প্রান্তবিন্দুতে কনট্রাস্ট যাচাই করা, এবং টেক্সটের সীমার মধ্যে পড়ে এমন যেকোনো মধ্যবর্তী স্টপে। ব্রাউজারের বিল্ট-ইন অ্যাক্সেসিবিলিটি ইন্সপেক্টর বা কনট্রাস্ট-চেকিং এক্সটেনশনের মতো টুল একটি একক স্যাম্পল করা রঙ গ্রহণ করে, তাই আপনাকে হাতে দুই বা তিনটি বিন্দু স্যাম্পল করতে হতে পারে। একটি নির্ভরযোগ্য উপায় হলো গ্রেডিয়েন্ট এবং টেক্সট লেয়ারের মধ্যে একটি অর্ধ-স্বচ্ছ গাঢ় ওভারলে বসানো — উদাহরণস্বরূপ rgba(0,0,0,0.45) — এটি কনট্রাস্ট পরিসর সংকুচিত করে যাতে টেক্সট পুরো বিস্তার জুড়ে পাঠযোগ্য থাকে। একটি text-shadow (text-shadow: 0 1px 4px rgba(0,0,0,0.6)) আরেকটি সাধারণ কৌশল যা গ্রেডিয়েন্টকে ভিজ্যুয়ালি না পাল্টিয়ে স্থানীয় কনট্রাস্ট যোগ করে।
WCAG ইন্টারঅ্যাক্টিভ স্টেট-এও প্রযোজ্য: একটি বাটনে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড থাকলে, কনট্রাস্ট প্রয়োজনীয়তা এর ডিফল্ট, হোভার, ফোকাস এবং অ্যাক্টিভ স্টেটে স্বাধীনভাবে পূরণ হতে হবে। হোভারে একটি নিম্ন-কনট্রাস্ট মধ্যবিন্দুর মধ্য দিয়ে যাওয়া গ্রেডিয়েন্ট শিফট মধ্যবর্তী ফ্রেম রেন্ডার করা ব্রাউজারে ট্রানজিশনের সময় 1.4.3-এ ব্যর্থ হয়। সবচেয়ে নিরাপদ প্যাটার্ন হলো গ্রেডিয়েন্ট প্রোপার্টি নিজে অ্যানিমেট করার বদলে দুটি প্রি-রেন্ডার করা গ্রেডিয়েন্ট সিউডো-এলিমেন্টের (::before এবং ::after) মধ্যে opacity অ্যানিমেট করা — এটি কনট্রাস্ট-ট্রানজিশন সমস্যা এবং সরাসরি background-image অ্যানিমেট করার পেইন্ট-পারফরম্যান্স খরচ উভয়ই এড়ায়।
Frequently asked questions
একটি CSS গ্রেডিয়েন্ট কীভাবে তৈরি করব?
background (বা background-image) প্রোপার্টিকে একটি গ্রেডিয়েন্ট ফাংশনে সেট করুন। সবচেয়ে সহজ হলো একটি দুই-রঙের লিনিয়ার গ্রেডিয়েন্ট: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — যা ইন্ডিগো থেকে পিংক পর্যন্ত বাম-থেকে-ডান মিশ্রণ আঁকে। উপরে আপনার রঙ ও অ্যাঙ্গেল বেছে নিন, তারপর প্রস্তুত background লাইনটি সরাসরি আপনার স্টাইলশিটে কপি করুন। সিনট্যাক্স হাতে লেখার দরকার নেই — জেনারেটরটি আপনি প্রতিটি স্টপ টেনে বসানোর সাথে সাথেই তৈরি করে।
লিনিয়ার, রেডিয়াল এবং কনিক গ্রেডিয়েন্টের মধ্যে পার্থক্য কী?
একটি linear-gradient আপনার বেছে নেওয়া একটি অ্যাঙ্গেলে সরলরেখা বরাবর রঙ মিশ্রিত করে (যেমন 90deg = বাম থেকে ডান)। একটি radial-gradient একটি কেন্দ্র বিন্দু থেকে বাইরের দিকে বৃত্ত বা ডিম্বাকৃতিতে মিশ্রিত হয়, একটি স্পটলাইটের মতো। একটি conic-gradient একটি ঘড়ির কাঁটার মতো একটি কেন্দ্র বিন্দুর চারপাশে রঙ ঘোরায়, যা এটিকে কালার হুইল ও পাই চার্টের জন্য উপযুক্ত করে তোলে। এই টুল তিনটিই তৈরি করে; Linear / Radial / Conic বাটন দিয়ে সুইচ করুন। Canva-র ব্যাকগ্রাউন্ড জেনারেটরের মতো বেশিরভাগ ফ্রি গ্রেডিয়েন্ট টুল শুধু লিনিয়ার গ্রেডিয়েন্ট দেয়, এবং cssgradient.io কনিক গ্রেডিয়েন্ট মোটেও সমর্থন করে না।
CSS-এ ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট কীভাবে তৈরি করব?
যেকোনো এলিমেন্টের ব্যাকগ্রাউন্ডে একটি গ্রেডিয়েন্ট প্রয়োগ করুন। একটি পূর্ণ-পেজ ব্যাকগ্রাউন্ডের জন্য চেষ্টা করুন: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }। একটি গ্রেডিয়েন্ট একটি ছবি হিসেবে গণনা হয় বলে, background-attachment: fixed; ও যোগ করতে পারেন যাতে পেজ স্ক্রল হলেও এটি স্থির থাকে। উপরে ভিজ্যুয়ালি তৈরি করুন এবং CSS কপি করুন। Figma, Canva বা কোনো ডিজাইন টুলের দরকার নেই। ২০২৬ সালে সব আধুনিক ব্রাউজারে প্রিফিক্স ছাড়াই একইভাবে কাজ করে।
একটি গ্রেডিয়েন্টে দুইয়ের বেশি রঙ কীভাবে যোগ করব?
অতিরিক্ত কালার স্টপ যোগ করুন, প্রতিটির নিজস্ব পজিশন সহ। গ্রেডিয়েন্ট বারে যেকোনো জায়গায় ক্লিক করুন (বা + Add stop বাটন) একটি নতুন স্টপ ফেলতে, তারপর এটি যেখানে চান সেখানে টেনে নিন। তিনটি রঙ দেখতে হয় linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%)-এর মতো। প্রকৃত কোনো সীমা নেই — আপনার ডিজাইনে যত দরকার তত স্টপ যোগ করুন। coolors.co-র বিপরীতে যা শুধু রঙের প্যালেট দেখায় আসল CSS ছাড়া, বা Canva যা গ্রেডিয়েন্ট এডিটিং একটি অ্যাকাউন্টের পেছনে লক করে, এটি সাথে সাথে সীমাহীন-স্টপ প্রোডাকশন CSS তৈরি করে।
গ্রেডিয়েন্টের অ্যাঙ্গেল বা দিক কীভাবে সেট করব?
একটি লিনিয়ার গ্রেডিয়েন্টের জন্য প্রথম মানটি হলো অ্যাঙ্গেল: 0deg ওপরের দিকে নির্দেশ করে, 90deg ডানে, 180deg নিচে, 270deg বামে। আপনি 'to right' বা 'to bottom right'-এর মতো কীওয়ার্ডও ব্যবহার করতে পারেন, তাই linear-gradient(to right, ...) linear-gradient(90deg, ...)-এর অভিন্ন। উপরের Angle স্লাইডার টেনে নিন বা একটি দিক তীরে ক্লিক করুন আর মানটি লাইভ আপডেট হবে। আউটপুট CSS রিয়েল টাইমে আপডেট হয় তাই আপনি সরাসরি যেকোনো স্টাইলশিট বা ফ্রেমওয়ার্কে কপি-পেস্ট করতে পারেন।
২০২৬ সালে গ্রেডিয়েন্টের জন্য কি এখনও -webkit- প্রিফিক্স দরকার?
২০২৬ সালে, না। linear-gradient, radial-gradient এবং conic-gradient প্রতিটি বর্তমান ব্রাউজারে প্রিফিক্স ছাড়াই সমর্থিত, তাই একটি সাধারণ background: linear-gradient(...) যথেষ্ট। আপনি শুধু খুব পুরনো Safari/iOS (২০১৭-এর আগে) বা লিগ্যাসি Android WebView-র জন্য -webkit- যোগ করবেন। 'Add -webkit- prefix' টিক দিন CSS আউটপুটে, আর টুলটি স্ট্যান্ডার্ড লাইনের ওপরে একটি সঠিকভাবে-রূপান্তরিত ফলব্যাক লাইন আউটপুট করে। অ্যাঙ্গেল রূপান্তর (90deg webkit সংস্করণে 270deg হয়ে যায়) স্বয়ংক্রিয়ভাবে সামলানো হয়।
Tailwind CSS-এ গ্রেডিয়েন্ট কীভাবে তৈরি করব?
গ্রেডিয়েন্ট ইউটিলিটি ব্যবহার করুন: একটি দিক ক্লাস প্লাস from-, via- এবং to- রঙ, যেমন bg-gradient-to-r from-indigo-500 to-pink-500। সঠিক রঙের জন্য arbitrary মান ব্যবহার করুন: bg-gradient-to-r from-[#6366f1] to-[#ec4899]। আপনার বর্তমান গ্রেডিয়েন্টের জন্য ক্লাস কপি করতে Tailwind ট্যাবে সুইচ করুন, যাতে রেডিয়াল ও কনিক গ্রেডিয়েন্টের জন্য একটি bg-[linear-gradient(...)] arbitrary মানসহ অন্তর্ভুক্ত থাকে, যার জন্য Tailwind-এর কোনো নামযুক্ত শর্টহ্যান্ড নেই। বেশিরভাগ Tailwind গ্রেডিয়েন্ট রিসোর্স এই এজ কেসটি কভার করে না।
একটি গ্রেডিয়েন্ট PNG ছবি হিসেবে কীভাবে এক্সপোর্ট করব?
Download PNG-তে ক্লিক করুন। টুলটি আপনার সঠিক গ্রেডিয়েন্টটি একটি HTML ক্যানভাসে ১৬০০x৯০০-এ আঁকে এবং একটি .png হিসেবে সংরক্ষণ করে, একটি স্লাইড ব্যাকগ্রাউন্ড, সোশ্যাল ব্যানার বা ডিজাইন মকআপের জন্য আদর্শ। এটি সম্পূর্ণভাবে আপনার ব্রাউজারে রেন্ডার হয়, তাই কিছুই আপলোড হয় না। সার্ভারে ফাইল আপলোড প্রয়োজন করা TinyWow-এর বিপরীতে, বা PNG এক্সপোর্ট একটি সাবস্ক্রিপশন পেওয়ালের পেছনে রাখা Adobe Express-এর বিপরীতে, এখানে কোনো প্রাইভেসি ঝুঁকি নেই এবং কোনো খরচ নেই। অন্য সাইজ দরকার? পরে যেকোনো ইমেজ এডিটরে PNG স্কেল বা ক্রপ করুন।
একটি ছবি থেকে গ্রেডিয়েন্ট কীভাবে তৈরি করব?
'From image'-এ ক্লিক করুন এবং একটি ছবি বেছে নিন। টুলটি স্থানীয়ভাবে পিক্সেল পড়ে, সবচেয়ে সাধারণ রঙ খুঁজে বের করে, এবং সেগুলো থেকে একটি গ্রেডিয়েন্ট তৈরি করে — একটি ব্র্যান্ড ফটো বা প্রোডাক্ট শটের সাথে দ্রুত মেলানোর উপায়। আপনার ছবি কখনও আপনার ডিভাইস ছেড়ে যায় না; এটি ব্রাউজারে বিশ্লেষণ করে সাথে সাথে বাতিল করা হয়। প্যালেট নিষ্কাশনের জন্য আপলোড বা অ্যাকাউন্ট প্রয়োজন করা Adobe Color বা Coolors-এর বিপরীতে, সবকিছু আপনার মেশিনে প্রাইভেট থাকে। এরপর আপনি নিষ্কাশিত স্টপগুলো সমন্বয় করতে পারেন, অ্যাঙ্গেল পাল্টাতে পারেন, বা রেডিয়াল বা কনিকে সুইচ করতে পারেন।
কনিক গ্রেডিয়েন্ট কী এবং কখন ব্যবহার করা উচিত?
একটি কনিক গ্রেডিয়েন্ট একটি লাইন বরাবরের বদলে একটি কেন্দ্র বিন্দুর চারপাশে তার রঙ ঘোরায়, তাই ট্রানজিশনটি ঘড়ির কাঁটার মতো সুইপ করে। conic-gradient(from 0deg, red, yellow, green, blue, red) একটি পূর্ণ কালার হুইল তৈরি করে। এগুলো পাই চার্ট, ডোনাট চার্ট, প্রোগ্রেস রিং, কালার পিকার এবং অ্যাঙ্গুলার গ্লো ইফেক্টের জন্য আদর্শ। ব্রাউজার সাপোর্ট ২০২১ থেকে Chrome, Firefox, Safari এবং Edge জুড়ে কোনো প্রিফিক্স ছাড়াই দৃঢ়। উপরে Conic বেছে নিন, শুরুর অ্যাঙ্গেল এবং কেন্দ্র পজিশন সেট করুন, এবং পরীক্ষা করুন। বেশিরভাগ গ্রেডিয়েন্ট জেনারেটর টুল মোটেও কনিক সমর্থন করে না।
একটি মসৃণ বা স্বচ্ছ গ্রেডিয়েন্ট কীভাবে তৈরি করব?
একটি স্টপকে একটি আলফা মান দিন। একটি স্টপে Opacity স্লাইডার কমান আর CSS rgba()-তে সুইচ করবে। উদাহরণস্বরূপ, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) স্বচ্ছ থেকে ৬০% কালোয় ফেড হয়, একটি ছবির পেছনে টেক্সটের জন্য ক্লাসিক স্ক্রিম। টিপ: একই রঙের মধ্যে ফেড করুন (একটি হিউর স্বচ্ছ থেকে সলিড) দুটি ভিন্ন সম্পূর্ণ-স্বচ্ছ রঙের মধ্যে ফেড করার সময় ব্রাউজার যে ঘোলাটে ধূসর মধ্যবিন্দু তৈরি করে তা এড়াতে। স্টপ অস্বচ্ছতা সমন্বয় করলে টুলটি rgba আউটপুট স্বয়ংক্রিয়ভাবে সামলায়।
এই গ্রেডিয়েন্ট জেনারেটর কি cssgradient.io বা Colorzilla-র চেয়ে ভালো?
UtiloKit-এর গ্রেডিয়েন্ট জেনারেটর সেই টুলগুলো যা করে সবকিছু কভার করে — লিনিয়ার, রেডিয়াল এবং কনিক গ্রেডিয়েন্ট টাইপ, মাল্টি-স্টপ এডিটর, কোড কপি — প্লাস Tailwind CSS আউটপুট, PNG ডাউনলোড, ছবি-থেকে-গ্রেডিয়েন্ট নিষ্কাশন, শেয়ারযোগ্য লিংক এবং অ্যানিমেটেড গ্রেডিয়েন্ট সমর্থন। cssgradient.io-তে কনিক গ্রেডিয়েন্ট সমর্থন নেই এবং কোনো Tailwind আউটপুট নেই। Colorzilla-র গ্রেডিয়েন্ট এডিটর একটি ব্রাউজার এক্সটেনশন এবং PNG বা Tailwind এক্সপোর্ট করে না। এখানে সবকিছু আপনার ব্রাউজারে চলে কোনো আপলোড ছাড়া, সাইনআপ ছাড়া, এবং ফিচার গেট করা কোনো বিজ্ঞাপন ছাড়া।
আমি কি এই গ্রেডিয়েন্ট জেনারেটর আইফোন বা অ্যান্ড্রয়েডে ব্যবহার করতে পারি?
হ্যাঁ। টুলটি সম্পূর্ণ রেসপনসিভ এবং যেকোনো আধুনিক মোবাইল ব্রাউজারে কাজ করে। আইফোনে Safari বা অ্যান্ড্রয়েডে Chrome-এ খুলুন, আপনার গ্রেডিয়েন্ট তৈরি করুন, এবং CSS সরাসরি আপনার ক্লিপবোর্ডে কপি করুন। যেহেতু সবকিছু ক্লায়েন্ট-সাইডে চলে, কোনো ডাউনলোড প্রয়োজন নেই এবং পেজ একবার লোড হয়ে গেলে ধীর মোবাইল সংযোগেও কাজ করে। ড্র্যাগ-ভিত্তিক স্টপ এডিটর টাচ ইনপুটের সাথে খাপ খায়, তাই একটি ফোনে মাল্টি-স্টপ গ্রেডিয়েন্ট তৈরি করা সহজ।
Related tools
সব টুল দেখুন
নতুন Glassmorphism জেনারেটর
একটি ফ্রস্টেড-গ্লাস কার্ড ডিজাইন করুন এবং লাইভ প্রিভিউ সহ CSS কপি করুন।
নতুন CSS Text-Shadow জেনারেটর
লাইভ প্রিভিউ সহ একটি CSS text shadow সমন্বয় করুন এবং কোড কপি করুন।
নতুন কালার মিক্সার
যেকোনো অনুপাতে দুটি রঙ মিশ্রিত করুন এবং ফলাফল বা যেকোনো ধাপ কপি করুন।
নতুন ইমেজ কালার পিকার
ছবি থেকে যেকোনো রং বেছে নিন এবং এর প্রধান প্যালেট HEX, RGB ও HSL হিসেবে বের করুন।
নতুন Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
নতুন Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.