Welcome to our latest blog post! Today, we’re excited to share with you a collection of 10+ CSS notification popups. If you’ve ever wanted to add a little alert or message on your website to grab your visitor’s attention, you’re in the right place. We’ve picked out some great examples and each one comes with a Codpen, so you can see how they work and even try them out for yourself. Whether you’re looking to announce a sale, share news, or just give a friendly welcome message, these CSS popups are here to make your website more engaging and informative for your visitors.
Animated Notification Icon & Drawer
hover to play
Description
This snippet introduces an engaging notification icon and drawer that beautifully blends interactive elements with practical functionality. The design lies in a notification icon, typically resembling a bell or similar alert symbol, that draws the user’s attention with shaking animation. Accompanying this icon is a small badge indicating the number of notifications, further enhancing the call to action. When interacted with, the icon’s animation ceases, signaling that the notifications have been acknowledged. This interaction also triggers a visually appealing reveal of the notification drawer, which smoothly displays individual notifications in a list format. Each notification can be dismissed, making the user experience both interactive and satisfying.
HTML Structure
The <svg> element representing the notification bell icon and a <small> tag for the notification count. The notifications themselves are listed within an <ul>, each <li> representing a single notification.
CSS Properties
Styling and Animations: The .notification-icon uses animation to apply a subtle shake effect, drawing the user’s attention. This, combined with :hover and .read states, dynamically changes the icon’s appearance, indicating interaction states. The use of transform and transition properties creates smooth movements and changes in color.
Responsiveness and Positioning: CSS positions the notification icon and drawer in a fixed manner, ensuring visibility regardless of the page scroll. The use of transform and calc() functions for positioning elements relative to each other ensures a cohesive layout across different screen sizes.
Splashed Toast Notification Animation Popup
hover to play
Description
This snippet is a series of Splashed Toast Notifications, utilizing creative visual effects to communicate different types of messages, such as help, success, warning, and error, to users. Each notification type is uniquely colored and iconified, making them easily distinguishable at a glance. These notifications don’t just appear; they animate into view with a splashed effect.
HTML Structure
The HTML is structured with <div> containers for each notification and uses <label> elements tied to <input type="checkbox"> for interactive closing functionality. Each toast notification is wrapped in a .toast-item with additional class modifiers (e.g., .help, .success, .warning, .error) to denote its type. This classification aids in applying specific styles and animations through CSS.
CSS Styling
The @keyframes and transition properties are used to create the splash effect and the smooth appearance of toast notifications. The use of background-size and background-position within the .toast:before selector creates the distinctive splash effect, simulating a liquid or paint splash that reveals the notification icon and background. The use of vh, vw, and percentage-based units alongside flexbox for the .toast-panel ensures that the notifications are adaptable to various screen sizes.
Gradient Notifications
hover to play
CSS Animated Notification Alert
hover to play
CSS Toast Notification
hover to play
NotiFy Simple Notification Using JavaScript
hover to play
Pure CSS Multiple Notification Effects
hover to play
Notification Popup
hover to play
Pure CSS Animated Popup Notification Bar
Popup Notification Message
Simple Notification Message
Notification Badge
