Starter Bundle
A simple product tile for smaller sale items.
$39
$49
Banners are one of the most useful communication sections on a modern website. A good banner can highlight an important offer, announce a product update, promote a limited-time deal, show a free shipping message, display an alert, invite visitors to subscribe, or guide users toward one clear action without changing the whole page layout.
In this guide, you will find 30 modern CSS banners for websites, including promo banners, announcement bars, alert banners, CTA banners, ecommerce sale banners, free shipping bars, newsletter banners, SaaS trial banners, sticky top banners, floating banners, product launch banners, limited offer banners, and complete HTML and CSS banner section examples you can customize for your own projects.
What Is a CSS Banner?
A CSS banner is a website section, message bar, promotional block, or call-to-action area styled with HTML and CSS. It is used to make an important message stand out, such as a sale, announcement, warning, update, offer, free shipping notice, product launch, newsletter invitation, or campaign message.
Modern CSS banners can appear in many places on a website. A small announcement bar may sit above the header. A promo banner may appear inside an ecommerce homepage. A CTA banner may sit between content sections. A newsletter banner may appear before the footer. A sticky banner may stay visible while the user scrolls. A floating banner may promote a temporary campaign without taking over the whole page.
The best banner design depends on the message and the website type. An ecommerce store may need discount banners, coupon banners, free shipping bars, and limited offer banners. A SaaS website may need trial banners, product update bars, onboarding notices, or upgrade prompts. A blog may use newsletter banners, resource banners, or internal promotion sections. A service business may use CTA banners for quote requests, consultation bookings, contact forms, or special service offers.
Why Website Banners Matter
Website banners matter because they give important messages a clear visual position on the page. Instead of hiding a promotion in a paragraph, menu item, sidebar, or footer link, a banner creates a dedicated area that visitors can notice quickly. This makes banners useful for ecommerce offers, service promotions, software updates, event announcements, lead generation, and urgent website notices.
- They highlight important messages such as discounts, product launches, alerts, updates, shipping offers, or campaign announcements.
- They support conversions by placing a CTA button or link in a section that is easy to notice.
- They improve page flow by separating special offers, notices, or calls-to-action from normal content.
- They help ecommerce websites promote sales, coupon codes, seasonal campaigns, free shipping, and limited-time deals.
- They guide visitors toward product pages, signup pages, pricing sections, contact forms, quote forms, newsletter forms, or download links.
If you are building a complete website layout, banners work especially well together with modern CSS navigation menus, modern website hero sections, modern CSS layouts, modern CSS forms, and modern CSS buttons.
What Should a Modern Banner Include?
A modern banner should include only the information needed to understand the message and take the next step. The most effective website banners are focused, readable, responsive, and easy to act on. They do not try to explain everything at once. Instead, they use a strong headline, short supporting text, clear visual hierarchy, and one obvious action.
Before designing a banner, think about what the visitor needs to understand. A sale banner should make the offer obvious. An announcement bar should stay short and easy to notice. An alert banner should communicate urgency without looking confusing. A CTA banner should guide users toward one action. A newsletter banner should explain why subscribing is useful. A product launch banner should create interest and lead visitors to the right page.
- Use one main message so the banner does not become a crowded block of unrelated information.
- Make the CTA clear with a visible button, link, coupon code, or short action phrase.
- Keep banner text short so visitors can understand the message while scanning the page.
- Use enough contrast for banner text, links, buttons, icons, labels, and background colors.
- Make the banner responsive so text, images, buttons, and icons stack cleanly on mobile screens.
- Avoid covering important content with sticky or floating banners, especially on smaller screens.
- Place banners intentionally near headers, hero sections, product grids, pricing sections, checkout flows, or footer CTAs.
You can also combine banner sections with other UI patterns. A newsletter banner can reuse ideas from modern CSS forms, a CTA banner can use ideas from modern CSS buttons, a product promotion banner can work well near modern CSS pricing tables, and a campaign banner can be placed inside a larger page structure built with modern CSS layouts.
30 Modern CSS Banner Examples
Now let’s look at 30 modern CSS banner examples for real website projects. Each example uses a different layout approach, so you can use them for ecommerce stores, SaaS websites, landing pages, product launches, blogs, service businesses, portfolios, announcement bars, alert sections, promotional campaigns, and complete responsive website layouts.
1. Modern Website Banner
A modern website banner is a flexible starting point for many types of websites. You can use it to promote an offer, highlight a new feature, introduce a campaign, or guide visitors toward a specific action without making the page feel overloaded.
The example below uses a polished full-width banner layout with a strong headline, short supporting text, CTA buttons, small trust indicators, and a modern gradient background. It works well for landing pages, SaaS websites, service pages, product pages, and homepage sections.
- Great starting point for modern CSS banners
- Includes headline, supporting text, CTA buttons, and trust indicators
- Works well for landing pages, SaaS websites, product pages, and services
- Uses responsive flex and grid layout techniques
- Clean HTML and CSS banner structure with no JavaScript required
HTML
<section class="modern-website-banner">
<div class="modern-website-banner-inner">
<div class="modern-website-banner-content">
<div class="modern-website-banner-kicker">New Campaign</div>
<h3 class="modern-website-banner-title">Launch a cleaner website section with one <span>high-converting banner</span></h3>
<p class="modern-website-banner-text">Use this modern CSS banner to promote an offer, announce a feature, highlight a product, or guide visitors toward one clear action.</p>
<div class="modern-website-banner-actions">
<a class="modern-website-banner-button" href="#">Start Building</a>
<a class="modern-website-banner-link" href="#">View Examples</a>
</div>
<div class="modern-website-banner-meta">
<span>No JavaScript</span>
<span>Responsive CSS</span>
<span>Easy to customize</span>
</div>
</div>
<div class="modern-website-banner-panel">
<div class="modern-website-banner-panel-top">
<span class="modern-website-banner-badge">Limited Offer</span>
<div class="modern-website-banner-discount">
<strong>30%</strong>
<span>Off</span>
</div>
</div>
<h3>Build faster landing pages</h3>
<p>Create polished promo sections, campaign blocks, and CTA banners with clean HTML and CSS.</p>
<ul class="modern-website-banner-features">
<li>Modern gradient banner design</li>
<li>CTA buttons and trust labels</li>
<li>Responsive mobile layout</li>
</ul>
</div>
</div>
</section>
CSS
.modern-website-banner{
position:relative;
width:min(100%,1080px);
overflow:hidden;
border-radius:34px;
background:#0f172a;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(15,23,42,.32);
}
.modern-website-banner::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(6,182,212,.34),transparent 34%),
radial-gradient(circle at 88% 10%,rgba(124,58,237,.32),transparent 32%),
radial-gradient(circle at 70% 90%,rgba(37,99,235,.24),transparent 34%);
pointer-events:none;
}
.modern-website-banner-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
gap:28px;
align-items:center;
padding:42px;
}
.modern-website-banner-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.modern-website-banner-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.16);
color:#a5f3fc;
font-size:13px;
line-height:1;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.modern-website-banner-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22d3ee;
box-shadow:0 0 0 5px rgba(34,211,238,.14);
}
.modern-website-banner-title{
margin:0;
max-width:620px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,64px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}
.modern-website-banner-title span{
background:linear-gradient(135deg,#67e8f9,#a78bfa,#93c5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.modern-website-banner-text{
max-width:600px;
margin:0;
color:#cbd5e1;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.modern-website-banner-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.modern-website-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:48px;
padding:14px 18px;
border-radius:999px;
background:linear-gradient(135deg,#06b6d4,#2563eb);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
box-shadow:0 16px 34px rgba(37,99,235,.28);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.modern-website-banner-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 20px 44px rgba(37,99,235,.36);
}
.modern-website-banner-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:14px 16px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#f8fafc !important;
-webkit-text-fill-color:#f8fafc !important;
font-size:14px;
font-weight:850;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
.modern-website-banner-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.24);
}
.modern-website-banner-panel{
position:relative;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
backdrop-filter:blur(14px);
}
.modern-website-banner-panel-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:20px;
}
.modern-website-banner-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:rgba(34,211,238,.15);
border:1px solid rgba(34,211,238,.24);
color:#cffafe;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}
.modern-website-banner-discount{
display:grid;
place-items:center;
width:72px;
height:72px;
border-radius:24px;
background:linear-gradient(135deg,#ffffff,#dbeafe);
color:#0f172a;
box-shadow:0 18px 40px rgba(0,0,0,.18);
text-align:center;
}
.modern-website-banner-discount strong{
display:block;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}
.modern-website-banner-discount span{
display:block;
margin-top:4px;
font-size:11px;
line-height:1;
font-weight:900;
text-transform:uppercase;
color:#475569;
}
.modern-website-banner-panel h3{
margin:0 0 10px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:25px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}
.modern-website-banner-panel p{
margin:0 0 22px;
color:#cbd5e1;
font-size:14px;
line-height:1.7;
font-weight:600;
}
.modern-website-banner-features{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}
.modern-website-banner-features li{
display:flex;
align-items:center;
gap:10px;
margin:0;
padding:0;
list-style:none;
color:#e5e7eb;
font-size:14px;
line-height:1.4;
font-weight:750;
}
.modern-website-banner-features li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:999px;
background:rgba(34,211,238,.16);
color:#67e8f9;
font-size:13px;
font-weight:950;
}
.modern-website-banner-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
}
.modern-website-banner-meta span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:12px;
font-weight:800;
}
@media (max-width:900px){
.modern-website-banner-inner{
grid-template-columns:1fr;
}
.modern-website-banner-panel{
max-width:520px;
}
}
@media (max-width:640px){
.modern-website-banner{
border-radius:26px;
}
.modern-website-banner-inner{
padding:26px;
}
.modern-website-banner-title{
font-size:36px;
}
.modern-website-banner-text{
font-size:16px;
}
.modern-website-banner-actions{
width:100%;
}
.modern-website-banner-button,
.modern-website-banner-link{
width:100%;
}
.modern-website-banner-panel{
padding:20px;
border-radius:24px;
}
.modern-website-banner-panel-top{
align-items:flex-start;
flex-direction:column;
}
}
This modern website banner is a flexible base for many projects. You can replace the demo text, CTA buttons, offer badge, and trust labels with your own campaign message, then use the same responsive structure for landing pages, SaaS websites, ecommerce pages, blogs, or service websites.
2. Announcement Bar
An announcement bar is a compact banner usually placed at the top of a website. It is useful for short messages such as product updates, new features, free shipping notices, sale announcements, maintenance alerts, event reminders, or important company news.
The example below uses a slim but modern announcement bar with a label, message, link-style CTA, close button design, and subtle animated shine effect. It is designed to stay readable, lightweight, and easy to adapt for many website headers.
- Compact announcement bar for website headers
- Good for short updates, offers, alerts, and product messages
- Includes label, message, CTA link, and close button design
- Uses only HTML and CSS
- Responsive layout that stacks cleanly on mobile screens
HTML
<div class="announcement-bar-page">
<div class="announcement-bar">
<div class="announcement-bar-content">
<span class="announcement-bar-label">New</span>
<p class="announcement-bar-message"><strong>Spring campaign is live.</strong> Get ready-made banner layouts for landing pages and online stores.</p>
<a class="announcement-bar-cta" href="#">Explore now</a>
</div>
<a class="announcement-bar-close" href="#" aria-label="Close announcement">×</a>
</div>
<header class="announcement-bar-header">
<div class="announcement-bar-logo">
<span>B</span>
BannerKit
</div>
<nav class="announcement-bar-nav" aria-label="Demo navigation">
<a href="#">Features</a>
<a href="#">Examples</a>
<a href="#">Pricing</a>
<a href="#">Contact</a>
</nav>
</header>
<section class="announcement-bar-hero">
<h3>Build website messages that visitors actually notice</h3>
<p>This preview shows how a compact announcement bar can sit above a normal website header without taking over the whole page.</p>
</section>
</div>
CSS
.announcement-bar-page{
width:min(100%,1080px);
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.10);
overflow:hidden;
}
.announcement-bar{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:12px 18px;
background:linear-gradient(135deg,#0f172a,#1e293b);
border-bottom:1px solid rgba(255,255,255,.10);
}
.announcement-bar::before{
content:"";
position:absolute;
top:0;
left:-40%;
width:40%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
animation:announcementShine 4.8s ease-in-out infinite;
pointer-events:none;
}
@keyframes announcementShine{
0%{
left:-45%;
}
45%,100%{
left:115%;
}
}
.announcement-bar-content{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
min-width:0;
flex:1;
}
.announcement-bar-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 10px;
border-radius:999px;
background:rgba(6,182,212,.16);
border:1px solid rgba(34,211,238,.28);
color:#a5f3fc;
font-size:12px;
line-height:1;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
white-space:nowrap;
}
.announcement-bar-message{
margin:0;
min-width:0;
color:#f8fafc;
font-size:14px;
line-height:1.45;
font-weight:750;
}
.announcement-bar-message strong{
color:#ffffff;
font-weight:950;
}
.announcement-bar-cta{
display:inline-flex;
align-items:center;
gap:6px;
color:#bfdbfe !important;
-webkit-text-fill-color:#bfdbfe !important;
font-size:14px;
line-height:1.2;
font-weight:900;
text-decoration:none !important;
white-space:nowrap;
transition:color .2s ease,transform .2s ease;
}
.announcement-bar-cta::after{
content:"→";
font-size:15px;
line-height:1;
}
.announcement-bar-cta:hover{
transform:translateX(2px);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}
.announcement-bar-close{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:18px;
line-height:1;
font-weight:700;
text-decoration:none;
transition:background .2s ease,color .2s ease,transform .2s ease;
}
.announcement-bar-close:hover{
transform:rotate(90deg);
background:rgba(255,255,255,.14);
color:#ffffff;
}
.announcement-bar-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:22px 26px;
background:#ffffff;
}
.announcement-bar-logo{
display:flex;
align-items:center;
gap:10px;
color:#0f172a;
font-size:18px;
font-weight:950;
letter-spacing:-.04em;
}
.announcement-bar-logo span{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#06b6d4,#2563eb);
color:#ffffff;
font-size:15px;
font-weight:950;
}
.announcement-bar-nav{
display:flex;
align-items:center;
gap:16px;
}
.announcement-bar-nav a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1;
font-weight:800;
text-decoration:none !important;
}
.announcement-bar-hero{
padding:62px 26px 70px;
text-align:center;
background:
radial-gradient(circle at 50% 0%,rgba(6,182,212,.14),transparent 34%),
linear-gradient(135deg,#ffffff,#f8fafc);
}
.announcement-bar-hero h3{
max-width:650px;
margin:0 auto 14px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.03;
font-weight:950;
letter-spacing:-.06em;
}
.announcement-bar-hero p{
max-width:560px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:600;
}
@media (max-width:760px){
.announcement-bar{
align-items:flex-start;
}
.announcement-bar-content{
align-items:flex-start;
flex-direction:column;
gap:9px;
}
.announcement-bar-message{
font-size:13px;
}
.announcement-bar-cta{
font-size:13px;
}
.announcement-bar-header{
align-items:flex-start;
flex-direction:column;
}
.announcement-bar-nav{
flex-wrap:wrap;
}
.announcement-bar-hero{
padding:46px 20px 56px;
text-align:left;
}
.announcement-bar-hero h3{
font-size:34px;
}
}
This announcement bar is useful when you need a short website message that appears before the main header. You can use it for sales, updates, free shipping notices, product launches, maintenance messages, or any important announcement that should be visible without taking over the page.
3. Promo Banner
A promo banner is useful when you want to highlight a special offer, seasonal campaign, new service, downloadable resource, product bundle, or short-term promotion. Unlike a small announcement bar, a promo banner usually has more visual weight and can include a headline, short text, CTA button, coupon code, icon, or decorative campaign element.
The example below uses a split promo layout with a bold content area on the left and a coupon-style card on the right. It looks different from a standard full-width banner because the offer is presented like a reusable promo ticket, making it useful for ecommerce stores, landing pages, SaaS campaigns, and service websites.
- Split promo banner with a coupon-style offer card
- Good for campaigns, bundles, downloads, and seasonal offers
- Includes headline, description, CTA button, coupon code, and visual offer block
- Uses a unique layout that is different from a standard announcement bar
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="promo-banner">
<div class="promo-banner-inner">
<div class="promo-banner-content">
<div class="promo-banner-label">Featured Promo</div>
<h3 class="promo-banner-title">Turn one campaign into a <span>high-visibility offer</span></h3>
<p class="promo-banner-text">Use this promo banner when you need a stronger visual section for special offers, product bundles, downloadable resources, or seasonal campaigns.</p>
<div class="promo-banner-actions">
<a class="promo-banner-button" href="#">Claim Offer</a>
<a class="promo-banner-secondary" href="#">See Details</a>
</div>
</div>
<div class="promo-banner-ticket-wrap">
<div class="promo-banner-ticket">
<div class="promo-banner-ticket-shine"></div>
<div class="promo-banner-ticket-content">
<div class="promo-banner-ticket-top">
<span class="promo-banner-ticket-tag">Promo Ticket</span>
<span class="promo-banner-ticket-icon">%</span>
</div>
<h3 class="promo-banner-ticket-title">Save 25%</h3>
<p class="promo-banner-ticket-text">Use this highlighted ticket block to make your offer feel more visible and easier to remember.</p>
<div class="promo-banner-code">
<span>Use code</span>
<strong>LAUNCH25</strong>
</div>
<p class="promo-banner-smallprint">Valid for new projects, templates, or digital campaign bundles.</p>
</div>
</div>
</div>
</div>
</section>
CSS
.promo-banner{
position:relative;
width:min(100%,1060px);
overflow:hidden;
border-radius:36px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 90px rgba(15,23,42,.16);
}
.promo-banner::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(236,72,153,.10),transparent 42%),
radial-gradient(circle at 88% 20%,rgba(251,191,36,.28),transparent 24%),
radial-gradient(circle at 78% 90%,rgba(236,72,153,.18),transparent 30%);
pointer-events:none;
}
.promo-banner-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
gap:30px;
align-items:center;
padding:42px;
}
.promo-banner-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.promo-banner-label{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#fdf2f8;
border:1px solid rgba(236,72,153,.18);
color:#be185d;
font-size:13px;
line-height:1;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.promo-banner-label::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#ec4899;
box-shadow:0 0 0 5px rgba(236,72,153,.14);
}
.promo-banner-title{
margin:0;
max-width:620px;
color:#111827;
font-size:clamp(36px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}
.promo-banner-title span{
background:linear-gradient(135deg,#ec4899,#f59e0b);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.promo-banner-text{
max-width:580px;
margin:0;
color:#4b5563;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.promo-banner-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.promo-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:14px 18px;
border-radius:999px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
box-shadow:0 16px 34px rgba(17,24,39,.22);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.promo-banner-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 20px 44px rgba(17,24,39,.30);
}
.promo-banner-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:14px 16px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.12);
color:#374151 !important;
-webkit-text-fill-color:#374151 !important;
font-size:14px;
font-weight:850;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.promo-banner-secondary:hover{
transform:translateY(-2px);
border-color:rgba(236,72,153,.38);
color:#be185d !important;
-webkit-text-fill-color:#be185d !important;
}
.promo-banner-ticket-wrap{
position:relative;
display:grid;
place-items:center;
min-height:340px;
}
.promo-banner-ticket{
position:relative;
width:min(100%,390px);
padding:26px;
border-radius:30px;
background:
linear-gradient(135deg,#111827,#1f2937);
box-shadow:0 30px 70px rgba(17,24,39,.25);
border:1px solid rgba(255,255,255,.12);
overflow:hidden;
transform:rotate(2deg);
}
.promo-banner-ticket::before,
.promo-banner-ticket::after{
content:"";
position:absolute;
top:50%;
width:38px;
height:38px;
border-radius:999px;
background:#ffffff;
transform:translateY(-50%);
}
.promo-banner-ticket::before{
left:-19px;
}
.promo-banner-ticket::after{
right:-19px;
}
.promo-banner-ticket-shine{
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 20% 20%,rgba(236,72,153,.30),transparent 28%),
radial-gradient(circle at 80% 20%,rgba(245,158,11,.26),transparent 28%),
radial-gradient(circle at 60% 90%,rgba(255,255,255,.14),transparent 30%);
pointer-events:none;
}
.promo-banner-ticket-content{
position:relative;
z-index:2;
}
.promo-banner-ticket-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:24px;
}
.promo-banner-ticket-tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#fce7f3;
font-size:12px;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
}
.promo-banner-ticket-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#ec4899,#f59e0b);
color:#ffffff;
font-size:20px;
font-weight:950;
box-shadow:0 16px 34px rgba(236,72,153,.22);
}
.promo-banner-ticket-title{
margin:0 0 10px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:34px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}
.promo-banner-ticket-text{
margin:0 0 24px;
color:#d1d5db;
font-size:14px;
line-height:1.7;
font-weight:650;
}
.promo-banner-code{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.10);
border:1px dashed rgba(255,255,255,.32);
}
.promo-banner-code span{
color:#f9fafb;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
.promo-banner-code strong{
color:#fbbf24;
font-size:17px;
font-weight:950;
letter-spacing:.08em;
}
.promo-banner-smallprint{
margin:18px 0 0;
color:#9ca3af;
font-size:12px;
line-height:1.5;
font-weight:700;
}
@media (max-width:900px){
.promo-banner-inner{
grid-template-columns:1fr;
}
.promo-banner-ticket-wrap{
justify-content:start;
min-height:auto;
}
.promo-banner-ticket{
transform:none;
}
}
@media (max-width:640px){
.promo-banner{
border-radius:26px;
}
.promo-banner-inner{
padding:26px;
}
.promo-banner-title{
font-size:36px;
}
.promo-banner-text{
font-size:16px;
}
.promo-banner-actions{
width:100%;
}
.promo-banner-button,
.promo-banner-secondary{
width:100%;
}
.promo-banner-ticket{
padding:22px;
border-radius:24px;
}
.promo-banner-code{
align-items:flex-start;
flex-direction:column;
}
}
This promo banner works well when the offer needs more attention than a small top bar. The coupon-style ticket gives the banner a stronger campaign feeling, while the split layout keeps the message, CTA, and discount code easy to understand.
4. Sale Discount Banner
A sale discount banner is designed for ecommerce campaigns, seasonal offers, product promotions, and limited-time deals. It should make the discount easy to see, explain the value quickly, and guide visitors toward the sale category, product collection, or checkout flow.
The example below uses an ecommerce-style sale banner with a large discount number, product tiles, campaign labels, and a strong shopping CTA. The visual structure is different from the previous promo ticket because it feels more like a storefront campaign section than a single coupon block.
- Ecommerce sale banner for discounts and seasonal campaigns
- Includes large discount text, product cards, offer labels, and CTA button
- Good for online stores, product collections, and landing pages
- Uses a bold storefront-style layout
- Fully responsive HTML and CSS with no JavaScript required
HTML
<section class="sale-discount-banner">
<div class="sale-discount-banner-inner">
<div class="sale-discount-banner-content">
<div class="sale-discount-banner-label">Seasonal Sale</div>
<h3 class="sale-discount-banner-title">Save up to <span>40%</span></h3>
<p class="sale-discount-banner-text">Use this bold ecommerce banner to promote discounts, product collections, seasonal campaigns, or limited-time deals with a strong visual sale message.</p>
<div class="sale-discount-banner-actions">
<a class="sale-discount-banner-button" href="#">Shop the Sale</a>
<span class="sale-discount-banner-note">Ends Sunday at midnight</span>
</div>
</div>
<div class="sale-discount-products">
<article class="sale-discount-product">
<span class="sale-discount-product-badge">-20%</span>
<div class="sale-discount-product-visual">
<div class="sale-discount-product-shape"></div>
</div>
<h3>Starter Bundle</h3>
<p>A simple product tile for smaller sale items.</p>
<div class="sale-discount-product-price">
<strong>$39</strong>
<span>$49</span>
</div>
</article>
<article class="sale-discount-product">
<span class="sale-discount-product-badge">Best Deal</span>
<div class="sale-discount-product-visual">
<div class="sale-discount-product-shape"></div>
</div>
<h3>Growth Bundle</h3>
<p>Highlight your main campaign product with a taller featured card.</p>
<div class="sale-discount-product-price">
<strong>$59</strong>
<span>$99</span>
</div>
</article>
<article class="sale-discount-product">
<span class="sale-discount-product-badge">-35%</span>
<div class="sale-discount-product-visual">
<div class="sale-discount-product-shape"></div>
</div>
<h3>Pro Bundle</h3>
<p>Use this card for premium products or campaign upgrades.</p>
<div class="sale-discount-product-price">
<strong>$79</strong>
<span>$119</span>
</div>
</article>
</div>
</div>
</section>
CSS
.sale-discount-banner{
position:relative;
width:min(100%,1100px);
overflow:hidden;
border-radius:36px;
background:#111827;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 90px rgba(17,24,39,.30);
}
.sale-discount-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 15% 20%,rgba(239,68,68,.38),transparent 30%),
radial-gradient(circle at 88% 18%,rgba(250,204,21,.34),transparent 26%),
linear-gradient(135deg,#111827,#1f2937);
pointer-events:none;
}
.sale-discount-banner-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr);
gap:30px;
align-items:center;
padding:42px;
}
.sale-discount-banner-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.sale-discount-banner-label{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(254,226,226,.12);
border:1px solid rgba(252,165,165,.24);
color:#fecaca;
font-size:13px;
line-height:1;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.sale-discount-banner-label::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#ef4444;
box-shadow:0 0 0 5px rgba(239,68,68,.16);
}
.sale-discount-banner-title{
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(38px,6vw,72px);
line-height:.96;
font-weight:950;
letter-spacing:-.075em;
}
.sale-discount-banner-title span{
display:block;
color:#facc15 !important;
-webkit-text-fill-color:#facc15 !important;
font-size:clamp(52px,9vw,104px);
line-height:.88;
letter-spacing:-.09em;
}
.sale-discount-banner-text{
max-width:560px;
margin:0;
color:#d1d5db;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.sale-discount-banner-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.sale-discount-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 20px;
border-radius:999px;
background:linear-gradient(135deg,#facc15,#f97316);
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 38px rgba(250,204,21,.26);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.sale-discount-banner-button:hover{
transform:translateY(-2px);
filter:saturate(1.06);
box-shadow:0 22px 48px rgba(250,204,21,.34);
}
.sale-discount-banner-note{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:14px 16px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#f3f4f6;
font-size:13px;
font-weight:800;
}
.sale-discount-products{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
align-items:end;
}
.sale-discount-product{
position:relative;
overflow:hidden;
min-height:270px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:18px;
border-radius:28px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
.sale-discount-product:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.14);
border-color:rgba(250,204,21,.40);
}
.sale-discount-product:nth-child(2){
min-height:330px;
background:rgba(255,255,255,.15);
border-color:rgba(250,204,21,.32);
}
.sale-discount-product-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
padding:7px 9px;
border-radius:999px;
background:rgba(239,68,68,.18);
border:1px solid rgba(252,165,165,.26);
color:#fecaca;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.sale-discount-product-visual{
display:grid;
place-items:center;
height:112px;
margin:20px 0;
border-radius:24px;
background:
radial-gradient(circle at 50% 20%,rgba(250,204,21,.24),transparent 36%),
rgba(255,255,255,.08);
}
.sale-discount-product-shape{
width:72px;
height:92px;
border-radius:22px;
background:linear-gradient(135deg,#ffffff,#fde68a);
box-shadow:0 18px 40px rgba(0,0,0,.18);
position:relative;
}
.sale-discount-product-shape::before{
content:"";
position:absolute;
left:14px;
right:14px;
top:16px;
height:12px;
border-radius:999px;
background:rgba(17,24,39,.18);
}
.sale-discount-product-shape::after{
content:"";
position:absolute;
left:18px;
right:18px;
bottom:16px;
height:28px;
border-radius:12px;
background:rgba(239,68,68,.22);
}
.sale-discount-product h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:17px;
line-height:1.2;
font-weight:950;
letter-spacing:-.035em;
}
.sale-discount-product p{
margin:0;
color:#d1d5db;
font-size:13px;
line-height:1.55;
font-weight:650;
}
.sale-discount-product-price{
display:flex;
align-items:center;
gap:8px;
margin-top:14px;
}
.sale-discount-product-price strong{
color:#facc15;
font-size:18px;
line-height:1;
font-weight:950;
}
.sale-discount-product-price span{
color:#9ca3af;
font-size:13px;
font-weight:800;
text-decoration:line-through;
}
@media (max-width:980px){
.sale-discount-banner-inner{
grid-template-columns:1fr;
}
.sale-discount-products{
max-width:660px;
}
}
@media (max-width:720px){
.sale-discount-banner{
border-radius:26px;
}
.sale-discount-banner-inner{
padding:26px;
}
.sale-discount-banner-title{
font-size:40px;
}
.sale-discount-banner-title span{
font-size:64px;
}
.sale-discount-banner-text{
font-size:16px;
}
.sale-discount-banner-actions{
width:100%;
}
.sale-discount-banner-button,
.sale-discount-banner-note{
width:100%;
}
.sale-discount-products{
grid-template-columns:1fr;
}
.sale-discount-product,
.sale-discount-product:nth-child(2){
min-height:auto;
}
.sale-discount-product-visual{
height:120px;
}
}
This sale discount banner is designed for stronger ecommerce campaigns where the discount needs to be the main visual message. The product tiles make the section feel more like a sale collection, while the large discount text helps visitors understand the offer immediately.
5. Free Shipping Banner
A free shipping banner is one of the most common ecommerce banner patterns. It helps online stores highlight delivery benefits, minimum order values, fast shipping options, return policies, and trust signals before the visitor reaches the cart or checkout page.
The example below uses a clean ecommerce strip with a shipping icon, short offer message, progress-style threshold indicator, and compact trust items. It is different from a large sale banner because it focuses on removing purchase hesitation instead of promoting a discount.
- Compact ecommerce banner for free shipping messages
- Includes shipping offer, threshold indicator, CTA link, and trust details
- Good for product pages, cart pages, shop pages, and ecommerce headers
- Uses a clean strip layout instead of a large promo section
- Responsive HTML and CSS with no JavaScript required
HTML
<div class="free-shipping-page-shell">
<header class="free-shipping-header">
<div class="free-shipping-logo">
<span>S</span>
ShipSmart
</div>
<nav class="free-shipping-nav" aria-label="Demo navigation">
<a href="#">Shop</a>
<a href="#">Bundles</a>
<a href="#">Support</a>
<a href="#">Cart</a>
</nav>
</header>
<section class="free-shipping-banner">
<div class="free-shipping-icon">🚚</div>
<div class="free-shipping-copy">
<span class="free-shipping-label">Free Shipping</span>
<h3 class="free-shipping-title">Free delivery on orders over $75</h3>
<p class="free-shipping-text">Add a few more items and unlock free standard shipping on your order.</p>
</div>
<div class="free-shipping-progress">
<div class="free-shipping-progress-top">
<span>Shipping threshold</span>
<strong>$54 / $75</strong>
</div>
<div class="free-shipping-progress-track">
<span class="free-shipping-progress-fill"></span>
</div>
</div>
<a class="free-shipping-cta" href="#">Continue Shopping</a>
</section>
<div class="free-shipping-trust">
<div class="free-shipping-trust-item">
<strong>Fast dispatch</strong>
<span>Orders usually ship within 24 hours.</span>
</div>
<div class="free-shipping-trust-item">
<strong>Easy returns</strong>
<span>Simple returns on eligible items.</span>
</div>
<div class="free-shipping-trust-item">
<strong>Secure checkout</strong>
<span>Protected payments and order updates.</span>
</div>
</div>
<section class="free-shipping-content-area">
<h3>Reduce purchase hesitation with a clear shipping message</h3>
<p>This preview shows how a free shipping banner can sit near an ecommerce header and support product discovery, cart growth, and checkout confidence.</p>
</section>
</div>
CSS
.free-shipping-page-shell{
width:min(100%,1080px);
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
overflow:hidden;
}
.free-shipping-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:22px 26px;
background:#ffffff;
border-bottom:1px solid rgba(15,23,42,.08);
}
.free-shipping-logo{
display:flex;
align-items:center;
gap:10px;
color:#0f172a;
font-size:18px;
font-weight:950;
letter-spacing:-.04em;
}
.free-shipping-logo span{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#10b981,#06b6d4);
color:#ffffff;
font-size:15px;
font-weight:950;
}
.free-shipping-nav{
display:flex;
align-items:center;
gap:16px;
}
.free-shipping-nav a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1;
font-weight:800;
text-decoration:none !important;
}
.free-shipping-banner{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr) minmax(260px,.72fr) auto;
gap:18px;
align-items:center;
padding:18px 22px;
background:
linear-gradient(135deg,#064e3b,#065f46);
border-bottom:1px solid rgba(255,255,255,.12);
overflow:hidden;
}
.free-shipping-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 8% 20%,rgba(34,197,94,.28),transparent 28%),
radial-gradient(circle at 92% 10%,rgba(6,182,212,.20),transparent 30%);
pointer-events:none;
}
.free-shipping-icon{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
border-radius:20px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
color:#d1fae5;
font-size:25px;
font-weight:950;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.free-shipping-copy{
position:relative;
z-index:2;
min-width:0;
}
.free-shipping-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:6px;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bbf7d0;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.free-shipping-title{
margin:0 0 5px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}
.free-shipping-text{
margin:0;
color:#d1fae5;
font-size:14px;
line-height:1.55;
font-weight:650;
}
.free-shipping-progress{
position:relative;
z-index:2;
padding:14px;
border-radius:22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.free-shipping-progress-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.free-shipping-progress-top span{
color:#ecfdf5;
font-size:12px;
font-weight:900;
line-height:1.2;
}
.free-shipping-progress-top strong{
color:#ffffff;
font-size:12px;
font-weight:950;
line-height:1.2;
}
.free-shipping-progress-track{
height:9px;
border-radius:999px;
background:rgba(255,255,255,.16);
overflow:hidden;
}
.free-shipping-progress-fill{
display:block;
width:72%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#bbf7d0,#22d3ee);
box-shadow:0 0 20px rgba(34,211,238,.30);
}
.free-shipping-cta{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:12px 16px;
border-radius:999px;
background:#ffffff;
color:#065f46 !important;
-webkit-text-fill-color:#065f46 !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
white-space:nowrap;
box-shadow:0 14px 30px rgba(0,0,0,.16);
transition:transform .22s ease,box-shadow .22s ease;
}
.free-shipping-cta:hover{
transform:translateY(-2px);
box-shadow:0 18px 38px rgba(0,0,0,.20);
}
.free-shipping-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1px;
background:rgba(15,23,42,.08);
}
.free-shipping-trust-item{
padding:18px 20px;
background:#ffffff;
}
.free-shipping-trust-item strong{
display:block;
margin-bottom:4px;
color:#0f172a;
font-size:14px;
line-height:1.2;
font-weight:950;
}
.free-shipping-trust-item span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:650;
}
.free-shipping-content-area{
padding:58px 26px 64px;
text-align:center;
background:
radial-gradient(circle at 50% 0%,rgba(16,185,129,.12),transparent 30%),
linear-gradient(135deg,#ffffff,#f8fafc);
}
.free-shipping-content-area h3{
max-width:660px;
margin:0 auto 14px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.03;
font-weight:950;
letter-spacing:-.06em;
}
.free-shipping-content-area p{
max-width:570px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:600;
}
@media (max-width:940px){
.free-shipping-banner{
grid-template-columns:auto minmax(0,1fr);
}
.free-shipping-progress,
.free-shipping-cta{
grid-column:1 / -1;
}
.free-shipping-cta{
width:max-content;
}
}
@media (max-width:700px){
.free-shipping-header{
align-items:flex-start;
flex-direction:column;
}
.free-shipping-nav{
flex-wrap:wrap;
}
.free-shipping-banner{
grid-template-columns:1fr;
padding:20px;
}
.free-shipping-icon{
width:52px;
height:52px;
}
.free-shipping-cta{
width:100%;
}
.free-shipping-trust{
grid-template-columns:1fr;
}
.free-shipping-content-area{
padding:44px 20px 54px;
text-align:left;
}
.free-shipping-content-area h3{
font-size:34px;
}
}
This free shipping banner is ideal for ecommerce pages where shipping terms can affect buying decisions. The progress-style threshold area makes the message more useful than a simple text strip, while the trust row adds extra reassurance without turning the banner into a full sale section.
6. CTA Banner Section
A CTA banner section is used when you want visitors to take one important action after reading part of a page. It can appear after a feature section, before a pricing table, below a blog post, above a footer, or between landing page blocks where users need a clear next step.
The example below uses a wide call-to-action banner with a split editorial layout, stacked CTA buttons, floating feature cards, and a bold dark-to-light contrast. It is different from promo and sale banners because the goal is not a discount message, but a strong conversion section.
- Large CTA banner section for landing pages and service websites
- Includes headline, benefit text, primary CTA, secondary CTA, and feature cards
- Works well before footers, pricing sections, and contact forms
- Uses a split layout with strong contrast and floating UI blocks
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="cta-banner-section">
<div class="cta-banner-section-grid">
<div class="cta-banner-section-content">
<div class="cta-banner-section-kicker">Ready to Start</div>
<h3 class="cta-banner-section-title">Turn visitors into leads with a focused <span>CTA banner</span></h3>
<p class="cta-banner-section-text">Use this banner when your page needs one clear next step after a feature section, pricing block, case study, blog post, or product explanation.</p>
<div class="cta-banner-section-actions">
<a class="cta-banner-section-button" href="#">Get Started</a>
<a class="cta-banner-section-link" href="#">View Plans</a>
</div>
<div class="cta-banner-section-proof">
<span>No credit card required</span>
<span>Fast setup</span>
<span>Responsive layout</span>
</div>
</div>
<div class="cta-banner-section-visual">
<div class="cta-banner-stack">
<article class="cta-banner-card">
<div class="cta-banner-card-top">
<span class="cta-banner-card-icon">1</span>
<span class="cta-banner-card-label">Step One</span>
</div>
<h3>Choose a goal</h3>
<p>Use the banner to point users toward one important action.</p>
</article>
<article class="cta-banner-card">
<div class="cta-banner-card-top">
<span class="cta-banner-card-icon">2</span>
<span class="cta-banner-card-label">Step Two</span>
</div>
<h3>Add a clear CTA</h3>
<p>Make the button text specific, visible, and easy to understand.</p>
</article>
<article class="cta-banner-card">
<div class="cta-banner-card-top">
<span class="cta-banner-card-icon">3</span>
<span class="cta-banner-card-label">Step Three</span>
</div>
<h3>Place it wisely</h3>
<p>Add the CTA banner where visitors are ready to make a decision.</p>
</article>
</div>
</div>
</div>
</section>
CSS
.cta-banner-section{
position:relative;
width:min(100%,1080px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 90px rgba(15,23,42,.16);
}
.cta-banner-section-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);
min-height:520px;
}
.cta-banner-section-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
gap:20px;
padding:48px;
background:#ffffff;
}
.cta-banner-section-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#eef2ff;
border:1px solid rgba(99,102,241,.18);
color:#4338ca;
font-size:13px;
line-height:1;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.cta-banner-section-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#6366f1;
box-shadow:0 0 0 5px rgba(99,102,241,.14);
}
.cta-banner-section-title{
margin:0;
max-width:660px;
color:#0f172a;
font-size:clamp(38px,5vw,68px);
line-height:1.01;
font-weight:950;
letter-spacing:-.07em;
}
.cta-banner-section-title span{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.cta-banner-section-text{
max-width:600px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.cta-banner-section-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-top:4px;
}
.cta-banner-section-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 20px;
border-radius:999px;
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(79,70,229,.25);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.cta-banner-section-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 50px rgba(79,70,229,.34);
}
.cta-banner-section-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 18px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.cta-banner-section-link:hover{
transform:translateY(-2px);
border-color:rgba(99,102,241,.32);
color:#4f46e5 !important;
-webkit-text-fill-color:#4f46e5 !important;
}
.cta-banner-section-proof{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:12px;
}
.cta-banner-section-proof span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#475569;
font-size:12px;
font-weight:850;
box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.cta-banner-section-visual{
position:relative;
display:grid;
place-items:center;
padding:44px 32px;
background:
radial-gradient(circle at 35% 25%,rgba(125,211,252,.24),transparent 30%),
radial-gradient(circle at 82% 18%,rgba(167,139,250,.28),transparent 30%),
linear-gradient(135deg,#0f172a,#1e1b4b);
overflow:hidden;
}
.cta-banner-section-visual::before{
content:"";
position:absolute;
inset:24px;
border-radius:32px;
border:1px solid rgba(255,255,255,.10);
pointer-events:none;
}
.cta-banner-stack{
position:relative;
z-index:2;
display:grid;
gap:16px;
width:min(100%,360px);
}
.cta-banner-card{
position:relative;
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 24px 60px rgba(0,0,0,.22);
backdrop-filter:blur(14px);
}
.cta-banner-card:nth-child(1){
transform:translateX(-10px);
}
.cta-banner-card:nth-child(2){
transform:translateX(18px);
background:rgba(255,255,255,.14);
}
.cta-banner-card:nth-child(3){
transform:translateX(-2px);
}
.cta-banner-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}
.cta-banner-card-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#38bdf8,#818cf8);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 14px 30px rgba(56,189,248,.22);
}
.cta-banner-card-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 9px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#c7d2fe;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.cta-banner-card h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:19px;
line-height:1.2;
font-weight:950;
letter-spacing:-.04em;
}
.cta-banner-card p{
margin:0;
color:#cbd5e1;
font-size:13px;
line-height:1.55;
font-weight:650;
}
@media (max-width:900px){
.cta-banner-section-grid{
grid-template-columns:1fr;
}
.cta-banner-section-visual{
min-height:430px;
}
}
@media (max-width:640px){
.cta-banner-section{
border-radius:26px;
}
.cta-banner-section-content{
padding:28px;
}
.cta-banner-section-title{
font-size:38px;
}
.cta-banner-section-text{
font-size:16px;
}
.cta-banner-section-actions{
width:100%;
}
.cta-banner-section-button,
.cta-banner-section-link{
width:100%;
}
.cta-banner-section-visual{
padding:36px 20px;
}
.cta-banner-card:nth-child(1),
.cta-banner-card:nth-child(2),
.cta-banner-card:nth-child(3){
transform:none;
}
}
This CTA banner section works best when the page needs a clear next step. The split layout gives the message enough space, while the floating cards add visual interest without distracting from the main conversion goal.
7. Alert Banner
An alert banner is used when a website needs to show an important notice, service update, warning, system message, deadline, maintenance note, or urgent information. A good alert banner should be noticeable, but it should not feel confusing or overly aggressive unless the message is truly critical.
The example below uses a professional alert layout with a colored status icon, message area, supporting details, and two action links. It is different from promo banners because the visual language is more informational and structured, making it useful for SaaS dashboards, service websites, support pages, account areas, and product notices.
- Professional alert banner for updates, warnings, and service notices
- Includes status icon, title, message, metadata, and action buttons
- Useful for SaaS dashboards, support pages, account areas, and service websites
- Uses an informational layout instead of a sales-focused design
- Responsive HTML and CSS with no JavaScript required
HTML
<div class="alert-banner-shell">
<div class="alert-banner-page-top">
<h3 class="alert-banner-page-title">Service notifications</h3>
<span class="alert-banner-page-status">System online</span>
</div>
<section class="alert-banner">
<div class="alert-banner-icon">!</div>
<div class="alert-banner-content">
<div class="alert-banner-header">
<span class="alert-banner-label">Important update</span>
<span class="alert-banner-time">Scheduled for tonight</span>
</div>
<h3 class="alert-banner-title">Maintenance window starts at 11:00 PM</h3>
<p class="alert-banner-text">Some dashboard features may be temporarily unavailable while we upgrade the reporting system. Your website, checkout, and public pages will remain online during the update.</p>
<div class="alert-banner-details">
<span>Estimated time: 25 minutes</span>
<span>No action required</span>
<span>Status page available</span>
</div>
</div>
<div class="alert-banner-actions">
<a class="alert-banner-button" href="#">View Status</a>
<a class="alert-banner-secondary" href="#">Learn More</a>
</div>
</section>
<div class="alert-banner-grid">
<div class="alert-banner-mini">
<strong>Website uptime</strong>
<span>Public pages continue working normally.</span>
</div>
<div class="alert-banner-mini">
<strong>Dashboard access</strong>
<span>Reports may refresh more slowly.</span>
</div>
<div class="alert-banner-mini">
<strong>Notifications</strong>
<span>Updates will appear on the status page.</span>
</div>
</div>
</div>
CSS
.alert-banner-shell{
width:min(100%,1060px);
padding:30px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 26px 78px rgba(15,23,42,.13);
}
.alert-banner-page-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:24px;
}
.alert-banner-page-title{
margin:0;
color:#0f172a;
font-size:clamp(30px,4vw,46px);
line-height:1.06;
font-weight:950;
letter-spacing:-.055em;
}
.alert-banner-page-status{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 11px;
border-radius:999px;
background:#ecfdf5;
border:1px solid rgba(16,185,129,.20);
color:#047857;
font-size:12px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
white-space:nowrap;
}
.alert-banner-page-status::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#10b981;
box-shadow:0 0 0 5px rgba(16,185,129,.12);
}
.alert-banner{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:18px;
align-items:start;
padding:22px;
border-radius:28px;
background:
linear-gradient(135deg,#fffbeb,#ffffff);
border:1px solid rgba(245,158,11,.30);
box-shadow:0 18px 48px rgba(245,158,11,.10);
overflow:hidden;
}
.alert-banner::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:6px;
background:linear-gradient(180deg,#f59e0b,#f97316);
}
.alert-banner-icon{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:18px;
background:linear-gradient(135deg,#f59e0b,#f97316);
color:#ffffff;
font-size:24px;
font-weight:950;
box-shadow:0 16px 34px rgba(245,158,11,.24);
}
.alert-banner-content{
position:relative;
z-index:2;
min-width:0;
}
.alert-banner-header{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:8px;
}
.alert-banner-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#fff7ed;
border:1px solid rgba(249,115,22,.22);
color:#c2410c;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.alert-banner-time{
color:#92400e;
font-size:12px;
line-height:1.2;
font-weight:800;
}
.alert-banner-title{
margin:0 0 8px;
color:#111827;
font-size:22px;
line-height:1.18;
font-weight:950;
letter-spacing:-.04em;
}
.alert-banner-text{
max-width:720px;
margin:0;
color:#4b5563;
font-size:15px;
line-height:1.7;
font-weight:650;
}
.alert-banner-details{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:16px;
}
.alert-banner-details span{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 10px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:850;
box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.alert-banner-actions{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
gap:10px;
align-items:stretch;
min-width:150px;
}
.alert-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:11px 14px;
border-radius:999px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
white-space:nowrap;
transition:transform .22s ease,background .22s ease;
}
.alert-banner-button:hover{
transform:translateY(-2px);
background:#000000;
}
.alert-banner-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:11px 14px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#374151 !important;
-webkit-text-fill-color:#374151 !important;
font-size:13px;
font-weight:900;
line-height:1;
text-decoration:none !important;
white-space:nowrap;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.alert-banner-secondary:hover{
transform:translateY(-2px);
border-color:rgba(245,158,11,.38);
color:#b45309 !important;
-webkit-text-fill-color:#b45309 !important;
}
.alert-banner-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-top:18px;
}
.alert-banner-mini{
padding:18px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.alert-banner-mini strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:14px;
line-height:1.2;
font-weight:950;
}
.alert-banner-mini span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}
@media (max-width:860px){
.alert-banner{
grid-template-columns:auto minmax(0,1fr);
}
.alert-banner-actions{
grid-column:1 / -1;
flex-direction:row;
min-width:0;
}
.alert-banner-button,
.alert-banner-secondary{
flex:1;
}
}
@media (max-width:640px){
.alert-banner-shell{
padding:22px;
border-radius:26px;
}
.alert-banner-page-top{
align-items:flex-start;
flex-direction:column;
}
.alert-banner{
grid-template-columns:1fr;
padding:20px;
border-radius:24px;
}
.alert-banner-actions{
flex-direction:column;
}
.alert-banner-grid{
grid-template-columns:1fr;
}
.alert-banner-title{
font-size:20px;
}
}
This alert banner is useful when the website message needs to feel important but still professional. The left color bar, status icon, structured text, and action buttons help visitors understand the notice quickly without turning the banner into a promotional section.
8. Cookie Notice Style Banner
A cookie notice style banner is commonly used at the bottom of a website to explain privacy, cookie settings, tracking preferences, or consent options. Even if the actual consent logic requires JavaScript and a proper compliance tool, the visual layout can still be designed with clean HTML and CSS.
The example below uses a modern bottom notice layout with a privacy icon, short explanation, preference chips, and clear action buttons. It looks different from a standard alert banner because it is positioned like a bottom consent panel with softer visual language and a privacy-focused structure.
- Modern bottom cookie notice style banner
- Includes privacy message, preference chips, and action buttons
- Useful for privacy notices, consent UI mockups, and website settings panels
- Uses a bottom-positioned layout inside the preview
- Visual HTML and CSS only; real consent behavior needs proper JavaScript and compliance setup
HTML
<div class="cookie-notice-page">
<header class="cookie-notice-page-header">
<div class="cookie-notice-logo">
<span>P</span>
PrivacyUI
</div>
<nav class="cookie-notice-nav" aria-label="Demo navigation">
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">Privacy</a>
<a href="#">Contact</a>
</nav>
</header>
<main class="cookie-notice-main">
<div>
<h3>A clean bottom notice for privacy messages</h3>
<p>This preview shows how a cookie notice style banner can appear near the bottom of a website without completely hiding the page content.</p>
</div>
</main>
<section class="cookie-notice-banner">
<div class="cookie-notice-icon">◌</div>
<div class="cookie-notice-content">
<div class="cookie-notice-top">
<span class="cookie-notice-label">Privacy preferences</span>
<a class="cookie-notice-link" href="#">Read policy</a>
</div>
<h3 class="cookie-notice-title">We use cookies to improve your experience</h3>
<p class="cookie-notice-text">Choose whether to allow analytics and personalization cookies. Essential cookies are always active so the website can work correctly.</p>
<div class="cookie-notice-chips">
<span>Essential</span>
<span>Analytics</span>
<span>Personalization</span>
</div>
</div>
<div class="cookie-notice-actions">
<a class="cookie-notice-secondary" href="#">Manage</a>
<a class="cookie-notice-button" href="#">Accept All</a>
</div>
</section>
</div>
CSS
.cookie-notice-page{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:100%;
overflow:hidden;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}
.cookie-notice-page-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:22px 26px;
border-bottom:1px solid rgba(15,23,42,.08);
}
.cookie-notice-logo{
display:flex;
align-items:center;
gap:10px;
color:#0f172a;
font-size:18px;
font-weight:950;
letter-spacing:-.04em;
}
.cookie-notice-logo span{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#0ea5e9,#6366f1);
color:#ffffff;
font-size:15px;
font-weight:950;
}
.cookie-notice-nav{
display:flex;
align-items:center;
gap:16px;
}
.cookie-notice-nav a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1;
font-weight:800;
text-decoration:none !important;
}
.cookie-notice-main{
display:grid;
place-items:center;
padding:54px 26px 160px;
text-align:center;
background:
radial-gradient(circle at 50% 0%,rgba(99,102,241,.12),transparent 30%),
linear-gradient(135deg,#ffffff,#f8fafc);
}
.cookie-notice-main h3{
max-width:660px;
margin:0 auto 14px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.03;
font-weight:950;
letter-spacing:-.06em;
}
.cookie-notice-main p{
max-width:560px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:600;
}
.cookie-notice-banner{
position:absolute;
left:22px;
right:22px;
bottom:22px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:18px;
align-items:start;
padding:20px;
border-radius:28px;
background:rgba(15,23,42,.94);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 70px rgba(15,23,42,.30);
backdrop-filter:blur(18px);
}
.cookie-notice-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:20px;
background:linear-gradient(135deg,#0ea5e9,#6366f1);
color:#ffffff;
font-size:23px;
font-weight:950;
box-shadow:0 16px 34px rgba(99,102,241,.24);
}
.cookie-notice-content{
min-width:0;
}
.cookie-notice-top{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:8px;
}
.cookie-notice-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.cookie-notice-link{
color:#c7d2fe !important;
-webkit-text-fill-color:#c7d2fe !important;
font-size:12px;
line-height:1.2;
font-weight:850;
text-decoration:none !important;
}
.cookie-notice-title{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:20px;
line-height:1.2;
font-weight:950;
letter-spacing:-.035em;
}
.cookie-notice-text{
max-width:720px;
margin:0;
color:#cbd5e1;
font-size:14px;
line-height:1.65;
font-weight:650;
}
.cookie-notice-chips{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.cookie-notice-chips span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 9px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e5e7eb;
font-size:12px;
font-weight:800;
}
.cookie-notice-actions{
display:flex;
align-items:stretch;
gap:10px;
min-width:260px;
}
.cookie-notice-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:12px 15px;
border-radius:999px;
background:linear-gradient(135deg,#0ea5e9,#6366f1);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
white-space:nowrap;
box-shadow:0 16px 34px rgba(99,102,241,.24);
transition:transform .22s ease,filter .22s ease;
}
.cookie-notice-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
}
.cookie-notice-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:12px 15px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#f8fafc !important;
-webkit-text-fill-color:#f8fafc !important;
font-size:13px;
font-weight:900;
line-height:1;
text-decoration:none !important;
white-space:nowrap;
transition:transform .22s ease,background .22s ease;
}
.cookie-notice-secondary:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.12);
}
@media (max-width:980px){
.cookie-notice-banner{
grid-template-columns:auto minmax(0,1fr);
}
.cookie-notice-actions{
grid-column:1 / -1;
min-width:0;
}
.cookie-notice-button,
.cookie-notice-secondary{
flex:1;
}
}
@media (max-width:700px){
.cookie-notice-page-header{
align-items:flex-start;
flex-direction:column;
padding:20px;
}
.cookie-notice-nav{
flex-wrap:wrap;
}
.cookie-notice-main{
padding:44px 20px 250px;
text-align:left;
place-items:start;
}
.cookie-notice-main h3{
font-size:34px;
}
.cookie-notice-banner{
left:14px;
right:14px;
bottom:14px;
grid-template-columns:1fr;
padding:18px;
border-radius:24px;
}
.cookie-notice-actions{
flex-direction:column;
}
.cookie-notice-button,
.cookie-notice-secondary{
width:100%;
}
}
This cookie notice style banner is useful as a visual layout for privacy messages and consent interfaces. The bottom panel design keeps the message separate from the main content, while the chips and buttons make the available options easier to understand.
9. Newsletter Signup Banner
A newsletter signup banner is useful when you want to collect email subscribers without using a full contact form or popup. It can appear inside a blog post, above the footer, between content sections, or on a homepage where visitors may want updates, guides, offers, or free resources.
The example below uses a soft editorial newsletter banner with a large headline, benefit bullets, a connected email input, and a small privacy note. It is different from a general CTA banner because the entire section is focused on one simple subscription action.
- Newsletter signup banner for blogs, guides, and landing pages
- Includes headline, benefit list, email input, submit button, and privacy note
- Good for content websites, SaaS blogs, ecommerce updates, and creator sites
- Uses a clean email capture layout instead of a generic CTA section
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="newsletter-signup-banner">
<div class="newsletter-signup-banner-inner">
<div class="newsletter-signup-content">
<div class="newsletter-signup-kicker">Weekly Newsletter</div>
<h3 class="newsletter-signup-title">Get better website ideas in your <span>inbox every week</span></h3>
<p class="newsletter-signup-text">Use this banner to invite visitors to subscribe after they read a guide, explore examples, or reach the end of a landing page.</p>
<ul class="newsletter-signup-benefits">
<li>Fresh design examples</li>
<li>Practical CSS tips</li>
<li>No spam or noise</li>
<li>Useful UI inspiration</li>
</ul>
</div>
<div class="newsletter-signup-card">
<div class="newsletter-signup-card-content">
<h3>Join 12,000+ builders</h3>
<p>Get short, practical emails about layout ideas, conversion sections, and reusable HTML and CSS patterns.</p>
<form class="newsletter-signup-form">
<input type="email" placeholder="Enter your email">
<button type="submit">Subscribe</button>
</form>
<div class="newsletter-signup-meta">
<span>Free tips</span>
<span>Weekly issue</span>
<span>Unsubscribe anytime</span>
</div>
<p class="newsletter-signup-privacy">By subscribing, you agree to receive occasional emails. You can unsubscribe at any time.</p>
</div>
</div>
</div>
</section>
CSS
.newsletter-signup-banner{
position:relative;
width:min(100%,1060px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 90px rgba(15,23,42,.14);
}
.newsletter-signup-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 10% 20%,rgba(168,85,247,.16),transparent 30%),
radial-gradient(circle at 92% 12%,rgba(236,72,153,.16),transparent 28%),
linear-gradient(135deg,#ffffff,#faf5ff);
pointer-events:none;
}
.newsletter-signup-banner-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
gap:34px;
align-items:center;
padding:44px;
}
.newsletter-signup-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.newsletter-signup-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#f3e8ff;
border:1px solid rgba(168,85,247,.20);
color:#7e22ce;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.newsletter-signup-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#a855f7;
box-shadow:0 0 0 5px rgba(168,85,247,.14);
}
.newsletter-signup-title{
margin:0;
max-width:650px;
color:#111827;
font-size:clamp(38px,5vw,66px);
line-height:1.01;
font-weight:950;
letter-spacing:-.07em;
}
.newsletter-signup-title span{
background:linear-gradient(135deg,#9333ea,#ec4899);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.newsletter-signup-text{
max-width:590px;
margin:0;
color:#4b5563;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.newsletter-signup-benefits{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:6px 0 0;
padding:0;
list-style:none;
}
.newsletter-signup-benefits li{
display:flex;
align-items:center;
gap:9px;
margin:0;
padding:0;
list-style:none;
color:#374151;
font-size:14px;
line-height:1.45;
font-weight:800;
}
.newsletter-signup-benefits li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:999px;
background:#f3e8ff;
color:#9333ea;
font-size:13px;
font-weight:950;
}
.newsletter-signup-card{
position:relative;
padding:26px;
border-radius:32px;
background:#111827;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 28px 70px rgba(17,24,39,.24);
overflow:hidden;
}
.newsletter-signup-card::before{
content:"";
position:absolute;
inset:-90px;
background:
radial-gradient(circle at 20% 20%,rgba(168,85,247,.34),transparent 30%),
radial-gradient(circle at 82% 16%,rgba(236,72,153,.28),transparent 30%);
pointer-events:none;
}
.newsletter-signup-card-content{
position:relative;
z-index:2;
}
.newsletter-signup-card h3{
margin:0 0 10px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:26px;
line-height:1.15;
font-weight:950;
letter-spacing:-.045em;
}
.newsletter-signup-card p{
margin:0 0 22px;
color:#cbd5e1;
font-size:14px;
line-height:1.65;
font-weight:650;
}
.newsletter-signup-form{
display:flex;
gap:8px;
padding:7px;
border-radius:20px;
background:#ffffff;
box-shadow:0 18px 44px rgba(0,0,0,.20);
}
.newsletter-signup-form input{
min-width:0;
flex:1;
border:0;
outline:0;
padding:13px 12px;
border-radius:15px;
background:transparent;
color:#111827;
font-size:14px;
font-weight:750;
}
.newsletter-signup-form input::placeholder{
color:#64748b;
}
.newsletter-signup-form button{
border:0;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 16px;
border-radius:15px;
background:linear-gradient(135deg,#9333ea,#ec4899);
color:#ffffff;
font-size:14px;
font-weight:950;
white-space:nowrap;
box-shadow:0 14px 30px rgba(147,51,234,.24);
transition:transform .22s ease,filter .22s ease;
}
.newsletter-signup-form button:hover{
transform:translateY(-1px);
filter:saturate(1.08);
}
.newsletter-signup-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:18px;
}
.newsletter-signup-meta span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 9px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e5e7eb;
font-size:12px;
font-weight:850;
}
.newsletter-signup-privacy{
margin:18px 0 0 !important;
color:#9ca3af !important;
font-size:12px !important;
line-height:1.55 !important;
font-weight:650 !important;
}
@media (max-width:900px){
.newsletter-signup-banner-inner{
grid-template-columns:1fr;
}
.newsletter-signup-card{
max-width:560px;
}
}
@media (max-width:640px){
.newsletter-signup-banner{
border-radius:26px;
}
.newsletter-signup-banner-inner{
padding:26px;
}
.newsletter-signup-title{
font-size:38px;
}
.newsletter-signup-text{
font-size:16px;
}
.newsletter-signup-benefits{
grid-template-columns:1fr;
}
.newsletter-signup-card{
padding:22px;
border-radius:24px;
}
.newsletter-signup-form{
flex-direction:column;
}
.newsletter-signup-form button{
width:100%;
}
}
This newsletter signup banner is useful for turning content readers into email subscribers. The benefit list explains why someone should join, while the dark signup card keeps the email form visually focused and easy to find.
10. SaaS Trial Banner
A SaaS trial banner is designed to promote free trials, product demos, onboarding flows, or software signup pages. It should quickly explain the value of starting, reduce friction, and make the next step feel simple and low risk.
The example below uses a SaaS-style banner with a product dashboard mockup, trial benefits, usage metrics, and a clear signup CTA. It is different from a newsletter banner because it focuses on product activation instead of email capture.
- SaaS trial banner for software landing pages
- Includes product value, trial CTA, dashboard mockup, and trust metrics
- Good for apps, SaaS tools, startup websites, and onboarding pages
- Uses a product-focused visual layout
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="saas-trial-banner">
<div class="saas-trial-banner-inner">
<div class="saas-trial-content">
<div class="saas-trial-kicker">Free Trial</div>
<h3 class="saas-trial-title">Start your workflow with a <span>14-day SaaS trial</span></h3>
<p class="saas-trial-text">Use this banner to promote a free trial, product demo, or software signup flow with a clear value message and dashboard-style product preview.</p>
<div class="saas-trial-actions">
<a class="saas-trial-button" href="#">Start Free Trial</a>
<a class="saas-trial-link" href="#">Book Demo</a>
</div>
<ul class="saas-trial-benefits">
<li>No credit card required</li>
<li>Cancel anytime</li>
<li>Setup takes less than five minutes</li>
</ul>
</div>
<div class="saas-trial-dashboard">
<div class="saas-trial-dashboard-top">
<div class="saas-trial-window-dots">
<span></span>
<span></span>
<span></span>
</div>
<span class="saas-trial-dashboard-badge">Live Preview</span>
</div>
<div class="saas-trial-dashboard-body">
<div class="saas-trial-stat-card">
<strong>2.4x</strong>
<span>Faster campaign setup</span>
</div>
<div class="saas-trial-stat-card">
<strong>98%</strong>
<span>Customer satisfaction</span>
</div>
<div class="saas-trial-chart">
<div class="saas-trial-chart-header">
<strong>Trial activation</strong>
<span>+42%</span>
</div>
<div class="saas-trial-bars">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="saas-trial-mini-row">
<div class="saas-trial-mini">
<strong>Templates</strong>
<span>Ready sections</span>
</div>
<div class="saas-trial-mini">
<strong>Reports</strong>
<span>Live tracking</span>
</div>
<div class="saas-trial-mini">
<strong>Support</strong>
<span>Fast answers</span>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.saas-trial-banner{
position:relative;
width:min(100%,1100px);
overflow:hidden;
border-radius:38px;
background:#020617;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 90px rgba(2,6,23,.40);
}
.saas-trial-banner::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(14,165,233,.32),transparent 32%),
radial-gradient(circle at 88% 12%,rgba(34,197,94,.28),transparent 30%),
radial-gradient(circle at 52% 95%,rgba(99,102,241,.20),transparent 34%);
pointer-events:none;
}
.saas-trial-banner-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.94fr) minmax(360px,1.06fr);
gap:32px;
align-items:center;
padding:44px;
}
.saas-trial-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.saas-trial-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(14,165,233,.14);
border:1px solid rgba(56,189,248,.24);
color:#bae6fd;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.saas-trial-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#38bdf8;
box-shadow:0 0 0 5px rgba(56,189,248,.14);
}
.saas-trial-title{
margin:0;
max-width:650px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(38px,5vw,68px);
line-height:1.01;
font-weight:950;
letter-spacing:-.07em;
}
.saas-trial-title span{
background:linear-gradient(135deg,#38bdf8,#86efac);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.saas-trial-text{
max-width:590px;
margin:0;
color:#cbd5e1;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.saas-trial-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.saas-trial-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 20px;
border-radius:999px;
background:linear-gradient(135deg,#38bdf8,#22c55e);
color:#052e16 !important;
-webkit-text-fill-color:#052e16 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(56,189,248,.24);
transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}
.saas-trial-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 50px rgba(56,189,248,.32);
}
.saas-trial-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 18px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#f8fafc !important;
-webkit-text-fill-color:#f8fafc !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}
.saas-trial-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.12);
}
.saas-trial-benefits{
display:grid;
gap:10px;
margin:8px 0 0;
padding:0;
list-style:none;
}
.saas-trial-benefits li{
display:flex;
align-items:center;
gap:10px;
margin:0;
padding:0;
list-style:none;
color:#e5e7eb;
font-size:14px;
line-height:1.45;
font-weight:750;
}
.saas-trial-benefits li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:999px;
background:rgba(34,197,94,.16);
color:#86efac;
font-size:13px;
font-weight:950;
}
.saas-trial-dashboard{
position:relative;
padding:18px;
border-radius:32px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 70px rgba(0,0,0,.25);
backdrop-filter:blur(14px);
}
.saas-trial-dashboard-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}
.saas-trial-window-dots{
display:flex;
gap:7px;
}
.saas-trial-window-dots span{
width:11px;
height:11px;
border-radius:999px;
background:rgba(255,255,255,.20);
}
.saas-trial-window-dots span:nth-child(1){
background:#fb7185;
}
.saas-trial-window-dots span:nth-child(2){
background:#facc15;
}
.saas-trial-window-dots span:nth-child(3){
background:#22c55e;
}
.saas-trial-dashboard-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.24);
color:#bbf7d0;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.saas-trial-dashboard-body{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.saas-trial-stat-card{
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}
.saas-trial-stat-card strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:30px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}
.saas-trial-stat-card span{
display:block;
color:#cbd5e1;
font-size:12px;
line-height:1.4;
font-weight:750;
}
.saas-trial-chart{
grid-column:1 / -1;
padding:18px;
border-radius:24px;
background:#ffffff;
}
.saas-trial-chart-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
}
.saas-trial-chart-header strong{
color:#0f172a;
font-size:14px;
line-height:1.2;
font-weight:950;
}
.saas-trial-chart-header span{
color:#16a34a;
font-size:12px;
line-height:1.2;
font-weight:950;
}
.saas-trial-bars{
display:flex;
align-items:end;
gap:8px;
height:120px;
}
.saas-trial-bars span{
flex:1;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#38bdf8,#22c55e);
min-height:24px;
}
.saas-trial-bars span:nth-child(1){height:38%;}
.saas-trial-bars span:nth-child(2){height:54%;}
.saas-trial-bars span:nth-child(3){height:42%;}
.saas-trial-bars span:nth-child(4){height:72%;}
.saas-trial-bars span:nth-child(5){height:64%;}
.saas-trial-bars span:nth-child(6){height:88%;}
.saas-trial-bars span:nth-child(7){height:78%;}
.saas-trial-mini-row{
grid-column:1 / -1;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.saas-trial-mini{
padding:13px;
border-radius:18px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
}
.saas-trial-mini strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:13px;
font-weight:950;
}
.saas-trial-mini span{
display:block;
color:#94a3b8;
font-size:12px;
line-height:1.35;
font-weight:700;
}
@media (max-width:980px){
.saas-trial-banner-inner{
grid-template-columns:1fr;
}
.saas-trial-dashboard{
max-width:620px;
}
}
@media (max-width:700px){
.saas-trial-banner{
border-radius:26px;
}
.saas-trial-banner-inner{
padding:26px;
}
.saas-trial-title{
font-size:38px;
}
.saas-trial-text{
font-size:16px;
}
.saas-trial-actions{
width:100%;
}
.saas-trial-button,
.saas-trial-link{
width:100%;
}
.saas-trial-dashboard{
padding:14px;
border-radius:24px;
}
.saas-trial-dashboard-body{
grid-template-columns:1fr;
}
.saas-trial-chart{
grid-column:auto;
}
.saas-trial-mini-row{
grid-column:auto;
grid-template-columns:1fr;
}
.saas-trial-bars{
height:100px;
}
}
This SaaS trial banner is useful for product pages where the goal is to turn visitors into trial users. The dashboard mockup gives the section a software-focused look, while the CTA buttons and benefit list make the signup action clear.
11. Ecommerce Campaign Banner
An ecommerce campaign banner is useful when an online store wants to promote a product category, seasonal collection, new arrivals, bundle offer, or limited campaign. It should make the campaign feel visual, organized, and easy to click into.
The example below uses a campaign-style ecommerce layout with category cards, a large campaign headline, product badges, and a collection CTA. It is different from the sale discount banner because it focuses on campaign discovery and product categories instead of one large discount number.
- Ecommerce campaign banner for product collections and seasonal categories
- Includes campaign headline, category tiles, product badges, and CTA button
- Good for shop homepages, category pages, product launches, and seasonal campaigns
- Uses a visual product discovery layout
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="ecommerce-campaign-banner">
<div class="ecommerce-campaign-inner">
<div class="ecommerce-campaign-content">
<div class="ecommerce-campaign-kicker">New Collection</div>
<h3 class="ecommerce-campaign-title">Promote a seasonal store campaign with <span>visual category tiles</span></h3>
<p class="ecommerce-campaign-text">Use this ecommerce banner to guide shoppers toward collections, featured categories, campaign bundles, or product groups without relying on one large discount message.</p>
<div class="ecommerce-campaign-actions">
<a class="ecommerce-campaign-button" href="#">Shop Collection</a>
<a class="ecommerce-campaign-link" href="#">View All Deals</a>
</div>
<div class="ecommerce-campaign-tags">
<span>New arrivals</span>
<span>Bundle offers</span>
<span>Fast checkout</span>
</div>
</div>
<div class="ecommerce-campaign-grid">
<article class="ecommerce-campaign-card">
<div class="ecommerce-campaign-card-top">
<span class="ecommerce-campaign-card-badge">Popular</span>
<span class="ecommerce-campaign-card-icon">A</span>
</div>
<div class="ecommerce-campaign-card-body">
<h3>Accessories</h3>
<p>Small items and add-ons for campaign bundles.</p>
<div class="ecommerce-campaign-card-price">
<strong>From $19</strong>
<span>New picks</span>
</div>
</div>
</article>
<article class="ecommerce-campaign-card">
<div class="ecommerce-campaign-card-top">
<span class="ecommerce-campaign-card-badge">Sale</span>
<span class="ecommerce-campaign-card-icon">B</span>
</div>
<div class="ecommerce-campaign-card-body">
<h3>Best Sellers</h3>
<p>Feature proven products with strong buyer interest.</p>
<div class="ecommerce-campaign-card-price">
<strong>Save 25%</strong>
<span>This week</span>
</div>
</div>
</article>
<article class="ecommerce-campaign-card">
<div class="ecommerce-campaign-card-top">
<span class="ecommerce-campaign-card-badge">Fresh</span>
<span class="ecommerce-campaign-card-icon">C</span>
</div>
<div class="ecommerce-campaign-card-body">
<h3>New Drops</h3>
<p>Highlight new products in a campaign category.</p>
<div class="ecommerce-campaign-card-price">
<strong>12 items</strong>
<span>Just added</span>
</div>
</div>
</article>
<article class="ecommerce-campaign-card">
<div class="ecommerce-campaign-card-top">
<span class="ecommerce-campaign-card-badge">Bundle</span>
<span class="ecommerce-campaign-card-icon">D</span>
</div>
<div class="ecommerce-campaign-card-body">
<h3>Gift Sets</h3>
<p>Promote curated product groups and seasonal sets.</p>
<div class="ecommerce-campaign-card-price">
<strong>From $49</strong>
<span>Limited</span>
</div>
</div>
</article>
</div>
</div>
</section>
CSS
.ecommerce-campaign-banner{
position:relative;
width:min(100%,1100px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 90px rgba(15,23,42,.14);
}
.ecommerce-campaign-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 8% 10%,rgba(20,184,166,.16),transparent 30%),
radial-gradient(circle at 92% 16%,rgba(249,115,22,.16),transparent 28%),
linear-gradient(135deg,#ffffff,#f8fafc);
pointer-events:none;
}
.ecommerce-campaign-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
gap:34px;
align-items:center;
padding:44px;
}
.ecommerce-campaign-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.ecommerce-campaign-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#ccfbf1;
border:1px solid rgba(20,184,166,.24);
color:#0f766e;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.ecommerce-campaign-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#14b8a6;
box-shadow:0 0 0 5px rgba(20,184,166,.14);
}
.ecommerce-campaign-title{
margin:0;
max-width:660px;
color:#0f172a;
font-size:clamp(38px,5vw,68px);
line-height:1.01;
font-weight:950;
letter-spacing:-.07em;
}
.ecommerce-campaign-title span{
background:linear-gradient(135deg,#14b8a6,#f97316);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.ecommerce-campaign-text{
max-width:590px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.ecommerce-campaign-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.ecommerce-campaign-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 20px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(15,23,42,.20);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.ecommerce-campaign-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 22px 48px rgba(15,23,42,.28);
}
.ecommerce-campaign-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 18px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.ecommerce-campaign-link:hover{
transform:translateY(-2px);
border-color:rgba(20,184,166,.36);
color:#0f766e !important;
-webkit-text-fill-color:#0f766e !important;
}
.ecommerce-campaign-tags{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:6px;
}
.ecommerce-campaign-tags span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:850;
}
.ecommerce-campaign-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.ecommerce-campaign-card{
position:relative;
overflow:hidden;
min-height:220px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:20px;
border-radius:28px;
background:#0f172a;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 60px rgba(15,23,42,.16);
transition:transform .22s ease,box-shadow .22s ease;
}
.ecommerce-campaign-card:hover{
transform:translateY(-6px);
box-shadow:0 28px 74px rgba(15,23,42,.22);
}
.ecommerce-campaign-card:nth-child(1){
background:linear-gradient(135deg,#0f766e,#14b8a6);
}
.ecommerce-campaign-card:nth-child(2){
background:linear-gradient(135deg,#9a3412,#f97316);
}
.ecommerce-campaign-card:nth-child(3){
background:linear-gradient(135deg,#312e81,#6366f1);
}
.ecommerce-campaign-card:nth-child(4){
background:linear-gradient(135deg,#831843,#ec4899);
}
.ecommerce-campaign-card::before{
content:"";
position:absolute;
right:-40px;
bottom:-54px;
width:150px;
height:150px;
border-radius:42px;
background:rgba(255,255,255,.16);
transform:rotate(18deg);
}
.ecommerce-campaign-card-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.ecommerce-campaign-card-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 9px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.ecommerce-campaign-card-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:16px;
background:rgba(255,255,255,.16);
color:#ffffff;
font-size:22px;
font-weight:950;
}
.ecommerce-campaign-card-body{
position:relative;
z-index:2;
}
.ecommerce-campaign-card h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
}
.ecommerce-campaign-card p{
margin:0;
color:rgba(255,255,255,.82);
font-size:13px;
line-height:1.55;
font-weight:700;
}
.ecommerce-campaign-card-price{
display:flex;
align-items:center;
gap:8px;
margin-top:14px;
}
.ecommerce-campaign-card-price strong{
color:#ffffff;
font-size:18px;
line-height:1;
font-weight:950;
}
.ecommerce-campaign-card-price span{
color:rgba(255,255,255,.68);
font-size:12px;
line-height:1;
font-weight:850;
}
@media (max-width:980px){
.ecommerce-campaign-inner{
grid-template-columns:1fr;
}
.ecommerce-campaign-grid{
max-width:680px;
}
}
@media (max-width:700px){
.ecommerce-campaign-banner{
border-radius:26px;
}
.ecommerce-campaign-inner{
padding:26px;
}
.ecommerce-campaign-title{
font-size:38px;
}
.ecommerce-campaign-text{
font-size:16px;
}
.ecommerce-campaign-actions{
width:100%;
}
.ecommerce-campaign-button,
.ecommerce-campaign-link{
width:100%;
}
.ecommerce-campaign-grid{
grid-template-columns:1fr;
}
.ecommerce-campaign-card{
min-height:190px;
}
}
This ecommerce campaign banner is useful when you want to promote a collection instead of one isolated product. The category tiles give visitors multiple entry points into the campaign, while the headline and CTA keep the section focused.
12. Gradient Banner
A gradient banner is a modern visual section that uses layered color, soft glow effects, and strong typography to make a message stand out. It can be used for product launches, newsletter promotions, app pages, design portfolios, SaaS offers, and landing page CTAs.
The example below uses a clean gradient-first design with centered content, glowing background shapes, pill badges, and a simple CTA row. It is different from the ecommerce campaign banner because it is more abstract, brand-focused, and suitable for many types of websites.
- Modern gradient banner with glowing background layers
- Good for landing pages, SaaS websites, portfolios, launches, and digital products
- Includes badge, headline, text, CTA buttons, and trust chips
- Uses a centered visual layout with strong color impact
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="gradient-banner">
<div class="gradient-banner-corner">✦</div>
<div class="gradient-banner-inner">
<div class="gradient-banner-content">
<div class="gradient-banner-badge">Gradient Banner</div>
<h3 class="gradient-banner-title">Create a bold visual message with <span>modern gradient energy</span></h3>
<p class="gradient-banner-text">Use this abstract banner for product launches, creator pages, SaaS campaigns, digital products, and landing pages that need a strong branded section.</p>
<div class="gradient-banner-actions">
<a class="gradient-banner-button" href="#">Start Now</a>
<a class="gradient-banner-link" href="#">See Preview</a>
</div>
<div class="gradient-banner-chips">
<span>Responsive CSS</span>
<span>High contrast</span>
<span>Reusable section</span>
</div>
</div>
</div>
<div class="gradient-banner-orbit">Live campaign section</div>
</section>
CSS
.gradient-banner{
position:relative;
width:min(100%,1080px);
overflow:hidden;
border-radius:42px;
background:#020617;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(2,6,23,.42);
}
.gradient-banner::before{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 20% 20%,rgba(6,182,212,.46),transparent 30%),
radial-gradient(circle at 80% 10%,rgba(236,72,153,.42),transparent 30%),
radial-gradient(circle at 50% 90%,rgba(124,58,237,.38),transparent 34%),
linear-gradient(135deg,#020617,#111827);
pointer-events:none;
}
.gradient-banner::after{
content:"";
position:absolute;
inset:1px;
border-radius:41px;
background:
linear-gradient(135deg,rgba(255,255,255,.10),transparent 34%,rgba(255,255,255,.06));
pointer-events:none;
}
.gradient-banner-inner{
position:relative;
z-index:2;
display:grid;
place-items:center;
min-height:500px;
padding:58px 42px;
text-align:center;
}
.gradient-banner-content{
max-width:860px;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
}
.gradient-banner-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 13px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#e0f2fe;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.gradient-banner-badge::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#22d3ee;
box-shadow:0 0 18px rgba(34,211,238,.75);
}
.gradient-banner-title{
margin:0;
max-width:830px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(40px,7vw,82px);
line-height:.98;
font-weight:950;
letter-spacing:-.085em;
}
.gradient-banner-title span{
background:linear-gradient(135deg,#67e8f9,#f0abfc,#c4b5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.gradient-banner-text{
max-width:680px;
margin:0;
color:#d1d5db;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.gradient-banner-actions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
align-items:center;
margin-top:4px;
}
.gradient-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(0,0,0,.20);
transition:transform .22s ease,box-shadow .22s ease;
}
.gradient-banner-button:hover{
transform:translateY(-2px);
box-shadow:0 22px 50px rgba(0,0,0,.28);
}
.gradient-banner-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
.gradient-banner-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.28);
}
.gradient-banner-chips{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:9px;
margin-top:14px;
}
.gradient-banner-chips span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e5e7eb;
font-size:12px;
font-weight:850;
}
.gradient-banner-orbit{
position:absolute;
inset:auto auto 34px 34px;
z-index:2;
display:flex;
align-items:center;
gap:8px;
padding:9px 11px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#e5e7eb;
font-size:12px;
font-weight:850;
backdrop-filter:blur(14px);
}
.gradient-banner-orbit::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
background:#a78bfa;
box-shadow:0 0 22px rgba(167,139,250,.80);
}
.gradient-banner-corner{
position:absolute;
right:34px;
top:34px;
z-index:2;
display:grid;
place-items:center;
width:82px;
height:82px;
border-radius:28px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:28px;
font-weight:950;
backdrop-filter:blur(14px);
transform:rotate(8deg);
}
@media (max-width:700px){
.gradient-banner{
border-radius:28px;
}
.gradient-banner-inner{
min-height:560px;
padding:44px 24px;
}
.gradient-banner-title{
font-size:42px;
}
.gradient-banner-text{
font-size:16px;
}
.gradient-banner-actions{
width:100%;
}
.gradient-banner-button,
.gradient-banner-link{
width:100%;
}
.gradient-banner-corner{
position:relative;
right:auto;
top:auto;
margin-top:10px;
transform:none;
}
.gradient-banner-orbit{
position:relative;
left:auto;
bottom:auto;
margin-top:10px;
}
}
This gradient banner is useful when the banner needs to feel more visual and brand-focused. The layered background, centered message, and glow elements create a strong modern look without needing images or JavaScript.
13. Dark Mode Banner
A dark mode banner is a strong choice for modern SaaS websites, developer tools, dashboards, portfolio pages, and premium landing pages. It creates high contrast, keeps the message focused, and works especially well when the surrounding website uses a dark UI or a technology-focused visual style.
The example below uses a dark editorial banner with a side status panel, glowing grid background, feature labels, and two clear CTA buttons. It is different from the gradient banner because the design is more structured, darker, and closer to a premium product interface.
- Premium dark mode banner for SaaS, dashboards, and developer products
- Includes headline, CTA buttons, feature labels, and status panel
- Uses subtle grid lines, glow effects, and high contrast typography
- Works well on dark websites and technology landing pages
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="dark-mode-banner">
<div class="dark-mode-banner-inner">
<div class="dark-mode-banner-content">
<div class="dark-mode-banner-kicker">Dark Mode UI</div>
<h3 class="dark-mode-banner-title">Build a premium banner for <span>modern product pages</span></h3>
<p class="dark-mode-banner-text">Use this dark banner when your message needs a focused, high-contrast design for SaaS pages, developer tools, dashboards, and premium landing pages.</p>
<div class="dark-mode-banner-actions">
<a class="dark-mode-banner-button" href="#">Launch Project</a>
<a class="dark-mode-banner-secondary" href="#">View Docs</a>
</div>
<div class="dark-mode-banner-tags">
<span>Dark UI</span>
<span>Product focused</span>
<span>Responsive CSS</span>
</div>
</div>
<div class="dark-mode-banner-panel">
<div class="dark-mode-panel-top">
<div class="dark-mode-panel-dots">
<span></span>
<span></span>
<span></span>
</div>
<span class="dark-mode-panel-status">Online</span>
</div>
<div class="dark-mode-panel-main">
<div class="dark-mode-panel-card">
<strong>99.9%</strong>
<span>Uptime-ready banner section for high trust product pages.</span>
</div>
<ul class="dark-mode-panel-list">
<li><span>Deployment</span><strong>Ready</strong></li>
<li><span>Layout</span><strong>Responsive</strong></li>
<li><span>Theme</span><strong>Dark</strong></li>
</ul>
</div>
</div>
</div>
</section>
CSS
.dark-mode-banner{
position:relative;
width:min(100%,1100px);
overflow:hidden;
border-radius:38px;
background:#020617;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 34px 100px rgba(2,6,23,.48);
}
.dark-mode-banner::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size:34px 34px;
mask-image:radial-gradient(circle at 50% 50%,black,transparent 78%);
pointer-events:none;
}
.dark-mode-banner::after{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 18% 20%,rgba(59,130,246,.28),transparent 32%),
radial-gradient(circle at 86% 12%,rgba(14,165,233,.18),transparent 30%),
radial-gradient(circle at 62% 95%,rgba(124,58,237,.18),transparent 32%);
pointer-events:none;
}
.dark-mode-banner-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);
gap:34px;
align-items:center;
padding:46px;
}
.dark-mode-banner-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.dark-mode-banner-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(59,130,246,.14);
border:1px solid rgba(96,165,250,.24);
color:#bfdbfe;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.dark-mode-banner-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#60a5fa;
box-shadow:0 0 0 5px rgba(96,165,250,.14);
}
.dark-mode-banner-title{
margin:0;
max-width:690px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(38px,5vw,70px);
line-height:1.01;
font-weight:950;
letter-spacing:-.075em;
}
.dark-mode-banner-title span{
background:linear-gradient(135deg,#93c5fd,#67e8f9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.dark-mode-banner-text{
max-width:620px;
margin:0;
color:#cbd5e1;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.dark-mode-banner-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.dark-mode-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 20px;
border-radius:999px;
background:#ffffff;
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(255,255,255,.12);
transition:transform .22s ease,box-shadow .22s ease;
}
.dark-mode-banner-button:hover{
transform:translateY(-2px);
box-shadow:0 22px 52px rgba(255,255,255,.18);
}
.dark-mode-banner-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 18px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#f8fafc !important;
-webkit-text-fill-color:#f8fafc !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
.dark-mode-banner-secondary:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.26);
}
.dark-mode-banner-tags{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:8px;
}
.dark-mode-banner-tags span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#dbeafe;
font-size:12px;
font-weight:850;
}
.dark-mode-banner-panel{
position:relative;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 70px rgba(0,0,0,.26);
backdrop-filter:blur(16px);
}
.dark-mode-panel-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:20px;
}
.dark-mode-panel-dots{
display:flex;
gap:7px;
}
.dark-mode-panel-dots span{
width:11px;
height:11px;
border-radius:999px;
background:rgba(255,255,255,.18);
}
.dark-mode-panel-dots span:nth-child(1){background:#fb7185;}
.dark-mode-panel-dots span:nth-child(2){background:#facc15;}
.dark-mode-panel-dots span:nth-child(3){background:#22c55e;}
.dark-mode-panel-status{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 10px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.24);
color:#bbf7d0;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.dark-mode-panel-status::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 16px rgba(34,197,94,.7);
}
.dark-mode-panel-main{
display:grid;
gap:14px;
}
.dark-mode-panel-card{
padding:18px;
border-radius:22px;
background:rgba(15,23,42,.78);
border:1px solid rgba(148,163,184,.20);
}
.dark-mode-panel-card strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:30px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}
.dark-mode-panel-card span{
display:block;
color:#94a3b8;
font-size:13px;
line-height:1.45;
font-weight:700;
}
.dark-mode-panel-list{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}
.dark-mode-panel-list li{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0;
padding:12px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
list-style:none;
}
.dark-mode-panel-list span{
color:#dbeafe;
font-size:13px;
font-weight:800;
}
.dark-mode-panel-list strong{
color:#ffffff;
font-size:13px;
font-weight:950;
}
@media (max-width:940px){
.dark-mode-banner-inner{
grid-template-columns:1fr;
}
.dark-mode-banner-panel{
max-width:560px;
}
}
@media (max-width:680px){
.dark-mode-banner{
border-radius:26px;
}
.dark-mode-banner-inner{
padding:28px;
}
.dark-mode-banner-title{
font-size:38px;
}
.dark-mode-banner-text{
font-size:16px;
}
.dark-mode-banner-actions{
width:100%;
}
.dark-mode-banner-button,
.dark-mode-banner-secondary{
width:100%;
}
.dark-mode-banner-panel{
padding:20px;
border-radius:24px;
}
}
This dark mode banner is useful when the section needs to feel premium, technical, and focused. The glowing grid background adds depth, while the side panel makes the banner feel closer to a product interface than a basic promotional block.
14. Glassmorphism Banner
A glassmorphism banner uses translucent panels, blurred backgrounds, soft borders, and layered lighting to create a modern glass-like interface. This style is useful for app landing pages, SaaS websites, creative portfolios, AI tools, finance dashboards, and futuristic website sections.
The example below uses a floating glass panel over a colorful abstract background, with a central CTA, small metrics, and layered decorative cards. It is different from the dark mode banner because the design feels lighter, softer, and more translucent.
- Modern glassmorphism banner with blurred translucent panel
- Good for SaaS, AI tools, app pages, portfolios, and futuristic landing pages
- Includes CTA buttons, metrics, floating cards, and soft background glow
- Uses layered glass effects instead of solid cards
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="glassmorphism-banner">
<div class="glassmorphism-banner-orb one"></div>
<div class="glassmorphism-banner-orb two"></div>
<div class="glassmorphism-banner-orb three"></div>
<div class="glassmorphism-floating-card top">Live design system</div>
<div class="glassmorphism-floating-card bottom">Glass UI section</div>
<div class="glassmorphism-banner-panel">
<div class="glassmorphism-banner-badge">Glassmorphism Banner</div>
<h3 class="glassmorphism-banner-title">Create a soft futuristic banner with <span>layered glass effects</span></h3>
<p class="glassmorphism-banner-text">Use this translucent banner for app pages, AI tools, SaaS products, creative portfolios, and landing pages that need a modern glass-style section.</p>
<div class="glassmorphism-banner-actions">
<a class="glassmorphism-banner-button" href="#">Explore UI</a>
<a class="glassmorphism-banner-link" href="#">View Components</a>
</div>
<div class="glassmorphism-banner-metrics">
<div class="glassmorphism-banner-metric">
<strong>24+</strong>
<span>Reusable sections</span>
</div>
<div class="glassmorphism-banner-metric">
<strong>100%</strong>
<span>Responsive layout</span>
</div>
<div class="glassmorphism-banner-metric">
<strong>0 JS</strong>
<span>CSS-only visual</span>
</div>
</div>
</div>
</section>
CSS
.glassmorphism-banner{
position:relative;
width:min(100%,1080px);
min-height:560px;
overflow:hidden;
display:grid;
place-items:center;
border-radius:42px;
background:
radial-gradient(circle at 18% 20%,rgba(6,182,212,.46),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(168,85,247,.42),transparent 34%),
radial-gradient(circle at 50% 92%,rgba(236,72,153,.28),transparent 34%),
linear-gradient(135deg,#0f172a,#1e1b4b);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 34px 100px rgba(15,23,42,.30);
}
.glassmorphism-banner::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.16),transparent 30%,rgba(255,255,255,.08));
pointer-events:none;
}
.glassmorphism-banner-orb{
position:absolute;
border-radius:999px;
filter:blur(3px);
opacity:.9;
}
.glassmorphism-banner-orb.one{
width:180px;
height:180px;
left:8%;
top:10%;
background:rgba(34,211,238,.34);
}
.glassmorphism-banner-orb.two{
width:220px;
height:220px;
right:8%;
bottom:8%;
background:rgba(168,85,247,.34);
}
.glassmorphism-banner-orb.three{
width:110px;
height:110px;
right:22%;
top:12%;
background:rgba(244,114,182,.28);
}
.glassmorphism-banner-panel{
position:relative;
z-index:2;
width:min(100%,820px);
margin:36px;
padding:42px;
border-radius:36px;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14);
backdrop-filter:blur(22px);
text-align:center;
}
.glassmorphism-banner-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 13px;
margin-bottom:18px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.glassmorphism-banner-badge::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#67e8f9;
box-shadow:0 0 18px rgba(103,232,249,.80);
}
.glassmorphism-banner-title{
max-width:760px;
margin:0 auto 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(38px,6vw,76px);
line-height:.99;
font-weight:950;
letter-spacing:-.08em;
}
.glassmorphism-banner-title span{
background:linear-gradient(135deg,#cffafe,#f5d0fe,#ddd6fe);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.glassmorphism-banner-text{
max-width:650px;
margin:0 auto;
color:rgba(255,255,255,.80);
font-size:17px;
line-height:1.75;
font-weight:600;
}
.glassmorphism-banner-actions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
align-items:center;
margin-top:26px;
}
.glassmorphism-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:#ffffff;
color:#312e81 !important;
-webkit-text-fill-color:#312e81 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(0,0,0,.18);
transition:transform .22s ease,box-shadow .22s ease;
}
.glassmorphism-banner-button:hover{
transform:translateY(-2px);
box-shadow:0 22px 52px rgba(0,0,0,.26);
}
.glassmorphism-banner-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}
.glassmorphism-banner-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.18);
}
.glassmorphism-banner-metrics{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:28px;
}
.glassmorphism-banner-metric{
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);
}
.glassmorphism-banner-metric strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}
.glassmorphism-banner-metric span{
display:block;
color:rgba(255,255,255,.72);
font-size:12px;
line-height:1.35;
font-weight:750;
}
.glassmorphism-floating-card{
position:absolute;
z-index:3;
display:flex;
align-items:center;
gap:9px;
padding:11px 13px;
border-radius:999px;
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:12px;
font-weight:900;
backdrop-filter:blur(18px);
box-shadow:0 16px 38px rgba(0,0,0,.18);
}
.glassmorphism-floating-card::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
background:#a7f3d0;
box-shadow:0 0 18px rgba(167,243,208,.80);
}
.glassmorphism-floating-card.top{
top:36px;
left:42px;
}
.glassmorphism-floating-card.bottom{
right:42px;
bottom:36px;
}
@media (max-width:760px){
.glassmorphism-banner{
min-height:640px;
border-radius:28px;
}
.glassmorphism-banner-panel{
margin:20px;
padding:28px;
border-radius:28px;
}
.glassmorphism-banner-title{
font-size:40px;
}
.glassmorphism-banner-text{
font-size:16px;
}
.glassmorphism-banner-actions{
width:100%;
}
.glassmorphism-banner-button,
.glassmorphism-banner-link{
width:100%;
}
.glassmorphism-banner-metrics{
grid-template-columns:1fr;
}
.glassmorphism-floating-card{
position:relative;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
margin:10px auto 0;
width:max-content;
max-width:calc(100% - 40px);
}
}
This glassmorphism banner is useful when you want a softer futuristic section without using image assets. The blurred panel, floating labels, glowing orbs, and translucent metrics create a layered interface that still stays readable.
15. Sticky Top Banner
A sticky top banner is useful when a message should stay visible while visitors move through a page. It can be used for limited-time offers, shipping notices, product updates, important announcements, event reminders, beta launches, or service alerts.
The example below uses a sticky-style top banner inside a page mockup with a clean header, short message, CTA button, and compact countdown pills. It is different from a normal announcement bar because it is designed as a persistent top message attached to the navigation area.
- Sticky top banner for offers, updates, and important notices
- Includes short message, CTA button, countdown pills, and close button design
- Works well above website headers and navigation menus
- Uses a persistent top-layout style inside the preview
- Responsive HTML and CSS with no JavaScript required
HTML
<div class="sticky-top-page">
<section class="sticky-top-banner">
<div class="sticky-top-banner-icon">↟</div>
<div class="sticky-top-banner-message">
<span class="sticky-top-banner-label">Limited launch</span>
<p class="sticky-top-banner-text"><strong>New banner toolkit is live.</strong> Build campaign sections faster with responsive CSS components.</p>
</div>
<div class="sticky-top-countdown">
<span>02d</span>
<span>11h</span>
<span>45m</span>
</div>
<a class="sticky-top-banner-button" href="#">Get Access</a>
<a class="sticky-top-banner-close" href="#" aria-label="Close banner">×</a>
</section>
<header class="sticky-top-header">
<div class="sticky-top-logo">
<span>T</span>
TopBanner
</div>
<nav class="sticky-top-nav" aria-label="Demo navigation">
<a href="#">Product</a>
<a href="#">Examples</a>
<a href="#">Pricing</a>
<a href="#">Support</a>
</nav>
</header>
<section class="sticky-top-hero">
<h3>A sticky top message that stays visible while users scroll</h3>
<p>This preview shows how a persistent top banner can sit above a website header and keep an important campaign message visible.</p>
</section>
<section class="sticky-top-content">
<div class="sticky-top-card">
<strong>Campaign notice</strong>
<span>Use sticky top banners for time-sensitive messages and launch offers.</span>
</div>
<div class="sticky-top-card">
<strong>Header-friendly</strong>
<span>The banner sits naturally above navigation without hiding the page.</span>
</div>
<div class="sticky-top-card">
<strong>Mobile ready</strong>
<span>The layout stacks cleanly when there is not enough horizontal space.</span>
</div>
</section>
</div>
CSS
.sticky-top-page{
width:min(100%,1080px);
min-height:980px;
margin:0 auto;
overflow:hidden;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}
.sticky-top-banner{
position:sticky;
top:0;
z-index:10;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto auto;
gap:14px;
align-items:center;
padding:12px 18px;
background:
linear-gradient(135deg,#0f172a,#1e3a8a);
border-bottom:1px solid rgba(255,255,255,.12);
box-shadow:0 14px 34px rgba(15,23,42,.22);
}
.sticky-top-banner-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:16px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
color:#bfdbfe;
font-size:18px;
font-weight:950;
}
.sticky-top-banner-message{
min-width:0;
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.sticky-top-banner-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:rgba(34,197,94,.15);
border:1px solid rgba(34,197,94,.24);
color:#bbf7d0;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
white-space:nowrap;
}
.sticky-top-banner-text{
margin:0;
color:#e5e7eb;
font-size:14px;
line-height:1.45;
font-weight:750;
}
.sticky-top-banner-text strong{
color:#ffffff;
font-weight:950;
}
.sticky-top-countdown{
display:flex;
align-items:center;
gap:6px;
}
.sticky-top-countdown span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:38px;
padding:7px 8px;
border-radius:12px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:12px;
font-weight:950;
line-height:1;
}
.sticky-top-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:10px 14px;
border-radius:999px;
background:#ffffff;
color:#1e3a8a !important;
-webkit-text-fill-color:#1e3a8a !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
white-space:nowrap;
box-shadow:0 12px 26px rgba(0,0,0,.16);
transition:transform .22s ease,box-shadow .22s ease;
}
.sticky-top-banner-button:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(0,0,0,.20);
}
.sticky-top-banner-close{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:18px;
font-weight:700;
line-height:1;
text-decoration:none;
transition:background .2s ease,color .2s ease,transform .2s ease;
}
.sticky-top-banner-close:hover{
transform:rotate(90deg);
background:rgba(255,255,255,.14);
color:#ffffff;
}
.sticky-top-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:22px 26px;
background:#ffffff;
border-bottom:1px solid rgba(15,23,42,.08);
}
.sticky-top-logo{
display:flex;
align-items:center;
gap:10px;
color:#0f172a;
font-size:18px;
font-weight:950;
letter-spacing:-.04em;
}
.sticky-top-logo span{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#2563eb,#10b981);
color:#ffffff;
font-size:15px;
font-weight:950;
}
.sticky-top-nav{
display:flex;
align-items:center;
gap:16px;
}
.sticky-top-nav a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1;
font-weight:800;
text-decoration:none !important;
}
.sticky-top-hero{
padding:68px 26px;
text-align:center;
background:
radial-gradient(circle at 50% 0%,rgba(59,130,246,.12),transparent 32%),
linear-gradient(135deg,#ffffff,#f8fafc);
}
.sticky-top-hero h3{
max-width:700px;
margin:0 auto 14px;
color:#0f172a;
font-size:clamp(36px,5vw,64px);
line-height:1.02;
font-weight:950;
letter-spacing:-.07em;
}
.sticky-top-hero p{
max-width:580px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:600;
}
.sticky-top-content{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
padding:26px;
}
.sticky-top-card{
min-height:180px;
padding:22px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.sticky-top-card strong{
display:block;
margin-bottom:8px;
color:#0f172a;
font-size:17px;
font-weight:950;
}
.sticky-top-card span{
display:block;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}
@media (max-width:920px){
.sticky-top-banner{
grid-template-columns:auto minmax(0,1fr) auto;
}
.sticky-top-countdown{
grid-column:2 / -1;
}
.sticky-top-banner-button{
grid-column:2;
width:max-content;
}
}
@media (max-width:700px){
.sticky-top-banner{
grid-template-columns:1fr;
align-items:start;
}
.sticky-top-banner-icon{
width:40px;
height:40px;
}
.sticky-top-banner-button{
grid-column:auto;
width:100%;
}
.sticky-top-countdown{
grid-column:auto;
flex-wrap:wrap;
}
.sticky-top-banner-close{
position:absolute;
right:12px;
top:12px;
}
.sticky-top-header{
align-items:flex-start;
flex-direction:column;
padding:20px;
}
.sticky-top-nav{
flex-wrap:wrap;
}
.sticky-top-hero{
padding:48px 20px;
text-align:left;
}
.sticky-top-hero h3{
font-size:36px;
}
.sticky-top-content{
grid-template-columns:1fr;
padding:20px;
}
}
This sticky top banner is useful when the message should stay visible near the top of the page. It works well for launch campaigns, time-sensitive offers, service notices, and important updates that need more persistence than a normal content banner.
16. Bottom Notification Banner
A bottom notification banner is useful when you want to show a message without placing it in the header area. It can be used for app updates, onboarding prompts, special offers, account notices, content recommendations, or low-priority announcements that should remain visible but not interrupt the whole page.
The example below uses a bottom-positioned notification banner with a compact card layout, soft shadow, icon area, CTA button, and small dismiss button. It is different from the cookie notice banner because it focuses on a general notification or offer instead of privacy preferences.
- Bottom notification banner for updates, offers, and onboarding prompts
- Includes icon, title, text, CTA button, and dismiss button design
- Good for app-style websites, SaaS dashboards, blogs, and landing pages
- Uses a floating bottom card layout inside the preview
- Responsive HTML and CSS with no JavaScript required
HTML
<div class="bottom-notification-page">
<header class="bottom-notification-header">
<div class="bottom-notification-logo">
<span>N</span>
NotifyBar
</div>
<nav class="bottom-notification-nav" aria-label="Demo navigation">
<a href="#">Home</a>
<a href="#">Product</a>
<a href="#">Updates</a>
<a href="#">Contact</a>
</nav>
</header>
<main class="bottom-notification-main">
<div>
<h3>A bottom notification that does not take over the page</h3>
<p>This preview shows how a floating bottom banner can promote an update, feature, or offer while keeping the main page visible.</p>
</div>
</main>
<section class="bottom-notification-banner">
<div class="bottom-notification-icon">★</div>
<div class="bottom-notification-content">
<span class="bottom-notification-label">New update</span>
<h3 class="bottom-notification-title">Reusable banner components are now available</h3>
<p class="bottom-notification-text">Explore new CSS sections for landing pages, campaigns, alerts, and ecommerce offers.</p>
</div>
<a class="bottom-notification-button" href="#">View Update</a>
<a class="bottom-notification-close" href="#" aria-label="Close notification">×</a>
</section>
</div>
CSS
.bottom-notification-page{
position:relative;
min-height:100%;
overflow:hidden;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}
.bottom-notification-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:22px 26px;
background:#ffffff;
border-bottom:1px solid rgba(15,23,42,.08);
}
.bottom-notification-logo{
display:flex;
align-items:center;
gap:10px;
color:#0f172a;
font-size:18px;
font-weight:950;
letter-spacing:-.04em;
}
.bottom-notification-logo span{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#f97316,#2563eb);
color:#ffffff;
font-size:15px;
font-weight:950;
}
.bottom-notification-nav{
display:flex;
align-items:center;
gap:16px;
}
.bottom-notification-nav a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1;
font-weight:800;
text-decoration:none !important;
}
.bottom-notification-main{
display:grid;
place-items:center;
padding:76px 26px 180px;
text-align:center;
background:
radial-gradient(circle at 50% 0%,rgba(249,115,22,.10),transparent 30%),
linear-gradient(135deg,#ffffff,#f8fafc);
}
.bottom-notification-main h3{
max-width:680px;
margin:0 auto 14px;
color:#0f172a;
font-size:clamp(36px,5vw,64px);
line-height:1.02;
font-weight:950;
letter-spacing:-.07em;
}
.bottom-notification-main p{
max-width:570px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:600;
}
.bottom-notification-banner{
position:absolute;
left:50%;
bottom:24px;
transform:translateX(-50%);
width:min(calc(100% - 48px),820px);
display:grid;
grid-template-columns:auto minmax(0,1fr) auto auto;
gap:16px;
align-items:center;
padding:16px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
box-shadow:0 28px 80px rgba(15,23,42,.22);
}
.bottom-notification-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
border-radius:20px;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.42),transparent 28%),
linear-gradient(135deg,#f97316,#2563eb);
color:#ffffff;
font-size:24px;
font-weight:950;
box-shadow:0 16px 34px rgba(249,115,22,.22);
}
.bottom-notification-content{
min-width:0;
}
.bottom-notification-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:6px;
padding:6px 9px;
border-radius:999px;
background:#fff7ed;
border:1px solid rgba(249,115,22,.18);
color:#c2410c;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.bottom-notification-title{
margin:0 0 4px;
color:#0f172a;
font-size:18px;
line-height:1.2;
font-weight:950;
letter-spacing:-.035em;
}
.bottom-notification-text{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.55;
font-weight:650;
}
.bottom-notification-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:12px 16px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
white-space:nowrap;
box-shadow:0 14px 30px rgba(15,23,42,.18);
transition:transform .22s ease,background .22s ease;
}
.bottom-notification-button:hover{
transform:translateY(-2px);
background:#000000;
}
.bottom-notification-close{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#64748b;
font-size:18px;
font-weight:700;
line-height:1;
text-decoration:none;
transition:transform .22s ease,background .22s ease,color .22s ease;
}
.bottom-notification-close:hover{
transform:rotate(90deg);
background:#0f172a;
color:#ffffff;
}
@media (max-width:820px){
.bottom-notification-banner{
grid-template-columns:auto minmax(0,1fr) auto;
}
.bottom-notification-button{
grid-column:2;
width:max-content;
}
}
@media (max-width:640px){
.bottom-notification-header{
align-items:flex-start;
flex-direction:column;
padding:20px;
}
.bottom-notification-nav{
flex-wrap:wrap;
}
.bottom-notification-main{
padding:52px 20px 290px;
text-align:left;
place-items:start;
}
.bottom-notification-main h3{
font-size:36px;
}
.bottom-notification-banner{
left:14px;
right:14px;
bottom:14px;
transform:none;
width:auto;
grid-template-columns:1fr;
padding:16px;
border-radius:24px;
}
.bottom-notification-button{
grid-column:auto;
width:100%;
}
.bottom-notification-close{
position:absolute;
right:14px;
top:14px;
}
}
This bottom notification banner is useful when the message should be visible but not attached to the header. The floating bottom layout works well for app updates, feature announcements, soft offers, onboarding prompts, and content recommendations.
17. Floating Promo Banner
A floating promo banner is useful when you want to promote an offer without placing it inside the normal page flow. It can work well for limited-time campaigns, product bundles, seasonal offers, course launches, software trials, or ecommerce promotions that should stay visible but not feel like a full popup.
The example below uses a premium floating card layout with layered depth, a small product preview, offer badge, CTA button, progress indicator, and soft background content. The design feels more like a polished campaign widget than a basic notification bar.
- Premium floating promo banner with layered visual depth
- Includes offer badge, product preview, progress indicator, CTA, and dismiss button
- Good for ecommerce campaigns, SaaS offers, product launches, and seasonal promotions
- Uses a floating widget-style placement inside a full page mockup
- Responsive HTML and CSS with no JavaScript required
HTML
<div class="floating-promo-page">
<header class="floating-promo-header">
<div class="floating-promo-logo">
<span>F</span>
FloatPromo
</div>
<nav class="floating-promo-nav" aria-label="Demo navigation">
<a href="#">Shop</a>
<a href="#">Offers</a>
<a href="#">Bundles</a>
<a href="#">Support</a>
</nav>
</header>
<section class="floating-promo-hero">
<div class="floating-promo-hero-copy">
<div class="floating-promo-kicker">Campaign widget</div>
<h3>Promote an offer without <span>interrupting the page</span></h3>
<p>This page mockup shows how a floating promo banner can stay visible near the bottom while the normal website content remains readable.</p>
</div>
<div class="floating-promo-feature-grid">
<div class="floating-promo-feature">
<strong>Soft visibility</strong>
<span>The offer stays visible without becoming a full-screen popup.</span>
</div>
<div class="floating-promo-feature">
<strong>Campaign focused</strong>
<span>Useful for bundles, limited offers, product launches, and upgrades.</span>
</div>
<div class="floating-promo-feature">
<strong>Mobile friendly</strong>
<span>The floating layout stacks into a readable promo card.</span>
</div>
</div>
</section>
<section class="floating-promo-widget">
<div class="floating-promo-product"></div>
<div class="floating-promo-content">
<div class="floating-promo-widget-top">
<span class="floating-promo-badge">Limited bundle</span>
<span class="floating-promo-stock">Only 36 spots left</span>
</div>
<h3>Save 30% on the launch bundle</h3>
<p>Get the full campaign section pack with banners, promo blocks, offer widgets, and responsive landing page components.</p>
<div class="floating-promo-progress">
<div class="floating-promo-track">
<span></span>
</div>
<strong>64% claimed</strong>
</div>
</div>
<div class="floating-promo-actions">
<a class="floating-promo-button" href="#">Claim Bundle</a>
<a class="floating-promo-close" href="#" aria-label="Close promo">×</a>
</div>
</section>
</div>
CSS
.floating-promo-page{
position:relative;
min-height:100%;
overflow:hidden;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 26px 78px rgba(15,23,42,.12);
}
.floating-promo-page::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 8% 0%,rgba(236,72,153,.10),transparent 32%),
radial-gradient(circle at 92% 10%,rgba(245,158,11,.14),transparent 30%);
pointer-events:none;
}
.floating-promo-header{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:22px 26px;
background:rgba(255,255,255,.86);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(15,23,42,.08);
}
.floating-promo-logo{
display:flex;
align-items:center;
gap:10px;
color:#0f172a;
font-size:18px;
font-weight:950;
letter-spacing:-.04em;
}
.floating-promo-logo span{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#ec4899,#f59e0b);
color:#ffffff;
font-size:15px;
font-weight:950;
}
.floating-promo-nav{
display:flex;
align-items:center;
gap:16px;
}
.floating-promo-nav a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1;
font-weight:800;
text-decoration:none !important;
}
.floating-promo-hero{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
gap:34px;
align-items:center;
padding:62px 34px 220px;
}
.floating-promo-hero-copy{
max-width:640px;
}
.floating-promo-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#fdf2f8;
border:1px solid rgba(236,72,153,.18);
color:#be185d;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.floating-promo-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#ec4899;
box-shadow:0 0 0 5px rgba(236,72,153,.14);
}
.floating-promo-hero h3{
margin:0 0 14px;
color:#0f172a;
font-size:clamp(38px,5vw,68px);
line-height:1.01;
font-weight:950;
letter-spacing:-.075em;
}
.floating-promo-hero h3 span{
background:linear-gradient(135deg,#ec4899,#f59e0b);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.floating-promo-hero p{
max-width:560px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.floating-promo-feature-grid{
display:grid;
gap:14px;
}
.floating-promo-feature{
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 44px rgba(15,23,42,.07);
}
.floating-promo-feature strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:15px;
font-weight:950;
}
.floating-promo-feature span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}
.floating-promo-widget{
position:absolute;
left:50%;
bottom:28px;
z-index:5;
transform:translateX(-50%);
width:min(calc(100% - 56px),860px);
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:18px;
align-items:center;
padding:18px;
border-radius:34px;
background:rgba(17,24,39,.96);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 32px 90px rgba(17,24,39,.34);
backdrop-filter:blur(18px);
}
.floating-promo-widget::before{
content:"";
position:absolute;
inset:1px;
border-radius:33px;
background:
linear-gradient(135deg,rgba(255,255,255,.10),transparent 34%,rgba(255,255,255,.05));
pointer-events:none;
}
.floating-promo-product{
position:relative;
z-index:2;
display:grid;
place-items:center;
width:106px;
height:106px;
border-radius:28px;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.28),transparent 30%),
linear-gradient(135deg,#ec4899,#f59e0b);
box-shadow:0 20px 46px rgba(236,72,153,.26);
}
.floating-promo-product::before{
content:"";
width:54px;
height:68px;
border-radius:18px;
background:#ffffff;
box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.floating-promo-product::after{
content:"";
position:absolute;
width:28px;
height:12px;
top:34px;
border-radius:999px;
background:rgba(17,24,39,.16);
}
.floating-promo-content{
position:relative;
z-index:2;
min-width:0;
}
.floating-promo-widget-top{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:8px;
}
.floating-promo-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(236,72,153,.18);
border:1px solid rgba(244,114,182,.28);
color:#fce7f3;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.floating-promo-stock{
color:#fbbf24;
font-size:12px;
line-height:1.2;
font-weight:900;
}
.floating-promo-widget h3{
margin:0 0 6px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.045em;
}
.floating-promo-widget p{
max-width:520px;
margin:0;
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:650;
}
.floating-promo-progress{
display:flex;
align-items:center;
gap:10px;
margin-top:14px;
}
.floating-promo-track{
position:relative;
flex:1;
height:8px;
border-radius:999px;
background:rgba(255,255,255,.14);
overflow:hidden;
}
.floating-promo-track span{
display:block;
width:64%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#f472b6,#fbbf24);
box-shadow:0 0 18px rgba(244,114,182,.42);
}
.floating-promo-progress strong{
color:#f8fafc;
font-size:12px;
font-weight:950;
white-space:nowrap;
}
.floating-promo-actions{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:10px;
}
.floating-promo-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:13px 17px;
border-radius:999px;
background:#ffffff;
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
white-space:nowrap;
box-shadow:0 16px 34px rgba(255,255,255,.12);
transition:transform .22s ease,box-shadow .22s ease;
}
.floating-promo-button:hover{
transform:translateY(-2px);
box-shadow:0 20px 42px rgba(255,255,255,.18);
}
.floating-promo-close{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
color:#cbd5e1;
font-size:18px;
font-weight:700;
text-decoration:none;
transition:transform .22s ease,background .22s ease,color .22s ease;
}
.floating-promo-close:hover{
transform:rotate(90deg);
background:rgba(255,255,255,.14);
color:#ffffff;
}
@media (max-width:900px){
.floating-promo-hero{
grid-template-columns:1fr;
padding-bottom:260px;
}
.floating-promo-widget{
grid-template-columns:auto minmax(0,1fr);
}
.floating-promo-actions{
grid-column:1 / -1;
justify-content:flex-start;
}
}
@media (max-width:640px){
.floating-promo-header{
align-items:flex-start;
flex-direction:column;
padding:20px;
}
.floating-promo-nav{
flex-wrap:wrap;
}
.floating-promo-hero{
padding:44px 20px 340px;
}
.floating-promo-hero h3{
font-size:38px;
}
.floating-promo-hero p{
font-size:16px;
}
.floating-promo-widget{
left:14px;
right:14px;
bottom:14px;
transform:none;
width:auto;
grid-template-columns:1fr;
padding:16px;
border-radius:26px;
}
.floating-promo-product{
width:84px;
height:84px;
border-radius:22px;
}
.floating-promo-actions{
flex-direction:column;
align-items:stretch;
}
.floating-promo-button{
width:100%;
}
.floating-promo-close{
position:absolute;
right:14px;
top:14px;
}
}
This floating promo banner works well when the campaign message should stay visible without becoming a traditional popup. The floating widget layout, progress indicator, and product-style visual make it feel more polished than a basic bottom bar.
18. Split Layout Banner
A split layout banner is useful when you want a balanced section with strong copy on one side and a visual product, service, or campaign preview on the other. This pattern works well for landing pages, app websites, agency offers, product launches, online courses, and service promotions.
The example below uses an editorial split layout with a large visual card, diagonal accent layer, stacked proof cards, and a strong left-side message. It feels more like a premium landing page section than a simple promotional rectangle.
- Professional split layout banner for landing pages and product campaigns
- Includes headline, CTA buttons, proof chips, visual panel, and stacked content cards
- Good for SaaS tools, agencies, online courses, product launches, and service pages
- Uses an editorial two-column layout with layered visual depth
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="split-layout-banner">
<div class="split-layout-inner">
<div class="split-layout-copy">
<div class="split-layout-kicker">Split Layout</div>
<h3 class="split-layout-title">Present a campaign with <span>premium two-column structure</span></h3>
<p class="split-layout-text">Use this split banner when your message needs strong copy on one side and a detailed product, service, or campaign preview on the other.</p>
<div class="split-layout-actions">
<a class="split-layout-button" href="#">Start Project</a>
<a class="split-layout-secondary" href="#">See Details</a>
</div>
<div class="split-layout-proof">
<span>Conversion focused</span>
<span>Landing page ready</span>
<span>Responsive layout</span>
</div>
</div>
<div class="split-layout-visual">
<div class="split-layout-float one">New leads +38%</div>
<div class="split-layout-float two">Campaign ready</div>
<div class="split-layout-main-card">
<div class="split-layout-main-card-top">
<div class="split-layout-dots">
<span></span>
<span></span>
<span></span>
</div>
<span class="split-layout-card-badge">Preview</span>
</div>
<h3 class="split-layout-card-title">Campaign performance overview</h3>
<div class="split-layout-card-grid">
<div class="split-layout-stat">
<strong>4.8x</strong>
<span>More visible campaign message</span>
</div>
<div class="split-layout-stat">
<strong>92%</strong>
<span>Reusable section structure</span>
</div>
<div class="split-layout-wide-stat">
<strong>Weekly engagement</strong>
<div class="split-layout-bars">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.split-layout-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}
.split-layout-banner::before{
content:"";
position:absolute;
right:-10%;
top:-20%;
width:54%;
height:140%;
background:linear-gradient(135deg,#2563eb,#7c3aed);
transform:rotate(-8deg);
border-radius:80px;
pointer-events:none;
}
.split-layout-banner::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 8% 12%,rgba(37,99,235,.10),transparent 30%),
linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
pointer-events:none;
}
.split-layout-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(360px,.95fr);
gap:40px;
align-items:center;
padding:50px;
}
.split-layout-copy{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.split-layout-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#eef2ff;
border:1px solid rgba(79,70,229,.18);
color:#4338ca;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.split-layout-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#4f46e5;
box-shadow:0 0 0 5px rgba(79,70,229,.14);
}
.split-layout-title{
margin:0;
max-width:680px;
color:#0f172a;
font-size:clamp(40px,5vw,72px);
line-height:1;
font-weight:950;
letter-spacing:-.08em;
}
.split-layout-title span{
background:linear-gradient(135deg,#2563eb,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.split-layout-text{
max-width:610px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.split-layout-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.split-layout-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 20px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(15,23,42,.20);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.split-layout-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 22px 50px rgba(15,23,42,.28);
}
.split-layout-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 18px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.split-layout-secondary:hover{
transform:translateY(-2px);
border-color:rgba(79,70,229,.32);
color:#4338ca !important;
-webkit-text-fill-color:#4338ca !important;
}
.split-layout-proof{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:8px;
}
.split-layout-proof span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:850;
}
.split-layout-visual{
position:relative;
min-height:470px;
display:grid;
place-items:center;
}
.split-layout-main-card{
position:relative;
z-index:2;
width:min(100%,430px);
padding:22px;
border-radius:34px;
background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.46);
box-shadow:0 32px 90px rgba(30,41,59,.26);
backdrop-filter:blur(18px);
}
.split-layout-main-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
}
.split-layout-dots{
display:flex;
gap:7px;
}
.split-layout-dots span{
width:11px;
height:11px;
border-radius:999px;
background:#cbd5e1;
}
.split-layout-dots span:nth-child(1){background:#fb7185;}
.split-layout-dots span:nth-child(2){background:#facc15;}
.split-layout-dots span:nth-child(3){background:#22c55e;}
.split-layout-card-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eef2ff;
border:1px solid rgba(79,70,229,.16);
color:#4338ca;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.split-layout-card-title{
margin:0 0 16px;
color:#0f172a;
font-size:25px;
line-height:1.12;
font-weight:950;
letter-spacing:-.05em;
}
.split-layout-card-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.split-layout-stat{
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.split-layout-stat strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:26px;
line-height:1;
font-weight:950;
letter-spacing:-.055em;
}
.split-layout-stat span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:750;
}
.split-layout-wide-stat{
grid-column:1 / -1;
padding:18px;
border-radius:24px;
background:#0f172a;
}
.split-layout-wide-stat strong{
display:block;
margin-bottom:8px;
color:#ffffff;
font-size:16px;
font-weight:950;
}
.split-layout-bars{
display:flex;
align-items:end;
gap:7px;
height:90px;
}
.split-layout-bars span{
flex:1;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#60a5fa,#7c3aed);
min-height:20px;
}
.split-layout-bars span:nth-child(1){height:42%;}
.split-layout-bars span:nth-child(2){height:68%;}
.split-layout-bars span:nth-child(3){height:54%;}
.split-layout-bars span:nth-child(4){height:82%;}
.split-layout-bars span:nth-child(5){height:70%;}
.split-layout-bars span:nth-child(6){height:92%;}
.split-layout-float{
position:absolute;
z-index:3;
display:flex;
align-items:center;
gap:9px;
padding:11px 13px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 44px rgba(15,23,42,.16);
color:#0f172a;
font-size:12px;
font-weight:900;
}
.split-layout-float::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 5px rgba(34,197,94,.12);
}
.split-layout-float.one{
left:0;
top:72px;
}
.split-layout-float.two{
right:0;
bottom:92px;
}
@media (max-width:980px){
.split-layout-inner{
grid-template-columns:1fr;
}
.split-layout-visual{
min-height:430px;
}
}
@media (max-width:700px){
.split-layout-banner{
border-radius:28px;
}
.split-layout-banner::before{
right:-40%;
width:92%;
height:58%;
top:auto;
bottom:-18%;
transform:rotate(-8deg);
}
.split-layout-inner{
padding:28px;
}
.split-layout-title{
font-size:40px;
}
.split-layout-text{
font-size:16px;
}
.split-layout-actions{
width:100%;
}
.split-layout-button,
.split-layout-secondary{
width:100%;
}
.split-layout-visual{
min-height:auto;
display:block;
}
.split-layout-main-card{
width:100%;
padding:18px;
border-radius:26px;
}
.split-layout-card-grid{
grid-template-columns:1fr;
}
.split-layout-wide-stat{
grid-column:auto;
}
.split-layout-float{
position:relative;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
margin:12px 0 0;
width:max-content;
max-width:100%;
}
}
This split layout banner is useful when a campaign needs a more premium editorial structure. The diagonal background layer, proof chips, floating labels, and dashboard-style visual make the section feel like a real landing page component instead of a simple promo block.
19. Image Background Banner
An image background banner is useful when a campaign, product, destination, service, or brand message needs a more visual and emotional presentation. It works well for travel websites, real estate pages, restaurants, fashion campaigns, product launches, photography portfolios, and premium landing pages.
The example below uses a cinematic background image effect built with CSS gradients and layered shapes instead of relying on an external image file. It includes a dark overlay, editorial typography, stacked CTA buttons, and a floating campaign card. This makes the banner feel more premium than a simple text-on-image section.
- Premium image-style banner with cinematic overlay
- Good for travel, real estate, restaurants, fashion, services, and product campaigns
- Includes headline, CTA buttons, campaign details, and floating visual card
- Uses CSS gradients and layered shapes instead of external image assets
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="image-bg-banner">
<div class="image-bg-banner-inner">
<div class="image-bg-banner-content">
<div class="image-bg-banner-kicker">Visual Campaign</div>
<h3 class="image-bg-banner-title">Create an immersive banner with a <span>cinematic background feel</span></h3>
<p class="image-bg-banner-text">Use this banner when the visual mood matters as much as the message. It works well for travel, real estate, restaurants, product campaigns, and premium service pages.</p>
<div class="image-bg-banner-actions">
<a class="image-bg-banner-button" href="#">Explore Campaign</a>
<a class="image-bg-banner-link" href="#">View Gallery</a>
</div>
</div>
<aside class="image-bg-banner-card">
<span class="image-bg-card-label">Featured Experience</span>
<h3 class="image-bg-card-title">Premium visual section</h3>
<p class="image-bg-card-text">A layered CSS background creates the feeling of an image banner without loading external image assets.</p>
<div class="image-bg-banner-stats">
<div class="image-bg-banner-stat">
<strong>4K</strong>
<span>Visual feel</span>
</div>
<div class="image-bg-banner-stat">
<strong>0</strong>
<span>Images</span>
</div>
<div class="image-bg-banner-stat">
<strong>100%</strong>
<span>CSS</span>
</div>
</div>
</aside>
</div>
</section>
CSS
.image-bg-banner{
position:relative;
width:min(100%,1120px);
min-height:620px;
overflow:hidden;
border-radius:42px;
background:
linear-gradient(135deg,rgba(15,23,42,.58),rgba(15,23,42,.82)),
radial-gradient(circle at 22% 32%,rgba(14,165,233,.42),transparent 28%),
radial-gradient(circle at 72% 20%,rgba(251,146,60,.38),transparent 28%),
radial-gradient(circle at 76% 82%,rgba(20,184,166,.26),transparent 34%),
linear-gradient(135deg,#0f172a,#1e293b);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 34px 100px rgba(15,23,42,.34);
}
.image-bg-banner::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(120deg,rgba(255,255,255,.16),transparent 18%,transparent 70%,rgba(255,255,255,.10)),
repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 18px);
mix-blend-mode:screen;
opacity:.55;
pointer-events:none;
}
.image-bg-banner::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(2,6,23,.82),rgba(2,6,23,.44) 46%,rgba(2,6,23,.18)),
linear-gradient(0deg,rgba(2,6,23,.68),transparent 48%);
pointer-events:none;
}
.image-bg-banner-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
gap:34px;
align-items:end;
min-height:620px;
padding:52px;
}
.image-bg-banner-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
max-width:680px;
}
.image-bg-banner-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
color:#fed7aa;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
backdrop-filter:blur(14px);
}
.image-bg-banner-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#fb923c;
box-shadow:0 0 0 5px rgba(251,146,60,.16);
}
.image-bg-banner-title{
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(42px,6vw,82px);
line-height:.98;
font-weight:950;
letter-spacing:-.085em;
}
.image-bg-banner-title span{
background:linear-gradient(135deg,#fed7aa,#bae6fd,#99f6e4);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.image-bg-banner-text{
max-width:620px;
margin:0;
color:rgba(255,255,255,.80);
font-size:17px;
line-height:1.75;
font-weight:600;
}
.image-bg-banner-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.image-bg-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(0,0,0,.20);
transition:transform .22s ease,box-shadow .22s ease;
}
.image-bg-banner-button:hover{
transform:translateY(-2px);
box-shadow:0 22px 54px rgba(0,0,0,.28);
}
.image-bg-banner-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
backdrop-filter:blur(14px);
transition:transform .22s ease,background .22s ease;
}
.image-bg-banner-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.18);
}
.image-bg-banner-card{
position:relative;
align-self:center;
padding:22px;
border-radius:32px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 28px 80px rgba(0,0,0,.24);
backdrop-filter:blur(20px);
}
.image-bg-banner-card::before{
content:"";
display:block;
height:190px;
border-radius:24px;
margin-bottom:18px;
background:
radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),transparent 18%),
linear-gradient(135deg,rgba(14,165,233,.82),rgba(20,184,166,.58) 48%,rgba(251,146,60,.70)),
linear-gradient(135deg,#0f172a,#334155);
box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 18px 40px rgba(0,0,0,.18);
}
.image-bg-card-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.image-bg-card-title{
margin:12px 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.14;
font-weight:950;
letter-spacing:-.045em;
}
.image-bg-card-text{
margin:0;
color:rgba(255,255,255,.74);
font-size:13px;
line-height:1.6;
font-weight:650;
}
.image-bg-banner-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:20px;
}
.image-bg-banner-stat{
padding:12px;
border-radius:18px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}
.image-bg-banner-stat strong{
display:block;
color:#ffffff;
font-size:20px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
}
.image-bg-banner-stat span{
display:block;
margin-top:4px;
color:rgba(255,255,255,.66);
font-size:11px;
font-weight:800;
}
@media (max-width:940px){
.image-bg-banner-inner{
grid-template-columns:1fr;
align-items:start;
}
.image-bg-banner-card{
max-width:520px;
align-self:start;
}
}
@media (max-width:700px){
.image-bg-banner{
border-radius:28px;
}
.image-bg-banner-inner{
min-height:auto;
padding:30px;
}
.image-bg-banner-title{
font-size:42px;
}
.image-bg-banner-text{
font-size:16px;
}
.image-bg-banner-actions{
width:100%;
}
.image-bg-banner-button,
.image-bg-banner-link{
width:100%;
}
.image-bg-banner-card{
padding:18px;
border-radius:26px;
}
.image-bg-banner-card::before{
height:160px;
}
.image-bg-banner-stats{
grid-template-columns:1fr;
}
}
This image background banner is useful when a section needs a stronger emotional or visual feel. The layered background, cinematic overlay, and floating content card create a premium presentation without requiring actual image files.
20. Product Launch Banner
A product launch banner is designed to introduce a new product, feature, course, app, template pack, service, or digital offer. It should create momentum, communicate what is new, and make the launch action easy to understand.
The example below uses a launch-focused layout with a bold announcement area, product mockup, launch timeline, feature chips, and a strong waitlist CTA. It has a different structure from a normal promo banner because the design is built around product reveal and launch sequencing.
- Professional product launch banner for new products, features, apps, and digital offers
- Includes product mockup, launch timeline, CTA buttons, and feature chips
- Good for SaaS launches, template packs, online courses, and startup announcements
- Uses a launch event layout instead of a generic campaign block
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="product-launch-banner">
<div class="product-launch-inner">
<div class="product-launch-content">
<div class="product-launch-kicker">Product Launch</div>
<h3 class="product-launch-title">Announce your next release with a <span>launch-ready banner</span></h3>
<p class="product-launch-text">Use this banner to introduce a new product, template pack, app feature, course, or service with a strong reveal message and a structured launch flow.</p>
<div class="product-launch-actions">
<a class="product-launch-button" href="#">Join Waitlist</a>
<a class="product-launch-link" href="#">Watch Preview</a>
</div>
<div class="product-launch-chips">
<span>Launch page ready</span>
<span>Waitlist CTA</span>
<span>Product mockup</span>
</div>
</div>
<div class="product-launch-visual">
<div class="product-launch-floating-label">Beta access opens soon</div>
<div class="product-launch-device">
<div class="product-launch-device-screen">
<div class="product-launch-screen-top">
<div class="product-launch-dots">
<span></span>
<span></span>
<span></span>
</div>
<span class="product-launch-screen-badge">New UI</span>
</div>
<div class="product-launch-screen-body">
<div class="product-launch-mini-hero">
<h3>LaunchKit Pro</h3>
<p>A reusable campaign system for modern product announcements.</p>
</div>
<div class="product-launch-feature-list">
<div class="product-launch-feature">
<span>Landing sections</span>
<strong>30+</strong>
</div>
<div class="product-launch-feature">
<span>Responsive layouts</span>
<strong>Ready</strong>
</div>
<div class="product-launch-feature">
<span>Launch assets</span>
<strong>Included</strong>
</div>
</div>
</div>
</div>
</div>
<div class="product-launch-timeline">
<strong class="product-launch-timeline-title">Launch timeline</strong>
<div class="product-launch-step">
<span class="product-launch-step-dot"></span>
<div class="product-launch-step-content">
<strong>Preview</strong>
<span>Product teaser and waitlist open.</span>
</div>
</div>
<div class="product-launch-step">
<span class="product-launch-step-dot"></span>
<div class="product-launch-step-content">
<strong>Early Access</strong>
<span>First users get invited.</span>
</div>
</div>
<div class="product-launch-step">
<span class="product-launch-step-dot"></span>
<div class="product-launch-step-content">
<strong>Public Launch</strong>
<span>Full release goes live.</span>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.product-launch-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#020617;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(2,6,23,.42);
}
.product-launch-banner::before{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 18% 18%,rgba(99,102,241,.34),transparent 30%),
radial-gradient(circle at 88% 12%,rgba(6,182,212,.30),transparent 30%),
radial-gradient(circle at 54% 95%,rgba(236,72,153,.22),transparent 34%),
linear-gradient(135deg,#020617,#0f172a);
pointer-events:none;
}
.product-launch-banner::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:36px 36px;
mask-image:radial-gradient(circle at 50% 50%,black,transparent 78%);
pointer-events:none;
}
.product-launch-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
gap:38px;
align-items:center;
padding:50px;
}
.product-launch-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.product-launch-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(99,102,241,.16);
border:1px solid rgba(129,140,248,.26);
color:#c7d2fe;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.product-launch-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#818cf8;
box-shadow:0 0 0 5px rgba(129,140,248,.16);
}
.product-launch-title{
margin:0;
max-width:700px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(40px,5.8vw,78px);
line-height:.98;
font-weight:950;
letter-spacing:-.085em;
}
.product-launch-title span{
background:linear-gradient(135deg,#a5b4fc,#67e8f9,#f0abfc);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.product-launch-text{
max-width:620px;
margin:0;
color:#cbd5e1;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.product-launch-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.product-launch-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:linear-gradient(135deg,#818cf8,#22d3ee);
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(99,102,241,.24);
transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}
.product-launch-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 52px rgba(99,102,241,.34);
}
.product-launch-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}
.product-launch-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.13);
}
.product-launch-chips{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:8px;
}
.product-launch-chips span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e5e7eb;
font-size:12px;
font-weight:850;
}
.product-launch-visual{
position:relative;
min-height:510px;
display:grid;
place-items:center;
}
.product-launch-device{
position:relative;
z-index:2;
width:min(100%,430px);
padding:16px;
border-radius:36px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 32px 90px rgba(0,0,0,.28);
backdrop-filter:blur(18px);
transform:rotate(2deg);
}
.product-launch-device-screen{
overflow:hidden;
border-radius:26px;
background:#ffffff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
.product-launch-screen-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:16px;
border-bottom:1px solid rgba(15,23,42,.08);
}
.product-launch-dots{
display:flex;
gap:7px;
}
.product-launch-dots span{
width:10px;
height:10px;
border-radius:999px;
background:#cbd5e1;
}
.product-launch-dots span:nth-child(1){background:#fb7185;}
.product-launch-dots span:nth-child(2){background:#facc15;}
.product-launch-dots span:nth-child(3){background:#22c55e;}
.product-launch-screen-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.product-launch-screen-body{
padding:18px;
}
.product-launch-mini-hero{
padding:20px;
border-radius:24px;
background:
radial-gradient(circle at 20% 20%,rgba(99,102,241,.18),transparent 30%),
linear-gradient(135deg,#0f172a,#312e81);
}
.product-launch-mini-hero h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:24px;
line-height:1.08;
font-weight:950;
letter-spacing:-.055em;
}
.product-launch-mini-hero p{
margin:0;
color:#cbd5e1;
font-size:13px;
line-height:1.55;
font-weight:650;
}
.product-launch-feature-list{
display:grid;
gap:10px;
margin-top:14px;
}
.product-launch-feature{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:13px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.product-launch-feature span{
color:#475569;
font-size:13px;
font-weight:800;
}
.product-launch-feature strong{
color:#0f172a;
font-size:13px;
font-weight:950;
}
.product-launch-timeline{
position:absolute;
z-index:3;
left:0;
bottom:44px;
width:240px;
padding:16px;
border-radius:26px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.58);
box-shadow:0 22px 60px rgba(0,0,0,.20);
backdrop-filter:blur(18px);
}
.product-launch-timeline-title{
display:block;
margin-bottom:14px;
color:#0f172a;
font-size:13px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.product-launch-step{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:10px;
align-items:start;
}
.product-launch-step + .product-launch-step{
margin-top:12px;
}
.product-launch-step-dot{
width:13px;
height:13px;
margin-top:3px;
border-radius:999px;
background:#6366f1;
box-shadow:0 0 0 5px rgba(99,102,241,.12);
}
.product-launch-step-content strong{
display:block;
color:#0f172a;
font-size:13px;
font-weight:950;
line-height:1.2;
}
.product-launch-step-content span{
display:block;
margin-top:3px;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:700;
}
.product-launch-floating-label{
position:absolute;
right:10px;
top:58px;
z-index:3;
display:flex;
align-items:center;
gap:8px;
padding:11px 13px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:12px;
font-weight:900;
box-shadow:0 18px 48px rgba(0,0,0,.20);
backdrop-filter:blur(18px);
}
.product-launch-floating-label::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
background:#22d3ee;
box-shadow:0 0 18px rgba(34,211,238,.80);
}
@media (max-width:980px){
.product-launch-inner{
grid-template-columns:1fr;
}
.product-launch-visual{
min-height:560px;
max-width:620px;
}
}
@media (max-width:700px){
.product-launch-banner{
border-radius:28px;
}
.product-launch-inner{
padding:30px;
}
.product-launch-title{
font-size:42px;
}
.product-launch-text{
font-size:16px;
}
.product-launch-actions{
width:100%;
}
.product-launch-button,
.product-launch-link{
width:100%;
}
.product-launch-visual{
min-height:auto;
display:block;
}
.product-launch-device{
width:100%;
transform:none;
border-radius:28px;
}
.product-launch-timeline{
position:relative;
left:auto;
bottom:auto;
width:100%;
margin-top:16px;
}
.product-launch-floating-label{
position:relative;
right:auto;
top:auto;
width:max-content;
max-width:100%;
margin-top:16px;
}
}
This product launch banner is useful when the page needs to build excitement around something new. The product mockup, launch timeline, waitlist CTA, and floating status label make the section feel more like a launch event than a normal promo area.
21. Countdown Banner
A countdown banner is useful when a website needs to create urgency for a launch, event, sale, webinar, product drop, course opening, or limited-time campaign. A good countdown banner should feel clear and controlled, not messy or overly aggressive.
The example below uses a premium event-style countdown layout with a large campaign message, timer blocks, event details, CTA buttons, and a layered visual background. It is different from a simple sale banner because the countdown becomes the main interaction point of the section.
- Premium countdown banner for launches, events, sales, and limited campaigns
- Includes large timer blocks, CTA buttons, campaign details, and status chips
- Good for product drops, webinars, course launches, and ecommerce promotions
- Uses a structured event-style layout instead of a basic offer row
- Responsive HTML and CSS with no JavaScript required for the static demo
HTML
<section class="countdown-banner">
<div class="countdown-banner-inner">
<div class="countdown-banner-content">
<div class="countdown-banner-kicker">Limited-Time Event</div>
<h3 class="countdown-banner-title">Build urgency with a polished <span>countdown banner</span></h3>
<p class="countdown-banner-text">Use this banner for launches, product drops, webinars, seasonal campaigns, course openings, and special offers where timing is part of the message.</p>
<div class="countdown-banner-actions">
<a class="countdown-banner-button" href="#">Reserve Spot</a>
<a class="countdown-banner-link" href="#">View Schedule</a>
</div>
<div class="countdown-banner-details">
<div class="countdown-banner-detail">
<strong>Launch date</strong>
<span>Friday, 10:00 AM</span>
</div>
<div class="countdown-banner-detail">
<strong>Access</strong>
<span>Early members first</span>
</div>
</div>
</div>
<div class="countdown-panel">
<div class="countdown-panel-top">
<span class="countdown-panel-label">Starts soon</span>
<span class="countdown-panel-status">78% reserved</span>
</div>
<div class="countdown-timer-grid">
<div class="countdown-time-box">
<strong>03</strong>
<span>Days</span>
</div>
<div class="countdown-time-box">
<strong>18</strong>
<span>Hours</span>
</div>
<div class="countdown-time-box">
<strong>42</strong>
<span>Minutes</span>
</div>
<div class="countdown-time-box">
<strong>09</strong>
<span>Seconds</span>
</div>
</div>
<div class="countdown-panel-note">
<h3>Early access opens before public launch</h3>
<p>Use this area to explain what happens when the countdown ends and why visitors should act now.</p>
</div>
<div class="countdown-progress">
<div class="countdown-progress-track">
<span></span>
</div>
<strong>78% full</strong>
</div>
</div>
</div>
</section>
CSS
.countdown-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#111827;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(17,24,39,.36);
}
.countdown-banner::before{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 18% 20%,rgba(244,63,94,.34),transparent 32%),
radial-gradient(circle at 88% 12%,rgba(251,191,36,.28),transparent 30%),
radial-gradient(circle at 52% 96%,rgba(249,115,22,.24),transparent 34%),
linear-gradient(135deg,#111827,#1f2937);
pointer-events:none;
}
.countdown-banner::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.10),transparent 28%,rgba(255,255,255,.05)),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 42px);
pointer-events:none;
}
.countdown-banner-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
gap:38px;
align-items:center;
padding:50px;
}
.countdown-banner-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.countdown-banner-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(244,63,94,.16);
border:1px solid rgba(251,113,133,.26);
color:#fecdd3;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.countdown-banner-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#fb7185;
box-shadow:0 0 0 5px rgba(251,113,133,.16);
}
.countdown-banner-title{
margin:0;
max-width:690px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(40px,5.8vw,78px);
line-height:.98;
font-weight:950;
letter-spacing:-.085em;
}
.countdown-banner-title span{
background:linear-gradient(135deg,#fecdd3,#fde68a,#fed7aa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.countdown-banner-text{
max-width:610px;
margin:0;
color:#d1d5db;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.countdown-banner-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.countdown-banner-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:linear-gradient(135deg,#fb7185,#fbbf24);
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(251,113,133,.24);
transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}
.countdown-banner-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 52px rgba(251,113,133,.34);
}
.countdown-banner-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}
.countdown-banner-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.13);
}
.countdown-banner-details{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:10px;
width:min(100%,520px);
}
.countdown-banner-detail{
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}
.countdown-banner-detail strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:13px;
font-weight:950;
}
.countdown-banner-detail span{
display:block;
color:#9ca3af;
font-size:12px;
line-height:1.45;
font-weight:750;
}
.countdown-panel{
position:relative;
padding:26px;
border-radius:34px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
}
.countdown-panel-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:22px;
}
.countdown-panel-label{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#fef3c7;
font-size:12px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.countdown-panel-label::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#fbbf24;
box-shadow:0 0 18px rgba(251,191,36,.75);
}
.countdown-panel-status{
color:#fecdd3;
font-size:12px;
font-weight:900;
}
.countdown-timer-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}
.countdown-time-box{
position:relative;
overflow:hidden;
padding:20px 12px;
border-radius:24px;
background:#ffffff;
box-shadow:0 18px 40px rgba(0,0,0,.18);
text-align:center;
}
.countdown-time-box::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 50% 0%,rgba(251,113,133,.18),transparent 42%);
pointer-events:none;
}
.countdown-time-box strong{
position:relative;
z-index:2;
display:block;
color:#111827;
font-size:clamp(28px,4vw,46px);
line-height:1;
font-weight:950;
letter-spacing:-.07em;
}
.countdown-time-box span{
position:relative;
z-index:2;
display:block;
margin-top:8px;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.09em;
text-transform:uppercase;
}
.countdown-panel-note{
margin:18px 0 0;
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}
.countdown-panel-note h3{
margin:0 0 6px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:19px;
line-height:1.2;
font-weight:950;
letter-spacing:-.04em;
}
.countdown-panel-note p{
margin:0;
color:#d1d5db;
font-size:13px;
line-height:1.6;
font-weight:650;
}
.countdown-progress{
display:flex;
align-items:center;
gap:10px;
margin-top:18px;
}
.countdown-progress-track{
flex:1;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.14);
overflow:hidden;
}
.countdown-progress-track span{
display:block;
width:78%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#fb7185,#fbbf24);
box-shadow:0 0 20px rgba(251,113,133,.38);
}
.countdown-progress strong{
color:#ffffff;
font-size:12px;
font-weight:950;
white-space:nowrap;
}
@media (max-width:980px){
.countdown-banner-inner{
grid-template-columns:1fr;
}
.countdown-panel{
max-width:640px;
}
}
@media (max-width:700px){
.countdown-banner{
border-radius:28px;
}
.countdown-banner-inner{
padding:30px;
}
.countdown-banner-title{
font-size:42px;
}
.countdown-banner-text{
font-size:16px;
}
.countdown-banner-actions{
width:100%;
}
.countdown-banner-button,
.countdown-banner-link{
width:100%;
}
.countdown-banner-details{
grid-template-columns:1fr;
}
.countdown-panel{
padding:20px;
border-radius:26px;
}
.countdown-panel-top{
align-items:flex-start;
flex-direction:column;
}
.countdown-timer-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.countdown-time-box{
padding:18px 10px;
}
}
This countdown banner is useful when timing is part of the conversion message. The timer blocks create urgency, while the event details, progress indicator, and CTA buttons keep the layout informative instead of looking like a cheap sales strip.
22. App Download Banner
An app download banner is designed to promote a mobile app, SaaS companion app, fitness tracker, finance app, learning platform, marketplace app, or productivity tool. It should make the app feel useful, trustworthy, and easy to install.
The example below uses a premium app landing banner with a large phone mockup, store buttons, rating proof, feature cards, and a soft diagonal background. It is different from a normal CTA banner because the visual focus is the mobile product experience.
- Professional app download banner with phone mockup
- Includes app store buttons, rating proof, feature cards, and product UI preview
- Good for mobile apps, SaaS tools, fitness apps, finance apps, and learning platforms
- Uses a product-focused app landing layout
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="app-download-banner">
<div class="app-download-inner">
<div class="app-download-content">
<div class="app-download-kicker">Mobile App</div>
<h3 class="app-download-title">Promote your app with a <span>download-ready banner</span></h3>
<p class="app-download-text">Use this banner to introduce a mobile app, companion product, learning platform, fitness tracker, finance tool, or SaaS mobile experience.</p>
<div class="app-download-buttons">
<a class="app-store-button" href="#">
<span class="app-store-icon">A</span>
<span class="app-store-text">
<small>Download on the</small>
<strong>App Store</strong>
</span>
</a>
<a class="app-store-button" href="#">
<span class="app-store-icon">G</span>
<span class="app-store-text">
<small>Get it on</small>
<strong>Google Play</strong>
</span>
</a>
</div>
<div class="app-download-proof">
<span>4.9 average rating</span>
<span>120k downloads</span>
<span>Free to start</span>
</div>
</div>
<div class="app-download-visual">
<div class="app-floating-rating">
<strong>4.9★</strong>
<span>Average app store rating from active users.</span>
</div>
<div class="app-phone">
<div class="app-phone-screen">
<div class="app-phone-header">
<span>Today</span>
<h3>Track everything in one app</h3>
<p>Use a product mockup to show what users get after downloading.</p>
</div>
<div class="app-phone-cards">
<div class="app-phone-card">
<strong>Daily progress</strong>
<span>Complete 68% of today’s plan.</span>
<div class="app-phone-progress">
<span></span>
</div>
</div>
<div class="app-phone-card">
<strong>Smart reminders</strong>
<span>Stay on track with personalized notifications.</span>
</div>
<div class="app-phone-card">
<strong>Fast insights</strong>
<span>See useful stats without opening a dashboard.</span>
</div>
</div>
</div>
</div>
<div class="app-floating-feature">Offline mode included</div>
</div>
</div>
</section>
CSS
.app-download-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}
.app-download-banner::before{
content:"";
position:absolute;
right:-18%;
top:-22%;
width:62%;
height:144%;
border-radius:90px;
background:linear-gradient(135deg,#2563eb,#14b8a6);
transform:rotate(-10deg);
pointer-events:none;
}
.app-download-banner::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 10% 16%,rgba(37,99,235,.10),transparent 30%),
linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.78));
pointer-events:none;
}
.app-download-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.96fr) minmax(360px,1.04fr);
gap:42px;
align-items:center;
padding:52px;
}
.app-download-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.app-download-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
border:1px solid rgba(37,99,235,.18);
color:#1d4ed8;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.app-download-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#2563eb;
box-shadow:0 0 0 5px rgba(37,99,235,.14);
}
.app-download-title{
margin:0;
max-width:700px;
color:#0f172a;
font-size:clamp(40px,5.8vw,76px);
line-height:.99;
font-weight:950;
letter-spacing:-.085em;
}
.app-download-title span{
background:linear-gradient(135deg,#2563eb,#14b8a6);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.app-download-text{
max-width:610px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.app-download-buttons{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.app-store-button{
display:flex;
align-items:center;
gap:11px;
min-height:56px;
padding:12px 16px;
border-radius:18px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(15,23,42,.18);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.app-store-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 22px 50px rgba(15,23,42,.26);
}
.app-store-icon{
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:10px;
background:rgba(255,255,255,.12);
font-size:15px;
font-weight:950;
}
.app-store-text{
display:grid;
gap:2px;
}
.app-store-text small{
color:#cbd5e1;
font-size:10px;
line-height:1;
font-weight:800;
}
.app-store-text strong{
color:#ffffff;
font-size:15px;
line-height:1;
font-weight:950;
}
.app-download-proof{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:8px;
}
.app-download-proof span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:850;
}
.app-download-visual{
position:relative;
min-height:560px;
display:grid;
place-items:center;
}
.app-phone{
position:relative;
z-index:2;
width:280px;
height:560px;
padding:13px;
border-radius:46px;
background:#0f172a;
border:1px solid rgba(255,255,255,.22);
box-shadow:0 34px 90px rgba(15,23,42,.34);
transform:rotate(3deg);
}
.app-phone::before{
content:"";
position:absolute;
left:50%;
top:12px;
width:86px;
height:25px;
border-radius:999px;
background:#020617;
transform:translateX(-50%);
z-index:4;
}
.app-phone-screen{
position:relative;
overflow:hidden;
height:100%;
border-radius:35px;
background:
radial-gradient(circle at 50% 0%,rgba(20,184,166,.18),transparent 30%),
linear-gradient(180deg,#eff6ff,#ffffff);
}
.app-phone-header{
padding:46px 18px 18px;
background:
radial-gradient(circle at 20% 15%,rgba(255,255,255,.46),transparent 28%),
linear-gradient(135deg,#2563eb,#14b8a6);
}
.app-phone-header span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:10px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.app-phone-header h3{
margin:14px 0 6px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:27px;
line-height:1.05;
font-weight:950;
letter-spacing:-.06em;
}
.app-phone-header p{
margin:0;
color:rgba(255,255,255,.78);
font-size:12px;
line-height:1.5;
font-weight:700;
}
.app-phone-cards{
display:grid;
gap:10px;
padding:14px;
}
.app-phone-card{
padding:14px;
border-radius:20px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.app-phone-card strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:14px;
font-weight:950;
}
.app-phone-card span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:700;
}
.app-phone-progress{
height:8px;
margin-top:10px;
border-radius:999px;
background:#e2e8f0;
overflow:hidden;
}
.app-phone-progress span{
display:block;
height:100%;
width:68%;
border-radius:999px;
background:linear-gradient(90deg,#2563eb,#14b8a6);
}
.app-floating-rating{
position:absolute;
z-index:3;
left:0;
top:90px;
width:190px;
padding:16px;
border-radius:24px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.58);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
}
.app-floating-rating strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:26px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}
.app-floating-rating span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:750;
}
.app-floating-feature{
position:absolute;
z-index:3;
right:0;
bottom:96px;
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.58);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
color:#0f172a;
font-size:12px;
font-weight:900;
}
.app-floating-feature::before{
content:"";
width:12px;
height:12px;
border-radius:999px;
background:#14b8a6;
box-shadow:0 0 0 5px rgba(20,184,166,.14);
}
@media (max-width:980px){
.app-download-inner{
grid-template-columns:1fr;
}
.app-download-visual{
max-width:620px;
}
}
@media (max-width:700px){
.app-download-banner{
border-radius:28px;
}
.app-download-banner::before{
right:-48%;
width:95%;
height:55%;
top:auto;
bottom:-20%;
}
.app-download-inner{
padding:30px;
}
.app-download-title{
font-size:42px;
}
.app-download-text{
font-size:16px;
}
.app-download-buttons{
width:100%;
}
.app-store-button{
width:100%;
}
.app-download-visual{
min-height:auto;
display:block;
}
.app-phone{
width:240px;
height:480px;
margin:0 auto;
transform:none;
}
.app-floating-rating,
.app-floating-feature{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
margin-top:14px;
}
}
This app download banner works well when the mobile product experience should be the main visual focus. The phone mockup, app store buttons, rating proof, and floating feature labels make the section feel like a real app landing page component.
23. Webinar Registration Banner
A webinar registration banner is useful when you want visitors to sign up for a live training, online event, workshop, product demo, masterclass, or educational session. It should clearly show the topic, date, speaker or host value, and registration CTA.
The example below uses a professional event registration layout with a large topic area, speaker card, agenda preview, date badge, and registration CTA. It is different from a generic CTA banner because the whole design is structured around event trust and sign-up intent.
- Professional webinar banner for live events, demos, and workshops
- Includes date badge, speaker card, agenda preview, CTA buttons, and event details
- Good for SaaS demos, online courses, coaching, B2B events, and product education
- Uses an event-focused layout instead of a simple promotional block
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="webinar-registration-banner">
<div class="webinar-registration-inner">
<div class="webinar-registration-content">
<div class="webinar-registration-kicker">Live Webinar</div>
<h3 class="webinar-registration-title">Turn your next online event into a <span>high-trust signup banner</span></h3>
<p class="webinar-registration-text">Use this banner to promote a webinar, live demo, masterclass, workshop, or training session with a clear registration action.</p>
<div class="webinar-registration-actions">
<a class="webinar-registration-button" href="#">Reserve Your Seat</a>
<a class="webinar-registration-secondary" href="#">See Agenda</a>
</div>
<div class="webinar-registration-details">
<div class="webinar-registration-detail">
<strong>Date</strong>
<span>May 28, 2026</span>
</div>
<div class="webinar-registration-detail">
<strong>Duration</strong>
<span>60 minutes</span>
</div>
<div class="webinar-registration-detail">
<strong>Access</strong>
<span>Free registration</span>
</div>
</div>
</div>
<div class="webinar-registration-visual">
<div class="webinar-floating-seat">126 seats reserved</div>
<div class="webinar-event-card">
<div class="webinar-event-date">
<strong>28</strong>
<span>May</span>
</div>
<h3>Build better campaign sections</h3>
<p>Learn how to structure banners, CTAs, offer blocks, and conversion sections for modern websites.</p>
<div class="webinar-speaker">
<div class="webinar-speaker-avatar">W</div>
<div class="webinar-speaker-info">
<strong>Workshop Host</strong>
<span>UI strategy and conversion design</span>
</div>
</div>
<div class="webinar-agenda">
<div class="webinar-agenda-item">
<span>Banner strategy</span>
<strong>15 min</strong>
</div>
<div class="webinar-agenda-item">
<span>Live examples</span>
<strong>30 min</strong>
</div>
<div class="webinar-agenda-item">
<span>Q&A session</span>
<strong>15 min</strong>
</div>
</div>
</div>
<div class="webinar-floating-price">
<strong>Free</strong>
<span>Registration includes replay access.</span>
</div>
</div>
</div>
</section>
CSS
.webinar-registration-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}
.webinar-registration-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 8% 12%,rgba(124,58,237,.12),transparent 30%),
radial-gradient(circle at 92% 18%,rgba(6,182,212,.14),transparent 32%),
linear-gradient(135deg,#ffffff,#f8fafc);
pointer-events:none;
}
.webinar-registration-banner::after{
content:"";
position:absolute;
right:-18%;
top:-18%;
width:58%;
height:138%;
border-radius:90px;
background:linear-gradient(135deg,#7c3aed,#06b6d4);
transform:rotate(-9deg);
pointer-events:none;
opacity:.96;
}
.webinar-registration-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
gap:42px;
align-items:center;
padding:52px;
}
.webinar-registration-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.webinar-registration-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#ede9fe;
border:1px solid rgba(124,58,237,.18);
color:#6d28d9;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.webinar-registration-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#7c3aed;
box-shadow:0 0 0 5px rgba(124,58,237,.14);
}
.webinar-registration-title{
margin:0;
max-width:700px;
color:#0f172a;
font-size:clamp(40px,5.8vw,76px);
line-height:.99;
font-weight:950;
letter-spacing:-.085em;
}
.webinar-registration-title span{
background:linear-gradient(135deg,#7c3aed,#06b6d4);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.webinar-registration-text{
max-width:620px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.webinar-registration-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.webinar-registration-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(15,23,42,.20);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.webinar-registration-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 22px 50px rgba(15,23,42,.28);
}
.webinar-registration-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.webinar-registration-secondary:hover{
transform:translateY(-2px);
border-color:rgba(124,58,237,.32);
color:#6d28d9 !important;
-webkit-text-fill-color:#6d28d9 !important;
}
.webinar-registration-details{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:min(100%,620px);
margin-top:8px;
}
.webinar-registration-detail{
padding:14px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.webinar-registration-detail strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:13px;
font-weight:950;
}
.webinar-registration-detail span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:750;
}
.webinar-registration-visual{
position:relative;
min-height:540px;
display:grid;
place-items:center;
}
.webinar-event-card{
position:relative;
z-index:3;
width:min(100%,430px);
padding:22px;
border-radius:34px;
background:rgba(255,255,255,.90);
border:1px solid rgba(255,255,255,.58);
box-shadow:0 32px 90px rgba(15,23,42,.25);
backdrop-filter:blur(18px);
}
.webinar-event-date{
display:grid;
place-items:center;
width:96px;
height:96px;
border-radius:28px;
background:linear-gradient(135deg,#7c3aed,#06b6d4);
color:#ffffff;
box-shadow:0 22px 50px rgba(124,58,237,.25);
margin-bottom:18px;
}
.webinar-event-date strong{
display:block;
font-size:34px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}
.webinar-event-date span{
display:block;
margin-top:5px;
font-size:11px;
line-height:1;
font-weight:950;
letter-spacing:.10em;
text-transform:uppercase;
}
.webinar-event-card h3{
margin:0 0 10px;
color:#0f172a;
font-size:26px;
line-height:1.12;
font-weight:950;
letter-spacing:-.055em;
}
.webinar-event-card p{
margin:0 0 18px;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}
.webinar-speaker{
display:flex;
align-items:center;
gap:12px;
padding:14px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.webinar-speaker-avatar{
display:grid;
place-items:center;
width:54px;
height:54px;
border-radius:18px;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.42),transparent 28%),
linear-gradient(135deg,#0f172a,#7c3aed);
color:#ffffff;
font-size:18px;
font-weight:950;
}
.webinar-speaker-info strong{
display:block;
color:#0f172a;
font-size:14px;
font-weight:950;
}
.webinar-speaker-info span{
display:block;
margin-top:3px;
color:#64748b;
font-size:12px;
font-weight:750;
}
.webinar-agenda{
display:grid;
gap:10px;
margin-top:16px;
}
.webinar-agenda-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-radius:18px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
}
.webinar-agenda-item span{
color:#475569;
font-size:13px;
font-weight:800;
}
.webinar-agenda-item strong{
color:#0f172a;
font-size:12px;
font-weight:950;
}
.webinar-floating-seat{
position:absolute;
z-index:4;
right:0;
top:78px;
display:flex;
align-items:center;
gap:9px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.60);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
color:#0f172a;
font-size:12px;
font-weight:900;
}
.webinar-floating-seat::before{
content:"";
width:11px;
height:11px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 5px rgba(34,197,94,.14);
}
.webinar-floating-price{
position:absolute;
z-index:4;
left:0;
bottom:92px;
width:170px;
padding:16px;
border-radius:24px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.60);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
}
.webinar-floating-price strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:26px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}
.webinar-floating-price span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:750;
}
@media (max-width:980px){
.webinar-registration-inner{
grid-template-columns:1fr;
}
.webinar-registration-visual{
max-width:640px;
}
}
@media (max-width:700px){
.webinar-registration-banner{
border-radius:28px;
}
.webinar-registration-banner::after{
right:-48%;
width:95%;
height:55%;
top:auto;
bottom:-20%;
}
.webinar-registration-inner{
padding:30px;
}
.webinar-registration-title{
font-size:42px;
}
.webinar-registration-text{
font-size:16px;
}
.webinar-registration-actions{
width:100%;
}
.webinar-registration-button,
.webinar-registration-secondary{
width:100%;
}
.webinar-registration-details{
grid-template-columns:1fr;
}
.webinar-registration-visual{
min-height:auto;
display:block;
}
.webinar-event-card{
width:100%;
padding:18px;
border-radius:26px;
}
.webinar-floating-seat,
.webinar-floating-price{
position:relative;
right:auto;
left:auto;
top:auto;
bottom:auto;
width:100%;
margin-top:14px;
}
}
This webinar registration banner is useful when the offer is based on trust, education, and a scheduled event. The date badge, agenda preview, speaker area, and registration CTA make the section feel like a complete event signup component.
24. Black Friday Banner
A Black Friday banner is designed for high-impact ecommerce campaigns, seasonal discounts, limited product bundles, flash sales, and major promotional events. It should feel bold, urgent, and visually memorable while still keeping the offer easy to understand.
The example below uses a premium Black Friday layout with a dark campaign background, oversized discount typography, deal cards, coupon code block, and strong CTA. It is more polished than a basic sale strip because the whole section feels like a dedicated campaign landing area.
- High-impact Black Friday banner for ecommerce campaigns
- Includes large discount message, deal cards, coupon code, CTA button, and campaign tags
- Good for product collections, seasonal sales, flash deals, and storewide promotions
- Uses bold campaign styling instead of a simple discount row
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="black-friday-banner">
<div class="black-friday-inner">
<div class="black-friday-content">
<div class="black-friday-kicker">Black Friday Event</div>
<h3 class="black-friday-title">Storewide savings <span>70%</span></h3>
<p class="black-friday-text">Use this bold banner for major ecommerce campaigns, seasonal sales, flash deals, product bundles, and high-impact promotional events.</p>
<div class="black-friday-actions">
<a class="black-friday-button" href="#">Shop Black Friday</a>
<a class="black-friday-link" href="#">View All Deals</a>
</div>
<div class="black-friday-code">
<span>Coupon code</span>
<strong>BLACK70</strong>
</div>
</div>
<div class="black-friday-deals">
<article class="black-friday-deal featured">
<div>
<span class="black-friday-deal-badge">Best Deal</span>
<div class="black-friday-deal-visual">
<div class="black-friday-box"></div>
</div>
</div>
<div>
<h3>Ultimate Bundle</h3>
<p>Feature your strongest Black Friday product bundle or limited campaign package.</p>
<div class="black-friday-price">
<strong>$49</strong>
<span>$169</span>
</div>
</div>
</article>
<article class="black-friday-deal">
<span class="black-friday-deal-badge">Flash</span>
<div class="black-friday-deal-visual">
<div class="black-friday-box"></div>
</div>
<h3>Starter Pack</h3>
<p>A compact deal card for entry-level offers.</p>
<div class="black-friday-price">
<strong>$19</strong>
<span>$59</span>
</div>
</article>
<article class="black-friday-deal">
<span class="black-friday-deal-badge">Limited</span>
<div class="black-friday-deal-visual">
<div class="black-friday-box"></div>
</div>
<h3>Pro Access</h3>
<p>Use this card for premium upgrades or add-ons.</p>
<div class="black-friday-price">
<strong>$79</strong>
<span>$199</span>
</div>
</article>
</div>
</div>
</section>
CSS
.black-friday-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#030712;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(3,7,18,.46);
}
.black-friday-banner::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(234,179,8,.28),transparent 30%),
radial-gradient(circle at 88% 12%,rgba(249,115,22,.22),transparent 30%),
radial-gradient(circle at 50% 92%,rgba(255,255,255,.10),transparent 34%),
linear-gradient(135deg,#030712,#111827);
pointer-events:none;
}
.black-friday-banner::after{
content:"BLACK FRIDAY";
position:absolute;
left:-34px;
bottom:34px;
color:rgba(255,255,255,.035);
font-size:128px;
line-height:1;
font-weight:950;
letter-spacing:-.08em;
white-space:nowrap;
pointer-events:none;
}
.black-friday-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
gap:38px;
align-items:center;
padding:50px;
}
.black-friday-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.black-friday-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(234,179,8,.16);
border:1px solid rgba(250,204,21,.26);
color:#fef3c7;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.black-friday-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#facc15;
box-shadow:0 0 0 5px rgba(250,204,21,.16);
}
.black-friday-title{
margin:0;
max-width:700px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(42px,6.4vw,92px);
line-height:.90;
font-weight:950;
letter-spacing:-.095em;
}
.black-friday-title span{
display:block;
margin-top:8px;
background:linear-gradient(135deg,#fef3c7,#facc15,#fb923c);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
font-size:clamp(68px,11vw,138px);
line-height:.82;
}
.black-friday-text{
max-width:620px;
margin:0;
color:#d1d5db;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.black-friday-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.black-friday-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:linear-gradient(135deg,#facc15,#fb923c);
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(250,204,21,.24);
transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}
.black-friday-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 52px rgba(250,204,21,.34);
}
.black-friday-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}
.black-friday-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.13);
}
.black-friday-code{
display:flex;
align-items:center;
gap:12px;
margin-top:8px;
padding:12px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px dashed rgba(250,204,21,.42);
}
.black-friday-code span{
color:#9ca3af;
font-size:12px;
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
}
.black-friday-code strong{
color:#facc15;
font-size:17px;
font-weight:950;
letter-spacing:.10em;
}
.black-friday-deals{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.black-friday-deal{
position:relative;
overflow:hidden;
min-height:220px;
padding:20px;
border-radius:30px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 60px rgba(0,0,0,.22);
backdrop-filter:blur(14px);
transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
.black-friday-deal:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.13);
border-color:rgba(250,204,21,.38);
}
.black-friday-deal.featured{
grid-row:span 2;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:454px;
background:
radial-gradient(circle at 50% 0%,rgba(250,204,21,.20),transparent 34%),
rgba(255,255,255,.11);
}
.black-friday-deal-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
padding:7px 10px;
border-radius:999px;
background:rgba(250,204,21,.16);
border:1px solid rgba(250,204,21,.26);
color:#fef3c7;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
.black-friday-deal-visual{
display:grid;
place-items:center;
height:120px;
margin:18px 0;
border-radius:24px;
background:
radial-gradient(circle at 50% 20%,rgba(250,204,21,.24),transparent 34%),
rgba(255,255,255,.08);
}
.black-friday-deal.featured .black-friday-deal-visual{
height:210px;
}
.black-friday-box{
width:78px;
height:78px;
border-radius:22px;
background:linear-gradient(135deg,#facc15,#fb923c);
box-shadow:0 20px 46px rgba(250,204,21,.22);
position:relative;
transform:rotate(-8deg);
}
.black-friday-box::before{
content:"";
position:absolute;
left:50%;
top:0;
width:12px;
height:100%;
background:rgba(255,255,255,.42);
transform:translateX(-50%);
}
.black-friday-box::after{
content:"";
position:absolute;
left:0;
top:50%;
width:100%;
height:12px;
background:rgba(255,255,255,.34);
transform:translateY(-50%);
}
.black-friday-deal h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.13;
font-weight:950;
letter-spacing:-.045em;
}
.black-friday-deal p{
margin:0;
color:#cbd5e1;
font-size:13px;
line-height:1.6;
font-weight:650;
}
.black-friday-price{
display:flex;
align-items:center;
gap:8px;
margin-top:14px;
}
.black-friday-price strong{
color:#facc15;
font-size:22px;
line-height:1;
font-weight:950;
}
.black-friday-price span{
color:#9ca3af;
font-size:13px;
font-weight:850;
text-decoration:line-through;
}
@media (max-width:980px){
.black-friday-inner{
grid-template-columns:1fr;
}
.black-friday-deals{
max-width:680px;
}
}
@media (max-width:700px){
.black-friday-banner{
border-radius:28px;
}
.black-friday-banner::after{
font-size:72px;
left:-18px;
bottom:18px;
}
.black-friday-inner{
padding:30px;
}
.black-friday-title{
font-size:44px;
}
.black-friday-title span{
font-size:72px;
}
.black-friday-text{
font-size:16px;
}
.black-friday-actions{
width:100%;
}
.black-friday-button,
.black-friday-link{
width:100%;
}
.black-friday-code{
align-items:flex-start;
flex-direction:column;
}
.black-friday-deals{
grid-template-columns:1fr;
}
.black-friday-deal,
.black-friday-deal.featured{
min-height:auto;
}
.black-friday-deal.featured{
grid-row:auto;
}
.black-friday-deal.featured .black-friday-deal-visual{
height:140px;
}
}
This Black Friday banner works best for major ecommerce campaigns where the section needs to feel bigger than a normal promo card. The oversized discount typography, coupon code, and deal cards create a full campaign block that can sit on a homepage, sale page, or product collection page.
25. Cyber Monday Banner
A Cyber Monday banner is useful for digital product sales, SaaS discounts, template bundles, software offers, online courses, subscriptions, and ecommerce campaigns that happen after Black Friday. It should feel more digital, modern, and tech-focused than a traditional retail sale banner.
The example below uses a futuristic Cyber Monday layout with neon grid effects, digital deal cards, a large discount message, coupon code, and a product-style dashboard preview. It is different from the Black Friday banner because the visual direction is more tech, software, and digital-product focused.
- Futuristic Cyber Monday banner for digital products and SaaS offers
- Includes neon grid background, deal cards, coupon code, and CTA buttons
- Good for software, templates, courses, subscriptions, and online tools
- Uses a digital campaign layout instead of a retail-style sale section
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="cyber-monday-banner">
<div class="cyber-monday-inner">
<div class="cyber-monday-content">
<div class="cyber-monday-kicker">Cyber Monday</div>
<h3 class="cyber-monday-title">Digital deals <span>60% off</span></h3>
<p class="cyber-monday-text">Use this futuristic banner for software discounts, template bundles, SaaS offers, online tools, digital courses, and subscription campaigns.</p>
<div class="cyber-monday-actions">
<a class="cyber-monday-button" href="#">Unlock Cyber Deal</a>
<a class="cyber-monday-link" href="#">Compare Plans</a>
</div>
<div class="cyber-monday-code">
<span>Coupon code</span>
<strong>CYBER60</strong>
</div>
</div>
<div class="cyber-monday-visual">
<div class="cyber-deal-float one">Instant digital access</div>
<div class="cyber-deal-float two">License included</div>
<div class="cyber-dashboard">
<div class="cyber-dashboard-top">
<div class="cyber-dashboard-dots">
<span></span>
<span></span>
<span></span>
</div>
<span class="cyber-dashboard-badge">Live deal</span>
</div>
<div class="cyber-dashboard-main">
<h3>Cyber deal dashboard</h3>
<div class="cyber-dashboard-stats">
<div class="cyber-dashboard-stat">
<strong>60%</strong>
<span>Limited digital discount</span>
</div>
<div class="cyber-dashboard-stat">
<strong>24h</strong>
<span>Offer window remaining</span>
</div>
<div class="cyber-dashboard-chart">
<div class="cyber-dashboard-chart-head">
<strong>Deal activity</strong>
<span>+48%</span>
</div>
<div class="cyber-bars">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.cyber-monday-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#020617;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(2,6,23,.46);
}
.cyber-monday-banner::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px);
background-size:38px 38px;
mask-image:radial-gradient(circle at 50% 50%,black,transparent 78%);
pointer-events:none;
}
.cyber-monday-banner::after{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 16% 20%,rgba(6,182,212,.34),transparent 32%),
radial-gradient(circle at 86% 12%,rgba(168,85,247,.30),transparent 30%),
radial-gradient(circle at 58% 96%,rgba(236,72,153,.18),transparent 34%),
linear-gradient(135deg,#020617,#0f172a);
pointer-events:none;
}
.cyber-monday-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
gap:38px;
align-items:center;
padding:50px;
}
.cyber-monday-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.cyber-monday-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(6,182,212,.14);
border:1px solid rgba(103,232,249,.26);
color:#cffafe;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.cyber-monday-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#22d3ee;
box-shadow:0 0 18px rgba(34,211,238,.80);
}
.cyber-monday-title{
margin:0;
max-width:700px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(42px,6vw,86px);
line-height:.94;
font-weight:950;
letter-spacing:-.09em;
}
.cyber-monday-title span{
display:block;
background:linear-gradient(135deg,#67e8f9,#c084fc,#f0abfc);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
font-size:clamp(58px,9vw,118px);
line-height:.88;
}
.cyber-monday-text{
max-width:620px;
margin:0;
color:#cbd5e1;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.cyber-monday-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.cyber-monday-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:linear-gradient(135deg,#67e8f9,#c084fc);
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(34,211,238,.24);
transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}
.cyber-monday-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 52px rgba(34,211,238,.34);
}
.cyber-monday-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}
.cyber-monday-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.13);
}
.cyber-monday-code{
display:flex;
align-items:center;
gap:12px;
margin-top:8px;
padding:12px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px dashed rgba(103,232,249,.42);
}
.cyber-monday-code span{
color:#94a3b8;
font-size:12px;
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
}
.cyber-monday-code strong{
color:#67e8f9;
font-size:17px;
font-weight:950;
letter-spacing:.10em;
}
.cyber-monday-visual{
position:relative;
min-height:540px;
display:grid;
place-items:center;
}
.cyber-dashboard{
position:relative;
z-index:3;
width:min(100%,460px);
padding:18px;
border-radius:34px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 32px 90px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
}
.cyber-dashboard-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}
.cyber-dashboard-dots{
display:flex;
gap:7px;
}
.cyber-dashboard-dots span{
width:11px;
height:11px;
border-radius:999px;
background:rgba(255,255,255,.20);
}
.cyber-dashboard-dots span:nth-child(1){background:#fb7185;}
.cyber-dashboard-dots span:nth-child(2){background:#facc15;}
.cyber-dashboard-dots span:nth-child(3){background:#22c55e;}
.cyber-dashboard-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(6,182,212,.14);
border:1px solid rgba(103,232,249,.24);
color:#cffafe;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.cyber-dashboard-main{
padding:20px;
border-radius:26px;
background:#ffffff;
}
.cyber-dashboard-main h3{
margin:0 0 14px;
color:#0f172a;
font-size:25px;
line-height:1.1;
font-weight:950;
letter-spacing:-.055em;
}
.cyber-dashboard-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.cyber-dashboard-stat{
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.cyber-dashboard-stat strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:26px;
line-height:1;
font-weight:950;
letter-spacing:-.055em;
}
.cyber-dashboard-stat span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:750;
}
.cyber-dashboard-chart{
grid-column:1 / -1;
padding:16px;
border-radius:22px;
background:#020617;
}
.cyber-dashboard-chart-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
}
.cyber-dashboard-chart-head strong{
color:#ffffff;
font-size:14px;
font-weight:950;
}
.cyber-dashboard-chart-head span{
color:#67e8f9;
font-size:12px;
font-weight:950;
}
.cyber-bars{
display:flex;
align-items:end;
gap:8px;
height:110px;
}
.cyber-bars span{
flex:1;
min-height:22px;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#67e8f9,#c084fc);
box-shadow:0 0 18px rgba(103,232,249,.18);
}
.cyber-bars span:nth-child(1){height:38%;}
.cyber-bars span:nth-child(2){height:58%;}
.cyber-bars span:nth-child(3){height:46%;}
.cyber-bars span:nth-child(4){height:78%;}
.cyber-bars span:nth-child(5){height:68%;}
.cyber-bars span:nth-child(6){height:92%;}
.cyber-deal-float{
position:absolute;
z-index:4;
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 22px 60px rgba(0,0,0,.20);
backdrop-filter:blur(18px);
color:#ffffff;
font-size:12px;
font-weight:900;
}
.cyber-deal-float::before{
content:"";
width:11px;
height:11px;
border-radius:999px;
background:#67e8f9;
box-shadow:0 0 18px rgba(103,232,249,.80);
}
.cyber-deal-float.one{
left:0;
top:78px;
}
.cyber-deal-float.two{
right:0;
bottom:88px;
}
@media (max-width:980px){
.cyber-monday-inner{
grid-template-columns:1fr;
}
.cyber-monday-visual{
max-width:660px;
}
}
@media (max-width:700px){
.cyber-monday-banner{
border-radius:28px;
}
.cyber-monday-inner{
padding:30px;
}
.cyber-monday-title{
font-size:44px;
}
.cyber-monday-title span{
font-size:68px;
}
.cyber-monday-text{
font-size:16px;
}
.cyber-monday-actions{
width:100%;
}
.cyber-monday-button,
.cyber-monday-link{
width:100%;
}
.cyber-monday-code{
align-items:flex-start;
flex-direction:column;
}
.cyber-monday-visual{
min-height:auto;
display:block;
}
.cyber-dashboard{
width:100%;
padding:14px;
border-radius:26px;
}
.cyber-dashboard-stats{
grid-template-columns:1fr;
}
.cyber-dashboard-chart{
grid-column:auto;
}
.cyber-deal-float{
position:relative;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100%;
margin-top:14px;
}
}
This Cyber Monday banner works especially well for digital campaigns where the offer should feel modern, fast, and technology-focused. The neon grid, dashboard-style visual, and digital deal messaging make it more suitable for SaaS, software, templates, and online products than a traditional retail sale section.
26. Membership Offer Banner
A membership offer banner is useful for subscription websites, online communities, learning platforms, premium content sites, clubs, fitness programs, SaaS memberships, and paid resource libraries. It should make the recurring value feel clear, trustworthy, and worth joining.
The example below uses a premium membership layout with a pricing card, benefit list, member stats, tier comparison, and a strong join CTA. It is different from a generic pricing banner because the design focuses on belonging, access, and long-term value.
- Professional membership banner for communities, courses, and subscriptions
- Includes price card, benefits, member proof, tier comparison, and CTA button
- Good for paid communities, learning platforms, fitness plans, and premium content
- Uses a membership-focused layout instead of a normal sale banner
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="membership-offer-banner">
<div class="membership-offer-inner">
<div class="membership-offer-content">
<div class="membership-offer-kicker">Premium Membership</div>
<h3 class="membership-offer-title">Invite visitors into a <span>high-value membership</span></h3>
<p class="membership-offer-text">Use this banner for paid communities, online learning platforms, resource libraries, fitness programs, clubs, and subscription-based products.</p>
<ul class="membership-offer-benefits">
<li>Exclusive content and member-only resources</li>
<li>Monthly updates, templates, guides, or lessons</li>
<li>Community access and priority support options</li>
</ul>
<div class="membership-offer-actions">
<a class="membership-offer-button" href="#">Join Membership</a>
<a class="membership-offer-link" href="#">Compare Benefits</a>
</div>
</div>
<div class="membership-offer-visual">
<div class="membership-member-proof">
<strong>8,400+</strong>
<span>Active members using the premium library.</span>
</div>
<div class="membership-price-card">
<div class="membership-price-top">
<div class="membership-price-name">
<strong>Pro Membership</strong>
<span>Everything you need to grow faster</span>
</div>
<span class="membership-price-badge">Best value</span>
</div>
<div class="membership-price">
<strong>$19</strong>
<span>/ month</span>
</div>
<ul class="membership-tier-list">
<li><span>Premium resources</span><strong>Included</strong></li>
<li><span>Monthly updates</span><strong>Included</strong></li>
<li><span>Community access</span><strong>Included</strong></li>
<li><span>Priority support</span><strong>Pro</strong></li>
</ul>
<a class="membership-card-button" href="#">Start Membership</a>
</div>
<div class="membership-access-pill">Member-only access</div>
</div>
</div>
</section>
CSS
.membership-offer-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}
.membership-offer-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 10% 12%,rgba(16,185,129,.13),transparent 30%),
radial-gradient(circle at 92% 16%,rgba(245,158,11,.15),transparent 32%),
linear-gradient(135deg,#ffffff,#f8fafc);
pointer-events:none;
}
.membership-offer-banner::after{
content:"";
position:absolute;
right:-18%;
top:-20%;
width:60%;
height:142%;
border-radius:90px;
background:linear-gradient(135deg,#059669,#f59e0b);
transform:rotate(-9deg);
pointer-events:none;
}
.membership-offer-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.96fr) minmax(360px,1.04fr);
gap:42px;
align-items:center;
padding:52px;
}
.membership-offer-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.membership-offer-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#d1fae5;
border:1px solid rgba(16,185,129,.22);
color:#047857;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.membership-offer-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#10b981;
box-shadow:0 0 0 5px rgba(16,185,129,.14);
}
.membership-offer-title{
margin:0;
max-width:710px;
color:#0f172a;
font-size:clamp(40px,5.8vw,76px);
line-height:.99;
font-weight:950;
letter-spacing:-.085em;
}
.membership-offer-title span{
background:linear-gradient(135deg,#059669,#f59e0b);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.membership-offer-text{
max-width:620px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.membership-offer-benefits{
display:grid;
gap:10px;
margin:4px 0 0;
padding:0;
list-style:none;
}
.membership-offer-benefits li{
display:flex;
align-items:center;
gap:10px;
margin:0;
padding:0;
list-style:none;
color:#334155;
font-size:14px;
line-height:1.45;
font-weight:800;
}
.membership-offer-benefits li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
width:23px;
height:23px;
border-radius:999px;
background:#d1fae5;
color:#047857;
font-size:13px;
font-weight:950;
}
.membership-offer-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.membership-offer-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(15,23,42,.20);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.membership-offer-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 22px 50px rgba(15,23,42,.28);
}
.membership-offer-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.membership-offer-link:hover{
transform:translateY(-2px);
border-color:rgba(16,185,129,.34);
color:#047857 !important;
-webkit-text-fill-color:#047857 !important;
}
.membership-offer-visual{
position:relative;
min-height:560px;
display:grid;
place-items:center;
}
.membership-price-card{
position:relative;
z-index:3;
width:min(100%,430px);
padding:24px;
border-radius:36px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.62);
box-shadow:0 32px 90px rgba(15,23,42,.25);
backdrop-filter:blur(18px);
}
.membership-price-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:20px;
}
.membership-price-name{
display:grid;
gap:5px;
}
.membership-price-name strong{
color:#0f172a;
font-size:22px;
line-height:1.1;
font-weight:950;
letter-spacing:-.045em;
}
.membership-price-name span{
color:#64748b;
font-size:13px;
font-weight:750;
}
.membership-price-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#fffbeb;
border:1px solid rgba(245,158,11,.22);
color:#b45309;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
white-space:nowrap;
}
.membership-price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:18px;
}
.membership-price strong{
color:#0f172a;
font-size:54px;
line-height:.9;
font-weight:950;
letter-spacing:-.08em;
}
.membership-price span{
color:#64748b;
font-size:14px;
font-weight:800;
padding-bottom:6px;
}
.membership-tier-list{
display:grid;
gap:10px;
margin:0 0 18px;
padding:0;
list-style:none;
}
.membership-tier-list li{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
list-style:none;
}
.membership-tier-list span{
color:#475569;
font-size:13px;
font-weight:800;
}
.membership-tier-list strong{
color:#0f172a;
font-size:13px;
font-weight:950;
}
.membership-card-button{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
border-radius:999px;
background:linear-gradient(135deg,#059669,#f59e0b);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(16,185,129,.20);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.membership-card-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 50px rgba(16,185,129,.30);
}
.membership-member-proof{
position:absolute;
z-index:4;
left:0;
top:80px;
width:190px;
padding:16px;
border-radius:24px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.64);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
}
.membership-member-proof strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.055em;
}
.membership-member-proof span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:750;
}
.membership-access-pill{
position:absolute;
z-index:4;
right:0;
bottom:92px;
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.64);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
color:#0f172a;
font-size:12px;
font-weight:900;
}
.membership-access-pill::before{
content:"";
width:12px;
height:12px;
border-radius:999px;
background:#10b981;
box-shadow:0 0 0 5px rgba(16,185,129,.14);
}
@media (max-width:980px){
.membership-offer-inner{
grid-template-columns:1fr;
}
.membership-offer-visual{
max-width:660px;
}
}
@media (max-width:700px){
.membership-offer-banner{
border-radius:28px;
}
.membership-offer-banner::after{
right:-48%;
width:95%;
height:55%;
top:auto;
bottom:-20%;
}
.membership-offer-inner{
padding:30px;
}
.membership-offer-title{
font-size:42px;
}
.membership-offer-text{
font-size:16px;
}
.membership-offer-actions{
width:100%;
}
.membership-offer-button,
.membership-offer-link{
width:100%;
}
.membership-offer-visual{
min-height:auto;
display:block;
}
.membership-price-card{
width:100%;
padding:20px;
border-radius:28px;
}
.membership-price-top{
align-items:flex-start;
flex-direction:column;
}
.membership-member-proof,
.membership-access-pill{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
margin-top:14px;
}
}
This membership offer banner works well when the goal is to sell recurring access rather than a one-time product. The pricing card, member proof, benefit list, and access label help visitors understand what they get and why joining is valuable.
27. Limited Stock Banner
A limited stock banner is useful when an ecommerce website wants to highlight low inventory, fast-moving products, limited editions, preorder availability, seasonal stock, or special product drops. The goal is to create urgency without making the section feel cheap or misleading.
The example below uses a premium ecommerce inventory layout with a product showcase, stock meter, size/color selector style chips, delivery proof, and a strong CTA. It is different from a normal sale banner because the message is built around scarcity, product value, and availability.
- Professional limited stock banner for ecommerce campaigns
- Includes stock meter, product preview, delivery details, CTA button, and product options
- Good for product drops, seasonal stock, limited editions, and preorder campaigns
- Uses a product-focused scarcity layout instead of a generic discount message
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="limited-stock-banner">
<div class="limited-stock-inner">
<div class="limited-stock-content">
<div class="limited-stock-kicker">Low Stock Alert</div>
<h3 class="limited-stock-title">Create urgency with a <span>limited stock product banner</span></h3>
<p class="limited-stock-text">Use this banner to promote products that are almost sold out, seasonal items, limited editions, preorders, or fast-moving ecommerce campaigns.</p>
<div class="limited-stock-actions">
<a class="limited-stock-button" href="#">Reserve Product</a>
<a class="limited-stock-link" href="#">View Details</a>
</div>
<div class="limited-stock-proof">
<div class="limited-stock-proof-item">
<strong>Fast delivery</strong>
<span>Ships within 24 hours.</span>
</div>
<div class="limited-stock-proof-item">
<strong>Limited run</strong>
<span>No restock planned.</span>
</div>
<div class="limited-stock-proof-item">
<strong>Secure checkout</strong>
<span>Protected payment flow.</span>
</div>
</div>
</div>
<div class="limited-stock-visual">
<div class="stock-floating-delivery">Ships tomorrow</div>
<div class="stock-product-card">
<div class="stock-product-image">
<span class="stock-product-badge">Limited Edition</span>
<div class="stock-product-object"></div>
</div>
<div class="stock-product-title-row">
<h3>Premium Drop Product</h3>
<div class="stock-product-price">
<strong>$89</strong>
<span>$129</span>
</div>
</div>
<div class="stock-meter">
<div class="stock-meter-top">
<span>Available stock</span>
<strong>7 left</strong>
</div>
<div class="stock-meter-track">
<span></span>
</div>
</div>
<div class="stock-options">
<span>S</span>
<span class="active">M</span>
<span>L</span>
<span>XL</span>
</div>
</div>
<div class="stock-floating-alert">
<strong>Only 7 left</strong>
<span>Use scarcity messaging when the stock level is real and useful for shoppers.</span>
</div>
</div>
</div>
</section>
CSS
.limited-stock-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}
.limited-stock-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 10% 12%,rgba(249,115,22,.13),transparent 30%),
radial-gradient(circle at 92% 16%,rgba(15,23,42,.08),transparent 32%),
linear-gradient(135deg,#ffffff,#f8fafc);
pointer-events:none;
}
.limited-stock-banner::after{
content:"";
position:absolute;
right:-18%;
top:-20%;
width:60%;
height:142%;
border-radius:90px;
background:linear-gradient(135deg,#ea580c,#111827);
transform:rotate(-9deg);
pointer-events:none;
}
.limited-stock-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
gap:42px;
align-items:center;
padding:52px;
}
.limited-stock-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.limited-stock-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
border:1px solid rgba(249,115,22,.22);
color:#c2410c;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.limited-stock-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#f97316;
box-shadow:0 0 0 5px rgba(249,115,22,.14);
}
.limited-stock-title{
margin:0;
max-width:720px;
color:#0f172a;
font-size:clamp(40px,5.8vw,76px);
line-height:.99;
font-weight:950;
letter-spacing:-.085em;
}
.limited-stock-title span{
background:linear-gradient(135deg,#ea580c,#111827);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.limited-stock-text{
max-width:620px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.limited-stock-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.limited-stock-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(15,23,42,.20);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.limited-stock-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 22px 50px rgba(15,23,42,.28);
}
.limited-stock-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.limited-stock-link:hover{
transform:translateY(-2px);
border-color:rgba(249,115,22,.34);
color:#c2410c !important;
-webkit-text-fill-color:#c2410c !important;
}
.limited-stock-proof{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:min(100%,620px);
margin-top:8px;
}
.limited-stock-proof-item{
padding:14px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.limited-stock-proof-item strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:13px;
font-weight:950;
}
.limited-stock-proof-item span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:750;
}
.limited-stock-visual{
position:relative;
min-height:560px;
display:grid;
place-items:center;
}
.stock-product-card{
position:relative;
z-index:3;
width:min(100%,430px);
padding:22px;
border-radius:36px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.62);
box-shadow:0 32px 90px rgba(15,23,42,.25);
backdrop-filter:blur(18px);
}
.stock-product-image{
position:relative;
height:250px;
display:grid;
place-items:center;
overflow:hidden;
border-radius:28px;
background:
radial-gradient(circle at 50% 30%,rgba(249,115,22,.20),transparent 34%),
linear-gradient(135deg,#111827,#334155);
margin-bottom:18px;
}
.stock-product-object{
position:relative;
width:150px;
height:170px;
border-radius:38px;
background:
radial-gradient(circle at 30% 18%,rgba(255,255,255,.36),transparent 24%),
linear-gradient(135deg,#f97316,#facc15);
box-shadow:0 28px 70px rgba(249,115,22,.32);
transform:rotate(-8deg);
}
.stock-product-object::before{
content:"";
position:absolute;
left:24px;
right:24px;
top:34px;
height:16px;
border-radius:999px;
background:rgba(255,255,255,.36);
}
.stock-product-object::after{
content:"";
position:absolute;
left:34px;
right:34px;
bottom:34px;
height:46px;
border-radius:18px;
background:rgba(15,23,42,.18);
}
.stock-product-badge{
position:absolute;
left:18px;
top:18px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
backdrop-filter:blur(12px);
}
.stock-product-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:14px;
}
.stock-product-title-row h3{
margin:0;
color:#0f172a;
font-size:24px;
line-height:1.12;
font-weight:950;
letter-spacing:-.055em;
}
.stock-product-price{
display:grid;
justify-items:end;
gap:3px;
white-space:nowrap;
}
.stock-product-price strong{
color:#0f172a;
font-size:22px;
line-height:1;
font-weight:950;
}
.stock-product-price span{
color:#94a3b8;
font-size:12px;
font-weight:850;
text-decoration:line-through;
}
.stock-meter{
padding:14px;
border-radius:22px;
background:#fff7ed;
border:1px solid rgba(249,115,22,.18);
margin-bottom:14px;
}
.stock-meter-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.stock-meter-top span{
color:#9a3412;
font-size:12px;
font-weight:900;
}
.stock-meter-top strong{
color:#c2410c;
font-size:12px;
font-weight:950;
}
.stock-meter-track{
height:9px;
border-radius:999px;
background:#fed7aa;
overflow:hidden;
}
.stock-meter-track span{
display:block;
width:18%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#ea580c,#facc15);
box-shadow:0 0 18px rgba(249,115,22,.32);
}
.stock-options{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.stock-options span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#334155;
font-size:12px;
font-weight:900;
}
.stock-options span.active{
background:#0f172a;
color:#ffffff;
}
.stock-floating-delivery{
position:absolute;
z-index:4;
right:0;
top:88px;
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.64);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
color:#0f172a;
font-size:12px;
font-weight:900;
}
.stock-floating-delivery::before{
content:"";
width:12px;
height:12px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 5px rgba(34,197,94,.14);
}
.stock-floating-alert{
position:absolute;
z-index:4;
left:0;
bottom:92px;
width:190px;
padding:16px;
border-radius:24px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.64);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
}
.stock-floating-alert strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}
.stock-floating-alert span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:750;
}
@media (max-width:980px){
.limited-stock-inner{
grid-template-columns:1fr;
}
.limited-stock-visual{
max-width:660px;
}
}
@media (max-width:700px){
.limited-stock-banner{
border-radius:28px;
}
.limited-stock-banner::after{
right:-48%;
width:95%;
height:55%;
top:auto;
bottom:-20%;
}
.limited-stock-inner{
padding:30px;
}
.limited-stock-title{
font-size:42px;
}
.limited-stock-text{
font-size:16px;
}
.limited-stock-actions{
width:100%;
}
.limited-stock-button,
.limited-stock-link{
width:100%;
}
.limited-stock-proof{
grid-template-columns:1fr;
}
.limited-stock-visual{
min-height:auto;
display:block;
}
.stock-product-card{
width:100%;
padding:18px;
border-radius:28px;
}
.stock-product-image{
height:210px;
}
.stock-product-title-row{
flex-direction:column;
}
.stock-product-price{
justify-items:start;
}
.stock-floating-delivery,
.stock-floating-alert{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
margin-top:14px;
}
}
This limited stock banner works well when product availability is a real part of the buying decision. The product card, stock meter, floating delivery proof, and low-stock alert create urgency while still keeping the design polished and trustworthy.
28. Course Enrollment Banner
A course enrollment banner is useful for online courses, coaching programs, learning platforms, bootcamps, digital workshops, and educational memberships. It should explain what the learner gets, show credibility, and make the enrollment action feel clear and valuable.
The example below uses a premium learning-focused layout with a course preview card, module timeline, instructor proof, enrollment CTA, and student outcome cards. It is different from a normal webinar banner because it promotes a structured learning product rather than a single live session.
- Professional course enrollment banner for online education and coaching
- Includes course preview, module timeline, instructor proof, outcome cards, and CTA buttons
- Good for courses, bootcamps, coaching programs, workshops, and learning platforms
- Uses an education-focused layout instead of a generic CTA section
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="course-enrollment-banner">
<div class="course-enrollment-inner">
<div class="course-enrollment-content">
<div class="course-enrollment-kicker">Online Course</div>
<h3 class="course-enrollment-title">Promote a learning product with a <span>course enrollment banner</span></h3>
<p class="course-enrollment-text">Use this banner for online courses, bootcamps, coaching programs, digital workshops, and education platforms that need a strong enrollment section.</p>
<div class="course-enrollment-actions">
<a class="course-enrollment-button" href="#">Enroll Today</a>
<a class="course-enrollment-link" href="#">View Curriculum</a>
</div>
<div class="course-outcomes">
<div class="course-outcome-card">
<strong>12 lessons</strong>
<span>Structured learning path.</span>
</div>
<div class="course-outcome-card">
<strong>4 projects</strong>
<span>Practical portfolio work.</span>
</div>
<div class="course-outcome-card">
<strong>Lifetime access</strong>
<span>Learn at your own pace.</span>
</div>
</div>
</div>
<div class="course-enrollment-visual">
<div class="course-instructor-proof">
<div class="course-instructor-top">
<div class="course-instructor-avatar">C</div>
<div>
<strong>Course Instructor</strong>
<span>8+ years experience</span>
</div>
</div>
<p>Use instructor proof to make the course offer feel more credible and human.</p>
</div>
<div class="course-preview-card">
<div class="course-preview-video">
<span class="course-preview-label">Course Preview</span>
<div class="course-preview-play"></div>
</div>
<h3>Modern Website Banners</h3>
<p>A focused course module preview with lessons, projects, and reusable design patterns.</p>
<div class="course-module-list">
<div class="course-module">
<span class="course-module-number">01</span>
<span>Banner strategy</span>
<strong>24 min</strong>
</div>
<div class="course-module">
<span class="course-module-number">02</span>
<span>Responsive layout systems</span>
<strong>41 min</strong>
</div>
<div class="course-module">
<span class="course-module-number">03</span>
<span>Conversion-focused CTAs</span>
<strong>36 min</strong>
</div>
</div>
</div>
<div class="course-student-pill">2,800 students enrolled</div>
</div>
</div>
</section>
CSS
.course-enrollment-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}
.course-enrollment-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 10% 12%,rgba(79,70,229,.12),transparent 30%),
radial-gradient(circle at 92% 16%,rgba(245,158,11,.15),transparent 32%),
linear-gradient(135deg,#ffffff,#f8fafc);
pointer-events:none;
}
.course-enrollment-banner::after{
content:"";
position:absolute;
right:-18%;
top:-20%;
width:60%;
height:142%;
border-radius:90px;
background:linear-gradient(135deg,#4f46e5,#f59e0b);
transform:rotate(-9deg);
pointer-events:none;
}
.course-enrollment-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.96fr) minmax(360px,1.04fr);
gap:42px;
align-items:center;
padding:52px;
}
.course-enrollment-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.course-enrollment-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#eef2ff;
border:1px solid rgba(79,70,229,.20);
color:#4338ca;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.course-enrollment-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#4f46e5;
box-shadow:0 0 0 5px rgba(79,70,229,.14);
}
.course-enrollment-title{
margin:0;
max-width:720px;
color:#0f172a;
font-size:clamp(40px,5.8vw,76px);
line-height:.99;
font-weight:950;
letter-spacing:-.085em;
}
.course-enrollment-title span{
background:linear-gradient(135deg,#4f46e5,#f59e0b);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.course-enrollment-text{
max-width:620px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.course-enrollment-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.course-enrollment-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(15,23,42,.20);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.course-enrollment-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 22px 50px rgba(15,23,42,.28);
}
.course-enrollment-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.course-enrollment-link:hover{
transform:translateY(-2px);
border-color:rgba(79,70,229,.34);
color:#4338ca !important;
-webkit-text-fill-color:#4338ca !important;
}
.course-outcomes{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:min(100%,620px);
margin-top:8px;
}
.course-outcome-card{
padding:14px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.course-outcome-card strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:13px;
font-weight:950;
}
.course-outcome-card span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:750;
}
.course-enrollment-visual{
position:relative;
min-height:580px;
display:grid;
place-items:center;
}
.course-preview-card{
position:relative;
z-index:3;
width:min(100%,430px);
padding:22px;
border-radius:36px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.62);
box-shadow:0 32px 90px rgba(15,23,42,.25);
backdrop-filter:blur(18px);
}
.course-preview-video{
position:relative;
height:220px;
display:grid;
place-items:center;
overflow:hidden;
border-radius:28px;
background:
radial-gradient(circle at 50% 20%,rgba(245,158,11,.28),transparent 34%),
linear-gradient(135deg,#1e1b4b,#4f46e5);
margin-bottom:18px;
}
.course-preview-play{
display:grid;
place-items:center;
width:72px;
height:72px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 20px 50px rgba(0,0,0,.20);
backdrop-filter:blur(14px);
color:#ffffff;
font-size:24px;
font-weight:950;
}
.course-preview-play::before{
content:"▶";
transform:translateX(2px);
}
.course-preview-label{
position:absolute;
left:18px;
top:18px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
backdrop-filter:blur(12px);
}
.course-preview-card h3{
margin:0 0 10px;
color:#0f172a;
font-size:25px;
line-height:1.12;
font-weight:950;
letter-spacing:-.055em;
}
.course-preview-card p{
margin:0 0 16px;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}
.course-module-list{
display:grid;
gap:10px;
}
.course-module{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:10px;
align-items:center;
padding:12px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.course-module-number{
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:12px;
background:#eef2ff;
color:#4338ca;
font-size:12px;
font-weight:950;
}
.course-module span{
color:#475569;
font-size:13px;
font-weight:800;
}
.course-module strong{
color:#0f172a;
font-size:12px;
font-weight:950;
}
.course-instructor-proof{
position:absolute;
z-index:4;
left:0;
top:86px;
width:210px;
padding:16px;
border-radius:24px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.64);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
}
.course-instructor-top{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}
.course-instructor-avatar{
display:grid;
place-items:center;
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#4f46e5,#f59e0b);
color:#ffffff;
font-size:16px;
font-weight:950;
}
.course-instructor-top strong{
display:block;
color:#0f172a;
font-size:14px;
font-weight:950;
}
.course-instructor-top span{
display:block;
margin-top:2px;
color:#64748b;
font-size:11px;
font-weight:750;
}
.course-instructor-proof p{
margin:0;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:700;
}
.course-student-pill{
position:absolute;
z-index:4;
right:0;
bottom:96px;
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.64);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
color:#0f172a;
font-size:12px;
font-weight:900;
}
.course-student-pill::before{
content:"";
width:12px;
height:12px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 5px rgba(34,197,94,.14);
}
@media (max-width:980px){
.course-enrollment-inner{
grid-template-columns:1fr;
}
.course-enrollment-visual{
max-width:660px;
}
}
@media (max-width:700px){
.course-enrollment-banner{
border-radius:28px;
}
.course-enrollment-banner::after{
right:-48%;
width:95%;
height:55%;
top:auto;
bottom:-20%;
}
.course-enrollment-inner{
padding:30px;
}
.course-enrollment-title{
font-size:42px;
}
.course-enrollment-text{
font-size:16px;
}
.course-enrollment-actions{
width:100%;
}
.course-enrollment-button,
.course-enrollment-link{
width:100%;
}
.course-outcomes{
grid-template-columns:1fr;
}
.course-enrollment-visual{
min-height:auto;
display:block;
}
.course-preview-card{
width:100%;
padding:18px;
border-radius:28px;
}
.course-preview-video{
height:190px;
}
.course-module{
grid-template-columns:auto minmax(0,1fr);
}
.course-module strong{
grid-column:2;
}
.course-instructor-proof,
.course-student-pill{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
margin-top:14px;
}
}
This course enrollment banner is useful when the conversion goal is educational commitment instead of a quick purchase. The preview card, module list, instructor proof, and student count help visitors understand the course value before they click the enrollment button.
29. Service Business Banner
A service business banner is useful for agencies, consultants, local businesses, contractors, web design studios, marketing teams, repair services, legal services, financial advisors, and B2B service providers. It should explain the service value quickly and make it easy for visitors to request a quote, book a call, or contact the business.
The example below uses a professional service-focused layout with a trust panel, consultation card, service highlights, project proof, and clear CTA buttons. It is different from ecommerce or product banners because the conversion goal is a lead or consultation request, not a direct product purchase.
- Professional service business banner for agencies and local service websites
- Includes consultation CTA, service highlights, trust proof, and project metrics
- Good for web design agencies, contractors, consultants, and B2B service providers
- Uses a lead-generation layout instead of a product sales layout
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="service-business-banner">
<div class="service-business-inner">
<div class="service-business-content">
<div class="service-business-kicker">Service Business</div>
<h3 class="service-business-title">Generate more leads with a <span>service-focused banner</span></h3>
<p class="service-business-text">Use this banner for agencies, consultants, contractors, local businesses, and B2B service providers that want visitors to request a quote or book a consultation.</p>
<div class="service-business-actions">
<a class="service-business-button" href="#">Book Consultation</a>
<a class="service-business-link" href="#">View Services</a>
</div>
<div class="service-business-highlights">
<div class="service-business-highlight">
<strong>Clear offer</strong>
<span>Explain your service value fast.</span>
</div>
<div class="service-business-highlight">
<strong>Trust proof</strong>
<span>Show results and experience.</span>
</div>
<div class="service-business-highlight">
<strong>Lead focused</strong>
<span>Guide visitors to contact you.</span>
</div>
</div>
</div>
<div class="service-business-visual">
<div class="service-proof-card">
<strong>240+</strong>
<span>Projects completed for clients across multiple service categories.</span>
</div>
<div class="service-consult-card">
<div class="service-consult-top">
<div class="service-consult-icon">✓</div>
<span class="service-consult-badge">Available</span>
</div>
<h3>Free project consultation</h3>
<p>Use a consultation card to make the next step feel specific, low-risk, and valuable for potential clients.</p>
<ul class="service-checklist">
<li><span>Project review</span><strong>Included</strong></li>
<li><span>Timeline estimate</span><strong>Included</strong></li>
<li><span>Quote discussion</span><strong>Included</strong></li>
</ul>
<a class="service-consult-button" href="#">Request a Quote</a>
</div>
<div class="service-availability-pill">2 consultation slots open</div>
</div>
</div>
</section>
CSS
.service-business-banner{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}
.service-business-banner::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 10% 12%,rgba(14,165,233,.12),transparent 30%),
radial-gradient(circle at 92% 16%,rgba(34,197,94,.14),transparent 32%),
linear-gradient(135deg,#ffffff,#f8fafc);
pointer-events:none;
}
.service-business-banner::after{
content:"";
position:absolute;
right:-20%;
top:-22%;
width:62%;
height:146%;
border-radius:90px;
background:linear-gradient(135deg,#0284c7,#22c55e);
transform:rotate(-9deg);
pointer-events:none;
}
.service-business-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.96fr) minmax(360px,1.04fr);
gap:42px;
align-items:center;
padding:52px;
}
.service-business-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.service-business-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
border:1px solid rgba(14,165,233,.20);
color:#0369a1;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.service-business-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#0ea5e9;
box-shadow:0 0 0 5px rgba(14,165,233,.14);
}
.service-business-title{
margin:0;
max-width:730px;
color:#0f172a;
font-size:clamp(40px,5.8vw,76px);
line-height:.99;
font-weight:950;
letter-spacing:-.085em;
}
.service-business-title span{
background:linear-gradient(135deg,#0284c7,#16a34a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.service-business-text{
max-width:620px;
margin:0;
color:#475569;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.service-business-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.service-business-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 21px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(15,23,42,.20);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.service-business-button:hover{
transform:translateY(-2px);
background:#000000;
box-shadow:0 22px 50px rgba(15,23,42,.28);
}
.service-business-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:15px 19px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,border-color .22s ease,color .22s ease;
}
.service-business-link:hover{
transform:translateY(-2px);
border-color:rgba(14,165,233,.34);
color:#0369a1 !important;
-webkit-text-fill-color:#0369a1 !important;
}
.service-business-highlights{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:min(100%,640px);
margin-top:8px;
}
.service-business-highlight{
padding:14px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.service-business-highlight strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:13px;
font-weight:950;
}
.service-business-highlight span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:750;
}
.service-business-visual{
position:relative;
min-height:580px;
display:grid;
place-items:center;
}
.service-consult-card{
position:relative;
z-index:3;
width:min(100%,430px);
padding:24px;
border-radius:36px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.62);
box-shadow:0 32px 90px rgba(15,23,42,.25);
backdrop-filter:blur(18px);
}
.service-consult-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}
.service-consult-icon{
display:grid;
place-items:center;
width:62px;
height:62px;
border-radius:22px;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.42),transparent 28%),
linear-gradient(135deg,#0284c7,#22c55e);
color:#ffffff;
font-size:24px;
font-weight:950;
box-shadow:0 18px 40px rgba(14,165,233,.20);
}
.service-consult-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#dcfce7;
border:1px solid rgba(34,197,94,.22);
color:#15803d;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
white-space:nowrap;
}
.service-consult-card h3{
margin:0 0 10px;
color:#0f172a;
font-size:26px;
line-height:1.12;
font-weight:950;
letter-spacing:-.055em;
}
.service-consult-card p{
margin:0 0 18px;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}
.service-checklist{
display:grid;
gap:10px;
margin:0 0 18px;
padding:0;
list-style:none;
}
.service-checklist li{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
list-style:none;
}
.service-checklist span{
color:#475569;
font-size:13px;
font-weight:800;
}
.service-checklist strong{
color:#0f172a;
font-size:13px;
font-weight:950;
}
.service-consult-button{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
border-radius:999px;
background:linear-gradient(135deg,#0284c7,#22c55e);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(14,165,233,.20);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.service-consult-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 50px rgba(14,165,233,.30);
}
.service-proof-card{
position:absolute;
z-index:4;
left:0;
top:82px;
width:195px;
padding:16px;
border-radius:24px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.64);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
}
.service-proof-card strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.055em;
}
.service-proof-card span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:750;
}
.service-availability-pill{
position:absolute;
z-index:4;
right:0;
bottom:96px;
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.94);
border:1px solid rgba(255,255,255,.64);
box-shadow:0 22px 60px rgba(15,23,42,.18);
backdrop-filter:blur(18px);
color:#0f172a;
font-size:12px;
font-weight:900;
}
.service-availability-pill::before{
content:"";
width:12px;
height:12px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 5px rgba(34,197,94,.14);
}
@media (max-width:980px){
.service-business-inner{
grid-template-columns:1fr;
}
.service-business-visual{
max-width:660px;
}
}
@media (max-width:700px){
.service-business-banner{
border-radius:28px;
}
.service-business-banner::after{
right:-48%;
width:95%;
height:55%;
top:auto;
bottom:-20%;
}
.service-business-inner{
padding:30px;
}
.service-business-title{
font-size:42px;
}
.service-business-text{
font-size:16px;
}
.service-business-actions{
width:100%;
}
.service-business-button,
.service-business-link{
width:100%;
}
.service-business-highlights{
grid-template-columns:1fr;
}
.service-business-visual{
min-height:auto;
display:block;
}
.service-consult-card{
width:100%;
padding:20px;
border-radius:28px;
}
.service-consult-top{
align-items:flex-start;
flex-direction:column;
}
.service-proof-card,
.service-availability-pill{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
margin-top:14px;
}
}
This service business banner works well when the goal is to turn visitors into leads. The consultation card, service checklist, proof metric, and availability label make the next step feel specific and trustworthy instead of generic.
30. Complete Responsive Banner Section
A complete responsive banner section combines the most useful banner elements into one polished layout: headline, short value proposition, primary CTA, secondary CTA, trust badges, visual panel, metrics, feature cards, and mobile-friendly spacing. This type of banner can work as a hero section, landing page campaign block, product promo area, or homepage conversion section.
The example below is built as a complete all-in-one banner layout with a premium dark visual panel, layered background, content blocks, CTA buttons, and conversion proof. It is the most flexible example in this guide because it can be adapted for SaaS, ecommerce, agencies, apps, courses, and service websites.
- Complete responsive banner section with all core conversion elements
- Includes headline, CTA buttons, proof chips, feature cards, visual dashboard, and metrics
- Good for SaaS, ecommerce, agencies, courses, apps, and service businesses
- Uses a flexible landing page structure that can be adapted to many websites
- Responsive HTML and CSS with no JavaScript required
HTML
<section class="complete-responsive-banner">
<div class="complete-responsive-inner">
<div class="complete-responsive-content">
<div class="complete-responsive-kicker">Complete Banner</div>
<h3 class="complete-responsive-title">Build a complete responsive banner with <span>CTA, proof, and visual depth</span></h3>
<p class="complete-responsive-text">Use this all-in-one banner layout for SaaS pages, ecommerce campaigns, agencies, courses, apps, service websites, and landing pages that need a strong conversion section.</p>
<div class="complete-responsive-actions">
<a class="complete-responsive-button" href="#">Start Building</a>
<a class="complete-responsive-link" href="#">View Examples</a>
</div>
<div class="complete-responsive-proof">
<span>Responsive CSS</span>
<span>Conversion focused</span>
<span>No JavaScript required</span>
</div>
<div class="complete-responsive-features">
<div class="complete-responsive-feature">
<strong>Clear headline</strong>
<span>Explain the value quickly.</span>
</div>
<div class="complete-responsive-feature">
<strong>Strong CTA</strong>
<span>Guide visitors to the next step.</span>
</div>
<div class="complete-responsive-feature">
<strong>Visual proof</strong>
<span>Add metrics, cards, or UI previews.</span>
</div>
</div>
</div>
<div class="complete-responsive-visual">
<div class="complete-floating-card one">Campaign ready</div>
<div class="complete-floating-card two">Mobile friendly</div>
<div class="complete-dashboard">
<div class="complete-dashboard-top">
<div class="complete-dashboard-dots">
<span></span>
<span></span>
<span></span>
</div>
<span class="complete-dashboard-status">Live</span>
</div>
<div class="complete-dashboard-body">
<div class="complete-dashboard-header">
<h3>Responsive campaign dashboard</h3>
<span>Preview</span>
</div>
<div class="complete-dashboard-grid">
<div class="complete-dashboard-stat">
<strong>3.2x</strong>
<span>More visible conversion section</span>
</div>
<div class="complete-dashboard-stat">
<strong>100%</strong>
<span>Responsive layout structure</span>
</div>
<div class="complete-dashboard-chart">
<div class="complete-chart-head">
<strong>Engagement growth</strong>
<span>+64%</span>
</div>
<div class="complete-chart-bars">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.complete-responsive-banner{
position:relative;
width:min(100%,1140px);
overflow:hidden;
border-radius:44px;
background:#020617;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 36px 110px rgba(2,6,23,.42);
}
.complete-responsive-banner::before{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 16% 18%,rgba(99,102,241,.34),transparent 30%),
radial-gradient(circle at 84% 12%,rgba(14,165,233,.28),transparent 30%),
radial-gradient(circle at 60% 96%,rgba(34,197,94,.18),transparent 34%),
linear-gradient(135deg,#020617,#0f172a);
pointer-events:none;
}
.complete-responsive-banner::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:38px 38px;
mask-image:radial-gradient(circle at 50% 50%,black,transparent 78%);
pointer-events:none;
}
.complete-responsive-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.98fr) minmax(380px,1.02fr);
gap:42px;
align-items:center;
padding:54px;
}
.complete-responsive-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.complete-responsive-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(99,102,241,.16);
border:1px solid rgba(129,140,248,.26);
color:#c7d2fe;
font-size:13px;
font-weight:950;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.complete-responsive-kicker::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#818cf8;
box-shadow:0 0 0 5px rgba(129,140,248,.16);
}
.complete-responsive-title{
margin:0;
max-width:740px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(42px,6vw,84px);
line-height:.96;
font-weight:950;
letter-spacing:-.09em;
}
.complete-responsive-title span{
background:linear-gradient(135deg,#a5b4fc,#67e8f9,#86efac);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.complete-responsive-text{
max-width:640px;
margin:0;
color:#cbd5e1;
font-size:17px;
line-height:1.75;
font-weight:600;
}
.complete-responsive-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.complete-responsive-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:16px 22px;
border-radius:999px;
background:linear-gradient(135deg,#818cf8,#22d3ee,#22c55e);
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(99,102,241,.24);
transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}
.complete-responsive-button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
box-shadow:0 22px 52px rgba(99,102,241,.34);
}
.complete-responsive-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:16px 20px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}
.complete-responsive-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.13);
}
.complete-responsive-proof{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:8px;
}
.complete-responsive-proof span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e5e7eb;
font-size:12px;
font-weight:850;
}
.complete-responsive-features{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:min(100%,680px);
margin-top:10px;
}
.complete-responsive-feature{
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.11);
}
.complete-responsive-feature strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:13px;
font-weight:950;
}
.complete-responsive-feature span{
display:block;
color:#94a3b8;
font-size:12px;
line-height:1.45;
font-weight:750;
}
.complete-responsive-visual{
position:relative;
min-height:590px;
display:grid;
place-items:center;
}
.complete-dashboard{
position:relative;
z-index:3;
width:min(100%,470px);
padding:18px;
border-radius:36px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 32px 90px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
}
.complete-dashboard-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}
.complete-dashboard-dots{
display:flex;
gap:7px;
}
.complete-dashboard-dots span{
width:11px;
height:11px;
border-radius:999px;
background:rgba(255,255,255,.20);
}
.complete-dashboard-dots span:nth-child(1){background:#fb7185;}
.complete-dashboard-dots span:nth-child(2){background:#facc15;}
.complete-dashboard-dots span:nth-child(3){background:#22c55e;}
.complete-dashboard-status{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 10px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.24);
color:#bbf7d0;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}
.complete-dashboard-status::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 16px rgba(34,197,94,.70);
}
.complete-dashboard-body{
padding:20px;
border-radius:28px;
background:#ffffff;
}
.complete-dashboard-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:16px;
}
.complete-dashboard-header h3{
margin:0;
color:#0f172a;
font-size:25px;
line-height:1.1;
font-weight:950;
letter-spacing:-.055em;
}
.complete-dashboard-header span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
white-space:nowrap;
}
.complete-dashboard-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.complete-dashboard-stat{
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}
.complete-dashboard-stat strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.055em;
}
.complete-dashboard-stat span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:750;
}
.complete-dashboard-chart{
grid-column:1 / -1;
padding:16px;
border-radius:22px;
background:#020617;
}
.complete-chart-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
}
.complete-chart-head strong{
color:#ffffff;
font-size:14px;
font-weight:950;
}
.complete-chart-head span{
color:#67e8f9;
font-size:12px;
font-weight:950;
}
.complete-chart-bars{
display:flex;
align-items:end;
gap:8px;
height:112px;
}
.complete-chart-bars span{
flex:1;
min-height:22px;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#818cf8,#22d3ee,#22c55e);
box-shadow:0 0 18px rgba(34,211,238,.18);
}
.complete-chart-bars span:nth-child(1){height:38%;}
.complete-chart-bars span:nth-child(2){height:54%;}
.complete-chart-bars span:nth-child(3){height:44%;}
.complete-chart-bars span:nth-child(4){height:78%;}
.complete-chart-bars span:nth-child(5){height:66%;}
.complete-chart-bars span:nth-child(6){height:92%;}
.complete-chart-bars span:nth-child(7){height:74%;}
.complete-floating-card{
position:absolute;
z-index:4;
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 22px 60px rgba(0,0,0,.20);
backdrop-filter:blur(18px);
color:#ffffff;
font-size:12px;
font-weight:900;
}
.complete-floating-card::before{
content:"";
width:11px;
height:11px;
border-radius:999px;
background:#67e8f9;
box-shadow:0 0 18px rgba(103,232,249,.80);
}
.complete-floating-card.one{
left:0;
top:84px;
}
.complete-floating-card.two{
right:0;
bottom:94px;
}
@media (max-width:980px){
.complete-responsive-inner{
grid-template-columns:1fr;
}
.complete-responsive-visual{
max-width:680px;
}
}
@media (max-width:700px){
.complete-responsive-banner{
border-radius:28px;
}
.complete-responsive-inner{
padding:30px;
}
.complete-responsive-title{
font-size:42px;
}
.complete-responsive-text{
font-size:16px;
}
.complete-responsive-actions{
width:100%;
}
.complete-responsive-button,
.complete-responsive-link{
width:100%;
}
.complete-responsive-features{
grid-template-columns:1fr;
}
.complete-responsive-visual{
min-height:auto;
display:block;
}
.complete-dashboard{
width:100%;
padding:14px;
border-radius:28px;
}
.complete-dashboard-header{
align-items:flex-start;
flex-direction:column;
}
.complete-dashboard-grid{
grid-template-columns:1fr;
}
.complete-dashboard-chart{
grid-column:auto;
}
.complete-floating-card{
position:relative;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100%;
margin-top:14px;
}
}
This complete responsive banner section is a flexible final pattern for many types of websites. It combines the essentials of a strong modern banner: clear message, visual contrast, CTA hierarchy, trust indicators, supporting features, and a responsive structure that works from desktop to mobile.
CSS Banner Best Practices
A good CSS banner should do more than look attractive. It should make one message easier to notice, understand, and act on. The strongest website banners are focused, readable, responsive, and connected to a clear goal such as clicking a button, using a coupon code, joining a newsletter, registering for an event, downloading an app, or visiting a product page.
Before choosing a banner layout, decide what the banner needs to achieve. A small announcement bar may only need one sentence and a link. A promo banner may need a headline, offer, CTA button, and visual detail. A product launch banner may need a stronger layout with a preview card, countdown, or feature list. A service business banner may need trust proof and a consultation CTA.
Banner placement is just as important as banner design. A free shipping bar works well above the header or cart area. A newsletter banner works well after useful content or before the footer. A product launch banner can sit near the top of a landing page. A pricing or offer banner can appear near modern CSS pricing tables. A lead-generation banner can work well before or after modern CSS forms.
Use the banner to support the page, not fight with it. If a page already has a strong hero section, the banner should not repeat the same message. If the page has multiple CTAs, the banner should make the next step clearer, not add another unrelated action.
Responsive Banner Design Tips
Responsive banner design matters because banners often contain several elements in a small space: headline, supporting text, label, icon, image, CTA button, coupon code, countdown timer, product card, or dismiss button. A layout that looks clean on desktop can easily become crowded on mobile if it uses fixed widths or too many horizontal elements.
The safest approach is to design the banner as a flexible content system. Use CSS Grid or Flexbox, avoid fixed pixel widths for text areas, let buttons wrap or stack, and reduce visual complexity on smaller screens.
If you use sticky or floating banners, test them carefully on mobile. A sticky banner can block too much screen space if it is too tall. A floating promo card can cover important content if the bottom spacing is not handled properly. For complex mobile interactions, you can combine banner sections with patterns from modern CSS navigation menus, modern CSS accordions, and modern CSS tabs.
Common Banner Design Mistakes
Banner design mistakes usually happen when the banner tries to be too many things at once. A banner should help visitors understand a specific message faster. If the layout is crowded, the colors are too aggressive, or the CTA is unclear, the banner can become visual noise instead of a useful website section.
Another common mistake is making every banner look the same. A free shipping bar, app download banner, Black Friday banner, webinar registration banner, service business banner, and product launch banner should not all use the same structure. The best banner layout matches the purpose of the message.
CSS Banners FAQ
What is a CSS banner?
A CSS banner is a website section, message bar, promotional block, alert area, or call-to-action section styled with HTML and CSS. It can be used for announcements, offers, alerts, product launches, newsletter signup, ecommerce promotions, SaaS trials, app downloads, and service CTAs.
Where should I place a banner on a website?
Banner placement depends on the message. Announcement bars often work above the header. Promo banners work near hero sections, product grids, or pricing sections. Newsletter banners work after useful content or before the footer. Alert banners should appear near the relevant page area. Floating banners should stay visible without covering important content.
How do I make a banner responsive with CSS?
You can make a banner responsive by using CSS Grid or Flexbox, avoiding fixed widths, using max-width and minmax(), adding media queries, stacking columns on smaller screens, making buttons full width when needed, and testing long text, coupon codes, countdown timers, and visual cards on mobile.
What should a modern banner include?
A modern banner should include a clear message, short supporting text, readable typography, strong contrast, and a clear CTA if action is required. Depending on the banner type, it may also include an icon, label, coupon code, countdown, product card, image, trust proof, or dismiss button.
Are website banners good for conversions?
Website banners can support conversions when they are focused, useful, and placed intentionally. A good banner can guide visitors toward offers, product pages, signup forms, quote forms, pricing pages, app downloads, newsletter forms, or event registrations. A crowded or annoying banner can have the opposite effect.
Can I use these CSS banner examples in WordPress?
Yes. These HTML and CSS banner examples can be adapted for WordPress posts, Custom HTML blocks, block themes, custom themes, child themes, template files, or page builders. For production websites, it is usually better to move the CSS into your theme, child theme, customizer, or a dedicated CSS file instead of keeping all styles inline.
Conclusion
Modern CSS banners are useful because they give important messages a clear visual position on the page. They can promote offers, announce updates, highlight product launches, explain service value, show limited-time deals, guide visitors to forms, support ecommerce campaigns, and improve the flow of landing pages.
The best banner layout depends on the goal. A simple announcement bar works well for short updates. A promo banner works well for offers. A newsletter banner helps content websites grow an audience. A product launch banner builds interest around something new. A countdown banner creates time-based urgency. A service business banner supports lead generation. A complete responsive banner section can work as a flexible conversion block for many different website types.
Use the examples in this guide as starting points. Replace the demo text, colors, links, products, coupon codes, images, and CTAs with your own content. Then test each banner on desktop, tablet, and mobile to make sure the message stays clear, the layout stays readable, and the call-to-action is easy to use.
Related CSS Guides
If you are building complete website sections, these related CSS guides can help you create a more consistent design system with matching navigation, hero sections, layouts, forms, buttons, cards, pricing sections, accordions, tabs, and footers.
