Presets

Position & Layout

48
12

Content

Countdown Timer

Close Button

Animation & Behavior

Colors

Typography

14

Preview

Free shipping on all orders over $50!

Shop Now →

Generated Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notification Banner</title>
  <style>
/* Notification Banner Styles */
.notification-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 48px;
  background: #3b82f6;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 48px;
  z-index: 9999;
  box-sizing: border-box;
  animation: bannerSlideIn 300ms ease-out;
}

.notification-banner.hiding {
  animation: bannerSlideOut 300ms ease-in forwards;
}

.notification-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.notification-banner-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.notification-banner-icon svg {
  width: 100%;
  height: 100%;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-banner-message {
  margin: 0;
}

.notification-banner-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.notification-banner-link:hover {
  color: #e0e7ff;
  opacity: 0.9;
}


.notification-banner-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, opacity 0.2s;
  opacity: 0.8;
}

.notification-banner-close:hover {
  color: #e0e7ff;
  opacity: 1;
}

.notification-banner-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

@keyframes bannerSlideIn {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@keyframes bannerSlideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}
  </style>
</head>
<body>
<div class="notification-banner" id="notification-banner">
  <div class="notification-banner-content">
    <span class="notification-banner-icon">
      <svg viewBox="0 0 24 24"><path d="M11 5.882V19.24a1.76 1.76 0 0 1-3.417.592l-2.147-6.15M18 13a3 3 0 1 0 0-6M5.436 13.683A4.001 4.001 0 0 1 7 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 0 1-1.564-.317z"></path></svg>
    </span>
    <p class="notification-banner-message">Free shipping on all orders over $50!</p>
    <a href="#" class="notification-banner-link" target="_self">Shop Now &rarr;</a>
    
  </div>
  <button class="notification-banner-close" id="banner-close" aria-label="Close banner">
    <svg viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12"></path></svg>
  </button>
</div>

<script>
(function() {
  const banner = document.getElementById('notification-banner');
  if (!banner) return;

  // Check if banner was closed previously
  function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
    return null;
  }

  function setCookie(name, value, days) {
    const d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + "=" + value + ";expires=" + d.toUTCString() + ";path=/";
  }

  if (getCookie('banner_closed') === 'true') {
    banner.style.display = 'none';
    return;
  }

  // Close button functionality
  const closeBtn = document.getElementById('banner-close');
  if (closeBtn) {
    closeBtn.addEventListener('click', function() {
      banner.classList.add('hiding');
      setTimeout(function() {
        banner.style.display = 'none';
        setCookie('banner_closed', 'true', 1);
      }, 300);
    });
  }

})();
</script>
</body>
</html>

Tips

  • Keep it concise: Short messages are more effective. Aim for 10 words or less.
  • Use urgency wisely: Countdown timers work great for limited-time offers.
  • Mobile-friendly: Test your banner on mobile devices to ensure readability.
  • Cookie duration: Set cookie expiry based on your campaign length.
  • A/B testing: Try different colors and messages to see what converts best.
  • Accessibility: Ensure sufficient color contrast for text readability.