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