CSS blur() fonksiyonu

Tanımı ve kullanımı

CSS'nin blur() Filtre fonksiyonu, elemente bulanıklık etkisi uygular. Değer ne kadar büyük olursa, bulanıklık etkisi o kadar güçlü olur.

Değer belirtilmemişse, varsayılan olarak 0 kullanılır.

Örnek

Örnek 1

<h1> ve <img> elementlerine farklı bulanıklık etkileri uygulama:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Deneyin

Örnek 2

Bulanık arka plan oluşturma:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Deneyin

CSS grameri

blur(radius)
Değer Açıklama
radius

Opsiyonel. Bulanıklığın yarıçapını belirler. Değer ne kadar büyük olursa, bulanıklık etkisi o kadar güçlü olur.

Değer belirtilmemişse, varsayılan olarak 0 (hiçbir etki) kullanılır.

Teknik ayrıntılar

Sürüm: CSS Filter Effects Module Level 1

Tarayıcı desteği

Tablodaki rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

İlgili sayfa

Kaynakça：CSS filtre özelliği

Kaynakça：CSS brightness() fonksiyonu

Kaynakça：CSS contrast() fonksiyonu

Kaynakça：CSS drop-shadow() fonksiyonu

Kaynakça：CSS grayscale() fonksiyonu

Kaynakça：CSS hue-rotate() fonksiyonu

Kaynakça：CSS invert() fonksiyonu

Kaynakça：CSS opacity() fonksiyonu

Kaynakça：CSS saturate() fonksiyonu

Kaynakça：CSS sepia() fonksiyonu