### Как работает
- Принимает **единственный параметр** — радиус размытия.
- Значение задаётся в единицах длины CSS: `px`, `rem`, `em` и др.
- Чем больше значение — тем сильнее эффект размытия.
- Значение `0` оставляет элемент полностью резким.
### Базовый синтаксис
Код
filter: blur(5px);
### Пример применения
Размытие фонового изображения:
Код
<div class="blurred-bg">
<h1>Контент поверх размытого фона</h1>
</div>
<h1>Контент поверх размытого фона</h1>
</div>
Код
.blurred-bg {
background-image: url('path/to/image.jpg');
background-size: cover;
filter: blur(8px);
padding: 20px;
}
background-image: url('path/to/image.jpg');
background-size: cover;
filter: blur(8px);
padding: 20px;
}
### Важные нюансы
1. **Размывает весь элемент целиком** — включая текст и дочерние элементы.
2. Для размытия *только фона* без воздействия на контент используйте `backdrop-filter: blur()`.
3. Поддержка браузерами — около 96 %.
### Рекомендации по значениям размытия
- `blur(2px)` — лёгкое размытие (детали различимы).
- `blur(5px)` — среднее размытие (подходит для текстовых подложек).
- `blur(10px)` — сильное размытие (создаёт абстрактные цветовые пятна).
- `blur(20px+)` — очень сильное размытие (для цветовых акцентов).
### `backdrop-filter: blur()` — альтернатива для размытия фона
Свойство позволяет создать эффект «матового стекла» (frosted glass), когда фон размыт, а контент остаётся чётким.
**Ключевые особенности:**
- Применяется к фону за элементом, не затрагивая его содержимое.
- Требует частично прозрачного фона (например, `rgba` или `hsla`).
- Поддерживает другие фильтры: `brightness`, `contrast`, `saturate` и др.
Пример базового использования:
Код
.blur {
background: rgba(255, 255, 255, 0.2); /* Прозрачность обязательна */
backdrop-filter: blur(8px);
height: 100vh;
width: 50%;
}
background: rgba(255, 255, 255, 0.2); /* Прозрачность обязательна */
backdrop-filter: blur(8px);
height: 100vh;
width: 50%;
}
**Комбинация фильтров:**
Код
backdrop-filter: blur(8px) brightness(90%);
Этот код одновременно размывает фон и немного затемняет его для лучшей читаемости текста.
### Примеры применения
1. **Эффект матового стекла:**
Код
.glass-card {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 30px;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 30px;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
2. **Размытие фона модального окна:**
Код
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
### Преимущества `backdrop-filter`
- Подчёркивает элементы на переднем плане.
- Улучшает читаемость текста на изображениях.
- Добавляет глубину интерфейсу.
- Создаёт современную визуальную атмосферу.
### Ограничения
- Не поддерживается в Internet Explorer и Firefox для Android.
- Для видимости эффекта требуется прозрачный фон.
