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.

Contents

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

Also Read This 👉 how do you display hyperlinks without an underline?

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 do a background blur in css
This blurs everything behind the element it’s applied to

backdrop-filter: blur(10px);

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>

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.