This is a simple tutorial on how to create a simple frosted glass/blur effect on the background image to a div. View the final result here.

Let’s start with the HTML. It has a container with a background image set and within the container there is a div of class frost which will be styled to give the background image a frosted glass effect.


<div class="container">
<div class="frost"></div>

The CSS is simple as well.

/* the container has a background image*/
  background-image: url("path_to_image.jpg");
  background-position: center;
  background-size: cover;
  text-align: center;
  margin:20px auto;
.container > .frost {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.6);

The .container > .frost style is used to give the effect. The position has been set to absolute with width and height 100% to make sure it covers the whole image. The background-color is set to white with opacity 0.6. You can turn down the opacity up and down to match your requirements. More the opacity, the image will be less visible. You can also use different colors instead of white to make it more interesting.

View Demo