CSS Filtre Oluşturucu

Referans

CSS filter özelliği nedir?

CSS filter özelliği, bir öğeye bulanıklık, renk değişimi ve kontrast ayarlama gibi grafik efektler uygular. Filtreler öğe birleştirilmeden önce uygulanır ve kenarlıklar ve gölgeler dahil tüm öğeyi etkiler. Birden fazla filtre işlevi tek bir bildirimde zincirlenebilir.

Tüm CSS filtre işlevleri

blur(px): Gauss bulanıklığı uygular. Yüksek değerler = daha fazla bulanıklık.
brightness(%): Parlaklığı ayarlar. %100 = orijinal, %0 = tamamen siyah.
contrast(%): Kontrastı ayarlar. %100 = orijinal, %0 = tamamen gri.
grayscale(%): Gri tonlamaya dönüştürür. %0 = orijinal, %100 = tamamen gri.
hue-rotate(deg): Renk çarkında renkleri döndürür. 0deg = orijinal, 180deg = karşıt tonlar.
invert(%): Renkleri tersine çevirir. %0 = orijinal, %100 = tamamen ters.
opacity(%): Saydamlığı ayarlar. %100 = tamamen opak, %0 = tamamen saydam.
saturate(%): Renk doygunluğunu ayarlar. %100 = orijinal, %100 üstü = aşırı doygun.
sepia(%): Sepya tonu uygular. %0 = orijinal, %100 = tamamen sepya.

Performans değerlendirmeleri

CSS filtreleri modern tarayıcılarda GPU hızlandırmalıdır. Ancak büyük alanlara filtre uygulamak veya filtre değerlerini canlandırmak yeniden çizimlere neden olabilir. En iyi performans için: canlandırılacak öğelerde will-change: filter kullanın ve bir öğenin arkasını bulanıklaştırmak istediğinizde backdrop-filter'ı tercih edin.

Yaygın kullanım alanları

Görsel hover efektleri — durağan halde gri tonlama, üzerine gelince renkli.
Devre dışı durumu — filter: grayscale(100%) opacity(50%) devre dışı UI öğeleri için.
Karanlık mod — filter: invert(1) hue-rotate(180deg) hızlı karanlık mod hilesi.
Arka plan bulanıklığı — backdrop-filter: blur(10px) buzlu cam efekti için.
Vintage fotoğraf — sepya, kontrast ve parlaklığı birleştirerek analog film görünümü.

Gizlilik

Tüm filtre oluşturma %100 tarayıcınızda çalışır. Hiçbir veri sunucuya gönderilmez. Yüklenen görseller cihazınızda kalır.