Funkcja CSS blur()

Definicja i zastosowanie

CSS blur() Funkcja filtru aplikuje efekt rozmycia do elementu. Im większa wartość, tym silniejszy efekt rozmycia.

Jeśli wartość nie jest podana, używa się domyślnie 0.

Przykład

Przykład 1

Zastosuj różne efekty rozmycia do elementów <h1> i <img>:

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

Spróbuj sam

Przykład 2

Utwórz rozmyty tło:

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

Spróbuj sam

Gramatyka CSS

blur(radius)
Wartość Opis
radius

Opcjonalne. Określa promień rozmycia. Im większa wartość, tym silniejszy efekt rozmycia.

Jeśli wartość nie jest podana, używa się domyślnie 0 (brak efektu).

Szczegóły techniczne

Wersja: Moduł efektów filtrów CSS Poziom 1

Obsługa przeglądarek

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługiwały tę funkcję.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Strony związane

Odnośniki:Atrybut filter w CSS

Odnośniki:Funkcja brightness() CSS

Odnośniki:Funkcja CSS contrast()

Odnośniki:Funkcja CSS drop-shadow()

Odnośniki:Funkcja CSS grayscale()

Odnośniki:Funkcja CSS hue-rotate()

Odnośniki:Funkcja CSS invert()

Odnośniki:Funkcja CSS opacity()

Odnośniki:Funkcja saturate() CSS

Odnośniki:Funkcja sepia() CSS