DEV Community

loading...
Cover image for How to create a notification badge with CSS ?

How to create a notification badge with CSS ?

murtuza
A blogger, a programmer and a human who tries to keep a good relationship with bugs!
・Updated on ・2 min read

Notification badges annoy me most of the times by popping up every now and then and I am pretty sure most of you experience similar thing, but anyways, let's see how we can create a notification badge using CSS.

Step 1: HTML

HTML

The element with a class 'base' will act as a profile image or an icon upon which we will position the notification indicator element having a class 'indicator'.

Step 2: CSS

css

First of all, we have to set up the height and width of the main 'base' element. Then we set the border-radius property to 50%. Border radius rounds the edges of the border by a specified amount. In our case the height and width of the element are equal and so, when we apply border radius of 50%, a square looking element will transform to a circle.

After applying a background color, the base element will look like a circle.

circle

Now, set the position of the base element to 'relative' which means that it will be positioned relative to its current position. This will not change anything but we want this property to position the child elements, more on that in a second.

You can also add an image instead of a background color to the base element, just like this.

css

Now, let's design the indicator.

First of all, set the position of the indicator as 'absolute' which means that it will be positioned inside the ancestor element which has its position as 'relative'.

Then, we will define the final location of the indicator by setting the values of top, bottom, right and left properties of the indicator.

css

The 'bottom' property will offset the 'indicator' element by 60% of the height of the 'base' element from the bottom of the 'base' element.

Similarly, the 'left' property will offset the 'indicator' element by 60% of the width of the 'base' element from the left of the 'base' element.

result

Next, we will add a border having the color same as the 'body' element having a border-radius of 50%.

css

Then, we will style the notification counter.

css

In order to center the notification count number, we can add 'flex' properties to its parent element.

css

The final output will be:

final output

Discussion (20)

Collapse
afif profile image
Temani Afif

You can also rely on mask to have transparency, related: stackoverflow.com/a/51377952/8620333

Collapse
inhuofficial profile image
InHuOfficial

You ok buddy...you are recommending SVG! πŸ˜œπŸ˜‚

Collapse
afif profile image
Temani Afif

not really, the question was initially using SVG so I gave the proper solution with SVG and then I added the CSS mask solution to show that it's also easy with CSS ;)

Thread Thread
inhuofficial profile image
InHuOfficial

Phew, for a second there I was going to call someone to come and check on you! 😜

Thread Thread
thefuckergithub profile image
thefuckergithub

lol

Thread Thread
thefuckergithub profile image
thefuckergithub

olo

Collapse
nikhil27b profile image
Nikhil Bobade

CSS is better option for me

Collapse
louislow profile image
Louis Low • Edited

Can be easily done it with Yogurt CSS.

Collapse
murtuzaalisurti profile image
murtuza Author

Sure, but I think this is the easy way!

Collapse
murtuzaalisurti profile image
murtuza Author

Great!

Collapse
murtuzaalisurti profile image
murtuza Author

This is great! But I tried to make it as simple as possible.

Collapse
paulcodes profile image
Paul Golubkov

Hi! Great article! Here is some advices for you

Good job!

Collapse
murtuzaalisurti profile image
murtuza Author

Sure, thanks. I will definitely take that into consideration.

Collapse
genakalinovskiy profile image
Gena Kainovskiy

Good, but what do you think about improving this solution with accessibility supporting. See example w3.org/WAI/WCAG21/Techniques/aria/....
thank you.

Collapse
murtuzaalisurti profile image
murtuza Author

Thanks a lot!

Collapse
murtuzaalisurti profile image
murtuza Author

Improved!

Collapse
luanzinhowhoami profile image
Luan Campos

Show

Collapse
andy profile image
Andy Zhao (he/him)

Very cool!

Collapse
czarwalz profile image
CzarWalz

I love this

Collapse
murtuzaalisurti profile image
murtuza Author

That's great!