Красивый эффект размытия на CSS – Blur эффект

Представляю Вашему внимаю очень симпатичный эффект размытия -Blur – на CSS

Сделать такой эффект на сайте совсем не сложно.

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

Структура эффекта состоит их 2 “слове”:

• фон-подложка.
• над ним размытие с текстом.

HTML

<!--HTML блок эффекта размытие-->
<div class="outer" >
<div class="inner blur text">
Эффект размытия
</div>
</div>

CSS

/*Внешний блок с фоном*/.outer {
background: no-repeat url(https://nashkiev.ua/assets_images/post/000/118/386/image_originals.png); /*ссылка на картинку фона*/background-size: cover; /* Фон занимает всю доступную площадь */text-align: center; /*текст посередине*/}

/*Внутренний блок*/.inner {
display: inline-block;
margin-top: 130px; /*отступ блока вверху*/margin-bottom: 130px; /*отступ блока снизу*/}

/*Blur эффект - эффект размытия*/.blur {
border: 0 solid rgba(35,35,35,.667);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background: hsla(0,0%,87.1%,.2); /*отступ блока вверху*/    padding: 50px; 
}

 /*Настройка текста*/.text {
color: #ffffff;
font-weight: 700;
font-family: Roboto;
font-size: 3em;
}