Fully customize your notifications with CSS

We have a large library of hand-drawn illustrated themes from our talented design team within your Theme tab. You can also choose across colors, padding, shadow, hover animation, and more pre-selected options.

But curious what the CSS editor can do?

The most common reason to use the editor is because existing CSS on their site is overriding the theme for your Fomo notification.

However, you can also get creative and design something like the below using the CSS editor (found on Theme tab > click the CSS subtab):

Here's the full CSS added to achieve the above design with the extra image + rainbow border. Make sure to press the green "save" button!:

.fomo-notification::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  height: 75px;
  width: 75px;
  content: '';
  background-image: url(https://fomo.com/assets/landing/product-tour/new/footer-fde111fde241e0716d16c2f18db717987a1dbd961d3fff540128ddd68b5873a1.svg);
  background-size: contain;
}

.fomo-notification::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.fomo-notification .fomo-notification-container {
  display: inline;
  background: #fff;
  position: relative;
  z-index: 2;
  margin: 3px;
  border-radius: inherit;
}