Генератор CSS-фільтрів

Порядок функцій має значення

filter виконує функції зліва направо, і кожна працює вже з результатом попередньої. Тому blur(4px) grayscale(100%) і grayscale(100%) blur(4px) дають різну картинку: у першому випадку сіріє вже розмите, у другому розмивається вже сіре.

Найпомітніше це на парі hue-rotate + grayscale: після повного знебарвлення зсувати відтінок уже нічого — кольору не лишилось.

Фільтр ламає position: fixed усередині

Будь-яке значення filter, крім none, робить елемент containing block для нащадків із position: fixed. Ті перестають прив'язуватись до вікна й починають рахувати координати від цього елемента.

Через це «прилипла» шапка чи модальне вікно раптом їдуть разом зі сторінкою, щойно комусь із батьків додали filter. Те саме роблять transform, perspective і backdrop-filter — і це одна з найдовше шуканих причин зламаної верстки.

filter і backdrop-filter — різні речі

filter обробляє сам елемент разом із його вмістом. Щоб розмити те, що лежить під напівпрозорим елементом (ефект матового скла), потрібен backdrop-filter — окрема властивість, яка діє на тло позаду.