Build a dot, count or short-text notification badge, position it precisely on any corner of an icon, add a pulsing ping ring, then copy the HTML and CSS.
From a quiet dot to a bold capped count to an animated ping ring, style the badge that matches your product's tone.
Switch badge type instantly, with automatic sizing and padding for each.
Pick a corner, then fine-tune the exact offset with two sliders.
Toggle a pulsing ring that always matches the badge's color automatically.
Style it, place it, then copy the code.
A notification badge only works if it is instantly readable at a glance, which is why its size, color and position matter more than they might seem to. A plain dot is the quietest option, useful when the exact count does not matter and you just need to signal that something changed. A number badge adds precision but needs a sensible cap, since a three or four digit count next to a small icon quickly becomes cramped and harder to read than a simple 99+. Corner placement and fine offset control matter because badges sit right at the edge of an icon's bounding box, where even a few pixels of misalignment looks noticeably off. An animated ping ring adds urgency, so it is worth reserving for notifications that genuinely need attention rather than using it everywhere.
Capping large numbers at 99+ keeps the badge a predictable size regardless of how large the underlying count actually gets.
A small border matching the icon's background helps the badge read clearly even when it overlaps a busy icon or image.
Using background-color: inherit on the ::before pseudo-element means the ring always matches the badge's color with no extra CSS variables needed.
For screen reader users, pair a visual badge with an aria-label or visually hidden text describing the count on the parent button.
This tool caps the visible number at 99 automatically and swaps in 99+ once the real count goes above that, matching the convention used by most apps.
A ::before pseudo-element on the badge is sized to match it and animated to scale up and fade out on a loop, using background-color: inherit so it always matches the badge's color automatically.
Choose one of four corners, then fine-tune the exact position with the X and Y offset sliders to nudge the badge in either direction.
Yes. A dot renders as a small plain circle, while number and text badges become a pill or circle sized to fit their content, with padding added automatically for longer text.
Yes. It is completely free, requires no account, and the badge preview and generated CSS are built entirely in your browser.
Keep polishing your interface details with these free online CSS tools.