CSS

Glassmorphism

Bulanıklık, saydamlık ve ton ile cam efekti; backdrop-filter CSS.

Glassmorphism

Cam efekti önizlemesi

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

Hazır ayarlar

Bulanıklık10pxSaydamlık20%Doygunluk140%Kenar35%Köşe16px

Ton (tint)

Uygulamada nasıl?

1Dikdörtgen çiz → Fill beyaz/renk, opacity'yi düşür.
2Effects > '+' > Background blur → bulanıklığı 10px yap.
3İnce beyaz bir stroke ekle.