Как сделать такой размытый блок?

Question

Используется свойство filter: blur(10px), но применив к блоку размывается и контент. Пробовал через box-shadow, но из-за прозрачности блока (0.95) видна прозрачная граница между блоком и тенью, тем самым режет глаза.

Answer 1

Тут блюр как таковой вобще отсутствует, просто задний фон полупрозрачный и наложена тень на блок + все это подогнано цветами и все:

<div class="main">
  <div class="text">
    TODAY
  </div>
</div>

*{
box-sizing:border-box;
}
.main{
  display:flex;
  align-items:center;
  justify-content:center;
  width:400px;
  height:400px;
  margin: 0 auto;
  background-image:url(backphoto);
  background-size:cover;
}
.text{
  display:flex;
  justify-content:center;
  align-items:center;
  height:70px;
  width:97%;
  font-size:30px;
  font-weight:800;
  background-color: rgba(252, 169, 3, 0.7);
  box-shadow: 0 0 10px 3px rgba(252, 169, 3, 0.9);
}

Ну или codepen: https://codepen.io/mrageslf/pen/wvMrBYv Нужно немного поработать с цветами и прочим, но думаю суть понятна итак. Ну и раз вы очень хотите сделать это с помощью blur:

*{
box-sizing:border-box;
}
.main{
  display:flex;
  align-items:center;
  justify-content:center;
  width:400px;
  height:400px;
  margin: 0 auto;
  background-image:url(https://st.depositphotos.com/1001941/1231/v/450/depositphotos_12311394-stock-illustration-%D0%B0%D0%B1%D1%81%D1%82%D1%80%D0%B0%D0%BA%D1%82%D0%BD%D1%8B%D0%B5-%D0%BC%D0%BE%D0%BB%D0%B5%D0%BA%D1%83%D0%BB%D1%8B-%D0%BC%D0%B5%D0%B4%D0%B8%D1%86%D0%B8%D0%BD%D1%81%D0%BA%D0%B8%D0%B9-%D1%84%D0%BE%D0%BD-eps.jpg);
  background-size:cover;
}
.text{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:70px;
  width:97%;
  font-size:30px;
  font-weight:800;
  background-color: 
}
.main_text{
  position:absolute;
  z-index:1000;
}
.blur{
  top:0;
  left:0;
  
  width:100%;
  height:100%;
  filter:blur(10px);
  background-color: rgba(252, 169, 3, 1);
}

<div class="main">
  <div class="text">
    <span class="main_text">
    TODAY
    </span>
    
    <span class="blur">
    </span>
  </div>
</div>

Важно чтобы блоки блюра и текста (main_text), находились на одном уровне, тогда с помощью слоев можно будет вынести его из под blur.

БЛОГ НА HUSL

Как сделать такой размытый блок?

Ответы (1 шт):