CSS
CSS: How to Blur Text (The Easy and Effective Way)
Blurring text can be a powerful visual technique in modern web design. Whether you’re hiding sensitive content, creating a hover effect, or adding a stylish overlay, CSS makes it easy to blur text with just a few lines of code.
In this guide, you’ll learn:
- ✅ How to blur text using
filter: blur() - ✅ How to blur text on hover
- ✅ How to blur only parts of text
- 🧪 Practical examples with styling tips
- 💡 When and why to use blurred text in UI design
✅ 1. Basic Text Blur with filter: blur()
The simplest way to blur text in CSS is by using the filter property.
✅ CSS:
.blur-text {
filter: blur(4px);
color: #000;
}
✅ HTML:
<p class="blur-text">This text is intentionally blurred.</p>
🟢 The higher the value (e.g., 4px), the more the text is blurred.
🧠 How filter: blur() Works
| Value | Effect |
|---|---|
blur(1px) | Slight blur (barely noticeable) |
blur(4px) | Moderate blur |
blur(10px) | Strong blur (text becomes unreadable) |
You can also animate the blur or change it based on interactions, such as hover or click.
🎯 2. Blur Text on Hover
This creates a fun and interactive effect. Ideal for loading states, hidden messages, or gamified UI.
✅ CSS:
.blur-hover:hover {
filter: blur(4px);
transition: filter 0.3s ease;
}
✅ HTML:
<p class="blur-hover">Hover over this text to blur it.</p>
🧩 You can reverse this effect as well—blurred by default and sharp on hover.
🔐 3. Blurred Text Reveal on Hover
Great for password hints, hidden content, or surprise messages.
✅ CSS:
.secret {
filter: blur(5px);
transition: filter 0.4s ease;
cursor: pointer;
}
.secret:hover {
filter: blur(0);
}
✅ HTML:
<p class="secret">This is hidden until you hover!</p>
✅ This makes text readable only on hover, perfect for playful or secure UI patterns.
💡 4. When to Use Blurred Text
| Use Case | Why It Works |
|---|---|
| Hidden messages | Encourages user interaction |
| Loading states | Indicate unavailability visually |
| Sensitive information | Obscure content until user action |
| Stylish overlays or backgrounds | Adds a layer of visual interest |
⚠️ Important Notes
filter: blur()works on most modern browsers (Chrome, Firefox, Safari, Edge)- Not supported in very old browsers like Internet Explorer
- Blurred text can still be copied (not secure for hiding confidential info)
🧠 Summary
| Task | CSS Technique |
|---|---|
| Blur visible text | filter: blur(4px) |
| Blur on hover | Use :hover selector |
| Unblur on hover | Start blurred, then reduce |
| Control effect speed | Add transition property |
🏁 Final Thoughts
Blurring text with CSS is not only easy—it’s also an elegant way to add interactivity, mystery, or focus to your design. With the filter property, you can create subtle or dramatic effects that enhance the user experience.
Keep in mind that blurred text is still part of the DOM, so it shouldn’t be used to hide secure data. Use it for visual enhancement, not security.