OneTaskBy Tim King · Updated
Password Strength Meter Generator
Segmented or Continuous Strength Bar With Four Levels and a Scoring Script
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Password Strength Meter works
This password strength meter generator gives live feedback as people type. A strength meter turns "your password is too weak" from a rejection into live feedback. Pick a segmented or continuous bar, set the four colours and field styling, and copy the markup, CSS and a forty-line script that scores as the user types. Edit the sample password in the preview to watch it move.
Password strength meter: what it actually measures
The component is a wrapper <div class="psm"> holding a label, the password input, the meter
and a text label for the current level. The wrapper carries a data-score attribute from 0 to
4, and every visual change is driven by that one attribute in CSS. The script's whole job is to
compute the score and set the attribute.
Scoring. Five checks each add a point: at least 8 characters, at least 12, mixed upper and lower case, a digit, and a symbol. The total is scaled to a 1–4 level, with 0 reserved for an empty field. It is deliberately simple and transparent: users can see what raises the score, and you can read the rules in a few seconds. It is not an entropy estimate and does not check dictionaries, common passwords or breached lists — see the FAQ for stronger options.
Segments versus bar. The segmented meter has four equal blocks and the CSS colours the first
n using :nth-child(-n+N), a selector that matches the first N children. The continuous style
is a single track with a fill whose width jumps to 25, 50, 75 or 100 percent. Both animate the
change with a short transition so the meter feels responsive rather than flickery.
Colours per level. Each level has its own colour rule, generated from the four colour inputs. Weak and Too weak share the first colour. The level label under the bar takes the same colour, so the meaning is carried by text as well as colour.
Accessibility. The meter blocks are decorative and hidden from assistive tech with
aria-hidden. The text label is what screen readers use: it has aria-live="polite" so changes
are announced without interrupting, and the input's aria-describedby points at it so the
current level is read when the field gains focus. Use autocomplete="new-password" on sign-up
forms so password managers offer to generate one.
Never block on the meter alone. The meter is guidance. Enforce your real policy server side, and prefer a minimum length plus a breached-password check over composition rules, which is what current NIST guidance recommends.
FAQ
Is this scoring good enough for security?
It is good enough for feedback, not for policy. Length dominates real strength, and the scoring reflects that, but it cannot know that "Password123!" is on every cracking list. For serious estimates use a library such as zxcvbn, which models dictionary words, keyboard patterns and dates, and keep the meter's display code as it is.
How do I plug in zxcvbn or another scorer?
Replace the score function in the script with a call to your library and map its result to 0–4.
zxcvbn already returns a 0–4 score, so it is a one-line swap. Everything else, including the CSS
and the live region, stays the same.
Should I show the requirements as a checklist too?
Often yes. A list of rules with ticks that turn green as each is met tells the user exactly what is missing, which a bar alone cannot. Keep the bar for the overall impression and add a small list underneath for the specifics.
Why does the label use aria-live instead of role="status"?
They are nearly equivalent; role="status" implies aria-live="polite". The explicit attribute
is used here so the label can stay a plain <span> and the intent is obvious to whoever reads the
markup next.
Can I hide the meter until the user starts typing?
Yes. Add .psm[data-score="0"] .psm-meter { visibility: hidden; } and the bar appears only when
there is something to score. The label is already empty at score 0, so nothing else changes.
See also: all Forms & Inputs tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Colour.
Related tools
Password Visibility Toggle
Show/hide password button with eye icon or text and correct ARIA state.
Floating Label Form
Material-style floating labels in pure CSS with outlined, filled and underline variants.
Form Progress Bar
Step indicators and progress bars for multi-step forms and checkouts.
Custom Radio Button Builder
Accessible custom radio buttons as dots, cards or pill segments.
Dual Range Slider
Two-thumb min/max slider for price filters, no library needed.