Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set blur distance in CSS?
CSS (Cascading Style Sheets) is a powerful tool for designing visual effects on websites. The blur effect is one of the many features in CSS, which is used to blur any element using the filter property with the blur() function. To create a soft, dreamy effect or to draw attention to a specific element on a page, we can use the blur effect.
Syntax
selector {
filter: blur(distance);
}
The Concept of Blur Distance in CSS
Before discussing the practical aspect of setting blur distance, it is important to understand the concept of blur distance. The amount of blur that is applied to an element is called the blur distance. This value can be defined in pixels (px), em, or other CSS units. The larger the value, the more blurred the element becomes.
How to Apply Blur Distance in CSS Using the 'blur' Property
To set the blur distance in CSS, the blur() function is used within the filter property. The blur() function sets the amount of blur that should be applied to an element. To use the blur() function, we first select the element that we want to apply the blur effect and then set the filter property to blur() with the desired value.
For example, to apply blur effect to an image, we can use the following CSS code
img {
filter: blur(5px);
}
Here, we have selected the 'img' element and applied a blur effect of 5 pixels on it.
Example 1: Basic Blur Effect
Here is a full code example demonstrating basic blur effect ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.blur-image {
filter: blur(3px);
margin: 20px;
}
.normal-image {
margin: 20px;
}
</style>
</head>
<body>
<h3>Applying blur distance in CSS using the 'blur' property</h3>
<p>Normal Image:</p>
<div class="normal-image">
<div style="width: 200px; height: 150px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); margin: 0 auto; border-radius: 10px;"></div>
</div>
<p>Blurred Image (3px):</p>
<div class="blur-image">
<div style="width: 200px; height: 150px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); margin: 0 auto; border-radius: 10px;"></div>
</div>
</body>
</html>
Two gradient boxes are displayed - one normal and one with a 3px blur effect applied, demonstrating the difference between blurred and non-blurred elements.
We can apply different blur distances to different elements in a web page. For doing this, we can select each element separately and set the filter property to the desired value. For example
h1 {
filter: blur(3px);
}
img {
filter: blur(5px);
}
Example 2: Apply Different Blur Distances to Different Elements
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.blur-text {
filter: blur(2px);
font-size: 20px;
color: red;
margin: 20px;
}
.blur-box {
filter: blur(4px);
width: 200px;
height: 100px;
background-color: #3498db;
margin: 20px auto;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<h3>Applying Different Blur Distances</h3>
<p class="blur-text">This text has 2px blur effect</p>
<div class="blur-box">Box with 4px blur</div>
<p>This text has no blur effect</p>
</body>
</html>
A page displaying text with 2px blur, a blue box with 4px blur, and normal unblurred text, showing how different blur distances affect various elements.
Creating a Focus Effect With Blur Distance in CSS
Creating a focus effect is the most common use of the blur effect in CSS. This effect is achieved by applying a blur effect to all elements on the webpage, except for the element that has the focus.
To create a focus effect with blur distance in CSS, the blur() function is used with the :hover and :not pseudo-classes. The :not pseudo-class allows the user to select all elements except for a particular element. For example
.blur * {
transition: all 0.5s ease-in-out;
}
.blur:hover *:not(.no-blur) {
filter: blur(5px);
}
Example 3: Focus Effect with Blur
Here is a full code example demonstrating the focus effect ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.blur * {
transition: all 0.5s ease-in-out;
}
.blur:hover *:not(.no-blur) {
filter: blur(5px);
}
.no-blur {
background-color: #e74c3c;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.content {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 2px solid #3498db;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Creating a focus effect with blur distance in CSS</h2>
<p>Hover over the below content to see the effect</p>
<div class="blur">
<div class="content">
<h2>Sample Heading</h2>
<p>This paragraph will blur when you hover over the container, but the button below will remain focused.</p>
<button class="no-blur">Stay Focused</button>
</div>
</div>
</body>
</html>
A container with text and a button is displayed. When you hover over the container, all elements blur except the red "Stay Focused" button, creating a focus effect.
Conclusion
Setting blur distance in CSS using the filter: blur() property is a simple and effective way to add visual appeal to web pages. You can control the intensity of the blur effect by adjusting the pixel value and create engaging focus effects using pseudo-classes.
452 Views
