Tasarım & CSS

Glassmorphism Üretici

Backdrop-blur + doygunluk + arka plan tonu + kenarlık + gölge kontrolleriyle glassmorphism CSS'ini görsel olarak üret. Bir hazır şablon seç (iOS, Apple Card, Discord modal…), birden fazla arka planda önizle ve CSS, Tailwind, React inline, SCSS veya JSON olarak kopyala.

backdrop-filter Chrome 76+, Firefox 103+, Safari 9+ (-webkit- ön ek ile) gerektirir.

Canlı önizleme

Arka planı gradient, fotoğraf, ızgara ya da düz renk arasında değiştir — cam kart anında güncellenir.

AaBb 123

Cam kart

Genişlik

Yükseklik

Hazır şablonlar

iOS, Apple Card, Windows 11 Mica, Discord, donma seviyeleri ve renkli cam çeşitleri.

Kontroller

Backdrop filtresini, arka plan tonunu, çerçeveyi ve gölgeyi canlı önizleme ile ayarla.

Arka plan bulanıklığı

Arka plan opaklığı

Doygunluk

Parlaklık

Arka plan rengi

ÇerçeveGradient çerçeve

Kalınlık

Yarıçap

Opaklık

Düşen gölgeİç parlama (iOS)

Yatay konum

Dikey konum

Bulanıklık

Opaklık

Kod çıktısı

CSS bloğu (-webkit- yedeği ile), Tailwind sınıfları, React inline stil, SCSS mixin veya JSON.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}