Tasarım

Glassmorphism Oluşturucu

Bulanıklık, saydamlık, renk tonu ve canlı önizlemeyle buzlu cam CSS'i oluşturun Cihazınızda çalışır — hiçbir şey yüklenmez, hiçbir şey saklanmaz.

Bulanıklık12px

Saydamlık20%

Doygunluk120%

Köşe yarıçapı16px

Kenarlık kalınlığı1px

Kenarlık opaklığı40%

Renk tonu

#ffffff

Arka plan

Önizleme

Glassmorphism

CSS çıktısı

/* Glassmorphism */
background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.40);

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  background: rgba(255, 255, 255, 0.60);
}

İlgili

CSS clip-path OluşturucuTasarım Cubic-Bezier Yumuşatma DüzenleyiciTasarım SVG Blob OluşturucuTasarım

Glassmorphism Oluşturucu hakkında

Bulanıklık, saydamlık, renk tonu ve canlı önizlemeyle buzlu cam CSS'i oluşturun

Glassmorphism Oluşturucu, BrowseryTools üzerinde Tasarım ve Görsellik kategorisinde yer alan ücretsiz bir araçtır. Tamamen tarayıcınızda çalışır: verdiğiniz içerik kendi cihazınızda işlenir ve hiçbir sunucuya yüklenmez. Kayıt yok, reklam yok, filigran yok; sayfa bir kez yüklendikten sonra bağlantı olmadan da çalışmayı sürdürür.