ট্রেন্ডি ফ্রস্টেড গ্লাস UI ইফেক্ট তৈরি করুন। ব্লার, স্বচ্ছতা ও বর্ডার সমন্বয় করে CSS সরাসরি প্রজেক্টে কপি করুন। ১০০% বিনামূল্যে। সাইন-আপ লাগে না।
আধুনিক ওয়েব ডিজাইনের জন্য ট্রেন্ডি ফ্রস্টেড গ্লাস এফেক্ট।
কঠোর প্রাইভেসি, তাৎক্ষণিক এক্সিকিউশন ও জিরো ঘর্ষণের জন্য তৈরি। সাবস্ক্রিপশন, পেওয়াল বা অ্যাকাউন্ট রেজিস্ট্রেশন লাগে না।
উজ্জ্বল ব্যাকগ্রাউন্ডে রিয়েল-টাইমে ব্লার, অপাসিটি ও স্যাচুরেশন সমন্বয় করে গ্লাস ইফেক্ট তাৎক্ষণিক প্রিভিউ করুন।
webkit-প্রিফিক্সড backdrop-filter কোড স্বয়ংক্রিয় তৈরি হয়, Safari, Chrome ও Firefox জুড়ে সামঞ্জস্য নিশ্চিত করে।
স্ট্যান্ডার্ড CSS ক্লাস তৈরি করুন অথবা ভিজ্যুয়াল ডিজাইন তাৎক্ষণিক Tailwind CSS ইউটিলিটি ক্লাসে রূপান্তর করুন।
১০০% ক্লায়েন্ট-সাইড এক্সিকিউশনে স্লাইডার টানলে গাণিতিক CSS আপডেট শূন্য ল্যাগে দেখা যায়।
আমাদের লোকাল-ফার্স্ট WebAssembly ইঞ্জিনকে পুরনো ক্লাউড টুলের সাথে তুলনা করুন।
| ফিচার | Utiliome (লোকাল ব্রাউজার) | পুরনো ক্লাউড কনভার্টার |
|---|---|---|
| লাইভ প্রিভিউ | রিয়েল-টাইম ইন্টারঅ্যাকটিভ ক্যানভাস | স্ট্যাটিক কোড জেনারেটর |
| কোড আউটপুট | ভ্যানিলা CSS ও Tailwind ইউটিলিটি ক্লাস | শুধু CSS |
| সামঞ্জস্য | স্বয়ংক্রিয় -webkit-backdrop-filter যোগ | ম্যানুয়াল প্রিফিক্সিং লাগে |
| খরচ | বিজ্ঞাপন ছাড়া চিরকাল বিনামূল্যে | প্রিমিয়াম লেআউটে পেওয়াল |
সফটওয়্যার ইনস্টল লাগে না। সবকিছু সরাসরি ওয়েব ব্রাউজারে চলে।
ব্লার স্লাইডার দিয়ে গ্লাস কার্ডের পেছনের ব্যাকগ্রাউন্ড কতটা ফ্রস্টেড হবে তা নির্ধারণ করুন।
ব্যাকগ্রাউন্ড কালার আলফা চ্যানেল পরিবর্তন করে সূক্ষ্ম ডার্ক স্লেট টিন্ট বা উজ্জ্বল সাদা ফ্রস্টেড লুক দিন।
এক্সপোর্ট বাটনে ক্লিক করে প্রোডাকশন-রেডি CSS স্নিপেট সরাসরি ক্লিপবোর্ডে কপি করুন।
দ্রুত উত্তর: Glassmorphism একটি আধুনিক ইউজার ইন্টারফেস ডিজাইন ট্রেন্ড—আধা-স্বচ্ছ ব্যাকগ্রাউন্ড, ভারী ব্যাকগ্রাউন্ড-ব্লার (ফ্রস্টেড গ্লাস), সূক্ষ্ম মাল্টি-লেয়ার ছায়া ও পাতলা বর্ডার। এটি উল্লম্ব গভীরতা ও হায়ারার্কি তৈরি করে।
macOS Big Sur, iOS এবং Windows 11 Fluent Design-এ ব্যাপকভাবে দেখা Glassmorphism আধুনিক প্রিমিয়াম ওয়েব অ্যাপ্লিকেশনের ডি ফ্যাক্টো স্ট্যান্ডার্ড হয়ে উঠেছে।
মূল দর্শন "Z-axis"-এর উপর নির্ভর করে। উপরের স্তর আধা-স্বচ্ছ করে নিচের উজ্জ্বল স্তরগুলো ভারীভাবে ব্লার করলে ডিজাইনাররা কঠিন সলিড ড্রপ শ্যাডো ছাড়াই ভিজ্যুয়াল হায়ারার্কি তৈরি করেন। ব্যবহারকারী বর্তমান অ্যাকটিভ উইন্ডোর "পেছনে" কী হচ্ছে তার প্রসঙ্গ পান।
দ্রুত উত্তর: backdrop-filter CSS প্রপার্টি কোনো এলিমেন্টের ঠিক পেছনের এলাকায় ব্লার বা কালার শিফটের মতো গ্রাফিক্যাল ইফেক্ট প্রয়োগ করে। স্ট্যান্ডার্ড 'filter' এলিমেন্ট নিজেই ব্লার করে; backdrop-filter শুধু স্বচ্ছ ব্যাকগ্রাউন্ড দিয়ে যা দেখা যায় তাকে প্রভাবিত করে।
Glassmorphism ইফেক্ট পেতে ডেভেলপাররা সম্পূর্ণ backdrop-filter CSS নিয়মের উপর নির্ভর করেন। এলিমেন্টে আধা-স্বচ্ছ ব্যাকগ্রাউন্ড কালার (যেমন background: rgba(255, 255, 255, 0.2);) দিয়ে backdrop-filter: blur(10px); প্রয়োগ করলে ব্রাউজারের রেন্ডারিং ইঞ্জিন এলিমেন্টের ঠিক পেছনের পিক্সেল নিয়ে গাণিতিকভাবে ব্লার করে এলিমেন্টের ভিতরে আঁকে।
স্ক্রল করার সময় ব্রাউজারকে ক্রমাগত পিক্সেল পুনর্গণনা করতে হয়, তাই এটি হার্ডওয়্যার-অ্যাকসিলারেটেড প্রপার্টি। Utiliome-এর জেনারেটর এই হার্ডওয়্যার মেট্রিক্স তাৎক্ষণিক হিসাব করে পারফরম্যান্স প্রভাব রিয়েল-টাইমে প্রিভিউ করতে দেয়।
দ্রুত উত্তর: Tailwind CSS গ্লাস ইফেক্টের জন্য বিল্ট-ইন ইউটিলিটি দেয়। 'backdrop-blur-md', 'bg-white/30' এবং পাতলা 'border-white/20' মিলিয়ে কাস্টম CSS ছাড়াই ফ্রস্টেড গ্লাস লুক তৈরি হয়।
কাস্টম CSS শেখার জন্য ভালো, তবে আধুনিক ডেভেলপাররা প্রায়ই Tailwind-এর মতো ইউটিলিটি ফ্রেমওয়ার্ক পছন্দ করেন।
Tailwind-এ গ্লাস কার্ড বানাতে তিনটি অপরিহার্য স্তর লাগে:
backdrop-blur-md বা backdrop-blur-lg ব্যবহার করুন।bg-white/20 বা ডার্ক মোডে bg-slate-900/40 ব্যবহার করুন।border border-white/20।Utiliome-এর জেনারেটরে স্ট্যান্ডার্ড CSS অথবা নিখুঁতভাবে ফরম্যাটেড Tailwind ক্লাস স্ট্রিং আউটপুটের টগল আছে।
দ্রুত উত্তর: Safari ঐতিহাসিকভাবে backdrop filter-এর জন্য '-webkit-' প্রিফিক্স চায়। এই প্রিফিক্স বাদ দিলে iOS ও macOS-এ গ্লাস ইফেক্ট সম্পূর্ণ ব্যর্থ হয়ে সমতল স্বচ্ছ বক্সে পরিণত হয়।
জুনিয়র ডেভেলপারদের Glassmorphism বাস্তবায়নের বড় ফাঁদ হলো Apple হার্ডওয়্যার ভুলে যাওয়া। Chrome ও Firefox স্ট্যান্ডার্ড backdrop-filter প্রপার্টি নেটিভলি সমর্থন করলেও Safari (বিশেষত পুরনো iOS) ভেন্ডর প্রিফিক্স কঠোরভাবে চায়।
-webkit-backdrop-filter: blur(10px); না দিলে Apple ব্যবহারকারী শুধু বিভ্রান্তিকর স্বচ্ছ div দেখবেন, ব্যাকগ্রাউন্ডের বিপরীতে টেক্সট সম্পূর্ণ অপাঠযোগ্য হয়ে যাবে।
Utiliome-এর CSS জেনারেটর প্রয়োজনীয় WebKit প্রিফিক্স স্বয়ংক্রিয়ভাবে আউটপুট কোডে যোগ করে, সব প্রধান অপারেটিং সিস্টেমে ডিজাইন একই দেখায়।
দ্রুত উত্তর: Glassmorphism প্রায়ই অ্যাক্সেসিবিলিটি ব্যর্থতা আনে কারণ ব্লার করা উজ্জ্বল ব্যাকগ্রাউন্ডে টেক্সট WCAG কনট্রাস্ট রেশিও পূরণ করে না। গ্লাসের গড় টিন্টের বিপরীতে টেক্সট রং যথেষ্ট গাঢ় (বা হালকা) রাখতে হবে।
Glassmorphism ট্রেন্ডের সবচেয়ে সাধারণ সমালোচনা দুর্বল অ্যাক্সেসিবিলিটি। রঙিন ব্যাকগ্রাউন্ড ইমেজ গ্লাস কার্ডের পেছনে গাঢ় নীল থেকে উজ্জ্বল হলুদে বদলালে সাদা টেক্সট হঠাৎ অদৃশ্য হয়ে যেতে পারে।
সমাধানে শক্তিশালী ব্যাকগ্রাউন্ড টিন্ট (অপাসিটি) দিন। সাদা টেক্সট ব্যবহার করলে গ্লাস ব্যাকগ্রাউন্ড রং যেমন rgba(0, 0, 0, 0.6) রাখুন। তাহলে গ্লাসের পেছনে যে উজ্জ্বল ইমেজই যাক, টেক্সট আইন অনুযায়ী ন্যূনতম 4.5:1 কনট্রাস্ট রেশিও বজায় রাখবে।
দ্রুত উত্তর: সমতল পৃষ্ঠে বসা ফ্রস্টেড গ্লাস প্যান কাচের মতো দেখায় না। খুব সূক্ষ্ম, প্রশস্ত ড্রপ শ্যাডো (যেমন box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) দিয়ে এটিকে ব্যাকগ্রাউন্ড স্তর থেকে আলাদা করুন।
মানব মস্তিষ্ক গভীরতা বোঝাতে আলোর ইঙ্গিত চায়। শুধু ব্যাকগ্রাউন্ড ব্লার করলে UI 'সমতল' দেখাতে পারে।
গ্লাসকে উঠিয়ে আনতে Z-axis-এ উঁচু করতে হয়। Utiliome-এর জেনারেটরে সূক্ষ্ম box-shadow টিউন করা যায়। শ্যাডো অপাসিটি খুব কম (প্রায় 10%) রেখে ব্লার রেডিয়াস খুব বেশি (32px) দিলে নরম অ্যাম্বিয়েন্ট অক্লুশন ইফেক্ট তৈরি হয় যা গ্লাসকে নিচের উজ্জ্বল ব্যাকগ্রাউন্ড থেকে সুন্দরভাবে আলাদা করে।
Utiliome-এর ফ্রি অনলাইন Glassmorphism CSS জেনারেটর ব্যবহার নিয়ে যা জানা দরকার।
Safari-এর জন্য '-webkit-backdrop-filter' প্রিফিক্স লাগে। Utiliome CSS এক্সপোর্টে এই প্রিফিক্স স্বয়ংক্রিয়ভাবে তৈরি করে ক্রস-ব্রাউজার সামঞ্জস্য নিশ্চিত করে।
হ্যাঁ। Utiliome-এর জেনারেটরে ভিজ্যুয়াল ডিজাইন তাৎক্ষণিক Tailwind ইউটিলিটি ক্লাসে (যেমন backdrop-blur-md bg-white/30) রূপান্তরের টগল আছে।
হ্যাঁ, বড় এলিমেন্টে অতিরিক্ত ভারী ব্লার লো-এন্ড মোবাইলে ল্যাগ করতে পারে, কারণ স্ক্রলের সময় GPU-কে ক্রমাগত পিক্সেল পুনর্গণনা করতে হয়।
আসল কাচ কিনারায় আলো প্রতিফলিত করে। খুব কম অপাসিটির 1px সলিড বর্ডার যোগ করুন (যেমন rgba(255, 255, 255, 0.2)) এই এজ রিফ্লেকশন অনুকরণ করতে।
হ্যাঁ, ১০০% বিনামূল্যে—সীমা নেই, বিজ্ঞাপন নেই, অ্যাকাউন্ট রেজিস্ট্রেশন লাগে না।