Blur background image using CSS

byCodingFlicks -September 26, 2023

0

The fundamental technology used to style the HTML elements of any webpage is called CSS or Cascading Style Sheets. This CSS technology plays a crucial role in defining various components of a webpage such as colors, background images, padding, margins, fonts, etc. Today we will show you how to blur the background image used in a layout with CSS. Below is a video tutorial showing the procedure. Our YouTube channel has video tutorials on HTML, CSS, and JavaScript. If you find it useful you can subscribe to our channel.

Video Tutorial:

One of the features of CSS is that it can be used to create blur background images. This method is used to focus the text by blurring the background. It makes a website's sense of depth and visual appeal more home to its aesthetics. We've given it full height by taking a div called header. Sets the day to a background image with a CSS filter blur effect. The higher the blur value here, the more blurred the background image will be. We have put a text on this blurred background image. The text is given a z-index value of 2 for being on top and a Z-index value of -1 for the blue background image to be on the bottom.

You May Also Like:

Blur Background Image using CSS [ Source Code ]:

To create this CSS background image trick you first need to create an HTML and then a CSS. Add the external CSS file to the HTML file. Then copy the code from the box below and paste it in your project file. If there is any problem, download the code from the download button below.

ADD HTML:

<!doctype html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <title>Blur background image using css | CSS Tricks</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header"></div>

    <div class="header-text">
        <h1>Header Text</h1> 
    </div>
</body>
</html>

ADD CSS:

.header {
	background-image: url(2.jpeg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	height: 100vh;
	position: fixed;
	left: 0;
	right: 0;
	z-index: -1;
	filter: blur(8px);
	-webkit-filter: blur(8px);
}
.header-text {
	z-index: 2;
	width: 650px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.7);
	padding: 30px 35px;
}
.header-text h1 {
	text-align: center;
	color: #fff;
	font-size: 5em;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;
	letter-spacing: 5px;
}

There are many more code snippets available on our website. You can get the snippets by clicking on the Load More button at the bottom of our homepage. Thanks for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.