CSS Alerts

(24 submissions) | Feb 7, 2017

A useful set of ready to use CSS alert code snippets featuring notifications, alert boxes, alert bubbles and other UI elements.

  • A CSS reminder app concept that can be used as is in mobile apps focused on exercising and fitness. This snippet has really cool features like a backward counter, an animated wave effect going from top to bottom, a menu that allows you to alternate among three different layouts (water, coffee time and office break), and language change.

  • A simple set of modals made in CSS for notifications or alerts. These include the regular success, warning and error messages, along with icons for easy understanding. The modals also include descriptive text and action buttons.

  • This is a growl theme with a demo attached. It is a version in which you can see different animations for the notifications, including fading, flipping and other animations. The notifications have a nice realistic style, and the author, Daryl Ginn, has also attached the theme for anyone who wants to give it a try.

  • This little creation was made by Jason Melgoza about 2 years ago! I have added some vendor prefixed versions of gradients and also added the “No” button with some other improvements. This can be used as modals, alerts, confirmations, popups, etc.

  • Ivan Torres, shared this nice top-bar notification, which can be used to show relevant notices in your site.

  • Hugo Giraudel created this nice dark alert box with two option buttons. You can find more about alex at his website

  • Today I’ve done some sexy notifications for your next project.

  • Simulates the style of the growl theme I currently have installed. Everything is created with CSS except the images and JS is used for adding other growl notifications after a short duration. Works best in Firefox and Webkit (Chrome/Safari) browsers. By adrusi  from

    Browser support:

    ✓ Chrome 25.0

    ✓ FireFox 19.0.2

    ✓ Safari 5.1.7

    X IE 10

  • Jlevinsogn  has shared with us this set of alerts, links and buttons with a summer style. It’s supported in all browsers.

    Browser support:

    ✓ Chrome 25.0

    ✓ FireFox 19.0.2

    ✓ Safari 5.1.7

    ✓ IE 10

  • This is a free UI element coded with HTML5, CSS3, and Sass. Tested in Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8 (and newer), it’s a simple app navigation with colorful notification badges. The badges are generated from a single input color using Sass functions, which you can easily customize to create your own.

  • This is a complete tutorial with code snippets that shows you how to create a simple timed notification with CSS animations. The idea is to show a warning or alert for a specific duration and then make it disappear. The author uses a little progress indicator to show how much time is left before the box disappears.

  • Here we have a navigation menu with multi-colored notification badges. The original PSD was created by Premium Pixels. This freebie is a set of menu notification badge, great for shepherding users into performing a particular action such as checking their inbox/messages.

  • This project provides notifications in HTML and CSS recreating the styling and animations of Apple’s mobile OS. The developer of this code snippet, Ryan Merrill, created it for a project that was never used in the end. It’s not responsive at this point, but you could try to fix that yourself.

  • This is a Facebook Home style bubble chat notifications. It is not widely used nowadays, but they did a pretty cool job in previous user interfaces. It includes a profile pic, a notification in red and shadows, although it is not functional.

  • This is a simple menu, not that flat, but still. It includes an anchor, graph, star and configuration icons for you to include in your next project. It also includes a dropdown for user options. The designer of this wonderful panel is Robert van Klinken, and it works correctly in Firefox 2+, IE6+, Opera 9+ and Chrome.

  • The default twitter bootstrap badges aren’t that pretty, so the author of this code snippet created an excellent option that looks better. It includes a notification and gradients, but it only makes use of grey tones. It can be used in an app or even a website, or use it as a base for making a better one.

  • This is a simple badge that includes a notification. It is intended to be very simple, composed of a text label, and a minimalistic notification in red with a white border. It was created by Marian Friedmann and uploaded to Codepen.

  • A beautiful mailbox menu design created by Marco Biedermann from CSSDeck. It showcases a flat, simple design with highlighted notifications and an expandable “more” button, although it isn’t active in this demo. Moreover, there is a neat set of icons accompanying the interface.

  • A simple app navigation with colorful notification badges. The badges are generated from a single input color using Sass functions that you can easily customize to create your own. The original PSD was created by Petrovski Marijan.

  • What we have here is a simple notification created with CSS and HTML that focuses the attention in the middle of the menu by blurring the rest of the buttons, and also by making the little green notification circle shaking. Bennett Feely from Codepen designed this experiment.

  • This is a beautiful experiment created with a flat style by Codepen’s user Will Paige. In has a closed envelope and a button right below to open it. When clicked, it triggers the animation, opening the envelope and sliding the letter up, only to add a little notification number in the right corner.

  • Here we have an iOS and Mac OSX (previous versions) icon notifiers, badges or banners, among others. It includes regular realistic icons created by Apple and adapted with CSS in order to create the notifications, closing and deleting. One of the icons even vibrates. This code experiment was created by Gavin Cox from Codepen.

  • Tyler Fry has published this basic alert message which contains gradients and transition CSS properties. It’s a push notification with a nice ambar tone and buttons that resemble a pushed state. It is absolutely cross browser with a browser support of:

    ✓ Chrome 25.0

    ✓ FireFox 19.0.2

    ✓ Safari 5.1.7

    ✓ IE 10

  • This is a simple navigation menu with multi-colored notification badges. It has a minimal design, using gradients, very subtle shadows and light colors. The colors of the notifications are still soft, yet you can see a pronounced difference with the rest of the design, which makes them stand out.

Leave a comment

This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator