Как размыть картинку. CSS-свойство filter
- 7 мая 2023
CSS-свойство filter
добавляет визуальные эффекты к элементам на странице. Например, вы можете поменять цвет, яркость и насыщенность элемента, наложить размытие или изменить прозрачность, инвертировать цвета или сделать что-то ещё.
Всего фильтров девять, и вот как они работают:

К каким элементам применять свойство filter
Свойство filter
можно применить к любому элементу с графическим содержимым, например, изображению, видео, тексту или форме. Однако с формами, заголовками и абзацами свойство следует использовать осторожно, оно влияет на внешний вид и читаемость текста. Например, так делать не нужно:

Значения CSS-свойства filter
Значение свойства по умолчанию — none
, то есть фильтр не выбран. Чтобы добавить эффект, нужно заменить none
на любое из следующих значений.
blur
— размытие элемента. Указывается в пикселях: filter: blur(5px)
.

brightness
— яркость элемента. Принимает значение от 0
до 100%
. Например, filter: brightness(50%)
уменьшит яркость элемента на 50%.

contrast
— контрастность элемента, указывается в процентах. Например, filter: contrast(200%)
увеличит контрастность элемента в два раза.

grayscale
— оттенки серого. Принимает значение от 0
до 100%
. Например, filter: grayscale(100%)
сделает фото чёрно-белым.

hue-rotate
— меняет оттенок элемента. Принимает значение в градусах. Например, filter: hue-rotate(90deg)
повернёт оттенок элемента на цветовом круге на 90 градусов.

invert
— инвертирует цвета элемента. Принимает значение от 0
до 100%
. Например, filter: invert(90%)
инвертирует цвета элемента на 90%.

opacity
— прозрачность элемента. Принимает значение от 0
до 100%
. Например, filter: opacity(50%)
сделает элемент полупрозрачным.

saturate
— насыщенность элемента. Принимает значение в процентах. Например, filter: saturate(200%)
сделает цвета насыщеннее в два раза.

sepia
— создаёт эффект старой фотографии. Принимает значение в процентах, например, filter: sepia(50%)
.

Стоит учитывать, что браузеры по-разному поддерживают фильтры, поэтому вёрстка может отличаться на разных браузерах и устройствах. Проверяйте её, тем более, это не очень сложно.
👉 Тем не менее, все браузеры поддерживают свойство filter
, так что смело пользуйтесь им, но знайте меру.
Наследуется ли свойство filter
Свойство filter
не наследуется от родительских элементов. Нужно явно указывать, к каким элементам на странице применить эффекты. Но если вы добавите filter
форме, её поля и подписи к ним станут отображаться с добавленным эффектом.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как создать тени на CSS: свойство box-shadow
Внутренние, внешние, с градиентом — на все случаи жизни.
- 28 мая 2023

Как работает transform в CSS на примерах
Интерактивная статья — попробуйте анимировать сами.
- 23 мая 2023

Как оформить текст: 11 главных CSS-свойств
Инструкция для любителей поиграться со шрифтами.
- 23 мая 2023




Как создать сетки на CSS Grid Layout
Чтобы сайт был красивым, а вёрстка не ломалась.
- 17 мая 2023

Плавные трансформации на чистом CSS. Свойство transition
Так плавно, что вы даже не заметите.
- 15 мая 2023

Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow
Чтобы текст и картинки не выпадали из блока.
- 14 мая 2023

Как отобразить элемент на странице. Свойство display
Блок или строчный элемент, а может что-то другое, выбор за вами.
- 13 мая 2023