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 circle

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 circle with a dot

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.

The almighty number

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.

Text

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;
">NEW</span>