ساخت افکت شیشه‌ای CSS

افکت Glassmorphism (شیشه‌ای مات) با کنترل بلور، شفافیت و حاشیه بسازید.

کارت شیشه‌ای

پیش‌نمایش زنده Glassmorphism

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

ابزار ساخت افکت شیشه‌ای CSS طرح مات و نیمه‌شفاف مدرن (گلاسمورفیسم) می‌سازد. همان استایل شیشه‌ای محبوب رابط‌های امروزی.

میزان بلور، شفافیت و حاشیه را تنظیم کنید تا افکت شیشه‌ای با پیش‌نمایش زنده ساخته شود و کد CSS آن را کپی کنید.

گلاسمورفیسم با ترکیب شفافیت و بلور پس‌زمینه، حس عمق و شیشه‌ی مات ایجاد می‌کند که در کارت‌ها و پنل‌ها بسیار محبوب است.

طراحان رابط کاربری مدرن از این ابزار استفاده می‌کنند. برای تنظیم سایه‌ی مکمل این کارت‌ها از ساخت سایه CSS کمک بگیرید.

سوالات متداول

گلاسمورفیسم چیست؟

گلاسمورفیسم سبک طراحی‌ای است که با شفافیت و بلور پس‌زمینه، ظاهری شبیه شیشه‌ی مات به عناصر می‌دهد.

این افکت روی همه‌ی مرورگرها کار می‌کند؟

افکت بلور پس‌زمینه در مرورگرهای مدرن پشتیبانی می‌شود، اما در نسخه‌های خیلی قدیمی ممکن است دیده نشود.

چرا افکت شیشه‌ای من دیده نمی‌شود؟

افکت وقتی خوب دیده می‌شود که پشت عنصر یک پس‌زمینه‌ی رنگی یا تصویر وجود داشته باشد تا بلور روی آن معنا پیدا کند.