Dokumentacja CSS z przykładami: Rozmycie i filtry

Q: Jak rozmyć element w CSS?

Użyj filter: blur(5px);. Długość to promień rozmycia: 0 jest ostre, a większe wartości są bardziej rozmyte. Rozmywa element i wszystko w nim, łącznie z tekstem i obrazami.

Q: Jak rozmyć tło za elementem?

Użyj na elemencie backdrop-filter: blur(10px); z częściowo przezroczystym tłem, na przykład rgb(255 255 255 / 0.5). Własna treść elementu pozostaje ostra, a to, co jest za nim, zostaje rozmyte: to efekt matowego szkła.

Q: Czym różni się drop-shadow() od box-shadow?

box-shadow zawsze podąża za prostokątnym pudełkiem elementu. filter: drop-shadow() podąża za widocznym kształtem, łącznie z przezroczystymi obszarami PNG albo SVG, więc cień ikony ma jej obrys.

Q: Jak zrobić czarno-biały obrazek w CSS?

Użyj filter: grayscale(100%); (albo grayscale(1)). Dodaj przejście i filter: grayscale(0) przy najechaniu kursorem, żeby przywrócić kolor.

Q: Czy mogę użyć kilku filtrów naraz?

Tak, wypisz je rozdzielone spacjami: filter: grayscale(1) brightness(1.2) blur(1px);. Są stosowane po kolei, więc kolejność może zmienić wynik. Druga deklaracja filter zastępuje pierwszą.

Rozmycie elementu

filter: blur() przyjmuje długość, czyli promień rozmycia. Im jest większy, tym bardziej rozmyty element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

filter działa na każdym elemencie, nie tylko na obrazach: rozmyty div rozmywa też swój tekst, obramowanie i dzieci. Zwróć uwagę na miękkie krawędzie rozmytych obrazów: rozmycie rozlewa obraz na zewnątrz i miesza go z przezroczystym obszarem wokół. Rozwiązanie znajdziesz niżej, w sekcji "Problem rozmytych krawędzi".

Rozmycie tła: backdrop-filter

Żeby rozmyć to, co jest za elementem (panel z matowego szkła nad zdjęciem albo stroną), użyj backdrop-filter. Własna treść elementu pozostaje ostra. Potrzebne jest prześwitujące tło, żeby rozmycie było widać:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

Paski i koła są ostre wokół panelu i rozmyte za nim, a tekst panelu pozostaje nietknięty. Dbaj o czytelność tekstu: jaśniejszy albo ciemniejszy odcień w kolorze tła pomaga na obrazach z dużą liczbą szczegółów.

Wszystkie funkcje filtrów na żywo

Przesuń dowolny suwak. Linia pod obrazem to dokładna wartość filter, gotowa do skopiowania:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Wypisywane są tylko funkcje, które przesunięto z ich wartości neutralnej, co skraca zapis. brightness(1) albo blur(0px) niczego nie zmieniają, więc nie ma powodu ich wymieniać.

Funkcje filtrów

Funkcja	Wartość neutralna	Co robi	Przykład
`blur(r)`	`0`	rozmycie gaussowskie o promieniu r	`blur(4px)`
`brightness(n)`	`1`	ciemniej poniżej 1, jaśniej powyżej	`brightness(0.7)`
`contrast(n)`	`1`	płasko poniżej 1, wyraziściej powyżej	`contrast(1.3)`
`grayscale(n)`	`0`	1 (albo 100%) to pełna szarość	`grayscale(100%)`
`sepia(n)`	`0`	ciepły brązowy odcień	`sepia(0.6)`
`saturate(n)`	`1`	0 to szarość, powyżej 1 żywsze kolory	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	przesuwa każdą barwę po kole barw	`hue-rotate(90deg)`
`invert(n)`	`0`	1 to pełny negatyw kolorów	`invert(1)`
`opacity(n)`	`1`	jak właściwość `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		cień, który podąża za kształtem	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

Liczby mogą być też procentami (grayscale(100%) to to samo co grayscale(1)). Kilka funkcji umieszcza się w jednej wartości, rozdzielając je spacjami, i są one stosowane po kolei: filter: grayscale(1) sepia(1) daje brązowy odcień, a sepia(1) grayscale(1) kończy się zwykłą szarością.

drop-shadow podąża za kształtem

box-shadow zawsze jest prostokątem (najwyżej z zaokrąglonymi rogami). drop-shadow() jest rysowany z widocznych pikseli, więc przezroczysta ikona dostaje cień o jej obrysie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

Pierwsza gwiazdka rzuca kwadratowy cień ze swojego niewidocznego pudełka ograniczającego. Druga rzuca cień w kształcie gwiazdki. W przeciwieństwie do box-shadow, drop-shadow() nie ma wartości spread ani inset; omawia je strona o box-shadow.

Problem rozmytych krawędzi

Rozmyty obraz blednie przy krawędziach, bo rozmycie wciąga przezroczyste piksele z otoczenia. Żeby zachować ostrą krawędź (na przykład dla rozmytego tła dużego banera), umieść obraz w kontenerze z overflow: hidden i lekko go powiększ, żeby miękka krawędź została odcięta:

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

Efekty przy najechaniu z filter

filter można animować przejściem, więc ściana logo zmieniających się z szarych na kolorowe albo karta przyciemniona do czasu najechania to dwie reguły:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

Najedź kursorem (albo przejdź klawiszem Tab) na kafelek, a jego kolor się pojawi.

Warto wiedzieć

Wydajność. Najwięcej kosztują duże promienie rozmycia na dużych obszarach, zwłaszcza backdrop-filter na elementach, które się poruszają albo przewijają. Przetestuj na telefonie.
Czytelność. Nigdy nie rozmywaj tekstu, który ludzie muszą przeczytać, i sprawdzaj kontrast tekstu na matowym panelu.
Kontekst nakładania. Każdy filter inny niż none tworzy nowy kontekst nakładania i staje się blokiem zawierającym dla potomków z position: fixed, tak jak transform.

Częste błędy

filter: blur(5). Promień wymaga jednostki: blur(5px).
Używanie filter: blur() do matowego panelu. Rozmywa własny tekst panelu. Użyj backdrop-filter z przezroczystym tłem.
backdrop-filter, który nic nie pokazuje. Tło elementu musi być przynajmniej częściowo przezroczyste, a za nim musi coś być.
Dwie deklaracje filter. Druga zastępuje pierwszą. Umieść wszystkie funkcje w jednej wartości.
Kwadratowe cienie na przezroczystych ikonach. Użyj filter: drop-shadow() zamiast box-shadow.

Najczęściej zadawane pytania

Jak rozmyć element w CSS?

Użyj filter: blur(5px);. Długość to promień rozmycia: 0 jest ostre, a większe wartości są bardziej rozmyte. Rozmywa element i wszystko w nim, łącznie z tekstem i obrazami.

Jak rozmyć tło za elementem?

Użyj na elemencie backdrop-filter: blur(10px); z częściowo przezroczystym tłem, na przykład rgb(255 255 255 / 0.5). Własna treść elementu pozostaje ostra, a to, co jest za nim, zostaje rozmyte: to efekt matowego szkła.

Czym różni się drop-shadow() od box-shadow?

box-shadow zawsze podąża za prostokątnym pudełkiem elementu. filter: drop-shadow() podąża za widocznym kształtem, łącznie z przezroczystymi obszarami PNG albo SVG, więc cień ikony ma jej obrys.

Jak zrobić czarno-biały obrazek w CSS?

Użyj filter: grayscale(100%); (albo grayscale(1)). Dodaj przejście i filter: grayscale(0) przy najechaniu kursorem, żeby przywrócić kolor.

Czy mogę użyć kilku filtrów naraz?

Tak, wypisz je rozdzielone spacjami: filter: grayscale(1) brightness(1.2) blur(1px);. Są stosowane po kolei, więc kolejność może zmienić wynik. Druga deklaracja filter zastępuje pierwszą.

Powiązane zagadnienia