Jak rozmyć tło w CSS?

Wstęp

Pytanie zawarte w tytule tego wpisu kiedyś byłoby dość trudne. Wykonywało się szereg operacji, a i tak efekt nie był zadowalający na wszystkich przeglądarkach. Postaram się pokazać rozwiązanie, które pozwoli na uzyskanie takiego efektu przy tworzeniu dzisiejszych stron internetowych

Przykład na rozmycie tła w CSS

Do wykonania takiego efektu, potrzebujemy przygotować krótki kod HTML:

<div class="container">
  <div class="modal">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec erat elit.<br>Donec ultrices dolor eu suscipit pretium.</p>
  </div>
</div>

Selektor container utrzyma nam zawartość na środku ekranu. Z kolei klasa modal zawierać będzie treść, której tło zostanie rozmyte. To na tej części należy się skupić.

.modal {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.5);  
}

W tym przykładzie tło elementu o klasie modal zostanie rozmyte o 5 pikseli. Efektem jaki uzyskamy jest poniższy przykład:

Inne przykłady

Rozmycie tła w CSS to jedno z kilku przykładów. Właściwość backdrop-filter można oczywiście wykorzystać do innych ciekawych realizacji. Zatem jakich jeszcze filtrów możemy użyć?

• brightness,
• contrast,
• drop-shadow – o tym filtrze już pisałem,
• grayscale,
• hue-rotate,
• invert,
• opacity,
• saturate,
• sepia.

Ciekawostką jest fakt, że właściwość backdrop-filter dopuszcza użycie wielu filtrów, np.:

.container {
  backdrop-filter: grayscale(1) opacity(0.5);
}

Ten przykład pozwoli na uzyskanie tła w skali szarości oraz 50 procentowej przezroczystości.

Wsparcie przeglądarek

Stan na dzień publikacji – dla Safari należy użyć prefix „-webkit-„.