blur-reveal-input

blur-reveal-input

Replace boring password dots with a beautiful blur effect. Hover or touch to reveal.

Zero dependencies. Works everywhere — vanilla JS, React, Vue, Angular, Svelte, or a simple <script> tag.

Live Demo

What is this?

Standard password fields show ••••••••. This library shows your password text behind a CSS blur — move your mouse or finger across to reveal it through a clear window. When you stop, it fades back to blurred.

• Desktop: Hover to reveal, characters stay visible as you move across, smooth fade-out when you leave
• Mobile: Touch and drag to reveal, fades back after lifting your finger
• Accessible: Respects prefers-reduced-motion, works with screen readers, supports high contrast mode

Install

npm / yarn / pnpm / bun

npm install blur-reveal-input

CDN (no build step)

<script src="https://unpkg.com/blur-reveal-input"></script>

or

<script src="https://cdn.jsdelivr.net/npm/blur-reveal-input"></script>

That's it — all <input type="password"> fields on the page are automatically enhanced.

Usage

Drop-in (CDN / script tag)

Just include the script. Every password input on the page gets the blur effect automatically:

<input type="password" placeholder="Enter password">
<script src="https://unpkg.com/blur-reveal-input"></script>

Opt out a specific input:

<input type="password" data-blur-reveal="false" placeholder="Normal password">

ES Module (bundlers)

import { BlurRevealInput } from 'blur-reveal-input';

const input = document.querySelector('input[type="password"]');
const blur = new BlurRevealInput(input);

// Later: clean up
blur.destroy();

React

import { useEffect, useRef } from 'react';
import { BlurRevealInput } from 'blur-reveal-input';

function PasswordField() {
  const inputRef = useRef(null);

  useEffect(() => {
    const blur = new BlurRevealInput(inputRef.current);
    return () => blur.destroy();
  }, []);

  return <input ref={inputRef} type="password" placeholder="Password" />;
}

Vue

<template>
  <input ref="passwordInput" type="password" placeholder="Password" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { BlurRevealInput } from 'blur-reveal-input';

const passwordInput = ref(null);
let blur;

onMounted(() => {
  blur = new BlurRevealInput(passwordInput.value);
});

onBeforeUnmount(() => {
  blur?.destroy();
});
</script>

Angular

import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { BlurRevealInput } from 'blur-reveal-input';

@Component({
  selector: 'app-password',
  template: `<input #passwordInput type="password" placeholder="Password" />`
})
export class PasswordComponent implements AfterViewInit, OnDestroy {
  @ViewChild('passwordInput') inputRef!: ElementRef<HTMLInputElement>;
  private blur?: BlurRevealInput;

  ngAfterViewInit() {
    this.blur = new BlurRevealInput(this.inputRef.nativeElement);
  }

  ngOnDestroy() {
    this.blur?.destroy();
  }
}

Svelte

<script>
  import { onMount } from 'svelte';
  import { BlurRevealInput } from 'blur-reveal-input';

  let inputEl;

  onMount(() => {
    const blur = new BlurRevealInput(inputEl);
    return () => blur.destroy();
  });
</script>

<input bind:this={inputEl} type="password" placeholder="Password" />

WordPress

Install the Blur Reveal Input plugin — upload the zip through Plugins > Add New > Upload Plugin, activate, and every password field on your site gets the blur effect automatically. Includes a settings page with live preview.

Or just enqueue the script in your theme's functions.php:

function my_blur_reveal() {
    wp_enqueue_script(
        'blur-reveal-input',
        'https://unpkg.com/blur-reveal-input',
        array(),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'my_blur_reveal' );

Shopify

Add to your theme.liquid before </body>:

<script src="https://unpkg.com/blur-reveal-input"></script>

All password inputs in your store (login, registration, checkout) are automatically enhanced.

Apply to all password inputs

import { BlurRevealInput } from 'blur-reveal-input';

// Enhance every password input on the page
const instances = BlurRevealInput.applyToAll();

// Clean up all
instances.forEach(i => i.destroy());

Configuration

const blur = new BlurRevealInput(input, {
  blurIntensity: 4,    // Blur strength in px (default: 4)
  revealRadius: 30,    // Reveal window size in px (default: 30, mobile: 40)
  fadeDelay: 500,       // ms before fade-out starts (default: 500)
  fadeDuration: 300,    // ms for fade-out animation (default: 300)
  enabled: true,        // Enable/disable (default: true)
});

// Update at runtime
blur.updateConfig({ blurIntensity: 6, fadeDelay: 1000 });

// Toggle
blur.disable();
blur.enable();

Data attributes (no JS needed with CDN)

<input type="password"
  data-blur-intensity="6"
  data-reveal-radius="40"
  data-fade-delay="1000"
>

Events

input.addEventListener('blur-reveal:reveal', (e) => {
  console.log('Revealing at', e.detail.x, e.detail.y);
});

input.addEventListener('blur-reveal:hide', () => {
  console.log('Hidden');
});

input.addEventListener('blur-reveal:init', () => {
  console.log('Initialized');
});

input.addEventListener('blur-reveal:destroy', () => {
  console.log('Destroyed');
});

CSS Custom Properties

Override these to customize the look:

.blur-reveal-container {
  --blur-reveal-intensity: 4px;
  --blur-reveal-radius: 30px;
  --blur-reveal-font: 'Your Mono Font', monospace;
}

Browser Support

Works in all modern browsers that support CSS filter: blur() and mask-image:

• Chrome 76+
• Firefox 53+
• Safari 15.4+
• Edge 79+
• iOS Safari 15.4+
• Chrome for Android 76+

How it works

• Wraps your <input type="password"> in a container
• Creates two overlays: one permanently blurred, one clear with a CSS mask
• The input text is made transparent (caret stays visible)
• On hover/touch, the clear overlay's mask follows your cursor, revealing text through the blur
• When you leave, the clear overlay fades out smoothly using requestAnimationFrame

The actual password value never leaves the input element. This is purely a visual effect.

Author

Arik Shalito — GitHub

License

MIT