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

কোন ডিজাইন টুল ছাড়াই অত্যাশ্চর্য CSS গ্রেডিয়েন্ট তৈরি করুন

গ্রেডিয়েন্ট হল একটি ওয়েবসাইটে ভিজ্যুয়াল গভীরতা এবং আধুনিক নান্দনিকতা যোগ করার সবচেয়ে কার্যকর উপায়গুলির মধ্যে একটি। CSS গ্রেডিয়েন্টের জন্য কোনো ইমেজ ফাইলের প্রয়োজন হয় না এবং তাৎক্ষণিকভাবে লোড হয় কারণ সেগুলি ব্রাউজার দ্বারা তৈরি হয়। এই জেনারেটর আপনাকে রং বাছাই করে এবং কোণ সামঞ্জস্য করে দৃশ্যত একটি গ্রেডিয়েন্ট ডিজাইন করতে দেয়, তারপর এটি ব্যবহার করার জন্য আপনার প্রয়োজনীয় সঠিক CSS কোডটি কপি করে।

CSS গ্রেডিয়েন্টের প্রকারভেদ

লিনিয়ার গ্রেডিয়েন্ট এক রঙ থেকে অন্য রঙে সরল রেখায় রূপান্তর। কোণ দিক নির্ধারণ করে: 0° নীচে থেকে উপরে যায়, 90° বাম থেকে ডানে যায়, 180° উপরে থেকে নীচে যায় এবং 270° ডান থেকে বামে যায়। ডিজাইনের জন্য সবচেয়ে সাধারণ কোণগুলি হল 135° (তির্যক) এবং 90° (অনুভূমিক)। 0° এবং 360° এর মধ্যে যেকোনো কোণ বৈধ।

CSS: লিনিয়ার-গ্রেডিয়েন্ট(135deg, #667eea, #764ba2)

রেডিয়াল গ্রেডিয়েন্ট একটি কেন্দ্র বিন্দু থেকে বৃত্তাকার বা উপবৃত্তাকার আকারে বাইরের দিকে নির্গত হয়। এগুলি স্পটলাইট প্রভাব, বোতাম হোভার স্টেট এবং কেন্দ্রীভূত ফোকাল উপাদানগুলির জন্য দরকারী।

CSS: রেডিয়াল-গ্রেডিয়েন্ট (বৃত্ত, #667eea, #764ba2)

প্রতিটি আধুনিক ব্রাউজারে গ্রেডিয়েন্টের জন্য সমর্থন

রৈখিক এবং রেডিয়াল গ্রেডিয়েন্টগুলি সমস্ত আধুনিক ব্রাউজারে কোনও বিক্রেতা উপসর্গ ছাড়াই সমর্থিত। Safari এবং Chrome-এর পুরানো সংস্করণে একবার সঠিকভাবে রেন্ডার করার জন্য গ্রেডিয়েন্টের জন্য একটি -ওয়েবকিট- উপসর্গের প্রয়োজন ছিল, প্রাথমিক দিনগুলির একটি অবশিষ্ট ছিল যখন CSS গ্রেডিয়েন্ট সিনট্যাক্স এখনও মানসম্মত করা হচ্ছিল, কিন্তু এটি এখন অনেক বছর ধরে সাধারণ ব্যবহারে কোনো ব্রাউজারের জন্য প্রয়োজনীয় ছিল না, তাই এই জেনারেটরটি পরিবর্তন ছাড়াই সর্বত্র কাজ করে।

আরো রং যোগ করা স্টপ

জেনারেটর দুটি রঙ ব্যবহার করে, কিন্তু CSS গ্রেডিয়েন্ট যেকোনো অবস্থানে যে কোনো সংখ্যক রঙের স্টপ সমর্থন করে। মাঝপথে একটি তৃতীয় রঙ যোগ করতে:

লিনিয়ার-গ্রেডিয়েন্ট(135deg, #667eea 0%, #ff6b6b 50%, #764ba2 100%)

যেখানে রূপান্তর ঘটবে তা নিয়ন্ত্রণ করতে আপনি নির্দিষ্ট শতাংশে স্টপগুলিও নির্দিষ্ট করতে পারেন:

লিনিয়ার-গ্রেডিয়েন্ট(90deg, #000000 0%, #000000 50%, #ff0000 50%, #ff0000 100%)

এটি একটি গ্রেডিয়েন্টের পরিবর্তে একটি তীক্ষ্ণ বিভাজন তৈরি করে — নির্দিষ্ট নকশা প্রভাবের জন্য দরকারী।

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

কিছু ভাল-প্রিয় গ্রেডিয়েন্ট সমন্বয়:

• সমুদ্র: #2193b0 → #6dd5ed
• সূর্যাস্ত: #FF512F → #DD2476
• বন: #134E5E → #71B280
• বেগুনি স্বপ্ন: #667eea → #764ba2
• ফায়ার: #f7971e → #ffd200
• রাতের আকাশ: #0f0c29 → #302b63 → #24243e

CSS এ গ্রেডিয়েন্ট ব্যবহার করা

ব্যাকগ্রাউন্ড শর্টহ্যান্ড প্রোপার্টি বা ব্যাকগ্রাউন্ড-ইমেজ প্রোপার্টি গ্রেডিয়েন্ট ফাংশন সরাসরি গ্রহণ করে:

হেডার {

পটভূমি: লিনিয়ার-গ্রেডিয়েন্ট(135deg, #667eea, #764ba2);

}

উন্নত CSS কৌশল ব্যবহার করে পাঠ্য, সীমানা এবং মাস্ক স্তরগুলিতে গ্রেডিয়েন্টও প্রয়োগ করা যেতে পারে।

ইমেজ সঙ্গে গ্রেডিয়েন্ট সমন্বয়

CSS একাধিক পটভূমি স্তর ব্যবহার করে একটি পটভূমি চিত্রের সাথে একটি গ্রেডিয়েন্ট একত্রিত করার অনুমতি দেয়:

.নায়ক {

পটভূমি: লিনিয়ার-গ্রেডিয়েন্ট(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('photo.jpg') কেন্দ্র/কভার;

}

এটি একটি চিত্রের উপর একটি আধা-স্বচ্ছ গাঢ় গ্রেডিয়েন্ট ওভারলে করে, হিরো বিভাগে পাঠ্য পাঠযোগ্যতা উন্নত করে।

কিভাবে জেনারেটর ব্যবহার করবেন

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

কেন সিএসএস গ্রেডিয়েন্ট ইমেজ গ্রেডিয়েন্টকে হারায়

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

একসঙ্গে ভালো কাজ করে এমন রং নির্বাচন করা

একটি গ্রেডিয়েন্ট পালিশ হিসাবে পড়া হয় যখন দুটি রঙ নির্বিচারে সংঘর্ষের পরিবর্তে কিছু চাক্ষুষ যুক্তি ভাগ করে। একটি সাধারণ, নির্ভরযোগ্য পদ্ধতি হল একটি শান্ত, সমন্বিত অনুভূতির জন্য কালার হুইলে একসাথে কাছাকাছি থাকা দুটি রঙ (একটি অনুরূপ জোড়া, যেমন নীল বেগুনিতে চলে যাওয়া) বা দুটি রঙ যা একে অপরের বিপরীতে বসে (একটি পরিপূরক জুটি, যেমন কমলা থেকে নীল) একটি সাহসী, উচ্চ-কন্ট্রাস্ট চেহারার জন্য। দুটি রঙের হালকাতাকে যুক্তিসঙ্গতভাবে একই রাখা একটি মসৃণ চেহারার রূপান্তর তৈরি করে, যখন হালকাতার একটি বড় পার্থক্য - একটি গাঢ় নেভি একটি ফ্যাকাশে হলুদে, উদাহরণস্বরূপ - একটি আরও নাটকীয়, উচ্চ-শক্তি গ্রেডিয়েন্ট তৈরি করে। লাইভ প্রিভিউতে সরাসরি পরীক্ষা করা বিমূর্ত রঙের তত্ত্ব সম্পর্কে যুক্তির চেয়ে দ্রুততর, যেহেতু আপনি অবিলম্বে দেখতে পাবেন যে আপনার নির্দিষ্ট নকশার জন্য একটি জোড়া কাজ করে কিনা।

পাঠ্য এবং অন্যান্য উপাদানের গ্রেডিয়েন্ট

সাধারণ পটভূমির বাইরে, background-clip: text এবং একটি স্বচ্ছ পাঠ্য রঙের সংমিশ্রণ ব্যবহার করে পাঠ্যে গ্রেডিয়েন্ট প্রয়োগ করা যেতে পারে, শিরোনাম এবং লোগোগুলির জন্য একটি জনপ্রিয় প্রভাব যা একটি চিত্র ফাইলের আশ্রয় না নিয়ে একটি রঙিন, নজরকাড়া চিকিত্সা চায়৷ একই অন্তর্নিহিত গ্রেডিয়েন্ট সিনট্যাক্স বর্ডারগুলিতেও কাজ করে এবং আরও উন্নত আকৃতির প্রভাবের জন্য CSS মাস্কের সাথে একত্রিত করা যেতে পারে, যদিও এই কৌশলগুলির জন্য একটি সাধারণ ব্যাকগ্রাউন্ড গ্রেডিয়েন্টের তুলনায় একটু বেশি সমর্থনকারী CSS প্রয়োজন। এই জেনারেটর থেকে আপনার পছন্দের গ্রেডিয়েন্ট হয়ে গেলে, এটি জানার মতো যে একই রঙের স্টপগুলি দৃশ্যত সামঞ্জস্যপূর্ণ ডিজাইনের জন্য এই বিভিন্ন প্রভাবগুলির মধ্যে কয়েকটিতে পুনরায় ব্যবহার করা যেতে পারে।

ব্যক্তিগত এবং তাত্ক্ষণিক

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