Glassmorphism Üretici

Bu araç ne işe yarar?

Glassmorphism Generator, buzlu cam etkisini kaydırıcılarla ayarlayıp anında hazır CSS üreten bir araçtır. Bulanıklık, opaklık, doygunluk, köşe yarıçapı ve kenarlık şeffaflığını canlı önizleme üzerinde görerek modern kart ve panel tasarımları yapan tasarımcı ve geliştiriciler için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Beş kaydırıcıyla ince ayar

Bulanıklığı (0-30px), arka plan opaklığını (0-1), doygunluğu (%100-300), köşe yarıçapını (0-40px) ve kenarlık şeffaflığını ayrı ayrı ayarlarsınız. Renkli gradyan zemin üzerindeki örnek kart değişikliklerinizi gerçek zamanlı gösterir, böylece sayıları tahmin etmeden istediğiniz cam görünümünü yakalarsınız. Doygunluk değeri zeminin renklerini cama yansıtarak etkiyi daha canlı kılar.

Üretilen CSS ve tarayıcı desteği

Çıktı, backdrop-filter ile birlikte -webkit-backdrop-filter satırını da içerir; bu sayede Safari ve WebKit tabanlı tarayıcılarda da etki çalışır. Ayrıca background olarak rgba(255,255,255,...), border-radius ve yarı saydam bir border üretilir. Kopyala düğmesiyle kuralları alıp .glass-card gibi bir sınıfa yapıştırmanız yeterlidir. Etkinin görünmesi için elemanın arkasında renkli veya görselli bir zemin bulunmalıdır.

Sıkça sorulan sorular

Cam etkisi neden bazen görünmüyor?

backdrop-filter yalnızca elemanın arkasında bulanıklaştırılacak bir içerik (renkli zemin, görsel veya başka elemanlar) olduğunda görünür. Düz beyaz bir zemin üzerinde etki fark edilmez.

Doygunluk (saturation) ne işe yarar?

saturate(%180) gibi değerler, camın arkasındaki renkleri daha canlı gösterir ve gerçek buzlu cama benzer derinlik katar. %100 nötr, daha yüksek değerler daha doygun bir görünüm verir.