CSS গ্রেডিয়েন্ট জেনারেটর
লিনিয়ার, রেডিয়াল বা কনিক CSS গ্রেডিয়েন্ট দৃশ্যত ডিজাইন করুন। ৬টি পর্যন্ত কালার স্টপ যোগ করুন,
কোণ ও অবস্থান সমন্বয় করুন, তারপর তৈরি CSS — যাতে -webkit- প্রিফিক্স সহ
সংস্করণও অন্তর্ভুক্ত — কপি করুন। এটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে।
এই গ্রেডিয়েন্ট জেনারেটর কীভাবে ব্যবহার করবেন
- একটি ধরন বেছে নিন — লিনিয়ার সরলরেখায় ফেড হয়; রেডিয়াল কোনো কেন্দ্র-বিন্দু থেকে বাইরের দিকে ছড়ায়; কনিক কোনো কোণের চারপাশে পাই-চার্টের মতো ঘোরে।
- কোণ বা অবস্থান সেট করুন — লিনিয়ার গ্রেডিয়েন্টের জন্য কোণ স্লাইডার টানুন। রেডিয়াল ও কনিকের জন্য ড্রপডাউন থেকে মূল-বিন্দু বেছে নিন।
- কালার স্টপ সম্পাদনা করুন — আপনার ব্রাউজারের কালার পিকার খুলতে কালার সোয়াচে ক্লিক করুন, তারপর স্টপকে 0% থেকে 100%-এর মধ্যে যেকোনো জায়গায় রাখতে অবস্থান স্লাইডার টানুন। আরও যোগ করতে + স্টপ যোগ করুন-এ ক্লিক করুন (৬টি পর্যন্ত), বা কোনোটি সরাতে × এ ক্লিক করুন।
- কোনো প্রিসেট ব্যবহার করুন — কোনো বাছাই করা গ্রেডিয়েন্ট তাৎক্ষণিক লোড করতে যেকোনো নামযুক্ত প্রিসেটে ক্লিক করুন। এরপর আপনি সেটিকে আরও সমন্বয় করতে পারেন।
- CSS কপি করুন — আউটপুট বক্সের পাশে কপি করুন-এ ক্লিক করুন, তারপর এটি আপনার স্টাইলশিটে পেস্ট করুন।
CSS গ্রেডিয়েন্ট সিনট্যাক্স রেফারেন্স
| ফাংশন | সিনট্যাক্স | মন্তব্য |
|---|---|---|
linear-gradient() | linear-gradient(angle, color stop, …) | কোণ: 0deg = উপরে, 90deg = ডানে, 180deg = নিচে। to right, to bottom left-এর মতো কীওয়ার্ড ব্যবহার করুন। |
radial-gradient() | radial-gradient(shape size at pos, color stop, …) | আকার: circle বা ellipse। সাইজ কীওয়ার্ড: closest-side, farthest-corner (ডিফল্ট)। |
conic-gradient() | conic-gradient(from angle at pos, color stop, …) | স্টপ দৈর্ঘ্যে নয়, কোণে রাখা হয়। পাই-চার্ট ও কালার হুইলের জন্য উপযোগী। |
repeating-linear-gradient() | লিনিয়ারের মতোই | স্টপ প্যাটার্ন পুনরাবৃত্তি করে পুরো ব্যাকগ্রাউন্ড ভরে — ডোরার জন্য চমৎকার। |
| হিন্টসহ কালার স্টপ | red 20%, 40%, blue 60% | মধ্য-বিন্দু হিন্ট (রং ছাড়া শতাংশ) ট্রানজিশনের মধ্য-বিন্দু কোথায় পড়বে তা সরিয়ে দেয়। |
| স্বচ্ছ স্টপ | rgba(255,0,0,0) বা #ff000000 | যেসব স্টপ শূন্যে ফেড হয় তাদের জন্য rgba বা ৮-অঙ্কের হেক্স ব্যবহার করুন। |
CSS গ্রেডিয়েন্টের সাধারণ ব্যবহার
- হিরো ব্যাকগ্রাউন্ড — কোনো লিনিয়ার বা রেডিয়াল গ্রেডিয়েন্ট কোনো ভারী ইমেজ ফাইলের জায়গা নেয় এবং তাৎক্ষণিক লোড হয়।
- বাটন হোভার স্টেট — পরিশীলিত অনুভূতির জন্য হোভারে কোনো গ্রেডিয়েন্ট ওভারলে অ্যানিমেট করুন (::before সিউডো-এলিমেন্টে opacity ট্রানজিশন ব্যবহার করুন)।
- টেক্সট ইফেক্ট —
background-clip: textওcolor: transparentদিয়ে টেক্সটে গ্রেডিয়েন্ট প্রয়োগ করুন। - ইমেজের উপর ওভারলে — টেক্সটের পঠনযোগ্যতা বাড়াতে কোনো ইমেজের উপরে একটি অর্ধ-স্বচ্ছ লিনিয়ার গ্রেডিয়েন্ট স্ট্যাক করুন।
- প্রোগ্রেস বার ও পাই চার্ট — সম্পূর্ণতার শতাংশ দেখাতে কনিক গ্রেডিয়েন্ট একদম নিখুঁত।
- সাজসজ্জার ডিভাইডার — দুই প্রান্তে স্বচ্ছে ফেড হওয়া গ্রেডিয়েন্ট সহ একটি পাতলা এলিমেন্ট একটি মার্জিত সেকশন বিভাজক তৈরি করে।
CSS গ্রেডিয়েন্টের সংক্ষিপ্ত ইতিহাস
গ্রেডিয়েন্ট এখন CSS-এর স্বাভাবিক অংশ মনে হয়, কিন্তু বছরের পর বছর এগুলো পাওয়ার একমাত্র উপায় ছিল একটি
ব্যাকগ্রাউন্ড ইমেজ — Photoshop থেকে কষ্ট করে রপ্তানি করা কোনো PNG বা JPEG, যা একটি HTTP অনুরোধ যোগ করত,
হাই-রেজোলিউশন স্ক্রিনে ঝাপসা হয়ে যেত, এবং পুনরায় রপ্তানি না করে আকার বদলানো যেত না। WebKit ২০০৮ সালে
একটি স্বত্বাধিকারী -webkit-gradient() ফাংশন (Safari 4-এ) দিয়ে এটি ভেঙে দিল, এবং Firefox শীঘ্রই
নিজের -moz-linear-gradient() দিয়ে অনুসরণ করল। কিছু সময়ের জন্য প্রতিটি গ্রেডিয়েন্ট তিন-চারবার
লিখতে হতো — প্রতি ইঞ্জিনে একবার — যা পুরনো টিউটোরিয়ালে ভরা “প্রিফিক্স স্যুপ”-এর উৎস।
W3C আধুনিক সিনট্যাক্সকে CSS Images Module Level 3-এ মানকীকৃত করল, এবং প্রায়
২০১২–২০১৩ সাল নাগাদ linear-gradient() ও radial-gradient() প্রতিটি প্রধান
ব্রাউজারে প্রিফিক্স ছাড়া কাজ করতে শুরু করল। মানকটি পথিমধ্যে কোণের অর্থ পর্যন্ত বদলে দিল: আজকের সিনট্যাক্সে
0deg উপরের দিকে ইঙ্গিত করে এবং 90deg ডানে, অথচ প্রথম দিকের প্রিফিক্সড সংস্করণ
একটি ভিন্ন রীতি ব্যবহার করত — এ কারণেই কপি-পেস্ট করা পুরনো গ্রেডিয়েন্ট কখনো কখনো “ভুল” দিকে ইঙ্গিত করে।
CSS Images Module Level 4 পরে conic-gradient() (কোনো বিন্দুর চারপাশে ঘোরা
ধরন, ২০১৮ সালে Chrome 69-এ এল) এবং নিচে বর্ণিত রং-প্রক্ষেপ নিয়ন্ত্রণ যোগ করল। সারকথা: এই জেনারেটর যে
-webkit- প্রিফিক্স এখনও নির্গত করে তা এখন খুব পুরনো ব্রাউজারের জন্য অতিরিক্ত সাবধানতা মাত্র,
কোনো বাধ্যবাধকতা নয়।
গ্রেডিয়েন্ট রং-প্রক্ষেপ (ইন্টারপোলেশন) কীভাবে কাজ করে (এবং OKLCH আপগ্রেড)
কোনো গ্রেডিয়েন্ট আসলে ব্রাউজারের আপনার স্টপ থেকে সব মধ্যবর্তী রঙ গণনা করা, এবং সে কীভাবে গণনা করে তাতে অনেক পার্থক্য হয়। ডিফল্টভাবে, CSS sRGB কালার স্পেসে মিশ্রণ করে — লাল, সবুজ ও নীল চ্যানেলের সরল সংখ্যাগত মিশ্রণ। এটি যুক্তিসঙ্গত শোনায় কিন্তু একটি কুখ্যাত সমস্যা তৈরি করে: দুটি উজ্জ্বল পরিপূরক রঙের (ধরুন নীল থেকে হলুদ) মধ্যকার গ্রেডিয়েন্ট মাঝখানে একটি ঘোলা, বিবর্ণ ধূসরের মধ্য দিয়ে যায়, কারণ দুটি বিপরীত RGB মানের মধ্য-বিন্দু ধূসরের কাছে পড়ে। ডিজাইনাররা একে “গ্রে ডেড জোন” বলেন, এবং এ কারণেই হাতে বাছাই করা গ্রেডিয়েন্টের ভালো দেখাতে প্রায়ই একটি অতিরিক্ত মধ্যবর্তী স্টপ লাগে।
CSS Color 4 ও Images Level 4 এটি উৎসেই ঠিক করে, আপনাকে প্রক্ষেপ স্পেস বেছে নিতে দিয়ে, যেমন
linear-gradient(in oklch, blue, yellow)। OKLCH বা OKLab-এর মতো উপলব্ধিগতভাবে
সমরূপ স্পেসে মিশ্রণ করা ট্রানজিশনকে উজ্জ্বল ও সমান রাখে — রঙ ধূসরের ভিতর দিয়ে সোজা যাওয়ার
বদলে কালার হুইলের চারপাশে ভ্রমণ করে। মেরু স্পেসের জন্য আপনি হিউ-প্রক্ষেপ কীওয়ার্ড
(shorter hue, longer hue) দিয়ে পথ পর্যন্ত বেছে নিতে পারেন, হুইলের চারপাশে
ছোট বা লম্বা পথ ধরে। এই প্রক্ষেপ সিনট্যাক্স Chrome 111, Firefox 113 ও Safari 16.2
(সব ২০২৩) এ এল, তাই এটি ব্যবহার করা ক্রমশ নিরাপদ। উপরের রঙ ইন্টারপোলেশন নিয়ন্ত্রণে
একটি স্পেস বেছে নিন — এই জেনারেটর সেটি সরাসরি কপি করা CSS-এ লিখে দেয়; ক্লাসিক, সর্বাধিক-সামঞ্জস্যপূর্ণ
রূপের জন্য এটিকে sRGB (ডিফল্ট)-এ রেখে দিন। -webkit- বাক্সটি ইচ্ছাকৃতভাবে তার প্রথম
লাইনে ইন্টারপোলেশন পদ্ধতি রাখে না: যে ইঞ্জিনের ওই প্রিফিক্স দরকার সেটি
in <space> সিনট্যাক্সের আগেকার, তাই সেটি পার্সই করতে পারবে না — ওই লাইনটি সাদামাটা
sRGB ফলব্যাক হিসেবেই থাকে এবং আধুনিক ঘোষণাটি তার পরে আসে।
গ্রেডিয়েন্ট রেখা, বক্স ও “ম্যাজিক কর্নার”
জ্যামিতি বোঝা গ্রেডিয়েন্টকে অনুমান-নির্ভরের বদলে পূর্বানুমেয় করে তোলে। প্রতিটি লিনিয়ার গ্রেডিয়েন্টের একটি গ্রেডিয়েন্ট রেখা আছে — একটি অক্ষ যা আপনার সেট করা কোণে এলিমেন্টের আড়াআড়ি চলে — এবং আপনার কালার স্টপগুলো সেই রেখা বরাবর অবস্থান, যা তার উপর লম্বভাবে প্রক্ষেপিত হয়। 50%-এ রাখা স্টপ রেখার অর্ধপথে বসে; গ্রেডিয়েন্ট রেখার উপর লম্ব কোনো রেখার সবকিছু একই রঙ পায়।
- কোণ বনাম কীওয়ার্ড।
0deg“উপরের দিকে”,90deg“ডানের দিকে”, এবং এভাবে ঘড়ির কাঁটার দিকে; কীওয়ার্ড রূপ (to right,to bottom left) সাধারণ ক্ষেত্রের জন্য কেবল বেশি সহজবোধ্য নাম। - “ম্যাজিক কর্নার”। যখন আপনি কোনো অ-বর্গাকার বক্সের কোণের দিকে গ্রেডিয়েন্ট লক্ষ্য
করেন (যেমন
to bottom right), CSS কিছু চতুর করে: যে কোণের দিকে আপনি ইঙ্গিত করেন এবং তার বিপরীত কোণ, দুটোই গ্রেডিয়েন্ট রেখার উপর লম্ব একটি রেখায় বসে, তাই বক্সের আকার নির্বিশেষে গ্রেডিয়েন্ট সবসময় ঠিক কোণে শেষ হয়। এ কারণেই কোনো কোণ-গ্রেডিয়েন্ট “সঠিক” দেখায়, এলিমেন্ট কোনো উঁচু সাইডবার হোক বা চওড়া ব্যানার। - রেডিয়াল সাইজ কীওয়ার্ড। কোনো রেডিয়াল গ্রেডিয়েন্টের নাগাল
closest-sideওfarthest-corner(ডিফল্ট)-এর মতো কীওয়ার্ড দিয়ে নিয়ন্ত্রিত হয়, যা ঠিক করে শেষ কালার স্টপ এলিমেন্টের প্রান্ত ও কোণের সাপেক্ষে কোথায় পড়বে। - হার্ড স্টপ ও পুনরাবৃত্তি। দুটি স্টপকে একই অবস্থানে রাখা মিশ্রণ ছাড়া একটি খাস্তা প্রান্ত
তৈরি করে, এবং
repeating-linear-gradient()ডোরা তৈরি করতে স্টপ প্যাটার্ন টাইল করে — দুটোই বিশুদ্ধ-CSS প্যাটার্ন যাদের কোনো ইমেজের প্রয়োজন নেই।
ব্যান্ডিং, এবং গ্রেডিয়েন্ট কীভাবে মসৃণ রাখবেন
বড়, সূক্ষ্ম গ্রেডিয়েন্টে — কোনো প্রায়-কালো হিরো যা সামান্য-কম-কালোয় ফেড হয় — আপনি একটি নিরবচ্ছিন্ন মিশ্রণের বদলে হালকা ব্যান্ড দেখতে পারেন। এটি কোনো CSS বাগ নয়; এটি প্রতি-চ্যানেল ৮-বিট রঙের সীমা। কোনো চওড়া অঞ্চলে দুই প্রান্তের মধ্যে যথেষ্ট আলাদা মান কেবল নেই, তাই ডিসপ্লে তাদের মধ্যে দৃশ্যমান ধাপে পা রাখে, বিশেষত গাঢ় রঙে যেখানে চোখ ছোট পরিবর্তনের প্রতি সবচেয়ে সংবেদনশীল। তিনটি ব্যবহারিক প্রতিকার সাহায্য করে: একই রঙ কোনো ছোট দূরত্বে ছড়ান (ছোট এলিমেন্ট কম ব্যান্ড করে); মধ্যবর্তী স্টপ যোগ করুন যাতে প্রতিটি খণ্ড কম পরিসর ঘেরে; বা একটি খুব সূক্ষ্ম স্বচ্ছ নয়েজ টেক্সচার ওভারলে করুন, যা ব্যান্ড প্রান্তগুলো ডিদার করে দেয় যাতে চোখ সেগুলো মিলিয়ে ফেলে — এই কৌশল অনেক পরিশীলিত হিরো সেকশনে ব্যবহৃত হয়। OKLab-এ প্রক্ষেপও ব্যান্ডিং কমাতে পারে কারণ ধাপগুলো সংখ্যাগতের বদলে উপলব্ধিগতভাবে ব্যবধানে রাখা হয়।
গ্রেডিয়েন্টের উপর টেক্সট রাখা: একটি অ্যাক্সেসিবিলিটি নোট
কোনো গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড একটি কনট্রাস্ট মাইনফিল্ড, কারণ ব্যাকগ্রাউন্ডের রঙ এলিমেন্টের আড়াআড়ি বদলায় অথচ টেক্সটের রঙ স্থির থাকে। কোনো শিরোনামে সেখানে প্রচুর কনট্রাস্ট থাকতে পারে যেখানে গ্রেডিয়েন্ট গাঢ় এবং সেখানে খুব কম যেখানে তা হালকা হয় — এবং অ্যাক্সেসিবিলিটি বিচার হয় সবচেয়ে খারাপ বিন্দু থেকে, গড় থেকে নয়। কোনো গ্রেডিয়েন্টে টেক্সট পাঠানোর আগে, টেক্সটের রঙ সেই সবচেয়ে হালকা ব্যাকগ্রাউন্ড রঙের বিপরীতে যাচাই করুন যার উপর টেক্সট বসে এবং বডি টেক্সটের জন্য অন্তত WCAG 4.5:1 অনুপাত লক্ষ্য করুন (বড় টেক্সটের জন্য 3:1)। যখন কোনো গ্রেডিয়েন্ট টেক্সটকে পুরোটাজুড়ে পঠনযোগ্য রাখতে খুব চওড়া লাইটনেস পরিসর ঘেরে, তখন সাধারণ প্রতিকার হলো গ্রেডিয়েন্ট ও টেক্সটের মধ্যে একটি অর্ধ-স্বচ্ছ কঠিন ওভারলে, বা একটি সূক্ষ্ম টেক্সট শ্যাডো, যাতে সবচেয়ে খারাপ পরিস্থিতি সমান হয়ে যায়। আমাদের WCAG কনট্রাস্ট চেকার ফলাফল যাচাই করার সঙ্গী টুল।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
কোন কোন ব্রাউজার CSS গ্রেডিয়েন্ট সাপোর্ট করে?
সব আধুনিক ব্রাউজার — Chrome, Firefox, Safari, Edge ও Opera — ২০১৩ সাল থেকে কোনো ভেন্ডর প্রিফিক্স ছাড়াই linear-gradient ও radial-gradient সাপোর্ট করে। বর্তমান ব্রাউজারগুলোতে এই দুই ধরনের জন্য -webkit- প্রিফিক্স আর প্রয়োজন নেই, যদিও এটি রাখলে কোনো ক্ষতিও নেই। conic-gradient-এর সাপোর্ট কিছুটা নতুন (Chrome 69+, Safari 12.1+, Firefox 83+) তবু ২০২৪ সাল পর্যন্তও এটি ৯৫%-এর অনেক বেশি ব্যবহারকারীকে কভার করে। আপনি কোনো পলিফিল ছাড়াই তিনটি ধরনই প্রোডাকশনে নিরাপদে ব্যবহার করতে পারেন।
CSS গ্রেডিয়েন্ট কি পেজের পারফরম্যান্সে প্রভাব ফেলে?
CSS গ্রেডিয়েন্ট GPU দিয়ে রেন্ডার হয় এবং অত্যন্ত দ্রুত — কোনো গ্রেডিয়েন্ট ইমেজ ফাইল লোড করার চেয়ে অনেক দ্রুত। এগুলো কোনো HTTP অনুরোধ যোগ করে না, যেকোনো রেজোলিউশনে (Retina/HiDPI স্ক্রিনসহ) নিখুঁতভাবে স্কেল করে, এবং লেআউট পুনরায় গণনা না করিয়েই CSS ট্রানজিশন বা কীফ্রেম দিয়ে অ্যানিমেট করা যায় (এগুলো শুধু কম্পোজিটিং ট্রিগার করে)। সাজসজ্জার ইমেজের বদলে ব্যাকগ্রাউন্ড হিসেবে গ্রেডিয়েন্ট ব্যবহার করা অনুমোদিত পারফরম্যান্স বেস্ট-প্র্যাকটিসগুলোর একটি।
আমি টেক্সটে গ্রেডিয়েন্ট কীভাবে প্রয়োগ করব?
টেক্সটে গ্রেডিয়েন্ট প্রয়োগ করতে আপনার তিনটি CSS প্রপার্টি প্রয়োজন: background-কে আপনার গ্রেডিয়েন্টে সেট করুন, -webkit-background-clip: text সেট করুন (নন-WebKit ব্রাউজারের জন্য background-clip: text-ও), এবং color (বা -webkit-text-fill-color)-কে transparent সেট করুন। উদাহরণস্বরূপ: .gradient-text { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; }। খেয়াল রাখুন background-clip: text এখনও সব ব্রাউজারে -webkit- প্রিফিক্স ছাড়া সাপোর্টেড নয়, তাই দুটোই রাখুন।
আমি কি একই এলিমেন্টে একাধিক গ্রেডিয়েন্ট লেয়ার করতে পারি?
হ্যাঁ। CSS আপনাকে একটি এলিমেন্টে একাধিক ব্যাকগ্রাউন্ড, গ্রেডিয়েন্টসহ, কমা দিয়ে আলাদা করে স্ট্যাক করতে দেয়। প্রথম মানটি সবার উপরে থাকে। উদাহরণস্বরূপ: background: radial-gradient(circle at 20% 50%, rgba(255,107,107,0.4) 0%, transparent 50%), linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); — এটি একটি গাঢ় লিনিয়ার গ্রেডিয়েন্টের উপরে একটি নরম লাল রেডিয়াল আভা বিছিয়ে দেয়। প্রতিটি লেয়ার আলাদা ধরনের হতে পারে এবং তার নিজস্ব আকার, অবস্থান ও স্টপ থাকতে পারে।
আমি দুটি স্টপের মধ্যে ফেড ছাড়া তীক্ষ্ণ রং-পরিবর্তন (শার্প ট্রানজিশন) কীভাবে তৈরি করব?
কোনো নরম মিশ্রণের বদলে দুটি রঙের মধ্যে একটি কঠিন, আকস্মিক প্রান্ত তৈরি করতে, দুটি কালার স্টপকে একই অবস্থানে রাখুন (বা একটিকে ঠিক অন্যটির পরে)। উদাহরণস্বরূপ: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%) 50%-এ কোনো ট্রানজিশন ছাড়াই একটি তীক্ষ্ণ বিভাজন তৈরি করে। এই কৌশল দিয়ে আপনি ডোরা ও দাবা-বোর্ডের মতো প্যাটার্ন তৈরি করতে পারেন। এই জেনারেটরে, এই প্রভাব পেতে দুটি স্টপকে একই অবস্থান-মানে টেনে আনুন।
CSS গ্রেডিয়েন্ট কি অ্যানিমেট করা যায়?
CSS গ্রেডিয়েন্ট নিজে সরাসরি ট্রানজিশন করা যায় না কারণ background-image কোনো অ্যানিমেটযোগ্য প্রপার্টি নয়। তবে দুটি ব্যবহারিক উপায় আছে: (1) কোনো সিউডো-এলিমেন্টের (::before বা ::after) opacity অ্যানিমেট করুন যা এলিমেন্টের উপরে নতুন গ্রেডিয়েন্ট রাখে — এতে দুই গ্রেডিয়েন্টের মধ্যে নরম ফেড হয়। (2) কালার স্টপের জন্য CSS কাস্টম প্রপার্টি (ভেরিয়েবল) ব্যবহার করুন এবং সেগুলো @property (Houdini) দিয়ে অ্যানিমেট করুন, যা Chrome ও Edge-এ প্রথম-শ্রেণির অ্যানিমেটেড গ্রেডিয়েন্ট সাপোর্ট দেয়।