The CSS filter property applies graphical effects like blur or color shifting to an element. The blur() function specifically creates a fog-like or out-of-focus effect on the element's content. The amount of blur is determined by a radius value; a larger value will create more blur.
Example 1: Basic Image Blur
.blur-image {
/* Applies a 5-pixel blur to the image */
filter: blur(5px);
}
Explanation: This code selects an element with the class .blur-image and applies a 5px blur. The px unit specifies the blur radius, which dictates how much the pixels blend into each other.
Example 2: Text Blur
.blur-text {
color: transparent;
/* Applies a 2-pixel blur to the text shadow, making the text appear blurred */
text-shadow: 0 0 2px rgba(0,0,0,0.7);
filter: blur(1px); /* Adds an additional layer of blur */
}
Explanation: This example makes the text itself transparent and then applies a blurred text-shadow to create a blur effect. An additional filter: blur(1px) is added to enhance the haziness of the text.
Example 3: Hover Effect Blur
.blur-on-hover {
transition: filter 0.3s ease-in-out; /* Smooth transition for the filter property */
}
.blur-on-hover:hover {
/* Blurs the element when the mouse hovers over it */
filter: blur(4px);
}
Explanation: This demonstrates a common interactive effect. Initially, the element is clear. When a user hovers their mouse over it, a 4px blur is smoothly applied over 0.3 seconds due to the transition property.
Example 4: Blurring a Background Image
.background-blur-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden; /* Ensures the blurred pseudo-element doesn't spill out */
}
.background-blur-container::before {
content: '';
position: absolute;
top: -10px; right: -10px; bottom: -10px; left: -10px; /* Extends pseudo-element to avoid hard edges */
background: url('your-image.jpg') center/cover;
/* Applies an 8-pixel blur to the background pseudo-element */
filter: blur(8px);
z-index: -1; /* Places the blurred background behind the content */
}
Explanation: This code uses a pseudo-element (::before) to create a blurred background for a container. This allows you to have sharp, readable content on top of a soft, out-of-focus background image.
Example 5: Animating Blur Effect
.animated-blur {
animation: pulse-blur 4s infinite alternate; /* Applies the animation */
}
@keyframes pulse-blur {
from {
/* Starts with no blur */
filter: blur(0px);
}
to {
/* Ends with a 10-pixel blur */
filter: blur(10px);
}
}
Explanation: This example uses @keyframes to create an animation named pulse-blur. The element with the class .animated-blur will cycle between being sharp (blur(0px)) and heavily blurred (blur(10px)) over a 4-second duration, infinitely.
Example 6: Using rem units for Blur
.rem-unit-blur {
/* Applies a blur radius based on the root element's font-size */
filter: blur(0.25rem);
}
Explanation: Here, rem units are used for the blur radius. This makes the blur effect responsive to changes in the root font-size, allowing for better scalability and accessibility in your designs.
Example 7: Blurring an Entire Section
.section-to-blur {
/* Applies a 6-pixel blur to all content within this section */
filter: blur(6px);
/* Ensures the blurred content does not affect layout of other elements */
user-select: none;
pointer-events: none;
}
Explanation: This applies a blur to an entire container, affecting all child elements including text, images, and buttons. The user-select and pointer-events properties are added to prevent interaction with the now-unreadable content.