Collection of Free HTML and CSS Notification Code Examples: Boxes, Badges, and More

Browse a collection of free HTML and CSS notification code examples, including boxes, badges, and more, to create engaging and interactive notifications for your website.

Signs

Author:
NANOUU | November 23, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css
Facebook Notification

Facebook Notification

Author:
EvonDev | July 30, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Alert Message

Author:
Swarup Kumar Kuila | December 9, 2019
Made with:
HTML / CSS

About a code

Animated Bootstrap alert messages.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, font-awesome.css

Notification UI

Author:
Rock Starwind | September 23, 2019
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
augmented.css
Messages Bootstrap 3

Messages Bootstrap 3

Author:
Jaime | February 15, 2019
Made with:
HTML / CSS (SCSS)

About a code

New alert messages Bootstrap 3 with Font-Awesome.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, font-awesome.css

Pop Up Social Feed Notification

Author:
Nooray Yemon | July 3, 2018
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Flash Notification (Error/Success)

Flash Notification (Error/Success)

Author:
Julie Park | May 22, 2018
Made with:
HTML / CSS (SCSS)

About a code

Error/success flash notification card design with keyframes animations! Bouncing happy face for success message & rolling sad face for error message.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
CSS Animated Web Notification

CSS Animated Web Notification

Author:
Maeve | May 22, 2015
Made with:
HTML / CSS

About a code

HTML and CSS web notification animation.

Compatible browsers:
Chrome, Firefox, Opera, Safari
Dependencies:
-
Indeterminate Notification Dot

Indeterminate Notification Dot

Author:
Adam Argyle | November 11, 2022
Made with:
HTML / CSS

About a code

Indeterminate notification dot with nice subtle glow.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Mail Notification

Author:
Aaron Iker | August 12, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Notification Bell Icon Layered Shake Animation Effect

Author:
brian1983 | February 18, 2020
Made with:
HTML / CSS

About a code

Animated Google Material Design icon. Three layers. CSS rotate transform and opacity animation effects.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Icons Sweet Alert

Author:
KAM3LEON | December 9, 2019
Made with:
HTML / CSS

About a code

Icons sweet alert: alert, warning, info, success.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Notification Bell Animation

Author:
Benjamin Sterling | May 3, 2019
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Notification Badge

Author:
Gokul S | April 23, 2019
Made with:
HTML / CSS

About a code

A notification badge to show really important emergency messages.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Only CSS Notification Alert

Only CSS Notification Alert

Author:
Vijaya Kumar Vulchi | April 15, 2016
Made with:
HTML / CSS

About a code

Simple notification alert with CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
CSS Circle Notifications

CSS Circle Notifications

Author:
Adam Mortka | September 4, 2014
Made with:
HTML / CSS

About a code

Move cursor over icon on the left to animate marks. To change mark color use following class's: .green, .blue. Marks are prepare to handle with two-digit numbers from 0 to 99. If your number is greater than 99 use logic to display 99+.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
bootstrap-glyphicons.css
Pulsing Notification Badge

Pulsing Notification Badge

Author:
Derek Wheelden | January 13, 2014
Made with:
HTML / CSS (SCSS)

About a code

Just what it looks like.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Hop Over Notification Badge

Hop Over Notification Badge

Author:
Paul | August 15, 2013
Made with:
HTML / CSS

About a code

Hop over effect for notification-type badges using CSS3 transform and :hover.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨