হোমে ফিরে যান

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

রঙ, দিক, stop ও লেখার contrast চোখে দেখে linear, radial বা conic gradient তৈরি করুন এবং পরিষ্কার CSS কপি করুন।

বিভাগ ফলাফলের অপেক্ষায়
সমস্যা জানান

ডিজাইন সহায়কAA মান

লাইভ প্রিভিউ

গ্রেডিয়েন্টের উপর স্পষ্ট লেখা

গ্রেডিয়েন্ট সেটিং

রঙের স্টপ

পাঠযোগ্যতা পরীক্ষা

কনট্রাস্ট

4.58 : 1

লেখার রঙ

#ffffff

প্রকাশের আগে mobile width-এ ফল পরীক্ষা করুন।

কপি করার জন্য প্রস্তুত কোড

CSS background

background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);

Inline style

style="background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);"

ভালো ব্যবহারের পরামর্শ

done

লেখা ও পটভূমির মধ্যে যথেষ্ট contrast রাখুন।

done

প্রয়োজন না হলে production UI-তে অতিরিক্ত color stop ব্যবহার করবেন না।

done

Form ও dashboard-এর পেছনে সূক্ষ্ম gradient রাখুন।

done

প্রকাশের আগে mobile width-এ ফল পরীক্ষা করুন।

গুরুত্বপূর্ণ তথ্য

হিসাব মানসম্মত সূত্রের উপর ভিত্তি করে। সহজে পড়ার জন্য প্রদর্শিত মান রাউন্ড করা হতে পারে। গুরুত্বপূর্ণ সিদ্ধান্তে সরকারি উৎসও যাচাই করুন।

ফলাফল কর্মক্ষেত্র

এই ফলাফল সংরক্ষণ করুন, আগের ফলাফলের সঙ্গে তুলনা করুন বা প্রতিবেদন শেয়ার করুন।

ভালো CSS গ্রেডিয়েন্টের বৈশিষ্ট্য

দিক, color stop-এর দূরত্ব, লেখার contrast এবং উপরের content ঠিক করে gradient পরিপাটি নাকি অতিরিক্ত ব্যস্ত দেখাবে।

গুরুত্বপূর্ণ তথ্য

  • হিসাব মানসম্মত সূত্রের উপর ভিত্তি করে।
  • সহজে পড়ার জন্য প্রদর্শিত মান রাউন্ড করা হতে পারে।
  • গুরুত্বপূর্ণ সিদ্ধান্তে সরকারি উৎসও যাচাই করুন।

সাধারণ প্রশ্ন

দুইটির বেশি রঙ ব্যবহার করা যায়?expand_more

হ্যাঁ। ছয়টি পর্যন্ত color stop যোগ করে অবস্থান বদলাতে পারেন।

লেখা পড়তে কষ্ট হচ্ছে কেন?expand_more

Contrast কম হতে পারে। অনুপাত দেখে গাঢ় বা হালকা text color বেছে নিন।

Vue, React বা Tailwind-এ ব্যবহার করা যাবে?expand_more

হ্যাঁ। CSS background বা inline style যেকোনো web framework-এ ব্যবহার করা যায়।