Password Strength Visualization

Visual feedback for password strength on an image based on Colibro’s sign up form.

By Manoela Ilic in Playground on
Demo Code

Today we’d like to share a little reimplementation of an interesting effect with you. The idea came from this Reddit entry which describes a method of showing an image less pixelated the stronger the password entered is. You can see the idea in action on the signup page of Colibro. We thought this was an awesome idea and wanted to experiment with it, and also with the reverse logic.

So go ahead and try it out: start entering a password in the form and see the image getting a different amount of pixelization. The second demo shows the reverse logic where the image gets more obscured when the password is getting stronger.

The demo is kindly sponsored by HelloSign API: Everything IT requires and Developers love. If you would like to sponsor one of our demos, find out more here.

Attention: Please note that this is highly experimental and might not work well in older browsers.

password2

We hope you like this little effect and find it useful.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

feedback password visualization

Creating a Glowing Text Marquee Animation

Some Ideas for Fullscreen Image Slideshow Animations

Creating an Interactive Mouse Effect with Instancing in Three.js

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.

Feedback 5

Comments are closed.

  1. It’s an interesting concept but “strength” is very subjective. As a pen tester, I see hundreds of passwords every will and most have one thing in common: they contain actual words or names. As a general rule, if your password isn’t 19 or so characters and if it isn’t random there’s a good chance it’s crackable if the hash is divulged, especially in a network environment.

  3. Wouldn’t it make more sense for the image to distort the more complex the password gets? Could serve as a better metaphor.

  4. Hi,

    I’m the original developer from Colibro. Im glad this is catching on!

    If any one has any questions please let me know.