Softonic

CSS Filtre Üreticisi

Adım 1 / 2
Sonraki

CSS filter özelliği, bulanıklık, parlaklık, kontrast ve doygunluk gibi görüntü işleme efektlerini yalnızca görsellere değil her öğeye uygular. Birden fazla filtreyi zincirlemek ve birimleri doğru ayarlamak çoğu hatanın kaynağıdır. Bu oluşturucu en yaygın beş işlev için filter bildirimini üretir: bulanıklık, parlaklık, kontrast, gri tonlama ve doygunluk. Değerlerinizi girin ve oluşan CSS kodunu kopyalayın.

Filtre zinciri nasıl oluşturulur?

  1. 1

    Değerleri girin

    Bulanıklık piksel cinsinden; parlaklık, kontrast, gri tonlama ve doygunluk yüzde cinsindendir.

  2. 2

    Ölçeği anlayın

    Parlaklık ve kontrast %100'de değişiklik olmadığı anlamına gelir; %0'da öğe siyah veya gri olur. Gri tonlama %0 (tam renk) ile %100 (tamamen renksiz) arasında gider; %100 doygunluk renkleri olduğu gibi korur.

  3. 3

    CSS kodunu oluşturun

    Düğmeye tıklayın, araç beş işlevin tümünü içeren birleşik `filter` kuralını çıkarır.

  4. 4

    Kuralı kopyalayın

    Sonucu kopyalayıp stil sayfanıza yapıştırın.

  5. 5

    Sırayı kontrol edin

    İşlevler soldan sağa uygulanır. Efekt beklediğinizden farklıysa değerleri ayarlayın.

Filtre fonksiyonları

Fonksiyon Birim Etki
blur() px Gauss bulanıklığı. 0 = bulanıklık yok
brightness() % veya ondalık 100% = değişiklik yok, 0% = siyah, 200% = iki kat parlak
contrast() % veya ondalık 100% = değişiklik yok, 0% = gri, 200% = iki kat
saturate() % veya ondalık 100% = değişiklik yok, 0% = gri tonlama
grayscale() % veya ondalık 0% = değişiklik yok, 100% = tamamen renksiz
sepia() % veya ondalık 0% = değişiklik yok, 100% = tamamen sepya
hue-rotate() deg 0deg = değişiklik yok. Renk çarkını döndürür
invert() % veya ondalık 0% = değişiklik yok, 100% = tamamen ters
opacity() % veya ondalık opacity özelliğiyle aynı
drop-shadow() x y bulanıklık renk box-shadow gibi ancak opaklık/clip-path’i takip eder

Zincirleme sırası önemlidir

filter: brightness(0.5) saturate(2) önce parlaklığı, sonra doygunluğu uygular; iki filtre üst üste biner.

filter: saturate(2) brightness(0.5) önce doygunluğu uygular. Görüntü koyulaştırılmadan önce daha parlak olduğundan renk doygunluğu daha belirgin olur.

Görsel fark inceyse de gerçektir. Filtre zinciri beklediğiniz gibi görünmediğinde iki sırayı da deneyin.

Sık kullanılan tarifler

/* Soluk fotoğraf görünümü */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / soluk */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Duotone yaklaşımı */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Hero görselini karart */
filter: brightness(0.6);

/* Devre dışı durum */
filter: grayscale(1) opacity(0.6);

/* Buzlu cam katmanı */
filter: blur(12px) saturate(1.3);

Mat cam efekti için backdrop-filter

filter öğenin kendisine uygulanır; backdrop-filter ise yarı saydam bir öğenin arkasında kalana uygulanır; bu da iOS’un yaygınlaştırdığı mat cam efektidir.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Destek: Tüm modern tarayıcılar; Firefox 103 sürümünden itibaren bunu nihayet bayrak gerektirmeden destekliyor.

Performans notları

  • blur(), her pikseli bir çekirdekle konvolüsyona soktuğu için en maliyetli filtredir. 4K bir hero görselinde 30px bulanıklık gerçek anlamda kare düşürür.
  • grayscale, sepia, brightness ve benzerleri piksel bazlı renk dönüşümleridir, ucuzdur.
  • Modern tarayıcılarda filtreler GPU ile hızlandırılır; ancak blur() animasyonu düşük donanımlı cihazlarda hâlâ takılır.
  • Animasyondan önce will-change: filter ayarlamak iyi olur.

filter: drop-shadow() ile box-shadow karşılaştırması

  • box-shadow, elementin kenar kutusunu takip eder (border-radius’ye uygundur).
  • filter: drop-shadow(), elemanın şeffaf olmayan piksellerini takip eder; yani clip-path şekillerini, PNG şeffaflığını ve SVG yollarını belirler.

Kesilmiş veya şeffaf görüntülerdeki gölgeler için drop-shadow kullanın; standart kartlar ve kutular için ise box-shadow daha hızlıdır.

Sık Sorulan Sorular

Evet, filtre, elemana ve tüm alt elemanlarına bir grup olarak uygulanır. Bir ebeveyni filtrelediğinizde alt elemanlar da dahil olur. Sadece ebeveyn arka planını filtrelemek için içeriği ayrı bir yığma bağlamına yerleştirin veya backdrop-filter kullanın.

Çünkü bulanıklık, işlenmiş metin de dahil olmak üzere öğenin tamamına uygulanır. Yalnızca sıradan filter ile arka planı bulanıklaştırıp metni net tutmanın bir yolu yoktur. Yarı saydam bir katmanda backdrop-filter kullanın ve metni filtre uygulanan öğenin dışında tutun.

Evet, tüm filtre fonksiyonları animasyona uygundur. Mobil cihazlarda bulanıklık performansına dikkat edin; bulanıklık yarıçapını canlandırmak belirgin şekilde maliyetlidir. grayscale, sepia ve brightness ise ucuza animasyona alınır.

Evet, CSS filter, diğer tüm DOM öğeleri gibi SVG öğelerine de uygulanır. SVG ayrıca daha güçlü ancak çok daha ayrıntılı olan kendi gelişmiş <filter> öğe sisteminin de sahiptir.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur