I Replaced Password Dots with CSS Blur, Here's How (and Why)

#webdev #javascript #css #opensource

Every password field on the web looks the same: ••••••••. Boring, unhelpful, and honestly a bit dated.
I built something different: blur-reveal-input — a zero-dependency JavaScript library that replaces those dots with a beautiful CSS blur effect. Hover your mouse (desktop) or drag your finger (mobile) across the field to reveal the password through a clear window. Stop, and it smoothly fades back.

Why Bother? (The Motivation)
Password masking hasn't evolved in decades. Dots hide everything equally, making it hard to spot typos without re-typing. A blur effect keeps the "masked" look while letting users peek precisely where needed, a more interesting interaction that just feels nicer to use (the actual value still stays in the original input element, nothing changes security-wise).
It's a small, fun experiment, but it feels nicer in practice.
Try It
Live demo: https://ilovemycat.github.io/blur-reveal-input/
Install in Seconds
CDN (no build step needed):
<script src="https://unpkg.com/blur-reveal-input"></script>
Every <input type="password"> on the page gets the blur effect automatically.
npm:
npm install blur-reveal-input

Works Everywhere
React, Vue, Angular, Svelte, vanilla JS, or even WordPress (plugin included).
React example:

import { useEffect, useRef } from 'react';
import { BlurRevealInput } from 'blur-reveal-input';
function PasswordField() {
const ref = useRef(null);
useEffect(() => {
const blur = new BlurRevealInput(ref.current);
return () => blur.destroy();
}, []);
return <input ref={ref} type="password" />;
}

Full examples for other frameworks in the repo.

How It Works Under the Hood

Wraps the real password in a container.
Creates two overlays:
- One permanently blurred (backdrop-filter: blur).
- One clear with a CSS mask that follows the cursor/finger.
Makes the input text transparent (caret stays visible).
On hover/touchmove, the clear overlay's mask reveals only the hovered area.
Fade-out uses requestAnimationFrame loop (CSS transitions proved unreliable across browsers).

The password value never leaves the original input — it's purely visual. No security risks added.

GitHub & Links

Repo:https://github.com/iLoveMyCat/blur-reveal-input
npm:https://www.npmjs.com/package/blur-reveal-input
Live demo:https://ilovemycat.github.io/blur-reveal-input/
MIT licensed, fork, PR, use freely!

Got it running in your app? I'd love a screenshot or link, happy to add it to the README as a "Made with blur-reveal-input" showcase. Feedback, roasts, or improvement ideas welcome in comments or issues.
What do you think — better than dots, or overkill? Drop your thoughts below!

Top comments (4)

bmichalowski • Feb 17

Bravo for the fresh approach. Unfortunately, I can't agree with this statement:
UX without compromising security
If you click on an input, leave the cursor where you clicked, and then continue typing until the password reaches the mouse cursor, the password will be automatically revealed, regardless of the user's intentions.

It is also worth paying attention to the poorer contrast against the blur background and relatively obvious characters in the password, such as a period, comma or space.

Arik Shalito • Feb 18

Thanks you for the feedback!

You are right about the cursor position issue. If you click and type towards where the cursor is sitting, characters get revealed unintentionally. thats a real edge case I did not consider. I could probably fix it by only activating the reveal on mousemove rather than static hover position.

About the contrast, fair, simple characters are more recognizable than complex letters.
The blur intensity is configurable by the developer integrating the library, so they can increase it based on their needs. But you are right that itss a fundamental limitation of blur.

Honestly, I should update the "without compromising security" wording. This is primarily a visual/UX experiment. It looks and feels nicer than dots, but I shouldnt oversell it as a security feature.
Created issues for both:
github.com/iLoveMyCat/blur-reveal-...

Really appreciate your feedback, thats exactly what im looking for!