
To learn how to create the blurred background image with CSS follow the steps below:
Demo:
Step1.
Add HTML
<div class="blurred-image"></div>
<div class="text">
<h1>Sea Side</h1>
</div>
Step2.
Add CSS
Use the CSS filter property to create the blur effect:
body {font-family: tahoma;
height: 100vh;
margin:0;
}
.blurred-image {
position: relative;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/brighton-2-1024x267.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%;
filter: blur(4px);
}
.text {
position: absolute;
text-align: center;
color: #fff;
z-index:1;
background-color: rgba(255,255,255,.3);
box-shadow: 0 0 20px rgba(0,0,0,.5);
border: 3px solid #fff;
padding: 15px;
width: 60%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size:55px;
}
Enjoy coding!
Read also: