Türkçe
Canlı önizleme ile cam ve neumorphism CSS yüzeyleri tasarla.
Son güncelleme
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);*Glassmorphism* ve *neumorphism*, modern web tasarımının her köşesinde gördüğün iki yüzey stili. **Cam**, buzlu cam görüntüsüdür — arkasındaki şeyi bulanıklaştıran yarı saydam bir kart, genelde renkli bir degrade veya fotoğraf üstüne yerleşir. **Neumorphism** ise yumuşak plastik görüntüsüdür — arkaplanla aynı tondaki ışık ve gölge ile yüzeyden çıkıyor (veya çöküyor) gibi görünen bir kart.
Her iki efekt de saf CSS — resim, JavaScript, kütüphane yok. Cam, backdrop-filter: blur(), yarı saydam dolgu ve ince kenarlığa dayanır. Neumorphism iki box-shadow'dan kurulur: biri yüzeyden biraz koyu, diğeri biraz açık ve zıt yönde kaydırılmış. Matematik kısa, ama her şey yerine oturana kadar değerleri elle ayarlamak vakit alır. Üretici bu adımı atlatır.
Bu araç önemli her parametre için kaydırıcılar, yapılandırılabilir bir arka plan üzerinde önizleme paneli (cam efekti kırması için bir şeye ihtiyaç duyar) ve tek tıkla CSS kopyalama sunar. Her şey tarayıcında çalışır — snippet'i doğrudan stil dosyana yapıştır.
backdrop-filter, glassmorphism'in kalbidir — elemanın *arkasındaki* şeyi bulanıklaştırır ve doyurur, elemanın kendisini değil.rgba(...), düşük alfa) ve ince açık kenarlık ister; birini çıkarırsan efekt çöker.box-shadow kullanır, bir tane değil: sağ-altta koyu, sol-üstte açık vurgu — her ikisi de saf siyah/beyaz değil yüzeyin tonunda.Üstten **Cam** ve **Neumorphism** arasında geç. Cam bir arka plan ister; neumorphism senin kontrol ettiğin düz bir yüzey renginin üstünde oturur.
Cam için ana kollar: *blur* (arka planın ne kadar bulanıklaştığı), *arkaplan opaklığı* (kartın ne kadar saydam olduğu), *tint* (hafif renk tonu). Neumorphism için ana kollar: *mesafe* (gölgelerin ne kadar kaydığı), *blur* (ne kadar yumuşak olduğu), *yoğunluk* (gölgelerin yüzeyden ne kadar saptığı).
Cam canlı degrade veya fotoğraf üstünde parlar. Neumorphism saf olmayan yumuşak renklerde parlar (#e0e5ec klasik neumorphic gridir). Araç tıklanabilir presetlerle gelir.
Üç çeşit: **Kabarık** (çıkıntılı), **Düz** (gradient yok, aynı gölgeler) ve **Inset** (basık). Üçünü dene — matematik aynı, sadece yön değişiyor.
**Kopyala**'ya bas ve snippet'i stil dosyana yapıştır. Çıktı üretime hazır: eski Safari için -webkit-backdrop-filter, sıralı özellikler ve eşleşen border-radius dahil.
Her efektin gerçekte dayandığı özellikler. Tam referans: MDN — backdrop-filter ve box-shadow.
| Stil | Anahtar özellikler | Neyi ayarla | Notlar |
|---|---|---|---|
| Cam | backdrop-filter, yarı saydam background, ince border | Blur, doygunluk, alfa | Safari uyumluluğu için her zaman -webkit-backdrop-filter ekle |
| Neumorphism (kabarık) | İki box-shadow + doğrusal gradient dolgu | Mesafe, blur, açık/koyu yoğunluk | Gölge renkleri saf siyah/beyaz değil yüzey tonuyla uyumlu olmalı |
| Neumorphism (inset) | İki inset box-shadow | Kabarıkla aynı kontroller | Inset basılmış buton veya çökmüş input gibidir |
| Karışık / hibrit | Neumorphic plakanın üstüne cam | Dikkatle yığ — çok filtre performansı düşürür | Dashboardlarda yaygın: neumorphic kart + cam başlık |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Klasik glassmorphism. saturate(180%) blur'un arkasına canlı bir renk ipucu ekler — onsuz buzlu cam soluk görünür. Bunu hero gradient veya foto üstüne bırak.
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;İki gölge ağır işi yapar: sağ-altta koyu, sol-üstte parlak vurgu. Gradient dolgu, gözün "plastik" olarak okuduğu hafif bir parlaklık ekler.
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;Her iki gölgeye inset ekle ve kart çıkıntılı yerine içeri çökmüş görünür — input ve toggle arkaplanları için ideal.
-webkit-backdrop-filter'ı unutmak. Eski Safari (ve gömülü WebView) önekiz backdrop-filter'ı yoksayar, camın sert bir bloğa döner.backdrop-filter'a ek olarak -webkit-backdrop-filter önekine ihtiyacın var. Bu üretici ikisini de otomatik üretir. Önek olmadan eski Safari ve iOS WebView'lar background rengine düşer ve cam efekti kaybolur.aria-label ile birleştir — ve öne çıkması *gereken* öğelerden (hatalar, birincil CTAlar) kaçın.backdrop-filter tüm evergreen tarayıcılarda destekleniyor. box-shadow evrenseldir. Performansa dikkat — backdrop-filter kare başına GPU operasyonudur, bir ekranda az sayıda cam katmanı tut.