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
Create blurred picture or text with CSS Filters
Users find websites with blurred backgrounds or text visually appealing. CSS filters provide a simple way to create blurred effects on images or text, enhancing visual appeal and achieving specific design aesthetics. The filter property allows you to apply various visual effects including blur, brightness, and contrast adjustments.
Syntax
/* Basic blur syntax */ filter: blur(radius); /* Text shadow blur syntax */ text-shadow: h-offset v-offset blur-radius color;
Method 1: Using CSS Filter Property
The filter: blur() function applies a Gaussian blur to any element. The blur radius determines how many pixels blend into each other −
<!DOCTYPE html>
<html>
<head>
<style>
.blur-container {
text-align: center;
background-color: #E8DAEF;
padding: 20px;
}
.blurred-image {
filter: blur(3px);
max-width: 300px;
}
.normal-image {
max-width: 300px;
margin: 20px;
}
</style>
</head>
<body>
<div class="blur-container">
<h3>Normal Image</h3>
<img src="/cg/images/logo.png" class="normal-image" alt="Normal logo">
<h3>Blurred Image</h3>
<img src="/cg/images/logo.png" class="blurred-image" alt="Blurred logo">
</div>
</body>
</html>
Two images appear on the page - one normal and one with a 3px blur effect applied. The blurred image appears softer with reduced sharpness compared to the original.
Method 2: Using Text-Shadow Property
The text-shadow property creates blur effects by applying shadows to text. When combined with transparent text color, it creates a pure blur effect −
<!DOCTYPE html>
<html>
<head>
<style>
.blur-text {
font-size: 45px;
font-family: Arial, sans-serif;
color: transparent;
text-shadow: 0 0 8px #DE3163;
text-align: center;
background-color: #D5F5E3;
padding: 20px;
}
.progressive-blur {
display: inline-block;
padding: 20px;
background-color: #A569BD;
letter-spacing: 3px;
}
.progressive-blur span:nth-child(1) {
color: #FBFCFC;
font-size: 32px;
text-shadow: 0 0 2px #fff;
}
.progressive-blur span:nth-child(2) {
color: #FBFCFC;
font-size: 34px;
text-shadow: 0 0 4px #fff;
}
.progressive-blur span:nth-child(3) {
color: #FBFCFC;
font-size: 36px;
text-shadow: 0 0 6px #fff;
}
.progressive-blur span:nth-child(4) {
color: #FBFCFC;
font-size: 38px;
text-shadow: 0 0 8px #fff;
}
.progressive-blur span:nth-child(5) {
color: #FBFCFC;
font-size: 40px;
text-shadow: 0 0 10px #fff;
}
</style>
</head>
<body>
<div class="blur-text">TUTORIALSPOINT</div>
<div style="text-align: center; margin: 20px;">
<div class="progressive-blur">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>
</div>
</body>
</html>
A blurred "TUTORIALSPOINT" text appears in pink blur effect on a light green background. Below it, the word "HELLO" displays with each letter having progressively increasing blur and size effects.
Possible Values
| Property | Value | Description |
|---|---|---|
filter: blur() |
Length (px, em, rem) | Blur radius - higher values create more blur |
text-shadow |
h-offset v-offset blur-radius color | Creates shadow-based blur effects |
Conclusion
CSS blur effects can be achieved using either the filter: blur() property for any element or text-shadow for text-specific effects. The filter property provides more precise control, while text-shadow offers creative possibilities with color and positioning.
485 Views
