HomeCSSPassword Strength Background

Password Strength Background


In today’s tutorial, we will learn how to create an interactive password strength meter using HTML, CSS, and JavaScript. This project will not only enhance your web development skills but also provide a practical and visually appealing user experience. We’ll guide you through each step, and you can also watch the video tutorial on our YouTube channel for a visual walkthrough.

Things You Will Learn:

By following this tutorial, you will gain knowledge and experience in the following areas:

  • HTML: You’ll create the structure of the password strength meter interface using HTML.
  • CSS: You’ll style the HTML elements to make the meter visually engaging.
  • JavaScript: You’ll implement the logic for the password strength meter to update dynamically as the user types.

Video Tutorial:

Here is the video tutorial for this project. If you like the tutorial subscribe to my YouTube channel. I post new projects based on HTML, CSS, and Javascript on my channel regularly.

Project Folder Structure:

Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Password Strength Background”. Inside this folder, we have 3 files. These files are :

  • index.html
  • style.css
  • script.js
  • background image


We begin with the HTML code. Copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Strength Background</title>
    <!-- Google Fonts -->
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
    <div class="background" id="background"></div>
    <div class="input-container">
      <h1>Image Password Strength</h1>
      <div class="input-box">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter Password" />

    <!-- Script -->
    <script src="script.js"></script>



Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
.input-container {
  display: flex;
  flex-direction: column;
  place-items: center;
  background-color: #ffffff;
  width: min(90%, 500px);
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 3em 0;
  top: 50%;
  left: 50%;
  border-radius: 1em;
input {
  border: 1px solid black;
  padding: 0.5em;
  border-radius: 0.2em;
.background {
  background: url(sunflowers-bg.jpg) no-repeat center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: -1;
  filter: blur(30px);



Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.

const password = document.getElementById("password");
const background = document.getElementById("background");
password.addEventListener("input", () => {
  const input = password.value;
  const blurValue = 16 - input.length;
  background.style.filter = `blur(${blurValue}px)`;



Congratulations! You’ve successfully created an interactive password strength meter using HTML, CSS, and JavaScript. Users can now see the background blur change as they type their password, giving them a visual indicator of their password’s strength.

Previous articleImage Accordion
Next articleStacked Photo Carousel



Please enter your comment!
Please enter your name here

seven + three =

Most Popular

Dynamic color changer

Fruit Fall Game Javascript

Butterfly CSS Art