30+ CSS Notifications

Last Updated on by in CSS Examples
CSS Notifications

If you are seeking a creative and stylish way to display important messages, like alerts or updates, that grasp the user’s attention at first glance, there is no need to seek elsewhere!

In this post, we are showcasing a comprehensive collection of free HTML and CSS notifications sourced from trustworthy websites like GitHub and CodePen. These sites meticulously craft innovative, stylish notifications using the true power of CSS, catering to diverse website themes and design objectives.

Our comprehensive compilation ensures access to the latest and most stylish UI notification elements, ensuring effective communication and user engagement in a creative manner. Whether you’re a developer or designer, with these examples, you can notify users about success, errors, unsuccessful actions, and essential messages.

Our collection is fully equipped with a notification UI with dynamic transitions and animations, allowing web designers or developers to significantly contribute to user engagement and capture users’ interest, making the browsing experience memorable.

Whether you’re building an e-commerce site, a product showcasing application, or aiming to exhibit critical information in a user-centric manner, these CSS notification code examples guarantee that you always have access to eye-catching, visually appealing, and innovative notifications for your user interfaces.

Let’s check out our cutting-edge and creative notification designs and enhance website aesthetics, user engagement, and the user experience.

1. Notification Badge III

See the Pen
Notification Badge III
by Gokul S (@iamsgokul)
on CodePen.


Author: Gokul S @iamsgokul
Links: Source Code / Demo
Created on: April  23, 2019
Made with: HTML, CSS(SCSS)

2. Hop Over Notification Badge

See the Pen
Hop Over Notification Badge
by Paul (@plfstr)
on CodePen.


Author: Paul @plfstr
Links: Source Code / Demo
Created on: August 15, 2013
Made with: HTML, CSS

3. Pop Up Social Feed Notification

See the Pen
Pop up social feed notification
by Nooray Yemon (@yemon)
on CodePen.


Author: Nooray Yemon @yemon
Links: Source Code / Demo
Created on: July 3, 2018
Made with: HTML, CSS

4. CSS3 Menu With Notification Badges

See the Pen
CSS3 menu with notification badges
by ittik (@ittik)
on CodePen.


Author: ittik @ittik
Links: Source Code / Demo
Created on: May 4, 2019
Made with: HTML, CSS

5. Only CSS Notification Alert

See the Pen
Only CSS Notification alert
by Vijaya Kumar Vulchi (@vulchivijay)
on CodePen.


Author: Vijaya Kumar Vulchi @vulchivijay
Links: Source Code / Demo
Created on: April 15, 2016
Made with: HTML, CSS

6. Alert Message

See the Pen
error, success, warning and alert Messages
by Swarup Kumar Kuila (@uiswarup)
on CodePen.


Author: Swarup Kumar Kuila @uiswarup
Links: Source Code / Demo
Created on: December 9, 2019
Made with: HTML, CSS

7. Notification Bell

See the Pen
Notification Bell
by Gabriele Corti (@borntofrappe)
on CodePen.


Author: Gabriele Corti @borntofrappe
Links: Source Code / Demo
Created on: July 12, 2019
Made with: HTML, CSS, JS

8. Green And Red Flash Message (Error/Success)

See the Pen
Daily UI#011 | Flash Message (Error/Success)
by Julie Park (@juliepark)
on CodePen.


Author: Julie Park @juliepark
Links: Source Code / Demo
Created on: May 23, 2018
Made with: HTML, CSS(SCSS)

9. Notification Flash Message

See the Pen
Notification flash message
by Ryan Arthur (@arthurra)
on CodePen.


Author: Ryan Arthur @arthurra
Links: Source Code / Demo
Created on: October 18, 2014
Made with: HTML(Slim), CSS(Sass), JS

10. New Alert Messages Bootstrap 3 Font Awesome

See the Pen
New alert messages bootstrap 3 font awesome
by Jaime (@jimmycow)
on CodePen.


Author: Jaime @jimmycow
Links: Source Code / Demo
Created on: February 15, 2019
Made with: HTML, CSS(SCSS)

11. Notification Bell

See the Pen
Notification bell
by mitsuruog (@mitsuruog)
on CodePen.


Author: mitsuruog @mitsuruog
Links: Source Code / Demo
Created on: June 21, 2017
Made with: HTML, CSS(SCSS)

12. Circle Notifications

See the Pen
Circle notifications
by Adam Mortka (@amortka)
on CodePen.


Author: Adam Mortka @amortka
Links: Source Code / Demo
Created on: September 4, 2014
Made with: HTML, CSS

13. Mail Notification

See the Pen
Mail Notification
by Aaron Iker (@aaroniker)
on CodePen.


Author: Aaron Iker @aaroniker
Links: Source Code / Demo
Created on: August 13, 2020
Made with: HTML, CSS(SCSS)

14. Google Plus Loading Animation In Pure CSS

See the Pen
Google Plus loading animation in pure CSS
by Girish Sharma (@grssam)
on CodePen.


Author: Girish Sharma @grssam
Links: Source Code / Demo
Created on: July 6, 2013
Made with: HTML, CSS

15. Icons Sweet Alert Personnalisé

See the Pen
Icons Sweet Alert Personnalisé
by KAM3LEON (@Kam3leoN)
on CodePen.


Author: KAM3LEON @Kam3leoN
Links: Source Code / Demo
Created on: December 9, 2019
Made with: HTML, CSS, JS

16. CSS Animated Notification Badge

See the Pen
CSS animated notification badge
by sjmcpherson (@sjmcpherson)
on CodePen.


Author: sjmcpherson @sjmcpherson
Links: Source Code / Demo
Created on: October 7, 2013
Made with: HTML, CSS, JS

17. Pulsing Notification

See the Pen
Pulsing Notification
by Derek Wheelden (@frxnz)
on CodePen.


Author: Derek Wheelden @frxnz
Links: Source Code / Demo
Created on: January 13, 2014
Made with: HTML, CSS(SCSS)

18. Notification Bell Animation

See the Pen
Notification bell animation
by Benjamin Sterling (@ben_sterling)
on CodePen.


Author: Benjamin Sterling @ben_sterling
Links: Source Code / Demo
Created on: May 3, 2019
Made with: HTML, CSS(SCSS)

19. Indeterminate notification dot with nice subtle glow

See the Pen
indeterminate notification dot with nice subtle glow
by Adam Argyle (@argyleink)
on CodePen.


Author: Adam Argyle @argyleink
Links: Source Code / Demo
Created on: November 11, 2022
Made with: HTML, CSS

20. Notification Bell

See the Pen
Notification Bell
by Joana Pereira (@joanaborges)
on CodePen.


Author: Joana Pereira @joanaborges
Links: Source Code / Demo
Created on: September 16, 2018
Made with: HTML(Pug), CSS(SCSS)

21. Pure Css Notification Bell Hover

See the Pen
Pure Css Notification Bell Hover
by Gabriel Velez (@Golez)
on CodePen.


Author: Gabriel Velez @Golez
Links: Source Code / Demo
Created on: November 6, 2018
Made with: HTML, CSS

22. Signs

See the Pen
Signs
by NANOUU (@antoniasymeonidou)
on CodePen.


Author: NANOUU @antoniasymeonidou
Links: Source Code / Demo
Created on: November 23, 2021
Made with: HTML, CSS

23. CSS Animated Web Notification

See the Pen
CSS Animated Web Notification
by Maeve (@vcmg)
on CodePen.


Author: Maeve @vcmg
Links: Source Code / Demo
Created on: May 22, 2015
Made with: HTML, CSS

24. Facebook Notification

See the Pen
Facebook Notification
by EvonDev (@evondev)
on CodePen.


Author: EvonDev @evondev
Links: Source Code / Demo
Created on: July 30, 2020
Made with: HTML, CSS(SCSS)

25. Corner-shape – Augmented-UI – Prompt

See the Pen
Evangelizing corner-shape #1, powered by Augmented-UI: Prompt
by Rock Starwind (@RockStarwind)
on CodePen.


Author: Rock Starwind @RockStarwind
Links: Source Code / Demo
Created on: September 23, 2019
Made with: HTML(Pug), CSS(SCSS)

26. Notification Bell Icon Layered Shake Animation Effect

See the Pen
Notification Bell Icon Layered Shake Animation Effect
by brian1983 (@brian1983)
on CodePen.


Author: brian1983 @brian1983
Links: Source Code / Demo
Created on: February 18, 2020
Made with: HTML, CSS

27. SVG vs CSS Notification Badge

See the Pen
SVG vs CSS Notification Badge
by Vince Kurzawa (@vkzawa)
on CodePen.


Author: Vince Kurzawa @vkzawa
Links: Source Code / Demo
Created on: April 1, 2017
Made with: HTML, CSS(SCSS)

28. CSS Notification Hover Animation

See the Pen
CSS Notification Hover Animation
by Shunya Koide (@shunyadezain)
on CodePen.


Author: Shunya Koide @shunyadezain
Links: Source Code / Demo
Created on: November 4, 2020
Made with: HTML, CSS(SCSS)

29. Simple CSS Notification From Top

See the Pen
Simple CSS Notification From Top
by Teja Sukmana (@tejasukmana)
on CodePen.


Author: Teja Sukmana @tejasukmana
Links: Source Code / Demo
Created on: March 31, 2016
Made with: HTML, CSS, JS

30. Css notification

See the Pen
Css notification
by Maxime Bourgeois (@SupportMan92)
on CodePen.


Author: Maxime Bourgeois @SupportMan92
Links: Source Code / Demo
Created on: June 16, 2020
Made with: HTML, CSS

31. Dark Mode Notifications

See the Pen
Dark Mode Notifications
by Gabrielle Wee (@gabriellewee)
on CodePen.


Author: Gabrielle Wee @gabriellewee
Links: Source Code / Demo
Created on: June 5, 2018
Made with: HTML, CSS(SCSS), JS

❤️ Checkout Popular CSS Collection

Digamber - Author positronX.io

Digamber, the founder of PositronX, is a certified web developer with over 10 years of experience. He possesses a curiosity for learning new things and enjoys playing cricket on his days off.