سازنده گلس‌مورفیسم (شیشه‌ای)
امتیاز کاربران
اولین نفری باشید که نظر می‌دهد!
درباره گلس مورفیسم
گلس مورفیسم (Glassmorphism) یکی از ترندهای محبوب طراحی رابط کاربری است: افکت شیشه‌ای مات با پس‌زمینه محو که در iOS و Windows 11 هم دیده می‌شود. با این ابزار میزان محوشدگی، شفافیت و رنگ شیشه را تنظیم کنید و پیش‌نمایش زنده افکت شیشه را ببینید.
کد کامل Glassmorphism CSS شامل backdrop-filter، پس‌زمینه نیمه‌شفاف، حاشیه و سایه با یک کلیک کپی می‌شود و آماده استفاده در کارت‌ها، منوها و مودال‌های سایت شماست — بدون نیاز به فتوشاپ یا افزونه.
پرسش‌های پرتکرار درباره گلس مورفیسم
گلس مورفیسم چیست؟
سبکی از طراحی رابط کاربری که عناصر را شبیه شیشه مات نشان می‌دهد: پس‌زمینه نیمه‌شفاف، محوشدگی پشت عنصر و یک حاشیه ظریف روشن.
افکت شیشه‌ای با چه کدی در CSS ساخته می‌شود؟
ترکیب backdrop-filter: blur برای محو کردن پس‌زمینه و یک background نیمه‌شفاف با rgba. این ابزار کد کامل را همراه نسخه -webkit- تولید می‌کند.
آیا backdrop-filter در همه مرورگرها کار می‌کند؟
مرورگرهای مدرن (کروم، فایرفاکس، سافاری و اج) پشتیبانی می‌کنند؛ برای سافاری پیشوند -webkit-backdrop-filter لازم است که در خروجی این ابزار گنجانده شده است.
افکت شیشه روی چه پس‌زمینه‌ای بهتر دیده می‌شود؟
روی پس‌زمینه‌های رنگارنگ، گرادیانت یا عکس. روی پس‌زمینه تک‌رنگ ساده، محوشدگی شیشه تقریباً دیده نمی‌شود.