How to blur sensitive information on webpage using CSS filter: blur()

When dealing with sensitive information on a webpage, ensuring it remains hidden or obscured from unauthorized access is crucial. CSS provides simple yet effective methods to blur or hide such data, enhancing privacy and security for users.

This guide will walk you through the steps to apply CSS techniques for blurring sensitive content, making it readable only when needed.

1 What is filter: blur() and When you Can use?

CSS’s filter: blur() is a powerful property that allows web developers to obscure content visually by applying a blurring effect. This method is particularly useful for hiding sensitive information, such as passwords, pop-up content, or private user data, while keeping it accessible when necessary through user interaction.

For example, the code below demonstrates how to use filter: blur():

<div class="sensitive-content">

This is sensitive information.

</div>

<style>

.sensitive-content {

filter: blur(5px);

transition: filter 0.3s ease;

}

.sensitive-content:hover {

filter: none;

}

</style>

Heres preview;

When applied, the filter: blur(5px) obscures the text, but hovering over it removes the blur effect, making the content readable. This provides an intuitive and user-friendly way to handle sensitive information.

1.1 Adaptability Across Browsers

The filter property, including blur(), is well-supported across modern browsers. However, some older versions may lack compatibility. The table below summarizes browser support:

1.2 When You Can Use filter: blur()

1.2.1 Common Use Cases:

• Obscure Private Data: Mask sensitive text, such as account numbers or documents.
• Blur Background Elements: Highlight selected areas by blurring non-relevant content.
• Interactive UIs: Use hover or click interactions to reveal content selectively.
• Password Protection: Temporarily hide passwords until revealed by user action.
• Loading Screens: Blur content background while loading dynamic elements.

2 How to blur sensitive information on webpage using CSS

Blurring sensitive information on a webpage is a practical and effective way to protect user privacy and enhance the visual hierarchy of content. By using CSS, developers can easily obscure private data, mask background elements, or create interactive UI features without compromising the overall design. This method is not only versatile but also simple to implement, making it an essential tool for modern web development.

2.1 🧪 Example 1: Basic Text Blur

<p class="blur">This is sensitive information</p>

<style>
.blur {
  filter: blur(5px);
}
</style>

Heres preview;

This is sensitive information

2.2 🧠 Example 2: Unblur on Hover

<p class="blur-hover">Hover to reveal: 1234-5678-9012</p>

<style>
.blur-hover {
  filter: blur(6px);
  transition: filter 0.3s;
}
.blur-hover:hover {
  filter: none;
}
</style>

Here’s preview;

Hover to reveal: 1234-5678-9012

2.3 🖱️ Example 3: Click to Toggle Blur

<p class="click-blur" onclick="this.classList.toggle('unblur')">Click to reveal [email protected]</p>

<style>
.click-blur {
  filter: blur(6px);
  cursor: pointer;
  transition: filter 0.3s;
}
.click-blur.unblur {
  filter: none;
}
</style>

Heres Preview;

Click to reveal [email protected]

2.4 🔒 Example 4: Blurred Password Preview (masked)

<input type="text" value="MySecretPass123" class="blurred-password" readonly />

<style>
.blurred-password {
  filter: blur(8px);
  border: none;
  background: transparent;
}
</style>

heres preview;

2.5 📄 Example 5: Blur Part of a Paragraph

<p>
  Your account number is <span class="blur">1234 5678 9012 3456</span>
</p>

<style>
.blur {
  filter: blur(6px);
}
</style>

Here’s preview;

Your account number is 1234 5678 9012 3456

2.6 🖼️ Example 6: Blur a Sensitive Image

<img src="credit-card.png" class="blur-img" />

<style>
.blur-img {
  width: 300px;
  filter: blur(10px);
}
</style>

Heres preview;

2.7 📱 Example 7: Blur Content Until Clicked (with JS Toggle)

<div id="secureInfo" class="blur" onclick="this.classList.toggle('unblur')">
  +91-9876543210
</div>

<style>
#secureInfo {
  filter: blur(6px);
  cursor: pointer;
}
#secureInfo.unblur {
  filter: none;
}
</style>

Here’s preview;

2.8 🕵️ Example 8: Blur Email on Mobile View Only

<p class="responsive-blur">[email protected]</p>

<style>
@media (max-width: 768px) {
  .responsive-blur {
    filter: blur(5px);
  }
}
</style>

Heres preview;

[email protected]

2.9 💻 Example 9: Blur API Response/Console Output

<pre class="blur">{"token":"sk-1234abcd..."}</pre>

<style>
.blur {
  filter: blur(6px);
  white-space: pre-wrap;
}
</style>

Here’s preview;

{"token":"sk-1234abcd..."}

2.10 🎨 Example 10: Blur Overlay on Top of Sensitive Section

<div class="container">
  <div class="blur-overlay"></div>
  <p>This text is visually behind the blur layer</p>
</div>

<style>
.container {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
}

.blur-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.3);
}
</style>

Here’s preview;

3 Final Thoughts!

Blurring sensitive content is a practical and visually appealing way to ensure privacy while maintaining a polished design. By layering simple yet effective CSS styles, you can create dynamic overlays that prioritize security without compromising usability. Experimenting with these techniques will help you achieve the right balance of aesthetics and functionality in your projects.