Articles › Notification Appearance, Web Push Notifications

Styling web push notifications

  • # web-notifications

Is it possible to customize the style of web push notifications?

First of all we need to clarify the meaning of "web push notifications":

  • if you are drawing some notifications (or toasts) with HTML + CSS inside your web page you can definitely change the style as you normally do for any other component
  • if you are using the Notifications API standard (aka Web Notifications), which displays native notifications from a website, then you can only change the contents of the notification, but not the style, which is defined by the OS.

Let's consider the second case: you are displaying some web push notifications using the Push API and the Notifications API. Even if the style is defined by the OS and cannot be changed with CSS, it's still possible to customize many aspects of the notifications and make them unique and eye-catching.

Take a look at this awesome notification for example:

You can:

  • add icons and images
  • use emoji (😍) or other Unicode characters (like 𝗯𝗼𝗹𝗱, π’Έπ“Šπ“‡π“ˆπ’Ύπ“‹π‘’ or πŸ†‚πŸ…ΏπŸ…΄πŸ…²πŸ…ΈπŸ…°πŸ…» πŸ†‚πŸ†ƒπŸ†ˆπŸ…»πŸ…΄πŸ†‚) in the notification text
  • add some action buttons.