CSS backdrop-filter Üretici

Dokuz filtre fonksiyonu için kaydırıcıları sürükleyerek canlı backdrop-filter CSS oluşturur: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate ve sepia. Çıktı hem backdrop-filter hem de -webkit-backdrop-filter yayar, böylece efekt modern tarayıcılarda çalışır ve özelleştirilebilir bir arka plan üzerinde bir cam kartı oluşturur, böylece ayarlarken sonucu görebilirsiniz.

1. İsteğe bağlı olarak bir preset'e (Buzlu Cam, Koyu Cam, Vintage, Ters) tıklayarak curate edilmiş bir görünümden başlayın. 2. Kontrol panelindeki kaydırıcıları sürükleyin; her filtre sadece varsayılanından farklı olduğunda üretilen CSS'te görünür (örneğin brightness/contrast/saturate/opacity varsayılan olarak 100, blur varsayılan olarak 0). 3. Arka Plan alanını herhangi bir geçerli CSS arka plan değeri (degrade, görüntü url, renk) ile düzenleyerek filtreyi farklı sanatlar üzerinde test edin. 4. Hem backdrop-filter hem de -webkit-backdrop-filter bildirimlerini kopyalamak için Kopyala'ya tıklayın.

blur 0–50px; brightness 0–200% (varsayılan 100); contrast 0–200% (varsayılan 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (varsayılan 100); saturate 0–200% (varsayılan 100); sepia 0–100%. Sıfırlama her kaydırıcıyı varsayılanına geri yükler. Nötr değerindeki filtreler çıktıdan atlanır; tümü nötr ise çıktı backdrop-filter: none olur.