Background Blur Css

background blur css – blur behind element using image blur css code with single line. we’ll look at how to blur an image with CSS Example with demo.

Free Live Chat for Any Issue

you can learn to create a blurry background image with CSS. Creating a blurry background image using a filter property and Adding a blurred image with backdrop-filter Examples.

backdrop-filter: blur(5px);

image blur css

 filter: blur(8px);
  -webkit-filter: blur(8px);

simple example

<div class="certainstar"></div>

//CSS Code

.certainstar {
  background-image: url(https://source.unsplash.com/Q7PclNhVRI0);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}

how to blur background color in css?

background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

Demo : Blurred Background CSS

How to make a background blur in CSS with one line of code

backdrop-filter: blur(5px);

Don’t Miss : How To Set A Background Image In React Native?

How to create a blurry background image with CSS?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>create a blurry background image with CSS? - www.pakainfo.com</title>
<style>
    body, html {
	  height: 100%;
	}
	.container {
	  position: relative;
	  background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627476216-101156.png");
	  background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
	  height: 100%;
	  filter: blur(8px); /* Adding blur background image */
	}
	.text {
	  text-align: center;
      position: absolute;
      left : 30%;
	  top: 30%;
      width: 50%;
	  background-color: rgba(256 , 256,256,0.5);
	  font-size: 30px;
	}	
</style>
</head>
<body>
   <div class="container"></div>
    <div class="text">
	    <h2> How To Create a Blurred Background Image - Pakainfo </h2>
		<p> Learn how to create a blurry background image with CSS. </p>
	</div>
</body>
</html>

Download

I hope you get an idea about background blur css.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.