<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="Generate strong, secure passwords instantly with our free password generator. Create random passwords with customizable length and character options.">
    <meta name="keywords"
        content="password generator, secure password, random password, strong password, password creator">
    <meta name="author" content="Password Generator">
    <meta name="robots" content="index, follow">
    <title>Password Generator - Create Strong & Secure Passwords Instantly</title>
    <link rel="canonical" href="https://www.password-generator.com/">

    <!-- Open Graph -->
    <meta property="og:title" content="Password Generator - Create Strong & Secure Passwords">
    <meta property="og:description"
        content="Generate strong, secure passwords instantly. Customize length (8-64 chars), character types, and copy with one click.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.password-generator.com/">
    <meta property="og:site_name" content="Password Generator">
    <meta property="og:locale" content="en_US">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Password Generator - Create Strong & Secure Passwords">
    <meta name="twitter:description" content="Generate strong, secure passwords instantly with customizable options.">

    <!-- Preconnect for fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap"
        rel="stylesheet">

    <!-- Bootstrap Grid Only -->
    <link href="css/bootstrap-grid.min.css" rel="stylesheet">

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="style.css">

	<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
	<link rel="manifest" href="/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">
	
    <!-- JSON-LD Schema -->
    <script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "WebApplication",
		"name": "Password Generator",
		"url": "https://www.password-generator.com/",
		"sameAs": [
			"https://medium.com/@password-generator/",
			"https://github.com/umitozay/password-generator",
			"https://hashnode.com/@password-generator",
			"https://www.indiehackers.com/passwordgenerator/",
			"https://stats.uptimerobot.com/6Q298NpsPB",
			"https://peerlist.io/passwordgen",
			"https://independent.academia.edu/RRucian",
			"https://www.saashub.com/password-generator",
			"https://www.trustpilot.com/review/password-generator.com",
			"https://stackshare.io/password-generator",
			"https://www.behance.net/rosicrucian",
			"https://flipboard.com/@rosicrucian2026/",
			"https://pinterest.com/passwordgeneratorsecure/",
			"https://hu.pinterest.com/passwordgeneratorsecure/",
			"https://nl.pinterest.com/passwordgeneratorsecure/",
			"https://ru.pinterest.com/passwordgeneratorsecure/",
			"https://co.pinterest.com/passwordgeneratorsecure/",
			"https://in.pinterest.com/passwordgeneratorsecure/",
			"https://www.pinterest.at/passwordgeneratorsecure/",
			"https://www.pinterest.ca/passwordgeneratorsecure/",
			"https://www.pinterest.ch/passwordgeneratorsecure/",
			"https://www.pinterest.cl/passwordgeneratorsecure/",
			"https://www.pinterest.co.kr/passwordgeneratorsecure/",
			"https://www.pinterest.co.uk/passwordgeneratorsecure/",
			"https://www.pinterest.com.au/passwordgeneratorsecure/",
			"https://www.pinterest.com.mx/passwordgeneratorsecure/",
			"https://www.pinterest.de/passwordgeneratorsecure/",
			"https://www.pinterest.dk/passwordgeneratorsecure/",
			"https://www.pinterest.es/passwordgeneratorsecure/",
			"https://www.pinterest.fr/passwordgeneratorsecure/",
			"https://www.pinterest.ie/passwordgeneratorsecure/",
			"https://www.pinterest.it/passwordgeneratorsecure/",
			"https://www.pinterest.jp/passwordgeneratorsecure/",
			"https://www.pinterest.nz/passwordgeneratorsecure/",
			"https://www.pinterest.ph/passwordgeneratorsecure/",
			"https://www.pinterest.pt/passwordgeneratorsecure/",
			"https://www.pinterest.se/passwordgeneratorsecure/",
			"https://www.pearltrees.com/passwordgen"
		],
		"description": "Generate strong, secure passwords with customizable options",
		"applicationCategory": "SecurityApplication",
		"operatingSystem": "Any",
		"offers": {
			"@type": "Offer",
			"price": "0",
			"priceCurrency": "USD"
		},
		"featureList": [
			"Custom password length (8-64 characters)",
			"Uppercase and lowercase letters",
			"Numbers and special symbols",
			"Easy-to-read mode",
			"One-click copy",
			"Password history"
		]
	}
    </script>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
            {
                "@type": "Question",
                "name": "What makes a password strong?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "A strong password is at least 12 characters long, contains uppercase and lowercase letters, numbers, and special symbols. It should not contain personal information or common words."
                }
            },
            {
                "@type": "Question",
                "name": "How often should I change my password?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Security experts recommend changing passwords every 3-6 months, or immediately if you suspect a breach. Using unique passwords for each account is more important than frequent changes."
                }
            },
            {
                "@type": "Question",
                "name": "Is this password generator secure?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Yes, our password generator runs entirely in your browser. No passwords are transmitted or stored on any server. We use cryptographically secure random number generation."
                }
            }
        ]
    }
    </script>
</head>

<body>
    <a href="#main-content" class="skip-link" tabindex="0">Skip to main content</a>

    <header class="site-header" role="banner">
        <div class="container">
            <div class="header-content">
                <a href="/" class="logo" aria-label="Password Generator Home">
                    <svg viewBox="0 0 36 36" fill="none" aria-hidden="true">
                        <rect width="36" height="36" rx="8" fill="url(#logoGrad)" />
                        <path
                            d="M18 10a6 6 0 0 0-6 6v2h-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-1v-2a6 6 0 0 0-6-6zm-4 6a4 4 0 1 1 8 0v2h-8v-2zm5 7a1 1 0 1 1-2 0v-2a1 1 0 1 1 2 0v2z"
                            fill="#fff" />
                        <defs>
                            <linearGradient id="logoGrad" x1="0" y1="0" x2="36" y2="36">
                                <stop stop-color="#3b82f6" />
                                <stop offset="1" stop-color="#6366f1" />
                            </linearGradient>
                        </defs>
                    </svg>
                    <span class="logo-text">Password Generator</span>
                </a>

                <input type="checkbox" id="nav-check" aria-hidden="true">
                <label for="nav-check" class="nav-toggle" aria-label="Toggle navigation menu">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" />
                    </svg>
                </label>

                <nav class="main-nav" role="navigation" aria-label="Main navigation">
                    <ul>
                        <li><a href="#generator" tabindex="0">Generator</a></li>
                        <li><a href="#why-strong" tabindex="0">Why Strong Passwords</a></li>
                        <li><a href="#faq" tabindex="0">FAQ</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <main id="main-content" class="main-content" role="main">
        <section class="hero-section" aria-labelledby="hero-title">
            <div class="container">
                <h1 id="hero-title" class="hero-title">Password Generator</h1>
                <p class="hero-subtitle">Generate strong, random passwords instantly. Fully customizable, secure, and
                    free to use.</p>
            </div>
        </section>

        <section id="generator" class="container" aria-labelledby="generator-heading">
            <h2 id="generator-heading" class="d-flex justify-content-center mb-3">Password Generator Tool</h2>
            <article class="generator-card" role="application" aria-label="Password generator application">
                <div class="password-display">
                    <div id="password-output" class="password-text" role="textbox" aria-readonly="true"
                        aria-label="Generated password" tabindex="0">Click generate to create password</div>
                    <div class="password-actions">
                        <button type="button" id="copy-btn" class="action-btn btn-primary"
                            aria-label="Copy password to clipboard" disabled>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                aria-hidden="true">
                                <rect x="9" y="9" width="13" height="13" rx="2" />
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                            </svg>
                            Copy
                        </button>
                        <button type="button" id="refresh-btn" class="action-btn btn-secondary"
                            aria-label="Generate new password">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                aria-hidden="true">
                                <path d="M23 4v6h-6M1 20v-6h6" />
                                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
                            </svg>
                            Refresh
                        </button>
                    </div>
                </div>

                <div class="strength-container" role="status" aria-live="polite">
                    <div class="strength-label">
                        <span>Strength:</span>
                        <span id="strength-text">--</span>
                    </div>
                    <div class="strength-bar" aria-hidden="true">
                        <div id="strength-fill" class="strength-fill"></div>
                    </div>
                </div>

                <div class="slider-container">
                    <div class="slider-header">
                        <label for="length-slider" id="length-label">Password Length</label>
                        <span id="length-value" class="length-value" aria-live="polite">16</span>
                    </div>
                    <input type="range" id="length-slider" class="slider" min="8" max="64" value="16"
                        aria-labelledby="length-label" aria-valuemin="8" aria-valuemax="64" aria-valuenow="16">
                </div>

                <div class="options-grid" role="group" aria-label="Password character options">
                    <label class="option-item" tabindex="0">
                        <span class="custom-checkbox">
                            <input type="checkbox" id="uppercase" checked aria-describedby="uppercase-desc">
                            <span class="checkmark" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" fill="none" />
                                </svg>
                            </span>
                        </span>
                        <span class="option-label" id="uppercase-desc">Uppercase (A-Z)</span>
                    </label>

                    <label class="option-item" tabindex="0">
                        <span class="custom-checkbox">
                            <input type="checkbox" id="lowercase" checked aria-describedby="lowercase-desc">
                            <span class="checkmark" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" fill="none" />
                                </svg>
                            </span>
                        </span>
                        <span class="option-label" id="lowercase-desc">Lowercase (a-z)</span>
                    </label>

                    <label class="option-item" tabindex="0">
                        <span class="custom-checkbox">
                            <input type="checkbox" id="numbers" checked aria-describedby="numbers-desc">
                            <span class="checkmark" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" fill="none" />
                                </svg>
                            </span>
                        </span>
                        <span class="option-label" id="numbers-desc">Numbers (0-9)</span>
                    </label>

                    <label class="option-item" tabindex="0">
                        <span class="custom-checkbox">
                            <input type="checkbox" id="symbols" checked aria-describedby="symbols-desc">
                            <span class="checkmark" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" fill="none" />
                                </svg>
                            </span>
                        </span>
                        <span class="option-label" id="symbols-desc">Symbols (!@#$)</span>
                    </label>

                    <label class="option-item" tabindex="0">
                        <span class="custom-checkbox">
                            <input type="checkbox" id="easyread" aria-describedby="easyread-desc">
                            <span class="checkmark" aria-hidden="true">
                                <svg viewBox="0 0 24 24">
                                    <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" fill="none" />
                                </svg>
                            </span>
                        </span>
                        <span class="option-label" id="easyread-desc">Easy to Read</span>
                    </label>
                </div>

                <button type="button" id="generate-btn" class="generate-btn" aria-label="Generate new password">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
                    </svg>
                    Generate Password
                </button>
            </article>

            <aside class="history-section" id="history-section" aria-labelledby="history-title">
                <div class="history-header">
                    <h3 id="history-title-heading" class="history-title">
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path
                                d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
                        </svg>
                        Recent Passwords
                    </h3>
                    <button type="button" id="clear-history" class="clear-history"
                        aria-label="Clear password history">Clear All</button>
                </div>
                <div id="history-list" class="history-list" role="list" aria-label="Password history"></div>
            </aside>
        </section>

        <section id="why-strong" class="info-section" aria-labelledby="info-title">
            <div class="container">
                <h2 id="info-title" class="info-title">Why Strong Passwords Matter</h2>
                <div class="row">
                    <div class="col-md-4">
                        <article class="info-card">
                            <h3>Protect Your Identity</h3>
                            <p>Weak passwords are the leading cause of data breaches. A strong password is your first
                                line of defense against hackers trying to access your personal information, financial
                                accounts, and digital identity.</p>
                        </article>
                    </div>
                    <div class="col-md-4">
                        <article class="info-card">
                            <h3>Prevent Financial Loss</h3>
                            <p>Cybercriminals target accounts with weak passwords to steal money directly or commit
                                fraud. Using unique, complex passwords for banking and shopping sites significantly
                                reduces your risk of financial theft.</p>
                        </article>
                    </div>
                    <div class="col-md-4">
                        <article class="info-card">
                            <h3>Stay Ahead of Hackers</h3>
                            <p>Modern computers can crack simple passwords in seconds. A 12+ character password with
                                mixed characters would take centuries to crack using current technology, keeping your
                                accounts secure.</p>
                        </article>
                    </div>
                </div>
            </div>
        </section>

        <section id="faq" class="faq-section" aria-labelledby="faq-title">
            <div class="container">
                <h2 id="faq-title" class="faq-title">Frequently Asked Questions</h2>
                <div class="faq-list">
                    <article class="faq-item">
                        <h3 class="faq-question">What makes a password strong?</h3>
                        <p class="faq-answer">A strong password is at least 12 characters long and includes a mix of
                            uppercase letters, lowercase letters, numbers, and special symbols. It should avoid common
                            words, personal information, and sequential patterns like "123456" or "qwerty".</p>
                    </article>
                    <article class="faq-item">
                        <h3 class="faq-question">How often should I change my password?</h3>
                        <p class="faq-answer">Security experts now recommend changing passwords every 3-6 months for
                            sensitive accounts, or immediately if you suspect a breach. However, using unique, strong
                            passwords for each account is more important than frequent changes.</p>
                    </article>
                    <article class="faq-item">
                        <h3 class="faq-question">Is this password generator secure?</h3>
                        <p class="faq-answer">Yes, our password generator runs entirely in your browser using
                            JavaScript. No passwords are transmitted to or stored on any server. We use the Web Crypto
                            API for cryptographically secure random number generation.</p>
                    </article>
                    <article class="faq-item">
                        <h3 class="faq-question">What is the "Easy to Read" option?</h3>
                        <p class="faq-answer">The Easy to Read option excludes characters that look similar and can be
                            confused, such as: 0 (zero) and O (letter O), 1 (one) and l (lowercase L) and I (uppercase
                            i). This makes passwords easier to type manually without errors.</p>
                    </article>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer" role="contentinfo">
        <div class="container">
            <div class="row footer-grid">
                <div class="col-md-4">
                    <section class="footer-section">
                        <h4>Password Generator</h4>
                        <p>Generate strong, secure passwords instantly. Free, fast, and privacy-focused.</p>
                    </section>
                </div>
                <div class="col-md-4">
                    <section class="footer-section">
                        <h4>Quick Links</h4>
                        <ul class="footer-links">
                            <li><a href="/">Password Generator</a></li>
                            <li><a href="#why-strong">Why Strong Passwords</a></li>
                            <li><a href="#faq">FAQ</a></li>
                        </ul>
                    </section>
                </div>
                <div class="col-md-4">
                    <section class="footer-section">
                        <h4>Legal</h4>
                        <ul class="footer-links">
                            <li><a href="/terms.html" aria-label="Terms of Service">Terms of Service</a></li>
                            <li><a href="/privacy.html" aria-label="Privacy Policy">Privacy Policy</a></li>
                            <li><a href="/gdpr.html" aria-label="GDPR Compliance">GDPR Compliance</a></li>
                            <li><a href="/contact.html" aria-label="Contact Us">Contact</a></li>
                        </ul>
                    </section>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 Password Generator. All rights reserved. Your passwords are generated locally and never
                    stored.</p>
					<div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top:10px;">
        
        <a href="https://github.com/umitozay/password-generator" target="_blank" rel="me" style="text-decoration: none; color: #333; font-weight: 600; padding: 5px 10px; border: 1px solid #ddd; border-radius: 6px; background: white;">
            GitHub 💻
        </a>

        <a href="https://medium.com/@password-generator/" target="_blank" rel="me" style="text-decoration: none; color: #333; font-weight: 600; padding: 5px 10px; border: 1px solid #ddd; border-radius: 6px; background: white;">
            Medium ✍️
        </a>
        
        <a href="https://hashnode.com/@password-generator" target="_blank" rel="me" style="text-decoration: none; color: #333; font-weight: 600; padding: 5px 10px; border: 1px solid #ddd; border-radius: 6px; background: white;">
            Hashnode 🚀
        </a>

        <a href="https://tr.pinterest.com/passwordgeneratorsecure/" target="_blank" rel="me" style="text-decoration: none; color: #e60023; font-weight: 600; padding: 5px 10px; border: 1px solid #ddd; border-radius: 6px; background: white;">
            Pinterest 📌
        </a>

    </div>
	
            </div>
        </div>
    </footer>

    <div id="toast" class="toast" role="alert" aria-live="assertive">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
            <polyline points="22 4 12 14.01 9 11.01" />
        </svg>
        <span id="toast-message">Copied to clipboard!</span>
    </div>

    <script src="main.js"></script>
</body>

</html>