Cam efekti (glassmorphism) CSS kodu oluşturun. Bulanıklık, saydamlık, kenarlık ve renk ayarlarını görsel olarak yapın.
Bu örnek bir glassmorphism kartıdır. Arka plandaki renkleri ve desenleri görebilirsiniz. Ayarları değiştirerek efekti özelleştirin.
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.20);
Glassmorphism (cam efekti), arka plan bulanıklığı ve yarı saydam renklerle oluşturulan modern bir UI tasarım trendidir. Apple, Microsoft ve birçok büyük şirketin arayüzlerinde sıklıkla kullanılan bu efekt, backdrop-filter: blur() CSS özelliği sayesinde arka planın bulanıklaştırılmasıyla elde edilir. Saydam arka plan rengi, ince kenarlıklar ve hafif gölgelerle birleştirildiğinde zarif bir cam görünümü ortaya çıkar.
Bulanıklık, saydamlık ve renk ayarlarını kaydırıcılarla yapın. Önizleme alanında efekti anlık olarak görün. Farklı arka plan gradientleri üzerinde test edin. Hazır stillerden birini seçerek hızlıca başlayın. Oluşan CSS kodunu "Kopyala" butonuyla projenize ekleyin.
backdrop-filter özelliği Chrome, Edge, Safari ve Firefox'un modern sürümlerinde desteklenir. Eski tarayıcılar için -webkit-backdrop-filter öneki otomatik olarak eklenir. Desteklenmeyen tarayıcılarda arka plan rengi düz görünür.
Yüksek bulanıklık değerleri ve çok sayıda cam eleman, özellikle mobil cihazlarda performansı etkileyebilir. Makul değerler (10-20px blur) kullanmanız önerilir.
Evet, cam rengini siyah seçerek ve saydamlığı ayarlayarak koyu tema uyumlu glassmorphism elde edebilirsiniz. "Dark Glass" ön ayarını deneyebilirsiniz.