Текст на размытом фоне

Для создания такого эффекта требуется наложить один блок, где используется фильтр на другой с таким же фоновым изображением.

Для этого нужно учитывать, чтобы оба фона совпали. В примере они расположены по центру, без масштаба.

Пример:

Текст на размытом фоне

HTML:

CSS:

Для получения не менее интересных эффектов можно использовать другие CSS фильтры, например: filter: blur(1px) grayscale(1)

Текст на черно-белом фоне

или filter: blur(1px) sepia(1)

Текст на фоне сепии

Аналогичный эффект можно получить используя CSS-свойство backdrop-filter, но оно имеет малую совместимость (подробнее на MDN)

Пример с использованием backdrop-filter:

Текст на размытом фоне

HTML:

CSS:

Автор фотографии Julius_Silver

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!