CSS নিউমরফিজম জেনারেটর

CSS নিউমরফিজম জেনারেটর কী?

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

CSS নিউমরফিজম জেনারেটর কীভাবে ব্যবহার করবেন

1. সোয়াচ দিয়ে অথবা #e0e5ec এর মতো হেক্স মান টাইপ করে আপনার পৃষ্ঠের বেস রঙ বেছে নিন।
2. একটি আকার বেছে নিন: উঁচু প্যানেলের জন্য ফ্ল্যাট, চাপা গর্তের জন্য কনকেভ, বা গম্বুজাকৃতি উঁচুর জন্য কনভেক্স।
3. দূরত্ব নির্ধারণ করুন যাতে হালকা ও গাঢ় ছায়া আরও বাইরে সরে গিয়ে গভীরতর উঁচুভাব দেয়।
4. তীব্রতা সমন্বয় করুন যাতে হাইলাইট/ছায়ার কনট্রাস্ট আরও জোরালো বা আরও সূক্ষ্ম হয়।
5. কোমল বা ধারালো প্রান্তের জন্য ব্লার এবং কোণ গোল করতে রেডিয়াস টিউন করুন।
6. লাইভ প্রিভিউ দেখুন, তারপর তৈরি হওয়া নিউমরফিজম CSS আপনার স্টাইলশিটে কপি করুন।

উদাহরণ

রঙ #e0e5ec, আকার ফ্ল্যাট, দূরত্ব 12, তীব্রতা 15, ব্লার 24, রেডিয়াস 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

রঙ #e0e5ec, আকার কনকেভ, দূরত্ব 8, তীব্রতা 15, ব্লার 16, রেডিয়াস 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

রঙ #3a3f47, আকার কনভেক্স, দূরত্ব 6, তীব্রতা 20, ব্লার 12, রেডিয়াস 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

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

নিউমরফিজম কী?

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

ফ্ল্যাট, কনকেভ ও কনভেক্সের মধ্যে পার্থক্য কী?

ফ্ল্যাট পৃষ্ঠকে একক নিরেট রঙে রাখে, ফলে উপাদানটি পটভূমির উপরে উঁচু দেখায়। কনকেভ একটি সূক্ষ্ম গ্রেডিয়েন্ট যোগ করে যা উপরে-বাঁ দিকে গাঢ় হয়, ফলে এটি ভেতরের দিকে গর্তযুক্ত দেখায়। কনভেক্স গ্রেডিয়েন্টটি উল্টে দেয় যাতে কেন্দ্র গম্বুজাকৃতি ও উঁচু দেখায়। হালকা ও গাঢ় ছায়া একই থাকে; কেবল পৃষ্ঠের ভরাট বদলায়।

দূরত্ব, তীব্রতা, ব্লার ও রেডিয়াস কীভাবে কাজ করে?

দূরত্ব হলো উভয় ছায়ার পিক্সেল অফসেট — বড় মান উপাদানটিকে পৃষ্ঠ থেকে আরও দূরে ঠেলে দেয়। তীব্রতা নিয়ন্ত্রণ করে দুটি ছায়ার রঙ বেস রঙের তুলনায় কতটা হালকা ও গাঢ়। ব্লার ছায়ার প্রান্ত কোমল করে, এবং রেডিয়াস কোণ গোল করে। এগুলোর যেকোনোটি বদলালেই CSS লাইভ আপডেট হয়।

পটভূমির জন্য আমার কোন রঙ ব্যবহার করা উচিত?

নিউমরফিজম তখনই সঠিকভাবে দেখায় যখন উপাদানটি একই বেস রঙের পৃষ্ঠে বসে — একই রঙ প্যারেন্ট বা পেজ পটভূমিতে প্রয়োগ করুন। প্রিভিউ আপনার বেস রঙকে তার পটভূমি হিসেবে ব্যবহার করে যাতে কপি করার আগে আপনি প্রভাবটি নির্ভুলভাবে বিচার করতে পারেন।

আমার ডেটা কি কোথাও আপলোড হয়?

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