CSS Filtre Oluşturucu Görsel kontroller ile bulanıklaştırma, parlaklık, kontrast ve daha fazlası gibi CSS filtre efektlerini uygulayın.

🎨

CSS Filtre Oluşturucu

Görsel kontroller ile bulanıklaştırma, parlaklık, kontrast ve daha fazlası gibi CSS filtre efektlerini uygulayın.

Filtre değerlerini ayarlayın

Bulanklık, parlaklık, kontrast ve diğer filtre efektlerini kontrol etmek için kaydırıcıları kullanın.

Sonucu önizleyin

Bir önizleme öğesine uygulanan birleşik filtre etkilerini gerçek zamanlı olarak görün.

CSS'yi kopyalayın

Tüm aktif filtre işlevleriyle oluşturulan filtre özelliğini kopyalayın.

Loading tool...

What Is CSS Filtre Oluşturucu?

CSS Filtre Oluşturucu, tüm CSS filtre işlevleri için görsel kontroller sağlar: bulanıklaştırma, parlaklık, kontrast, gri tonlama, renk döndürme, ters çevirme, saydamlık, doygunluk ve sepya. CSS filtreleri, görüntü düzenleme yazılımlarına benzer şekilde öğelere grafik efektler uygular. Bu araç, birden fazla filtre işlevini birleştirmenize ve bunları bir önizleme öğesinde gerçek zamanlı olarak görmenize olanak tanır. Sadece etkin filtreler (varsayılan değerlerinden değiştirilenler) oluşturulan CSS'ye dahil edilir, böylece kod temiz kalır. Filtre özelliği, görüntü efektleri, hover durumu geliştirmeleri, arka plan işlemleri ve devre dışı/yükleniyor durumunda stillendirme için yaygın olarak kullanılır. Sıfırlama düğmesi, tüm değerleri varsayılanlarına geri yükler ve kolayca deneysel çalışmalara olanak tanır.

Why Use CSS Filtre Oluşturucu?

Görsel kaydırıcılarla birlikte kullanılabilen tüm dokuz CSS filtre işlevi
Oluşturulan CSS'de yalnızca aktif filtreler dahil edilir, böylece temiz bir kod elde edersiniz
Gerçek zamanlı önizleme, tüm aktif filtrelerin birleşik etkisini gösterir
Tek tıkla sıfırlama, tüm değerleri varsayılana geri döndürerek kolay deneysel çalışmalara olanak tanır

Common Use Cases

Görsel Efektler

Sadece CSS kullanarak görsellere Instagram benzeri filtreler uygulayın.

Üstüne Gelme Geliştirmeleri

Parlaklık ve kontrast değişiklikleriyle etkileşimli üstüne gelme efektleri oluşturun.

Devre Dışı Bırakılmış Durumlar

Gri tonlama ve saydamlık kullanarak devre dışı bırakılmış veya etkin olmayan öğeleri belirtin.

Arka Plan İşlemleri

Metin örtme okunabilirliği için arka plan görsellerine bulanıklık ve parlaklık uygulayın.

Technical Guide

CSS filtre özelliği, boşluklarla ayrılmış bir veya daha fazla filtre işlevini kabul eder. Her işlev belirli bir değeri alır: bulanıklaştırma() piksel kabul eder, parlaklık() ve kontrast() yüzdeleri (100% normaldir) kabul eder, gri tonlama() griye dönüştürür (0-100%), renk döndürme() renk spektrumunu kaydırır (0-360deg), ters çevirme() renkleri tersine çevirir (0-100%), saydamlık() şeffafliği kontrol eder (0-100%), doygunluk() renk yoğunluğunu ayarlar (100% normaldir) ve sepya() bir sıcak ton uygular (0-100%). Birden fazla filtre sırayla uygulanır - sıra, nihai sonucu etkileyebilir. Performans için, filtre yeni bir yığın bağlamı tetikler ve yeniden boyamaya neden olabilir. Animasyon yaparken will-change: filter kullanın. drop-shadow() filtre işlevi, alpha kanalını izleyen box-shadow'un bir alternatifidir ve şeffaf PNG'ler ve SVG'lerle iyi çalışır.

Tips & Best Practices

1
Doğal, narin efektler için parlaklığı ve kontrastı %100'e yakın tutun
2
Renk açığa çıkarma etkileşimi oluşturmak için gri tonlama ile üstüne gelmeyi birleştirin
3
Hızlı renk şeması varyasyonları için hue-rotate kullanın
4
Metin okunabilirliğini iyileştirmek için arka plan görsellerine bulanıklık uygulayın

Related Tools

CSS Gradyan Jeneratörü

Birden çok renk durakları ve açı kontrolü ile güzel lineer, radyal ve konik CSS gradyanlar oluşturun.

🎨 CSS & Design

CSS Dönüşüm Oyun Alanı

Dönme, ölçekleme, eğme ve çevirme dahil CSS dönüşümleri ile 3B perspektif deneyimi yaşayın.

🎨 CSS & Design

CSS Animasyon Oluşturucu

Önceden tanımlanmış efektler ve özelleştirilebilir zamanlama ile CSS anahtar kare animasyonları oluşturun.

🎨 CSS & Design

CSS Geçiş Jeneratörü

Özellik, süre, yumuşatma ve hover efektleri ile özelleştirilebilir CSS geçişleri oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Filtrelerin sırası önemli mi?

Evet, filtreler sırayla uygulanır. Örneğin, gri tonlama uygulamadan önce sepia uygulamak, tersine göre farklı bir sonuç verir.

Q CSS filtrelerini canlandırabilir miyim?

Evet, CSS filtreleri geçişler ve animasyonlar destekler. Ancak karmaşık filtre animasyonları performans açısından yoğundur.

Q Filtreler alt öğeleri etkiler mi?

Evet, CSS filtreleri tüm öğe ve onun tüm alt öğelerine uygulanır. Yalnızca bir öğenin arkasındaki alanı etkilemek için backdrop-filter kullanın.

Q CSS filtrelerinin performans etkisi nedir?

Filtreler GPU bileşimini tetikler ve yeniden boyamaya neden olabilir. Büyük öğeler üzerinde ve animasyonlar sırasında dikkatli bir şekilde kullanın.

Q Filtreleri metin üzerinde kullanabilir miyim?

Evet, filtre özelliği herhangi bir öğe dahil metin üzerinde uygulanabilir. Ancak metin üzerindeki bulanıklık okunamaz hale getirir-sadece süsleme amaçlı kullanın.

About This Tool

CSS Filtre Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.