CSS Filter Üretici

Bu araç ne işe yarar?

CSS Filtre Üreticisi, blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate ve sepia gibi görsel efektleri kaydırıcılarla ayarlamanıza ve sonucu canlı önizlemede görmenize olanak tanır. Hazır Grayscale, Sepia, Invert, Warm ve Cool preset'leriyle hızlı başlar, ürettiği filter: değerini tek tıkla kopyalarsınız. Görselleri ve öğeleri JavaScript olmadan stillemek isteyen tasarımcılar için pratiktir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Dokuz filtreyi birleştirme

Her kaydırıcı bir CSS filtre fonksiyonuna karşılık gelir ve değerleri sırayla zincirlenir; örneğin filter: blur(2px) brightness(110%) saturate(150%). Araç akıllıca yalnızca varsayılandan farklı değerleri çıktıya ekler, yani contrast'ı %100'de bırakırsanız o gereksiz yere yazılmaz ve kod temiz kalır. Brightness ve contrast %0-200, saturate %0-300, hue-rotate ise 0-360 derece aralığında çalışır.

Preset'ler ve gerçek kullanım alanları

Warm preset'i sepya ve doygunluk ekleyerek sıcak bir fotoğraf tonu verir; Cool ise hue-rotate ile soğuk mavi bir görünüm oluşturur. Grayscale ve Sepia, ürün galerilerinde hover efektleri için yaygındır. invert(100%) bir karanlık mod hilesi olarak görselleri ters çevirebilir, blur ise modal arka planları veya yükleniyor durumları için yumuşak bir bulanıklık sağlar. Önizleme degradesi her değişikliği anında gösterir.

Sıkça sorulan sorular

Çıktıda neden bazı filtreler görünmüyor?

Araç yalnızca varsayılandan farklı kaydırıcıları yazar: brightness, contrast, opacity ve saturate %100'de, diğerleri sıfırda gizlenir. Bu, filter değerini kısa ve okunabilir tutar. Hiçbir filtre etkin değilse çıktı filter: none olur.

Bu filtreleri bir arka plana uygulayabilir miyim?

filter özelliği bir öğenin tamamına uygulanır. Yalnızca arka planı bulanıklaştırıp önündeki içeriği net bırakmak için CSS'te backdrop-filter özelliğini aynı değerle kullanmanız gerekir.