35+ CSS Notifications

Are you looking for eye-catching CSS notifications for your web project? Our latest collection of CSS notifications is here to uplift your creative sense. In this compilation, we are showcasing 35+ HTML and CSS notification code examples that will draw your site’s audience’s attention.

We’ve gathered these CSS alert messages from various platforms, such as Codepen, GitHub, and more. These alert messages are unique and stylish and can be used by web designers, web developers, or product designers to attract attention while ensuring redability and usability.

From simple notification popups to advanced slide-down notification bars, these notification bars will inform users about actions or status swiftly. Browser through our hand-picked top CSS notification code snippets, customise, and make your web app’s design visually appealing.

1. Notifications

See the Pen <a href="https://codepen.io/hmps/pen/gOPeBN"> Notifications</a> by Hampus Persson (<a href="https://codepen.io/hmps">@hmps</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hampus Persson
Source: Code / Demo
Created on: APRIL 8, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

2. iOS Notifications

See the Pen <a href="https://codepen.io/ykadosh/pen/ZERjpRJ"> iOS Notifications</a> by Yoav Kadosh (<a href="https://codepen.io/ykadosh">@ykadosh</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yoav Kadosh
Source: Code / Demo
Created on: NOVEMBER 28, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(TypeScript)

3. Slide-Down Notification Bar

See the Pen <a href="https://codepen.io/bradfrost/pen/krNqvV"> Slide-Down Notification Bar</a> by Brad Frost (<a href="https://codepen.io/bradfrost">@bradfrost</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brad Frost
Source: Code / Demo
Created on: SEPTEMBER 10, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. Lotsa Notifications

See the Pen <a href="https://codepen.io/jkantner/pen/XWzePgp"> Lotsa Notifications</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: FEBRUARY 15, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

5. Notification Animation

See the Pen <a href="https://codepen.io/simeonoff/pen/QKYwba"> Notification Animation</a> by Simeon Simeonoff (<a href="https://codepen.io/simeonoff">@simeonoff</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Simeon Simeonoff
Source: Code / Demo
Created on: OCTOBER 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

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

See the Pen <a href="https://codepen.io/juliepark/pen/vjMOKQ"> Daily UI#011 | Flash Message (Error/Success)</a> by Julie Park (<a href="https://codepen.io/juliepark">@juliepark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Julie Park
Source: Code / Demo
Created on: MAY 23, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. Notification Badge III

See the Pen <a href="https://codepen.io/iamsgokul/pen/axawKr"> Notification Badge III</a> by Gokul S (<a href="https://codepen.io/iamsgokul">@iamsgokul</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gokul S
Source: Code / Demo
Created on: APRIL 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS)

8. CSS Notification Hover Animation

See the Pen <a href="https://codepen.io/shunyadezain/pen/rNLKqpr"> CSS Notification Hover Animation</a> by Shunya Koide / popo (<a href="https://codepen.io/shunyadezain">@shunyadezain</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shunya Koide
Source: Code / Demo
Created on: NOVEMBER 4, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. Notification Flash Message

See the Pen <a href="https://codepen.io/arthurra/pen/ExJzLw"> Notification flash message</a> by Ryan Arthur (<a href="https://codepen.io/arthurra">@arthurra</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Arthur
Source: Code / Demo
Created on: OCTOBER 18, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(Sass), JavaScript

10. Indeterminate notification dot with nice subtle glow

See the Pen <a href="https://codepen.io/argyleink/pen/XWYRdmo"> indeterminate notification dot with nice subtle glow</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Argyle
Source: Code / Demo
Created on: NOVEMBER 11, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Hop Over Notification Badge

See the Pen <a href="https://codepen.io/plfstr/pen/AaVENv"> Hop Over Notification Badge</a> by Paul (<a href="https://codepen.io/plfstr">@plfstr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paul
Source: Code / Demo
Created on: AUGUST 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Simple CSS Notification From Top

See the Pen <a href="https://codepen.io/tejasukmana/pen/eZEjwg"> Simple CSS Notification From Top</a> by Teja Sukmana (<a href="https://codepen.io/tejasukmana">@tejasukmana</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Teja Sukmana
Source: Code / Demo
Created on: MARCH 31, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. New Alert Messages Bootstrap 3 Font Awesome

See the Pen <a href="https://codepen.io/jimmycow/pen/mvzQGm"> New alert messages bootstrap 3 font awesome</a> by Jaime (<a href="https://codepen.io/jimmycow">@jimmycow</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jaime
Source: Code / Demo
Created on: FEBRUARY 15, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. Pure Css Notification Bell Hover

See the Pen <a href="https://codepen.io/Golez/pen/eQNRje"> Pure Css Notification Bell Hover</a> by Gabriel Velez (<a href="https://codepen.io/Golez">@Golez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gabriel Velez
Source: Code / Demo
Created on: NOVEMBER 6, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Signs

See the Pen <a href="https://codepen.io/antoniasymeonidou/pen/OJjYzGE"> Signs</a> by NANOUU (<a href="https://codepen.io/antoniasymeonidou">@antoniasymeonidou</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: NANOUU
Source: Code / Demo
Created on: NOVEMBER 23, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Notification Bell

See the Pen <a href="https://codepen.io/mitsuruog/pen/LLyQNq"> Notification bell</a> by mitsuruog (<a href="https://codepen.io/mitsuruog">@mitsuruog</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: mitsuruog
Source: Code / Demo
Created on: JUNE 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. Notification Bell

See the Pen <a href="https://codepen.io/joanaborges/pen/RYYLyJ"> Notification Bell</a> by Joana Pereira (<a href="https://codepen.io/joanaborges">@joanaborges</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joana Pereira
Source: Code / Demo
Created on: SEPTEMBER 16, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

18. Pop Up Social Feed Notification

See the Pen <a href="https://codepen.io/yemon/pen/gKENEZ"> Pop up social feed notification</a> by Nooray Yemon (<a href="https://codepen.io/yemon">@yemon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nooray Yemon
Source: Code / Demo
Created on: JULY 3, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Notification Bell Animation

See the Pen <a href="https://codepen.io/ben_sterling/pen/ZNzBOQ"> Notification bell animation</a> by Benjamin Sterling (<a href="https://codepen.io/ben_sterling">@ben_sterling</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Benjamin Sterling
Source: Code / Demo
Created on: MAY 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. Circle Notifications

See the Pen <a href="https://codepen.io/amortka/pen/RwYGOo"> Circle notifications</a> by Adam Mortka (<a href="https://codepen.io/amortka">@amortka</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Mortka
Source: Code / Demo
Created on: SEPTEMBER 4, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. CSS Animated Web Notification

See the Pen <a href="https://codepen.io/vcmg/pen/MwjXvJ"> CSS Animated Web Notification</a> by Maeve (<a href="https://codepen.io/vcmg">@vcmg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maeve
Source: Code / Demo
Created on: MAY 22, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. CSS3 Menu With Notification Badges

See the Pen <a href="https://codepen.io/ittik/pen/NVKVgV"> CSS3 menu with notification badges</a> by ittik (<a href="https://codepen.io/ittik">@ittik</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ittik
Source: Code / Demo
Created on: MAY 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. CSS notification

See the Pen <a href="https://codepen.io/SupportMan92/pen/GRojzpX"> Css notification</a> by Maxime Bourgeois (<a href="https://codepen.io/SupportMan92">@SupportMan92</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maxime Bourgeois
Source: Code / Demo
Created on: JUNE 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Mail Notification

See the Pen <a href="https://codepen.io/aaroniker/pen/GRZoJdG"> Mail Notification</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aaron Iker
Source: Code / Demo
Created on: AUGUST 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Facebook Notification

See the Pen <a href="https://codepen.io/evondev/pen/XWXLggd"> Facebook Notification</a> by EvonDev (<a href="https://codepen.io/evondev">@evondev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: EvonDev
Source: Code / Demo
Created on: JULY 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. Only CSS Notification Alert

See the Pen <a href="https://codepen.io/vulchivijay/pen/pyLBRx"> Only CSS Notification alert </a> by Vijaya Kumar Vulchi (<a href="https://codepen.io/vulchivijay">@vulchivijay</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vijaya Kumar Vulchi
Source: Code / Demo
Created on: APRIL 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. Pulsing Notification

See the Pen <a href="https://codepen.io/frxnz/pen/noOjqM"> Pulsing Notification</a> by Derek Wheelden (<a href="https://codepen.io/frxnz">@frxnz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Derek Wheelden
Source: Code / Demo
Created on: JANUARY 13, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS)

28. Google Plus Loading Animation In Pure CSS

See the Pen <a href="https://codepen.io/grssam/pen/AXgqpg"> Google Plus loading animation in pure CSS</a> by Girish Sharma (<a href="https://codepen.io/grssam">@grssam</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Girish Sharma
Source: Code / Demo
Created on: JULY 6, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. Corner-shape – Augmented-UI – Prompt

See the Pen <a href="https://codepen.io/RockStarwind/pen/yLBZaom"> Evangelizing corner-shape #1, powered by Augmented-UI: Prompt</a> by Rock Starwind (<a href="https://codepen.io/RockStarwind">@RockStarwind</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rock Starwind
Source: Code / Demo
Created on: SEPTEMBER 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

30. Dark Mode Notifications

See the Pen <a href="https://codepen.io/gabriellewee/pen/MXyKLW"> Dark Mode Notifications</a> by Gabrielle Wee (<a href="https://codepen.io/gabriellewee">@gabriellewee</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gabrielle Wee
Source: Code / Demo
Created on: JUNE 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

31. Notification Bell Icon Layered Shake Animation Effect

See the Pen <a href="https://codepen.io/brian1983/pen/eYNzZEP"> Notification Bell Icon Layered Shake Animation Effect</a> by brian1983 (<a href="https://codepen.io/brian1983">@brian1983</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: brian1983
Source: Code / Demo
Created on: FEBRUARY 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Icons Sweet Alert Personnalisé

See the Pen <a href="https://codepen.io/Kam3leoN/pen/mdyVwBm"> Icons Sweet Alert Personnalisé</a> by KAM3LEON (<a href="https://codepen.io/Kam3leoN">@Kam3leoN</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: KAM3LEON
Source: Code / Demo
Created on: DECEMBER 9, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

33. SVG vs CSS Notification Badge

See the Pen <a href="https://codepen.io/vkzawa/pen/ZeVdpr"> SVG vs CSS Notification Badge</a> by Vince Kurzawa (<a href="https://codepen.io/vkzawa">@vkzawa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vince Kurzawa
Source: Code / Demo
Created on: APRIL 1, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Notification Bell

See the Pen <a href="https://codepen.io/borntofrappe/pen/LKaqOM"> Notification Bell</a> by Gabriele Corti (<a href="https://codepen.io/borntofrappe">@borntofrappe</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gabriele Corti
Source: Code / Demo
Created on: JULY 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

35. CSS Animated Notification Badge

See the Pen <a href="https://codepen.io/sjmcpherson/pen/nodqoq"> CSS animated notification badge</a> by sjmcpherson (<a href="https://codepen.io/sjmcpherson">@sjmcpherson</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: sjmcpherson
Source: Code / Demo
Created on: OCTOBER 7, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

36. Alert Message

See the Pen <a href="https://codepen.io/uiswarup/pen/RwNraeW"> error, success, warning and alert Messages</a> by Swarup Kumar Kuila (<a href="https://codepen.io/uiswarup">@uiswarup</a>) on <a href="https://codepen.io">CodePen</a>. Author: Swarup Kumar Kuila
Source: Code / Demo
Created on: DECEMBER 9, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS