backdrop-filter - CSS свойство применяет фильтры (blur, grayscale и т.п.) к видимому чужому содержимому позади элемента (не путать с фоном элемента). Поэтому чтобы эффект применялся, нужно фон сделать хотя бы немного прозрачным. Chrome 76+, Opera 63+, FF 70+ (после установки флага, 21.04.2021 - до сих пор выключен), Safari 9+ (через -webkit-backdrop-filter).

backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

Можно так сделать поддержку. Для IE первая запись (supports не поддерживает), вторая запись для Chrome, третья для FF.

.coverblock {
	background-color: rgba(250, 50, 50, 0.8);
}

@supports (backdrop-filter: blur()) {
	.coverblock {  backdrop-filter: blur(10px);  background-color: transparent;}
}

@supports not (backdrop-filter: blur()) {
	.coverblock {  background-color: rgba(240, 240, 240, 0.8); }
}

Ранее для такого эффекта применялся отдельный блок под содержимым:

.backgroundBlock {
	filter: blur(4px);
	position: absolute;
	width: 100%;
	height: 100%;
}