Sample CSS for Notification Badges

Over the past decade, notification badges have become so ubiquitous in web apps that I suspect they’re now deeply embedded in our psyches. The little red notification icon has in a short period used its Pavlovian power to tunnel into and damage our brain chemistry. Cult leaders, torturers and Jungian mystics should consider incorporating it into their semiotic toolbox.

a message notification on new facebook. or by the time you’re reading this, old facebook.
notifications on reddit
and on the reddit favicon
linkedin trying to tell me to look at more stuff
i have a new… date? and new settings? whatever it is, i’m supposed to look at it
slack notifications — note both the red and grey versions

Suffice to say, if you’re a web developer or designer today, notification badges are likely to come up for you eventually. Here are some samples you can use as a starting point.

A basic “click me” command. Your brain processes it before you’re even conscious of it.

if you use badges to direct users to your store, you’re kind of engaging in psychological warfare with them.
<span class="badge" style="
position: relative;
top: -7px;
right: 4px;
padding: 0px 4px;
border-radius: 100%;
background: #ff8e0d;
color: white;
"> &nbsp;</span>

You should position with rem rather than pixels; I’m just mocking it up with px.

A variation used by Discord, LinkedIn, and others.

i’m different

This can be achieved with an inner badge, or even by using a text character like a period or bullet point.

yep, one store

This can be inserted as plain text into the badge. You will need to play with the padding and sizes to accommodate it.

Not used as much these days, but cute. It’s the same span, with the padding and the border-radius changed.

<span class="badge" style="
position: relative;
top: -7px;
right: 7px;
padding: 2px 2px;
border-radius: 20%;
background: #ff8e0d;
color: white;

Weakly Pseudonymous Software Engineer