Как сделать динамичный background, при заданном filter:blur?

.top-nav { 
	height: 100vh; 
} 
 
.blur { /*фильтр blur*/ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background-size: cover; 
	background: linear-gradient(45deg, #f8a261, #6e9fc9), linear-gradient(135deg, #08526b, #fbcd7c),  
	url(https://www.fillmurray.com/1140/698) no-repeat scroll; 
	background-blend-mode: overlay, color; 
	-webkit-filter: blur(3px); 
}

<section class="container-fluid top-nav"><!-- top-nav --> 
		<div class="blur"></div> 
</section>