CSS গ্রেডিয়েন্ট জেনারেটর

CSS গ্রেডিয়েন্ট জেনারেটর কী?#

একটি CSS গ্রেডিয়েন্ট হলো দুটি বা ততোধিক রঙের মধ্যে একটি মসৃণ রূপান্তর, যা ব্রাউজার দ্বারা একটি লাইন, রশ্মি, বা কোণের চারপাশে আঁকা হয়। ভালোভাবে ব্যবহার করলে, একটি একক গ্রেডিয়েন্ট একটি ২০০-কিলোবাইট ব্যাকগ্রাউন্ড ছবিকে প্রতিস্থাপন করতে পারে — এটি যেকোনো আকারে স্কেল করে, প্রতিটি পর্দায় তীক্ষ্ণ থাকে, এবং এক লাইন CSS-এ শিপ করে। কঠিন অংশটি সিনট্যাক্স লেখা নয়, এটি আপনি রঙ, কোণ এবং স্টপ টিউন করার সময় ফলাফল দেখা।

এই পৃষ্ঠাটি এর জন্য একটি লাইভ ওয়ার্কবেঞ্চ। আপনি স্টপ টেনে আনেন, কোণ স্লাইড করেন, পাঁচ ধরনের গ্রেডিয়েন্টের মধ্যে স্যুইচ করেন, এবং পৃষ্ঠাটি আপনার স্টাইলশিটের প্রয়োজনীয় সঠিক linear-gradient(...) (বা radial-, conic-, repeating-) ঘোষণা নির্গত করে — সাথে একটি পেস্ট-প্রস্তুত Tailwind v4 @theme স্নিপেট যা প্রতিটি রঙকে একটি পুনরায় ব্যবহারযোগ্য টোকেনে পরিণত করে।

যেভাবে ব্যবহার করবেন#

1. একটি গ্রেডিয়েন্ট ধরন বেছে নিন:
   • লিনিয়ার — একটি নির্বাচিত কোণে একটি সরল রেখা বরাবর রঙের রূপান্তর। ডিফল্ট; বেশিরভাগ ব্যবহারের ক্ষেত্রে কভার করে।
   • রেডিয়াল — একটি কেন্দ্র বিন্দু থেকে রঙ বাইরের দিকে ছড়ায়। স্পটলাইট এবং ভিনিয়েটের জন্য ভালো।
   • কনিক — রঙ একটি পাই চার্টের মতো একটি কেন্দ্রের চারপাশে ঘোরে। কালার হুইল এবং স্পিনার ব্যাকগ্রাউন্ডের জন্য কার্যকর।
   • পুনরাবৃত্ত লিনিয়ার / পুনরাবৃত্ত রেডিয়াল — একই গ্রেডিয়েন্ট টাইল করা, স্ট্রাইপ বা কেন্দ্রবিন্দু রিং তৈরি করে।
2. লিনিয়ার এবং কনিক ধরনের জন্য, কোণ স্লাইডার (0–359°) টেনে আনুন। প্রিভিউটি লাইভ আপডেট হয়; 0° উপরের দিকে নির্দেশ করে, 90° ডানদিকে নির্দেশ করে, 135° হলো ক্লাসিক উপরে-বাম-থেকে-নিচে-ডান তির্যক।
3. রেডিয়াল ধরনের জন্য, একটি আকৃতি বেছে নিন — বৃত্ত বা উপবৃত্ত (রেসপন্সিভ ফুল-ব্লিড ব্যাকগ্রাউন্ডের জন্য ডিফল্ট)।
4. আপনার কালার স্টপ পরিচালনা করুন:
   • প্রতিটি স্টপের একটি রঙের সোয়াচ এবং গ্রেডিয়েন্ট বারে একটি অবস্থান রয়েছে (০–১০০%)।
   • একটি স্টপ সরাতে বারের হ্যান্ডলগুলো টেনে আনুন, অথবা একটি সুনির্দিষ্ট অবস্থান টাইপ করুন।
   • একটি নতুন স্টপ যোগ করতে + স্টপ যোগ করুন ক্লিক করুন; একটি স্টপ মুছতে তার × চিহ্নে ক্লিক করুন।
   • একটি গ্রেডিয়েন্টের অন্তত দুটি স্টপ প্রয়োজন।
5. নিচের দুটি আউটপুট পড়ুন: CSS (কাঁচা গ্রেডিয়েন্ট মান) এবং Tailwind v4 (একটি @theme ব্লক যা প্রতিটি রঙকে একটি --color-grad-* টোকেন হিসেবে নিবন্ধন করে, সাথে একটি .bg-gradient ইউটিলিটি যা সেগুলো গ্রহণ করে)। প্রতিটির পাশে কপি বোতাম ব্যবহার করুন।

প্রধান বৈশিষ্ট্য#

• এক টুলে পাঁচ ধরনের গ্রেডিয়েন্ট। লিনিয়ার, রেডিয়াল, কনিক, এবং উভয় পুনরাবৃত্ত ভ্যারিয়েন্ট — রঙ পুনরায় না লিখেই স্যুইচ করুন।
• লাইভ, পিক্সেল-নির্ভুল প্রিভিউ। ডানদিকের বড় ব্লকটি হলো প্রকৃত গ্রেডিয়েন্ট যা আপনি শিপ করবেন; আপনি যা দেখেন তাই আপনার স্টাইলশিট পায়।
• ড্র্যাগ-হ্যান্ডেল স্টপ বার। টেনে আনার মাধ্যমে যেকোনো কালার স্টপ পুনরায় অবস্থান করুন; আপনি সরানোর সময় শতাংশ আপডেট হয়।
• দ্বৈত আউটপুট। হাতে লেখা স্টাইলশিটের জন্য কাঁচা CSS, এবং ইউটিলিটি-ফার্স্ট প্রকল্পের জন্য একটি Tailwind v4 @theme স্নিপেট (প্রতিটি স্টপ একটি --color-grad-* টোকেনে পরিণত হয়, একটি .bg-gradient ইউটিলিটি দ্বারা গৃহীত) — উভয় সর্বদা সিঙ্কে।
• কোণ রিডআউট। স্লাইডারের পাশে সঠিক ডিগ্রি দেখানো হয়, যাতে আপনি অন্য কোথাও একটি গ্রেডিয়েন্ট সুনির্দিষ্টভাবে পুনরুত্পাদন করতে পারেন।
• শূন্য আপলোড। রঙ, স্টপ এবং কোণ কখনো ব্রাউজার ছাড়ে না।

বিস্তারিত উদাহরণ#

ধরুন আপনি ইন্ডিগো থেকে টিলে যাওয়া একটি শান্ত, সামান্য তির্যক ব্র্যান্ড গ্রেডিয়েন্ট চান। লিনিয়ার বেছে নিন, কোণ 135° সেট করুন, এবং দুটি স্টপ ব্যবহার করুন:

• স্টপ ১: #4F46E5 at 0% (ইন্ডিগো)
• স্টপ ২: #0D9488 at 100% (টিল)

CSS আউটপুট হলো:

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

এবং Tailwind v4 স্নিপেট হলো:

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

হেক্স মানগুলো ইনলাইন করার বদলে, Tailwind আউটপুট প্রতিটি স্টপকে @theme-এর ভেতরে একটি --color-grad-* ডিজাইন টোকেন হিসেবে নিবন্ধন করে, তারপর একটি একক .bg-gradient ইউটিলিটিকে var(...)-এর মাধ্যমে সেগুলোর দিকে নির্দেশ করে। একটি ভেরিয়েবল পরিবর্তন করুন এবং এটি গ্রহণ করে এমন প্রতিটি স্থান একসাথে আপডেট হয়। মাঝখানে একটি তৃতীয়, নরম রঙ চান? + স্টপ যোগ করুন ক্লিক করুন, #7C3AED at 50% সেট করুন, এবং স্নিপেটে একটি --color-grad-2: #7C3AED টোকেন যোগ হয় যখন টিল নিচে --color-grad-3-এ সরে যায় — স্টপগুলো সর্বদা অবস্থান অনুযায়ী পুনরায় নম্বর দেওয়া হয়, তাই নামগুলো কখনো বারের সাথে আউট অফ সিঙ্ক হয় না।

সাধারণ জিজ্ঞাসা#

লিনিয়ার, রেডিয়াল এবং কনিকের মধ্যে পার্থক্য কী?#

লিনিয়ার একটি কোণ দ্বারা সংজ্ঞাত একটি সরল রেখা বরাবর রূপান্তর করে। রেডিয়াল একটি বিন্দু থেকে বাইরের দিকে রূপান্তর করে, রঙের একটি বৃত্ত বা উপবৃত্ত তৈরি করে। কনিক একটি বিন্দুর চারপাশে রূপান্তর করে — একটি কালার হুইল ঘোরানোর কল্পনা করুন, যেখানে প্রতিটি কোণ একটি ভিন্ন হিউ। প্রতিটির পুনরাবৃত্তি ভ্যারিয়েন্ট স্ট্রাইপ বা রিং তৈরি করতে প্যাটার্ন টাইল করে।

Tailwind আউটপুট কেন রঙ ইনলাইন করার বদলে --color-grad-* ভেরিয়েবল সংজ্ঞায়িত করে?#

Tailwind v4 কনফিগারেশনকে @theme ব্লকের মাধ্যমে CSS-এ নিয়ে এসেছে, যেখানে প্রতিটি এন্ট্রি একটি পুনরায় ব্যবহারযোগ্য ডিজাইন টোকেনে পরিণত হয়। প্রতিটি স্টপকে --color-grad-1, --color-grad-2, … হিসেবে নির্গত করে এবং .bg-gradient-কে var(...)-এর মাধ্যমে সেগুলো উল্লেখ করতে দিয়ে, স্নিপেটটি আপনাকে এমন একটি প্যালেট দেয় যা আপনি যেকোনো জায়গায় পুনরায় ব্যবহার করতে পারেন — বর্ডার, টেক্সট, ছায়া — শুধু এই একটি ব্যাকগ্রাউন্ড নয়। একটি একক ভেরিয়েবল সম্পাদনা করুন এবং প্রতিটি গ্রহণকারী একসাথে আপডেট হয়। (Tailwind v3-এ কোনো @theme নেই; আপনার স্টাইলশিটে এর বদলে CSS আউটপুট পেস্ট করুন।)

আমি কি একটি মসৃণ মিশ্রণের বদলে একটি কঠিন রঙের ধাপ তৈরি করতে পারি?#

হ্যাঁ। দুটি স্টপকে একই অবস্থান দিন — উদাহরণস্বরূপ #000 50% এবং #fff 50%। তাদের মধ্যে কোনো দূরত্ব না থাকলে, মিশ্রণের শূন্য প্রস্থ থাকে, তাই রূপান্তরটি একটি কঠিন রেখায় পরিণত হয়। এভাবেই আপনি একটি ছবি ছাড়া স্ট্রাইপ বা ব্যান্ডেড ব্যাকগ্রাউন্ড তৈরি করেন।

কনিক গ্রেডিয়েন্টটি আমার ডিজাইন টুলের তুলনায় ঘোরানো দেখাচ্ছে। কেন?#

ভিন্ন টুল একটি কনিক গ্রেডিয়েন্টের শুরুর কোণ ভিন্নভাবে পরিমাপ করে। CSS from কোণকে উপরের (১২টা) থেকে ঘড়ির কাঁটার দিকে পরিমাপ করে। আপনার ডিজাইন টুল যদি ডান (৩টা) থেকে বা ঘড়ির কাঁটার বিপরীতে পরিমাপ করে, তবে প্রিভিউ মেলে যাওয়া পর্যন্ত ৯০° বিয়োগ বা যোগ করুন (বা চিহ্ন উল্টান)।