diff --git a/password-strength-background/index.html b/password-strength-background/index.html
new file mode 100644
index 0000000..fd14e7f
--- /dev/null
+++ b/password-strength-background/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+
Image Password Strength
+
Change the password to see the effect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/password-strength-background/script.js b/password-strength-background/script.js
new file mode 100644
index 0000000..82737e0
--- /dev/null
+++ b/password-strength-background/script.js
@@ -0,0 +1,9 @@
+const password = document.getElementById('password')
+const background = document.getElementById('background')
+
+password.addEventListener('input', (e) => {
+ const input = e.target.value
+ const length = input.length
+ const blurValue = 20 - length * 2
+ background.style.filter = `blur(${blurValue}px)`
+})
diff --git a/password-strength-background/style.css b/password-strength-background/style.css
new file mode 100644
index 0000000..e8d7ade
--- /dev/null
+++ b/password-strength-background/style.css
@@ -0,0 +1,25 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.background {
+ background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b')
+ no-repeat center center/cover;
+ position: absolute;
+ top: -20px;
+ bottom: -20px;
+ left: -20px;
+ right: -20px;
+ z-index: -1;
+ filter: blur(20px);
+}