Divinector Watch on YouTube

How to create a blurred background image in CSS

3 min read 4 hours ago
Published on Nov 05, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create a blurred background image using CSS. This technique is useful for adding visual depth to your web design, enhancing the focus on foreground elements while creating an appealing aesthetic. Whether you're designing a landing page or a personal blog, a blurred background can make your content more engaging.

Step 1: Set Up Your HTML Structure

Create a simple HTML structure to work with. You’ll need a container for your background image and some content that will be displayed over it.

  1. Open your HTML file.
  2. Add a div element for the background image.
  3. Inside that div, include any content you want to display (like text or buttons).

Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Blurred Background Image</title>
</head>
<body>
    <div class="background-image">
        <h1>Your Content Here</h1>
    </div>
</body>
</html>

Step 2: Style the Background Image with CSS

Next, you need to apply CSS to achieve the blurred effect.

  1. Create a CSS file named styles.css.
  2. Define the styles for your background image and content.

Here’s the CSS you can use:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
}

.background-image {
    background-image: url('your-image.jpg'); /* Replace with your image URL */
    height: 100vh; /* Full height */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    filter: blur(8px); /* Adjust the blur effect */
}

.background-image h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Text color */
    font-size: 3rem; /* Adjust font size */
    z-index: 1; /* Ensure text appears above the background */
}

Step 3: Add the Blur Effect

The key to creating the blur effect lies in the CSS filter property.

  • Use the filter: blur(8px); property on the background div.
  • Adjust the pixel value to increase or decrease the blur effect as needed.

Step 4: Customize Your Design

Feel free to customize your design further:

  • Change the font size, color, and style of your text.
  • Experiment with different images or gradients for your background.
  • Adjust the dimensions of the container to fit your layout needs.

Conclusion

You have successfully created a blurred background image using CSS. This technique can enhance the visual appeal of your web projects, allowing your content to stand out.

To explore further, try integrating additional CSS features such as transitions or hover effects on the content. Happy coding!

Table of Contents

Recent