Как сделать размытие в хедере?

Question

Помогите стилизовать хедер. Не пойму, какие нужно свойства задавать в CSS?

Пока сделала так:

#header{ background-color: rgba(225, 221, 222, 0.9); box-shadow: 0 0 10px 3px rgba(225, 221, 225, 0.9); }

Answer 1

Можно при помощи linear-gradient

body {
  background: #444;
  margin: 0;
}

header {
  display: block;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, 
    rgba(255,255,255,1) calc(100% - 5px),
    rgba(255,255,255,1) calc(100% - 5px),
    rgba(255,255,255,0));
}

<header></header>

Answer 2

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

html {
  background: url("https://cdn.pixabay.com/photo/2020/07/24/21/58/lemon-5435158_960_720.jpg")
    no-repeat fixed center / cover;
}

body {
  background: inherit;
}
.blur-block {
  position: relative;
  width: 350px;
  height: 200px;
  border-radius: 5px;
  background: inherit;
  box-shadow: 0 0 5px black;
}

.blur-block:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: inherit;
  filter: blur(10px);
  filter: url(#blur);
}

<div class="blur-block" id="element"></div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="6"></feGaussianBlur>
  </filter>
</svg>

Такой вариант длинный, но по крайней мере кроссбраузерный.

Answer 3

есть новые свойства css и они нормально работают:

#header { 
    background-color: rgba(225, 221, 222, .8);
    backdrop-filter: blur(1px);
}

БЛОГ НА HUSL

Как сделать размытие в хедере?

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