Stop re-using “123456”! In 5 seconds you can create a 20-character fortress of letters, numbers and symbols that even super-computers can’t crack. Slide the length bar, tick the boxes you like, hit “Generate”, then “Copy” and paste it straight into any site or app.
The tool runs entirely in your browser, so nothing is sent or stored anywhere. It’s free, works on phones and desktops, and needs no signup. Protect every account—social, bank, email—with one click today.
Css:
:root{
--bg:#0d1117;
--card:#161b22;
--accent:#00d4aa;
--muted:#7d8590;
--text:#f0f6fc;
--border:#30363d;
--danger:#ff7b72;
--success:#3fb950;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Inter',system-ui,Arial,sans-serif;
background:var(--bg);
color:var(--text);
display:flex;
flex-direction:column;
min-height:100vh;
line-height:1.6;
}
header,footer{
background:var(--card);
padding:1rem 1.2rem;
text-align:center;
border-bottom:1px solid var(--border);
}
h1{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:600;margin-bottom:.5rem;color:var(--accent)}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem}
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:12px;
max-width:520px;
width:100%;
padding:2rem 1.5rem;
box-shadow:0 8px 24px rgba(0,0,0,.4);
animation:fade .4s ease-in-out
}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
.field{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;flex-wrap:wrap;gap:.5rem}
label{font-weight:500;font-size:.9rem;color:var(--muted)}
input[type=checkbox]{accent-color:var(--accent)}
input[type=range]{width:100%;cursor:pointer}
#lengthDisplay{color:var(--accent);font-weight:600}
.output{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}
#password{
flex:1;
background:var(--bg);
border:1px solid var(--border);
border-radius:6px;
padding:.6rem .8rem;
font-size:1rem;
font-family:'Courier New',monospace;
color:var(--text);
resize:none;
white-space:nowrap;
overflow-x:auto;
}
.btn{
border:none;
border-radius:6px;
padding:.55rem .9rem;
font-weight:500;
cursor:pointer;
transition:.2s
}
.primary{background:var(--accent);color:#0a0e1a}
.secondary{background:var(--border);color:var(--text)}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:scale(.97)}
.strength{margin-top:1rem;font-size:.85rem;font-weight:500}
.strength-bar{height:4px;border-radius:2px;background:var(--border);margin-top:.3rem;overflow:hidden}
.strength-bar div{height:100%;width:0%;transition:.3s}
.toast{
position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
background:var(--success);color:#000;padding:.6rem 1rem;border-radius:6px;opacity:0;transition:.3s
}
.toast.show{opacity:1}
article{margin-top:2rem;font-size:.9rem;color:var(--muted);border-top:1px solid var(--border);padding-top:1.2rem}
article h2{font-size:1.1rem;margin-bottom:.6rem;color:var(--accent)}
article ul{list-style:disc inside;margin-bottom:1rem}
@media(max-width:480px){
.card{padding:1.2rem 1rem}
.btn{font-size:.85rem;padding:.4rem .6rem}
}
Html:
`
Password Generator
Fast, Secure, Customizable & 100 % Offline
Copy
<div class="field">
<label for="lengthRange">Password Length: <span id="lengthDisplay">16</span></label>
<input type="range" id="lengthRange" min="4" max="128" value="16">
</div>
<div class="field">
<label>Include Uppercase</label>
<input type="checkbox" id="uppercase" checked>
</div>
<div class="field">
<label>Include Lowercase</label>
<input type="checkbox" id="lowercase" checked>
</div>
<div class="field">
<label>Include Numbers</label>
<input type="checkbox" id="numbers" checked>
</div>
<div class="field">
<label>Include Symbols</label>
<input type="checkbox" id="symbols" checked>
</div>
<div class="field">
<label>Exclude Ambiguous</label>
<input type="checkbox" id="excludeAmbiguous">
</div>
<button id="generateBtn" class="btn primary">Generate</button>
<div class="strength">
Strength: <span id="strengthText">Medium</span>
<div class="strength-bar"><div id="strengthBar"></div></div>
</div>
<article>
<h2>Why You Need This Tool</h2>
<p>
Re-using passwords is the #1 way accounts get hacked. Our generator creates long, random, and unique passwords in milliseconds—no data ever leaves your device.
</p>
<ul>
<li><strong>Zero-Tracking:</strong> Fully client-side, no logs, no ads.</li>
<li><strong>Custom Rules:</strong> Toggle uppercase, lowercase, numbers, symbols, or avoid ambiguous characters like 0/O, l/1.</li>
<li><strong>Instant Copy:</strong> One click to clipboard with visual feedback.</li>
<li><strong>Responsive Design:</strong> Works perfectly on phones, tablets, and desktops.</li>
<li><strong>SEO-friendly & Fast:</strong> Less than 10 KB of CSS+JS, loads in under 200 ms on 3G.</li>
</ul>
<p>
Use the generated passwords with a reputable password manager to stay safe across every site you visit.
</p>
</article>
</div>
Javascript:
`(() => {
const $ = sel => document.querySelector(sel);
const passwordEl = $('#password');
const lengthRange = $('#lengthRange');
const lengthDisplay = $('#lengthDisplay');
const copyBtn = $('#copyBtn');
const generateBtn = $('#generateBtn');
const strengthText = $('#strengthText');
const strengthBar = $('#strengthBar');
const toast = $('#toast');
const options = {
length:16,
uppercase:true,
lowercase:true,
numbers:true,
symbols:true,
excludeAmbiguous:false
};
const chars = {
uppercase:'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
lowercase:'abcdefghijklmnopqrstuvwxyz',
numbers:'0123456789',
symbols:'!@#$%^&*()_+~`|}{[]:;?><,./-='
};
const ambiguous = /[0O1lI]/g;
function generate() {
let pool = '';
if (options.uppercase) pool += chars.uppercase;
if (options.lowercase) pool += chars.lowercase;
if (options.numbers) pool += chars.numbers;
if (options.symbols) pool += chars.symbols;
if (!pool) return '';
let pwd = '';
for (let i = 0; i < options.length; i++) {
pwd += pool[Math.floor(Math.random() * pool.length)];
}
if (options.excludeAmbiguous) pwd = pwd.replace(ambiguous, () => pool[Math.floor(Math.random() * pool.length)]);
return pwd;
}
function updateStrength(pwd) {
let entropy = 0;
if (options.uppercase) entropy += 26;
if (options.lowercase) entropy += 26;
if (options.numbers) entropy += 10;
if (options.symbols) entropy += 32;
const bits = Math.log2(Math.pow(entropy, pwd.length));
let strength = 'Weak';
let color = 'var(--danger)';
let percent = 30;
if (bits >= 120) {
strength = 'Very Strong';
color = 'var(--success)';
percent = 100;
} else if (bits >= 80) {
strength = 'Strong';
color = 'var(--success)';
percent = 75;
} else if (bits >= 50) {
strength = 'Medium';
color = 'var(--accent)';
percent = 50;
}
strengthText.textContent = strength;
strengthBar.style.background = color;
strengthBar.style.width = percent + '%';
}
function refresh() {
const pwd = generate();
passwordEl.value = pwd;
updateStrength(pwd);
}
// Event listeners
lengthRange.addEventListener('input', e => {
options.length = +e.target.value;
lengthDisplay.textContent = options.length;
refresh();
});
['uppercase','lowercase','numbers','symbols','excludeAmbiguous'].forEach(id => {
$(`#${id}`).addEventListener('change', e => {
options[id] = e.target.checked;
refresh();
});
});
generateBtn.addEventListener('click', refresh);
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(passwordEl.value).then(() => {
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 1200);
});
});
// Init
refresh();
$('#year').textContent = new Date().getFullYear();
})();`
You can check out my tools site where I publish so many tools ( imgohel.online )
Top comments (0)