CSS Glassmorphism generatoru
Bulanıqlıq (blur), doymuşluq (saturate), şəffaflıq və kənar parlaqlığını tənzimləyin — müasir mat şüşə kartının CSS kodunu bir kliklə əldə edin.
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}Necə istifadə etmək olar
- Hazır üslublardan birini seçin (frost, neon, obsidian, kiber və ya mirvari) və ya tənzimləmələri fərdiləşdirin.
backdrop-filter: blur()ilə şüşənin arxasındakı elementlərin bulanıqlıq dərəcəsini,saturate()ilə rənglərin canlılığını artırın.- Şüşənin fon rəngini və şəffaflığını (
opacity) seçin; təbii şüşə effekti üçün 10%–25% şəffaflıq ən yaxşı nəticə verir. - Şüşənin kənarındakı parlaq xətti (
border) və dərinlik verən kölgəni (box-shadow) qurun, sonra «Kopyala» düyməsini basın.
Bu necə işləyir
Glassmorphism nədir və necə qurulur?
Glassmorphism — interfeysdə yarımşəffaf «mat şüşə» illüziyası yaradan müasir dizayn istiqamətidir. Onun əsas sirri üç elementin harmoniyasıdır: arxa planın bulanıqlaşdırılması (backdrop-filter), yarımşəffaf fon (rgba) və şüşənin işıq saçan nazik kənarı (border).
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
}filter ilə backdrop-filter arasında fərq nədir?
Tez-tez edilən ən böyük səhv filter: blur() yazmaqdır. filter: blur() elementin özünü və daxilindəki bütün mətnləri, şəkilləri və düymələri bulandırır! backdrop-filter: blur() isə elementi və mətni kəskin saxlayır, yalnız onun ARXASINDA qalan fonu bulandırır.
/* Düzgün: kart kəskin qalır, arxa fon bulanır */
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);Parlaq kənar xətti (Edge Highlight)
Həqiqi şüşə işığı sındırır və kənarları parıldayır. Bu effekti almaq üçün karta nazik 1px solid rgba(255, 255, 255, 0.25) xətti verilir. Tünd temada və ya qara şüşədə bu xətt qaranlıq fon üzərində kartın konturlarını aydın göstərir.
Brauzer dəstəyi və Safari prefiksi
backdrop-filter xassəsi bütün müasir brauzerlərdə işləyir. Lakin Safari və iOS WebKit üçün hələ də -webkit-backdrop-filter prefiksi tövsiyə olunur. Əgər brauzer dəstəkləmirsə, fallback olaraq bir qədər daha tünd və ya qeyri-şəffaf fon vermək lazımdır (@supports (backdrop-filter: blur(1px)) ilə).
Tez-tez verilən suallar
Niyə mətnim bulanıq görünür?
Siz çox güman ki, backdrop-filter əvəzinə filter: blur() yazmısınız. backdrop-filter yalnız arxa planı bulandırır, mətni isə tam aydın saxlayır.
Ağ fon üzərində şüşə niyə bilinmir?
Şüşə effekti yalnız arxada kontrastlı rənglər, qradiyent və ya şəkil olduqda görünür. Tam ağ və ya boz təktonlu fonun üstündə şüşə itir.
-webkit- prefiksi hələ də lazımdırmı?
Bəli, iOS Safari və macOS Safari üçün -webkit-backdrop-filter yazmaq mütləqdir, əks halda effekti göstərməyə bilər.
Glassmorphism saytın sürətinə təsir edirmi?
Ekranda həddindən artıq çox böyük sahəli backdrop-filter və yüksək blur(40px) istifadəsi zəif mobil telefonlarda GPU yükünü artıra bilər. 10–18px bulanıqlıq həm vizual olaraq gözəldir, həm də çox yüngül işləyir.
