6XC

CSS Glass Efekti Oluşturucu

Canlı önizlemeyle cam (glassmorphism) efekti tasarlayın — bulanıklık, saydamlık, renk tonu ve kenarlığı ayarlayıp CSS'i kopyalayın.

674 görüntülenme

Cam Efekti

Glassmorphism Nedir?

Glassmorphism, buzlu cam görünümüdür: backdrop-filter: blur() ile arkasındaki içeriği bulanıklaştıran yarı saydam bir panel, ince bir kenarlık ve gölgeyle birleşir. En iyi renkli veya görselli arka planlar üzerinde görünür — düz arka planda bulanıklık fark edilmez.

Kaydırıcıları oynattıkça canlı önizleme ve alttaki CSS anında güncellenir; kopyalamaya hazırdır. Safari için gereken -webkit-backdrop-filter öneki üretilen koda dahildir.

Sıkça Sorulan Sorular

Cam efektim neden düz görünüyor?

backdrop-filter yalnızca desenli bir arka plan üzerinde görünür — öğeyi bir degrade veya görselin üstüne koyun. Tarayıcı desteğini de kontrol edin: Safari -webkit- öneki ister (üretilen kodda var).

backdrop-filter performansı etkiler mi?

Bulanıklık GPU hızlandırmalıdır ama bedava değildir. Onlarca öğe yerine birkaç ana yüzeyde (kart, header) kullanın; mobilde bulanıklık yarıçapını ölçülü tutun.

Klasik cam görünümü için hangi değerler?

İyi bir başlangıç: %15-25 opaklıkta beyaz zemin, 8-12px bulanıklık, %30 beyaz 1px kenarlık ve 16px yarıçap — bu üreticinin varsayılanları.

Benzer Araçlar

CSS Gradient Oluşturucu Doğrusal, dairesel ve konik CSS degradelerini canlı önizlemeyle tasarlayın, kodu kopyalayın. Oluştur CSS Box Shadow (Gölge) Oluşturucu Kutu gölgesini görsel olarak tasarlayın — kaydırma, bulanıklık, yayılma, renk, opaklık ve inset — canlı önizlemeli. Oluştur CSS Border Radius Oluşturucu Köşeleri tek tek veya hep birlikte, px ya da % olarak yuvarlayın — canlı önizleme ve kopyalanabilir CSS. Oluştur CSS Text Shadow (Yazı Gölgesi) Oluşturucu Yazı gölgesini kaydırma, bulanıklık, renk ve opaklıkla tasarlayın — örnek metin üzerinde canlı önizleme. Oluştur