CSS Filter Generator
Apply CSS filters with live preview.
Önizleme
.element {
filter: none;
}Bu araç hakkında
CSS Filtre Oluşturucu, dokuz CSS filtre işlevini — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate ve sepia — görsel olarak ayarlamanıza ve birleşik etkiyi gerçek zamanlı görmenize olanak tanır.
CSS filtreleri, HTML öğelerine fotoğraf düzenleme yazılımına benzer görsel efektler uygular. GPU hızlandırmalıdır ve görüntüler, arka planlar, metin üzerinde çalışır.
Nasıl kullanılır
- Filtre efekti uygulamak için herhangi bir kaydırıcıyı sürükleyin.
- Birden fazla filtreyi birleştirin — önizleme canlı güncellenir.
- Varsayılan değerdeki filtreler çıktıdan otomatik olarak hariç tutulur.
- Varsayılana dönmek için Tümünü sıfırla'ya tıklayın.
- CSS filter özelliğini kopyalamak için Kopyala'ya tıklayın.
Kullanım senaryoları
Tasarımcılar monokrom UI bölümleri için grayscale ve sepia kullanır. Geliştiriciler dondurulmuş cam arka planlar için blur kullanır. brightness hover efektlerinde yaygındır. Karanlık mod uygulamaları invert filtrelerini kullanır.
Sık sorulan sorular
- filter ve backdrop-filter arasındaki fark nedir? — filter öğenin kendisine ve tüm çocuklarına uygulanır. backdrop-filter yalnızca öğenin arkasındaki alana uygulanır (buzlu cam katmanları için kullanışlı).
- Birden fazla filtre birleştirebilir miyim? — Evet. filter özelliğinde boşlukla ayrılmış olarak listeleyin. Bu araç bunu otomatik yapar.
- CSS filtreleri performansı etkiler mi? — grayscale ve brightness gibi basit filtreler ucuzdur. Blur daha pahalıdır, özellikle büyük alanlarda — mobilde dikkatli kullanın.