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

Arik Shalito — Sun, 15 Feb 2026 21:13:38 +0000

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!

DEV Community: Arik Shalito

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