CSS Blurred Background Image

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!

Share this: