গ্রেডিয়েন্ট জেনারেটর
ট্রেন্ডিং 🔥CSS গ্রেডিয়েন্ট তৈরি করুন
গ্রেডিয়েন্ট জেনারেটর কীভাবে ব্যবহার করবেন
- 1গ্রেডিয়েন্ট টাইপ বেছে নিন
- 2রং যোগ করুন এবং স্টপ পয়েন্ট সামঞ্জস্য করুন
- 3কোণ বা দিক সেট করুন
- 4জেনারেটেড CSS কপি করুন
গ্রেডিয়েন্ট জেনারেটর সম্পর্কে
গ্রেডিয়েন্ট জেনারেটর হল সুন্দর CSS গ্রেডিয়েন্ট তৈরির একটি ভিজ্যুয়াল টুল। এটি লিনিয়ার, রেডিয়াল এবং কোনিক গ্রেডিয়েন্ট সমর্থন করে।
গ্রেডিয়েন্ট জেনারেটর-এর মূল বৈশিষ্ট্যসমূহ
- live preview সহ visual gradient builder
- custom position-এ একাধিক color stop যোগ করা যায়
- visual direction dial দিয়ে gradient angle (0–360°) সামঞ্জস্য করুন
- প্রতিটি stop-এর জন্য HEX, RGB এবং HSL color ইনপুট
- এক-ক্লিকে generated CSS code কপি করুন
- unlimited color stop সহ linear gradient সমর্থন করে
- সম্পূর্ণ browser-এ কাজ করে — কোনো server প্রয়োজন নেই
- Generated CSS পরিষ্কার এবং যেকোনো stylesheet-এ পেস্ট করার জন্য প্রস্তুত
উদাহরণ
Blue-to-purple hero background gradient তৈরি
landing page hero section background-এর জন্য diagonal gradient তৈরি করুন।
ইনপুট
Angle: 135°, Stop 1: #3B82F6, Stop 2: #8B5CF6
আউটপুট
background: linear-gradient(135deg, #3B82F6, #8B5CF6);
Multi-stop sunset gradient তৈরি
decorative UI element-এর জন্য warm three-color gradient তৈরি করুন।
ইনপুট
Angle: 180°, Stops: #FF6B6B at 0%, #FFE66D at 50%, #FF8E53 at 100%
আউটপুট
background: linear-gradient(180deg, #FF6B6B 0%, #FFE66D 50%, #FF8E53 100%);
সাধারণ ব্যবহারের ক্ষেত্র
- landing page ও marketing site-এর hero section background তৈরি করা
- subtle gradient transition দিয়ে button hover effect ডিজাইন করা
- gradient background ব্যবহার করে card border ও divider তৈরি করা
- background-clip: text-এর সাথে মিলিয়ে CSS text gradient তৈরি করা
- UI component-এর জন্য gradient color scheme তৈরি করা
- visual adjustment থেকে generated code দেখে CSS gradient syntax শেখা
সমস্যা সমাধান
Gradient transition-এর পরিবর্তে solid color দেখাচ্ছে
সমাধান
নিশ্চিত করুন কমপক্ষে দুটি distinct color stop সংজ্ঞায়িত করা হয়েছে। উভয় stop একই রঙ হলে gradient solid fill দেখাবে।
Gradient direction প্রত্যাশিত নয়
সমাধান
CSS gradient angle 0° (নিচ থেকে উপরে) থেকে শুরু হয় এবং clockwise বাড়ে। 90° বাম থেকে ডানে, 180° উপর থেকে নিচে।
Generated CSS আমার browser-এ কাজ করছে না
সমাধান
standard CSS syntax ব্যবহার করে linear gradient সব আধুনিক browser-এ সমর্থিত। IE11 সমর্থনের জন্য vendor-prefixed fallback যোগ করুন।
সচরাচর জিজ্ঞাসিত প্রশ্ন
কোন ধরনের gradient সমর্থিত?
custom direction ও multiple color stop সহ linear gradient সম্পূর্ণভাবে সমর্থিত। Radial ও conic gradient ভবিষ্যত আপডেটে যোগ হতে পারে।
আমি কীভাবে transparent gradient তৈরি করব?
0 alpha value সহ RGBA বা HSLA ব্যবহার করে color stop যোগ করুন। উদাহরণস্বরূপ, rgba(0,0,0,0) থেকে rgba(0,0,0,1) transparent থেকে solid black-এ fade করে।
আমি কি repeating gradient তৈরি করতে পারি?
generator standard linear-gradient() তৈরি করে। কপি করার পরে আপনার stylesheet-এ property টি repeating-linear-gradient()-এ পরিবর্তন করুন।
background-color ও background-এর মধ্যে পার্থক্য কী?
CSS gradient হলো image, color নয়, তাই background-color নয় বরং background বা background-image property ব্যবহার করতে হবে।
আমি কি text-এর জন্য এই gradient ব্যবহার করতে পারি?
হ্যাঁ। CSS element-এ apply করুন, তারপর যোগ করুন: -webkit-background-clip: text; background-clip: text; color: transparent;
আমি কতটি color stop যোগ করতে পারি?
CSS gradient unlimited color stop সমর্থন করে। usability-এর জন্য 2–4 stop রাখার পরামর্শ দেওয়া হয়।
আমার ডেটা কি server-এ পাঠানো হয়?
না। Gradient generation সম্পূর্ণ আপনার browser-এ হয়। কোনো ডেটা প্রেরণ বা সংরক্ষণ হয় না।
আমি কি gradient image হিসেবে export করতে পারি?
টুলটি CSS code তৈরি করে। image হিসেবে export করতে preview-এর screenshot নিন।