একাধিক কালার স্টপ সহ লিনিয়ার, রেডিয়াল ও কনিক CSS গ্রেডিয়েন্ট তৈরি করুন এবং কোড কপি করুন।

প্রিভিউ
CSS আউটপুট
background: ;

সবকিছু আপনার ব্রাউজারেই চলে — কোনো আপলোড নেই, সাইন-আপ নেই।

গ্রেডিয়েন্টের ধরন
deg
কালার স্টপ স্টপ যোগ করতে বারে ক্লিক করুন, সরাতে টেনে নিন
নির্বাচিত স্টপ
স্টপের রঙ
100%
%
প্রিসেট

CSS গ্রেডিয়েন্ট জেনারেটর সম্পর্কে

CSS Gradient Generator পূর্ণ ভিজ্যুয়াল নিয়ন্ত্রণ সহ linear, radial এবং conic গ্রেডিয়েন্ট তৈরি করে। গ্রেডিয়েন্ট বার ক্লিক করে কালার স্টপ যোগ করুন, সেগুলো টেনে পুনঃস্থাপন করুন, এবং প্রতিটি স্টপকে নিজস্ব রঙ, অপাসিটি ও অবস্থান দিন। Linear গ্রেডিয়েন্ট একটি কোণ নিয়ন্ত্রণ পায়; radial-গুলো একটি শেপ (circle বা ellipse) ও অবস্থান; conic-গুলো একটি শুরুর কোণ।

লাইভ প্রিভিউ ঠিক দেখায় ব্রাউজার কী রেন্ডার করবে, এবং একটি র‍্যান্ডমাইজ বাটন সহ কিউরেটেড প্রিসেটের একটি সেট থাকে যখন আপনার একটি খালি ক্যানভাসের বদলে শুরুর বিন্দু দরকার। স্টপগুলো স্বাধীনভাবে যোগ ও বাদ দেওয়া যায় — একটি গ্রেডিয়েন্টের অন্তত দুটি লাগে।

ঠিক মনে হলে, খালি গ্রেডিয়েন্ট মান বা একটি সম্পূর্ণ CSS নিয়ম কপি করুন। জেনারেটরটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে, কোনো আপলোড বা সাইন-আপ ছাড়াই, যা এটিকে বাটন, হিরো পটভূমি, বর্ডার ও টেক্সট ইফেক্টের জন্য একটি দ্রুত সহায়ক করে তোলে।

CSS গ্রেডিয়েন্ট জেনারেটর কীভাবে ব্যবহার করবেন

  1. গ্রেডিয়েন্টের ধরন বেছে নিন: linear, radial বা conic।
  2. কোণ (linear), শেপ ও অবস্থান (radial), বা শুরুর কোণ (conic) সেট করুন।
  3. কালার স্টপ যোগ করতে গ্রেডিয়েন্ট বার ক্লিক করুন এবং সেগুলো টেনে অবস্থানে নিন।
  4. প্রতিটি স্টপকে তার রঙ, অপাসিটি ও নির্দিষ্ট অবস্থান দিন।
  5. দ্রুত অনুপ্রেরণার জন্য প্রিসেট বা র‍্যান্ডমাইজ বাটন চেষ্টা করুন।
  6. গ্রেডিয়েন্ট মান বা সম্পূর্ণ CSS নিয়ম কপি করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

Linear গ্রেডিয়েন্ট একটি কোণে সরলরেখা বরাবর রঙ মিশিয়ে দেয়। Radial গ্রেডিয়েন্ট একটি কেন্দ্র বিন্দু থেকে বাইরের দিকে circle বা ellipse আকারে ছড়িয়ে পড়ে। Conic গ্রেডিয়েন্ট একটি কেন্দ্র বিন্দুর চারপাশে রঙ ঘোরায় — pie chart এবং color wheel-এর পেছনের ধরন এটাই।

অন্তত দুটি, কোনো ব্যবহারিক ঊর্ধ্বসীমা নেই। দুই বা তিনটি স্টপ পরিষ্কার পটভূমি তৈরি করে; কাছাকাছি ব্যবধানের স্টপ শক্ত রঙের ব্যান্ড তৈরি করে, যেভাবে স্ট্রাইপড ও সেগমেন্টেড ইফেক্ট তৈরি হয়।

হ্যাঁ — প্রতিটি স্টপের নিজস্ব অপাসিটি নিয়ন্ত্রণ আছে। 0% অপাসিটির একটি স্টপ গ্রেডিয়েন্টকে মিলিয়ে দেয়, যা একটি টিন্টেড ওভারলে ছবিতে মেশানো বা একটি হিরো সেকশনকে পেজ পটভূমিতে মিলিয়ে দেওয়ার প্রমিত উপায়।

সরাসরি নয় — ব্রাউজার গ্রেডিয়েন্ট মানের মধ্যে ট্রানজিশন করতে পারে না। প্রচলিত কৌশল: একটি বড় গ্রেডিয়েন্টের ওপর background-position অ্যানিমেট করা, একটি কাস্টম প্রপার্টি দিয়ে conic গ্রেডিয়েন্ট ঘোরানো, বা দুটি স্তরযুক্ত এলিমেন্ট ক্রস-ফেড করা।

হ্যাঁ, ফ্রি এবং সীমাহীন। এটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে, তাই আপনার ডিজাইন করা কিছুই সংরক্ষণ বা প্রেরণ করা হয় না।

শেয়ার করুন

জনপ্রিয় অনুসন্ধান
css গ্রেডিয়েন্ট জেনারেটর linear gradient css জেনারেটর radial gradient css conic gradient css css ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট মেকার গ্রেডিয়েন্ট কালার স্টপ টুল css গ্রেডিয়েন্ট কোণ পিকার অনলাইন গ্রেডিয়েন্ট জেনারেটর
সাহায্য দরকার?
এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।
সমস্যা রিপোর্ট করুন

আপনার নিজের ওয়েবসাইটে এই বিনামূল্যের টুলটি যোগ করুন — নিচের কোডটি কপি করে পেস্ট করুন।