Website Sections – Veebilehed24 https://veebilehed24.ee Thu, 28 May 2026 08:34:13 +0000 en hourly 1 https://wordpress.org/?v=7.0.4 https://veebilehed24.ee/wp-content/uploads/2026/03/cropped-ico-32x32.png Website Sections – Veebilehed24 https://veebilehed24.ee 32 32 30 Modern CSS Banners for Websites – Promo, Alert, CTA & Announcement Bar Examples https://veebilehed24.ee/en/blog/css-effects/modern-css-banners/ https://veebilehed24.ee/en/blog/css-effects/modern-css-banners/#respond Wed, 03 Jun 2026 08:33:51 +0000 https://veebilehed24.ee/?p=1482 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.

View All 30 CSS Banner Examples
On this page

Table of Contents

Kinsta hosting

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.

Clear message

Explain the offer, update, alert, announcement, or campaign in a short sentence visitors can understand quickly.

Strong CTA

Add a button, link, coupon code, or action text when the banner is meant to drive clicks or conversions.

Readable layout

Use strong contrast, comfortable spacing, clear typography, and a layout that does not hide the main message.

Responsive design

Make the banner work on desktop, tablet, and mobile screens without broken text, cramped buttons, or overflow.

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
New Campaign

Launch a cleaner website section with one high-converting banner

Use this modern CSS banner to promote an offer, announce a feature, highlight a product, or guide visitors toward one clear action.

Start Building View Examples
No JavaScript Responsive CSS Easy to customize
Limited Offer
30% Off

Build faster landing pages

Create polished promo sections, campaign blocks, and CTA banners with clean HTML and CSS.

  • Modern gradient banner design
  • CTA buttons and trust labels
  • Responsive mobile layout

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
New

Spring campaign is live. Get ready-made banner layouts for landing pages and online stores.

Explore now
×

Build website messages that visitors actually notice

This preview shows how a compact announcement bar can sit above a normal website header without taking over the whole page.

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
Featured Promo

Turn one campaign into a high-visibility offer

Use this promo banner when you need a stronger visual section for special offers, product bundles, downloadable resources, or seasonal campaigns.

Claim Offer See Details
Promo Ticket %

Save 25%

Use this highlighted ticket block to make your offer feel more visible and easier to remember.

Use code LAUNCH25

Valid for new projects, templates, or digital campaign bundles.

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
Seasonal Sale

Save up to 40%

Use this bold ecommerce banner to promote discounts, product collections, seasonal campaigns, or limited-time deals with a strong visual sale message.

Shop the Sale Ends Sunday at midnight
-20%

Starter Bundle

A simple product tile for smaller sale items.

$39 $49
Best Deal

Growth Bundle

Highlight your main campaign product with a taller featured card.

$59 $99
-35%

Pro Bundle

Use this card for premium products or campaign upgrades.

$79 $119

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
🚚
Free Shipping

Free delivery on orders over $75

Add a few more items and unlock free standard shipping on your order.

Shipping threshold $54 / $75
Continue Shopping
Fast dispatch Orders usually ship within 24 hours.
Easy returns Simple returns on eligible items.
Secure checkout Protected payments and order updates.

Reduce purchase hesitation with a clear shipping message

This preview shows how a free shipping banner can sit near an ecommerce header and support product discovery, cart growth, and checkout confidence.

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
Ready to Start

Turn visitors into leads with a focused CTA banner

Use this banner when your page needs one clear next step after a feature section, pricing block, case study, blog post, or product explanation.

Get Started View Plans
No credit card required Fast setup Responsive layout
1 Step One

Choose a goal

Use the banner to point users toward one important action.

2 Step Two

Add a clear CTA

Make the button text specific, visible, and easy to understand.

3 Step Three

Place it wisely

Add the CTA banner where visitors are ready to make a decision.

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

Service notifications

System online
!
Important update Scheduled for tonight

Maintenance window starts at 11:00 PM

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.

Estimated time: 25 minutes No action required Status page available
View Status Learn More
Website uptime Public pages continue working normally.
Dashboard access Reports may refresh more slowly.
Notifications Updates will appear on the status page.

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

A clean bottom notice for privacy messages

This preview shows how a cookie notice style banner can appear near the bottom of a website without completely hiding the page content.

◌
Privacy preferences Read policy

We use cookies to improve your experience

Choose whether to allow analytics and personalization cookies. Essential cookies are always active so the website can work correctly.

Essential Analytics Personalization
Manage Accept All

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
Free Trial

Start your workflow with a 14-day SaaS trial

Use this banner to promote a free trial, product demo, or software signup flow with a clear value message and dashboard-style product preview.

Start Free Trial Book Demo
  • No credit card required
  • Cancel anytime
  • Setup takes less than five minutes
Live Preview
2.4x Faster campaign setup
98% Customer satisfaction
Trial activation +42%
Templates Ready sections
Reports Live tracking
Support Fast answers

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
New Collection

Promote a seasonal store campaign with visual category tiles

Use this ecommerce banner to guide shoppers toward collections, featured categories, campaign bundles, or product groups without relying on one large discount message.

Shop Collection View All Deals
New arrivals Bundle offers Fast checkout
Popular A

Accessories

Small items and add-ons for campaign bundles.

From $19 New picks
Sale B

Best Sellers

Feature proven products with strong buyer interest.

Save 25% This week
Fresh C

New Drops

Highlight new products in a campaign category.

12 items Just added
Bundle D

Gift Sets

Promote curated product groups and seasonal sets.

From $49 Limited

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
✦
Gradient Banner

Create a bold visual message with modern gradient energy

Use this abstract banner for product launches, creator pages, SaaS campaigns, digital products, and landing pages that need a strong branded section.

Start Now See Preview
Responsive CSS High contrast Reusable section
Live campaign section

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
Dark Mode UI

Build a premium banner for modern product pages

Use this dark banner when your message needs a focused, high-contrast design for SaaS pages, developer tools, dashboards, and premium landing pages.

Launch Project View Docs
Dark UI Product focused Responsive CSS
Online
99.9% Uptime-ready banner section for high trust product pages.
  • DeploymentReady
  • LayoutResponsive
  • ThemeDark

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
Live design system
Glass UI section
Glassmorphism Banner

Create a soft futuristic banner with layered glass effects

Use this translucent banner for app pages, AI tools, SaaS products, creative portfolios, and landing pages that need a modern glass-style section.

Explore UI View Components
24+ Reusable sections
100% Responsive layout
0 JS CSS-only visual

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
↟
Limited launch

New banner toolkit is live. Build campaign sections faster with responsive CSS components.

02d 11h 45m
Get Access ×

A sticky top message that stays visible while users scroll

This preview shows how a persistent top banner can sit above a website header and keep an important campaign message visible.

Campaign notice Use sticky top banners for time-sensitive messages and launch offers.
Header-friendly The banner sits naturally above navigation without hiding the page.
Mobile ready The layout stacks cleanly when there is not enough horizontal space.

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

A bottom notification that does not take over the page

This preview shows how a floating bottom banner can promote an update, feature, or offer while keeping the main page visible.

★
New update

Reusable banner components are now available

Explore new CSS sections for landing pages, campaigns, alerts, and ecommerce offers.

View Update ×

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
Campaign widget

Promote an offer without interrupting the page

This page mockup shows how a floating promo banner can stay visible near the bottom while the normal website content remains readable.

Soft visibility The offer stays visible without becoming a full-screen popup.
Campaign focused Useful for bundles, limited offers, product launches, and upgrades.
Mobile friendly The floating layout stacks into a readable promo card.
Limited bundle Only 36 spots left

Save 30% on the launch bundle

Get the full campaign section pack with banners, promo blocks, offer widgets, and responsive landing page components.

64% claimed
Claim Bundle ×

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
Split Layout

Present a campaign with premium two-column structure

Use this split banner when your message needs strong copy on one side and a detailed product, service, or campaign preview on the other.

Start Project See Details
Conversion focused Landing page ready Responsive layout
New leads +38%
Campaign ready
Preview

Campaign performance overview

4.8x More visible campaign message
92% Reusable section structure
Weekly engagement

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
Visual Campaign

Create an immersive banner with a cinematic background feel

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.

Explore Campaign View Gallery

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
Product Launch

Announce your next release with a launch-ready banner

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.

Join Waitlist Watch Preview
Launch page ready Waitlist CTA Product mockup
Beta access opens soon
New UI

LaunchKit Pro

A reusable campaign system for modern product announcements.

Landing sections 30+
Responsive layouts Ready
Launch assets Included
Launch timeline
Preview Product teaser and waitlist open.
Early Access First users get invited.
Public Launch Full release goes live.

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
Limited-Time Event

Build urgency with a polished countdown banner

Use this banner for launches, product drops, webinars, seasonal campaigns, course openings, and special offers where timing is part of the message.

Reserve Spot View Schedule
Launch date Friday, 10:00 AM
Access Early members first
Starts soon 78% reserved
03 Days
18 Hours
42 Minutes
09 Seconds

Early access opens before public launch

Use this area to explain what happens when the countdown ends and why visitors should act now.

78% full

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
Mobile App

Promote your app with a download-ready banner

Use this banner to introduce a mobile app, companion product, learning platform, fitness tracker, finance tool, or SaaS mobile experience.

A Download on the App Store G Get it on Google Play
4.9 average rating 120k downloads Free to start
4.9★ Average app store rating from active users.
Today

Track everything in one app

Use a product mockup to show what users get after downloading.

Daily progress Complete 68% of today’s plan.
Smart reminders Stay on track with personalized notifications.
Fast insights See useful stats without opening a dashboard.
Offline mode included

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
Live Webinar

Turn your next online event into a high-trust signup banner

Use this banner to promote a webinar, live demo, masterclass, workshop, or training session with a clear registration action.

Reserve Your Seat See Agenda
Date May 28, 2026
Duration 60 minutes
Access Free registration
126 seats reserved
28 May

Build better campaign sections

Learn how to structure banners, CTAs, offer blocks, and conversion sections for modern websites.

W
Workshop Host UI strategy and conversion design
Banner strategy 15 min
Live examples 30 min
Q&A session 15 min
Free Registration includes replay access.

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&amp;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
Black Friday Event

Storewide savings 70%

Use this bold banner for major ecommerce campaigns, seasonal sales, flash deals, product bundles, and high-impact promotional events.

Shop Black Friday View All Deals
Coupon code BLACK70
Best Deal

Ultimate Bundle

Feature your strongest Black Friday product bundle or limited campaign package.

$49 $169
Flash

Starter Pack

A compact deal card for entry-level offers.

$19 $59
Limited

Pro Access

Use this card for premium upgrades or add-ons.

$79 $199

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
Cyber Monday

Digital deals 60% off

Use this futuristic banner for software discounts, template bundles, SaaS offers, online tools, digital courses, and subscription campaigns.

Unlock Cyber Deal Compare Plans
Coupon code CYBER60
Instant digital access
License included
Live deal

Cyber deal dashboard

60% Limited digital discount
24h Offer window remaining
Deal activity +48%

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
Premium Membership

Invite visitors into a high-value membership

Use this banner for paid communities, online learning platforms, resource libraries, fitness programs, clubs, and subscription-based products.

  • Exclusive content and member-only resources
  • Monthly updates, templates, guides, or lessons
  • Community access and priority support options
Join Membership Compare Benefits
8,400+ Active members using the premium library.
Pro Membership Everything you need to grow faster
Best value
$19 / month
  • Premium resourcesIncluded
  • Monthly updatesIncluded
  • Community accessIncluded
  • Priority supportPro
Start Membership
Member-only access

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
Low Stock Alert

Create urgency with a limited stock product banner

Use this banner to promote products that are almost sold out, seasonal items, limited editions, preorders, or fast-moving ecommerce campaigns.

Reserve Product View Details
Fast delivery Ships within 24 hours.
Limited run No restock planned.
Secure checkout Protected payment flow.
Ships tomorrow
Limited Edition

Premium Drop Product

$89 $129
Available stock 7 left
S M L XL
Only 7 left Use scarcity messaging when the stock level is real and useful for shoppers.

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
Online Course

Promote a learning product with a course enrollment banner

Use this banner for online courses, bootcamps, coaching programs, digital workshops, and education platforms that need a strong enrollment section.

Enroll Today View Curriculum
12 lessons Structured learning path.
4 projects Practical portfolio work.
Lifetime access Learn at your own pace.
C
Course Instructor 8+ years experience

Use instructor proof to make the course offer feel more credible and human.

Course Preview

Modern Website Banners

A focused course module preview with lessons, projects, and reusable design patterns.

01 Banner strategy 24 min
02 Responsive layout systems 41 min
03 Conversion-focused CTAs 36 min
2,800 students enrolled

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
Service Business

Generate more leads with a service-focused banner

Use this banner for agencies, consultants, contractors, local businesses, and B2B service providers that want visitors to request a quote or book a consultation.

Book Consultation View Services
Clear offer Explain your service value fast.
Trust proof Show results and experience.
Lead focused Guide visitors to contact you.
240+ Projects completed for clients across multiple service categories.
✓
Available

Free project consultation

Use a consultation card to make the next step feel specific, low-risk, and valuable for potential clients.

  • Project reviewIncluded
  • Timeline estimateIncluded
  • Quote discussionIncluded
Request a Quote
2 consultation slots open

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
Complete Banner

Build a complete responsive banner with CTA, proof, and visual depth

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.

Start Building View Examples
Responsive CSS Conversion focused No JavaScript required
Clear headline Explain the value quickly.
Strong CTA Guide visitors to the next step.
Visual proof Add metrics, cards, or UI previews.
Campaign ready
Mobile friendly
Live

Responsive campaign dashboard

Preview
3.2x More visible conversion section
100% Responsive layout structure
Engagement growth +64%

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.

Recommended hosting for WordPress projects

Need fast hosting for your next website project?

If you are building modern WordPress websites, landing pages, CSS examples, or client projects, reliable hosting helps your pages load faster and feel more professional.

Visit Kinsta
Kinsta WordPress hosting

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.

01

Use one clear message

A banner should not try to promote everything at once. Focus on one offer, update, alert, campaign, product, or next step.

02

Make the CTA obvious

If the banner should drive action, the button or link must be easy to see, easy to read, and connected to the message.

03

Use strong contrast

Banner text, buttons, labels, coupon codes, and icons must stay readable against gradients, images, dark backgrounds, and bright colors.

04

Keep it responsive

Every banner should work on mobile without cramped buttons, broken text, fixed-width panels, or content overflowing outside the screen.

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.

How to make CSS banners responsive

Use flexible layouts, readable text sizes, comfortable spacing, and early breakpoints. A banner should still feel intentional when it stacks into one column on mobile.

Stack content on mobile

Move from two-column or multi-item layouts into a clean vertical flow before the banner starts feeling cramped.

Avoid fixed widths

Use max-width, minmax(), clamp(), and percentage-based layouts instead of rigid dimensions that break small screens.

Make buttons easy to tap

CTA buttons should have enough height, padding, and spacing. On mobile, full-width buttons often work better.

Reduce visual noise

Hide, stack, or simplify decorative elements if they make the mobile banner harder to understand.

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.

Too many messages

A banner with multiple offers, links, badges, countdowns, and unrelated CTAs becomes hard to scan. Keep the message focused.

Weak CTA hierarchy

If every link looks equally important, users do not know what to click. Use one primary CTA and keep secondary actions quieter.

Poor contrast

Gradient and image banners need careful text contrast. Make sure headlines, labels, links, and buttons remain readable.

Mobile overflow

Large cards, fixed widths, long coupon codes, and horizontal timers can break mobile layouts if they are not responsive.

Annoying sticky banners

Sticky and floating banners should not cover navigation, forms, checkout buttons, cookie notices, or important content.

Misleading urgency

Countdowns, low-stock labels, and limited offers should be used honestly. Fake urgency can damage trust and conversions.

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.

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.

Navigation 25 Modern CSS Navigation Menus

Responsive navbar, dropdown, mega menu, hamburger menu, and website header examples.

 Hero Sections 30 Modern Website Hero Sections

Responsive HTML and CSS hero section examples for landing pages and modern websites.

 Layouts 25 Modern CSS Layouts

Grid, Flexbox, container query, dashboard, magazine, card, and responsive layout examples.

 Forms 30 Modern CSS Forms

Contact forms, login forms, checkout forms, quote forms, newsletter forms, and UI examples.

 Pricing 30 Modern CSS Pricing Tables

Responsive pricing cards, SaaS pricing tables, comparison sections, and pricing layouts.

 Footers 30 Modern CSS Footers

Responsive footer layouts, newsletter footers, ecommerce footers, and complete footer sections.

 Accordions 30 Modern CSS Accordions

FAQ, product, support, documentation, mobile filter, and content toggle examples.

 Tabs 30 Modern CSS Tabs

Responsive tab UI, product tabs, dashboard tabs, documentation tabs, and content sections.

 Buttons 20 Modern CSS Buttons

Hover effects, animations, CTA buttons, gradient buttons, and modern UI button styles.
]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-banners/feed/ 0 30 Modern CSS Footers for Websites – Responsive Footer Layout Examples https://veebilehed24.ee/en/blog/css-effects/modern-css-footers/ https://veebilehed24.ee/en/blog/css-effects/modern-css-footers/#respond Mon, 01 Jun 2026 05:45:42 +0000 https://veebilehed24.ee/?p=1454 Footers are one of the most important parts of a modern website, but they are often treated as an afterthought. A good footer can help visitors find important links, understand your brand, contact your business, join your newsletter, view legal pages, follow social channels, or take one final action before leaving the page.

In this guide, you will find 30 modern CSS footers for websites, including responsive footer layouts, newsletter footers, ecommerce footers, SaaS footers, agency footers, portfolio footers, sticky footer layouts, mobile accordion footers, CTA footers, and complete HTML and CSS footer section examples you can customize for your own projects.

View All 30 CSS Footer Examples
On this page

Table of Contents

Kinsta hosting

A CSS footer is the bottom section of a website styled with HTML and CSS. It usually contains important navigation links, contact details, company information, social media links, newsletter signup forms, legal pages, copyright text, trust badges, payment icons, or a final call-to-action.

Modern CSS footers are not just decoration. They help visitors move through a website, find useful pages, understand the business, and take the next step. A footer can be simple and minimal, or it can be a large multi-column layout for bigger websites with many pages, categories, services, resources, and support links.

The best footer design depends on the website type. A portfolio may only need a name, contact button, and social links. An ecommerce website may need product categories, customer service links, payment methods, and trust badges. A SaaS website may need product links, documentation, status pages, login links, and legal information.

Why Website Footers Matter

Website footers matter because many visitors use them as a final navigation area. When someone reaches the end of a page, the footer can guide them to products, services, pricing, contact information, support pages, blog categories, legal pages, or newsletter signup forms.

  • They improve navigation by giving visitors quick access to important pages.
  • They support trust by showing contact details, legal links, payment badges, certifications, or company information.
  • They help conversions when the footer includes a newsletter form, quote request, app download button, or final CTA.
  • They improve mobile usability because users often scroll to the bottom when looking for contact, support, or policy links.
  • They support internal linking by connecting important sections, categories, guides, and landing pages.

If you are building a full website layout, footers work especially well together with modern CSS navigation menus, modern website hero sections, modern CSS layouts, modern CSS forms, and modern CSS buttons.

A modern footer should include the information visitors expect to find at the bottom of a website, but it should not become a messy link dump. The best footer layouts group related links clearly, use readable typography, provide enough spacing, and stay easy to use on both desktop and mobile screens.

Navigation links

Group important pages, services, categories, resources, or support links into clear footer columns.

Contact details

Add useful contact information such as email, phone, office address, opening hours, or support links.

Newsletter or CTA

Use the footer as a final conversion area with a signup form, quote request, trial button, or app download link.

Legal and trust links

Include privacy policy, terms, cookie links, copyright text, trust badges, payment icons, or security signals.

Before designing a footer, think about what the visitor needs at the end of the page. A business website may need contact details and service links. A blog may need categories and popular guides. A store may need support links, delivery information, payment icons, and product categories. A SaaS website may need documentation, pricing, status, login, security, and legal links.

  • Use clear column headings so visitors can scan footer links quickly.
  • Keep link groups organized by topic, such as Company, Product, Resources, Support, and Legal.
  • Make the footer responsive so columns stack cleanly on smaller screens.
  • Use enough contrast for footer links, headings, newsletter forms, and copyright text.
  • Avoid overcrowding the footer with too many links, badges, icons, and paragraphs.
  • Add legal links such as Privacy Policy, Terms, and Cookie Policy where needed.
  • Use useful internal links to help users discover important pages and related content.

You can also combine footer sections with other UI patterns. A newsletter footer can reuse ideas from modern CSS forms, a mobile footer can use CSS accordions, a resources footer can include CSS tabs, and a card-based footer layout can be designed with ideas from modern CSS cards.

Now let’s look at 30 modern CSS footer examples for real website projects. Each example uses a different layout approach, so you can use them for business websites, blogs, portfolios, ecommerce stores, SaaS landing pages, agency websites, app pages, dashboards, and complete responsive website layouts.

1. Modern Website Footer

A modern website footer is a strong starting point for almost any business website, landing page, SaaS page, portfolio, or service website. It gives visitors clear navigation links, short brand context, a newsletter signup area, contact details, and a clean bottom bar for legal links.

The example below uses a polished multi-column footer layout with a large brand area, organized link groups, a newsletter form, social links, and a responsive structure that stacks cleanly on smaller screens.

  • Great starting point for modern CSS footers
  • Includes brand text, navigation columns, newsletter form, and bottom bar
  • Works well for business websites, SaaS pages, portfolios, and agencies
  • Uses a responsive CSS grid layout
  • Clean HTML and CSS footer structure with no JavaScript required

HTML

<footer class="modern-website-footer">

  <div class="modern-website-footer-top">

    <div class="modern-website-footer-brand">
      <a class="modern-website-footer-logo" href="#">
        <span class="modern-website-footer-logo-icon">F</span>
        <span>
          <strong>FooterFlow</strong>
          <span>Modern website sections</span>
        </span>
      </a>

      <p class="modern-website-footer-text">Build a cleaner website footer with organized links, helpful contact details, a strong newsletter area, and a responsive layout that works across devices.</p>

      <div class="modern-website-footer-socials" aria-label="Social links">
        <a href="#">X</a>
        <a href="#">in</a>
        <a href="#">Dr</a>
        <a href="#">Be</a>
      </div>
    </div>

    <div class="modern-website-footer-newsletter">
      <h3>Get useful design tips</h3>
      <p>Join our newsletter for practical website layout ideas, CSS examples, and conversion-focused UI patterns.</p>

      <form class="modern-website-footer-form">
        <input type="email" placeholder="Enter your email">
        <button type="submit">Subscribe</button>
      </form>
    </div>

  </div>

  <div class="modern-website-footer-links">

    <div class="modern-website-footer-column">
      <h3>Product</h3>
      <ul>
        <li><a href="#">Website Builder</a></li>
        <li><a href="#">Templates</a></li>
        <li><a href="#">Components</a></li>
        <li><a href="#">Pricing</a></li>
      </ul>
    </div>

    <div class="modern-website-footer-column">
      <h3>Company</h3>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <div class="modern-website-footer-column">
      <h3>Resources</h3>
      <ul>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Guides</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Support Center</a></li>
      </ul>
    </div>

    <div class="modern-website-footer-column">
      <h3>Contact</h3>
      <ul>
        <li><span>hello@example.com</span></li>
        <li><span>+1 555 0123</span></li>
        <li><span>Mon-Fri, 9:00-17:00</span></li>
        <li><a href="#">Request a quote</a></li>
      </ul>
    </div>

  </div>

  <div class="modern-website-footer-bottom">
    <p>© 2026 FooterFlow. All rights reserved.</p>

    <div class="modern-website-footer-legal">
      <a href="#">Privacy Policy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.modern-website-footer{
width:min(100%,1080px);
overflow:hidden;
border-radius:34px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 90px rgba(15,23,42,.32);
}

.modern-website-footer-top{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
gap:22px;
padding:34px;
background:
radial-gradient(circle at 15% 15%,rgba(6,182,212,.22),transparent 34%),
radial-gradient(circle at 92% 10%,rgba(124,58,237,.22),transparent 32%),
linear-gradient(135deg,#0f172a,#111827);
}

.modern-website-footer-brand{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}

.modern-website-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
color:#ffffff;
text-decoration:none;
}

.modern-website-footer-logo-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#06b6d4,#7c3aed);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 16px 34px rgba(6,182,212,.24);
}

.modern-website-footer-logo strong{
display:block;
color:#ffffff;
font-size:21px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.modern-website-footer-logo span{
display:block;
margin-top:3px;
color:#94a3b8;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.modern-website-footer-text{
max-width:560px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.modern-website-footer-socials{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.modern-website-footer-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.20);
color:#e5e7eb !important;
-webkit-text-fill-color:#e5e7eb !important;
font-size:13px;
font-weight:900;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.modern-website-footer-socials a:hover{
transform:translateY(-3px);
background:rgba(6,182,212,.18);
border-color:rgba(6,182,212,.48);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.modern-website-footer-newsletter{
padding:24px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.modern-website-footer-newsletter h3{
margin:0 0 10px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:24px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.modern-website-footer-newsletter p{
margin:0 0 18px;
color:#cbd5e1;
font-size:14px;
line-height:1.65;
font-weight:600;
}

.modern-website-footer-form{
display:flex;
gap:10px;
padding:6px;
border-radius:18px;
background:#ffffff;
box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.modern-website-footer-form input{
min-width:0;
flex:1;
border:0;
outline:0;
padding:13px 12px;
border-radius:14px;
background:transparent;
color:#0f172a;
font-size:14px;
font-weight:650;
}

.modern-website-footer-form input::placeholder{
color:#64748b;
}

.modern-website-footer-form button{
border:0;
cursor:pointer;
padding:13px 16px;
border-radius:14px;
background:linear-gradient(135deg,#06b6d4,#2563eb);
color:#ffffff;
font-size:14px;
font-weight:900;
white-space:nowrap;
box-shadow:0 12px 26px rgba(37,99,235,.25);
transition:transform .2s ease,filter .2s ease;
}

.modern-website-footer-form button:hover{
transform:translateY(-1px);
filter:saturate(1.1);
}

.modern-website-footer-links{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:22px;
padding:34px;
background:#ffffff;
}

.modern-website-footer-column h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.modern-website-footer-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.modern-website-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.modern-website-footer-column a,
.modern-website-footer-column span{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.45;
font-weight:650;
text-decoration:none !important;
transition:color .2s ease,transform .2s ease;
}

.modern-website-footer-column a:hover{
transform:translateX(3px);
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

.modern-website-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 34px;
background:#f8fafc;
border-top:1px solid rgba(15,23,42,.08);
}

.modern-website-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.modern-website-footer-legal{
display:flex;
flex-wrap:wrap;
gap:14px;
}

.modern-website-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.modern-website-footer-legal a:hover{
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

@media (max-width:900px){
.modern-website-footer-top{
grid-template-columns:1fr;
}

.modern-website-footer-links{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.modern-website-footer-bottom{
align-items:flex-start;
flex-direction:column;
}
}

@media (max-width:640px){
.modern-website-footer-top,
.modern-website-footer-links{
padding:24px;
}

.modern-website-footer{
border-radius:26px;
}

.modern-website-footer-links{
grid-template-columns:1fr;
gap:20px;
}

.modern-website-footer-form{
flex-direction:column;
}

.modern-website-footer-form button{
width:100%;
}

.modern-website-footer-bottom{
padding:20px 24px;
}
}

This modern website footer is a flexible base for many projects. You can replace the demo brand, link groups, newsletter text, and contact details with your own content, then use the same responsive structure for business websites, SaaS pages, portfolios, blogs, or landing pages.

2. Responsive Footer Layout

A responsive footer layout focuses on structure first. Instead of creating a complex decorative footer, this example shows how to organize footer content into clean columns that adapt from desktop to tablet and mobile screens.

The example below uses a wide responsive footer with a clear top section, four organized columns, compact link lists, contact details, and a bottom utility row. It is useful when you want a practical HTML and CSS footer layout that can work across many website types.

  • Responsive footer layout with desktop, tablet, and mobile structure
  • Uses CSS Grid for clean column alignment
  • Good for business websites, blogs, agencies, and service pages
  • Includes link columns, contact details, and legal links
  • Simple footer structure that is easy to customize

HTML

<footer class="responsive-footer-layout">

  <div class="responsive-footer-layout-main">

    <div class="responsive-footer-layout-brand">
      <a class="responsive-footer-layout-logo" href="#">
        <span class="responsive-footer-layout-logo-mark">R</span>
        <span class="responsive-footer-layout-logo-text">
          <strong>ResponsiveHub</strong>
          <span>Flexible footer layout</span>
        </span>
      </a>

      <p class="responsive-footer-layout-description">A practical responsive footer layout for websites that need clear navigation, helpful company information, and clean mobile behavior.</p>

      <span class="responsive-footer-layout-status">Available for new projects</span>
    </div>

    <div class="responsive-footer-layout-column">
      <h3>Explore</h3>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <div class="responsive-footer-layout-column">
      <h3>Resources</h3>
      <ul>
        <li><a href="#">CSS Guides</a></li>
        <li><a href="#">Layout Examples</a></li>
        <li><a href="#">Footer Patterns</a></li>
        <li><a href="#">Design Tips</a></li>
        <li><a href="#">Support</a></li>
      </ul>
    </div>

    <div class="responsive-footer-layout-column">
      <h3>Contact</h3>
      <ul class="responsive-footer-layout-contact-list">
        <li><span>hello@example.com</span></li>
        <li><span>+1 555 0199</span></li>
        <li><span>New York, United States</span></li>
        <li><span>Monday to Friday</span></li>
      </ul>
    </div>

  </div>

  <div class="responsive-footer-layout-bottom">
    <p>© 2026 ResponsiveHub. Built with HTML and CSS.</p>

    <div class="responsive-footer-layout-bottom-links">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Accessibility</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.responsive-footer-layout{
width:min(100%,1100px);
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 28px 80px rgba(15,23,42,.14);
overflow:hidden;
}

.responsive-footer-layout-main{
display:grid;
grid-template-columns:1.2fr repeat(3,1fr);
gap:28px;
padding:42px;
}

.responsive-footer-layout-brand{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
}

.responsive-footer-layout-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.responsive-footer-layout-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:15px;
background:#111827;
color:#ffffff;
font-size:17px;
font-weight:950;
box-shadow:0 16px 32px rgba(15,23,42,.18);
}

.responsive-footer-layout-logo-text{
display:grid;
gap:3px;
}

.responsive-footer-layout-logo-text strong{
display:block;
color:#111827;
font-size:20px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.responsive-footer-layout-logo-text span{
display:block;
color:#64748b;
font-size:13px;
font-weight:700;
line-height:1.2;
}

.responsive-footer-layout-description{
max-width:330px;
margin:0;
color:#475569;
font-size:15px;
line-height:1.75;
font-weight:600;
}

.responsive-footer-layout-status{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 11px;
border-radius:999px;
background:#ecfeff;
border:1px solid rgba(6,182,212,.24);
color:#0e7490;
font-size:12px;
font-weight:900;
line-height:1;
}

.responsive-footer-layout-status::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#06b6d4;
box-shadow:0 0 0 4px rgba(6,182,212,.12);
}

.responsive-footer-layout-column h3{
margin:0 0 15px;
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.responsive-footer-layout-column ul{
display:grid;
gap:11px;
margin:0;
padding:0;
list-style:none;
}

.responsive-footer-layout-column li{
margin:0;
padding:0;
list-style:none;
}

.responsive-footer-layout-column a,
.responsive-footer-layout-column span{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.45;
font-weight:650;
text-decoration:none !important;
}

.responsive-footer-layout-column a{
transition:color .2s ease,transform .2s ease;
}

.responsive-footer-layout-column a:hover{
transform:translateX(3px);
color:#4f46e5 !important;
-webkit-text-fill-color:#4f46e5 !important;
}

.responsive-footer-layout-contact-list span{
display:flex;
align-items:flex-start;
gap:8px;
}

.responsive-footer-layout-contact-list span::before{
content:"•";
color:#4f46e5;
font-weight:950;
}

.responsive-footer-layout-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 42px;
background:#f8fafc;
border-top:1px solid rgba(15,23,42,.08);
}

.responsive-footer-layout-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.responsive-footer-layout-bottom-links{
display:flex;
flex-wrap:wrap;
gap:14px;
}

.responsive-footer-layout-bottom-links a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
transition:color .2s ease;
}

.responsive-footer-layout-bottom-links a:hover{
color:#4f46e5 !important;
-webkit-text-fill-color:#4f46e5 !important;
}

@media (max-width:980px){
.responsive-footer-layout-main{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:720px){
.responsive-footer-layout{
border-radius:26px;
}

.responsive-footer-layout-main{
grid-template-columns:1fr;
padding:28px;
gap:24px;
}

.responsive-footer-layout-description{
max-width:none;
}

.responsive-footer-layout-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 28px;
}

.responsive-footer-layout-bottom-links{
gap:12px 16px;
}
}

This responsive footer layout is useful when you need a clean, practical footer that works across many website types. The structure is simple enough to customize quickly, but still polished enough for modern business websites, blogs, landing pages, and service websites.

3. Minimal Footer Design

A minimal footer design is perfect when you want the bottom of the website to feel clean, calm, and professional. Instead of using many columns, badges, forms, and decorative elements, this footer focuses on a simple brand line, a small navigation menu, social links, and legal text.

The example below uses a refined minimal layout with soft borders, balanced spacing, small typography, and a clean horizontal structure. It works especially well for portfolios, personal websites, consultants, studios, modern blogs, and simple landing pages.

  • Clean minimal CSS footer layout
  • Great for portfolios, blogs, consultants, and personal websites
  • Uses simple navigation and social links
  • Lightweight HTML and CSS with no JavaScript
  • Responsive layout that stacks neatly on mobile screens

HTML

<footer class="minimal-footer-design">

  <div class="minimal-footer-design-top">

    <a class="minimal-footer-design-brand" href="#">
      <span class="minimal-footer-design-mark">M</span>
      <span class="minimal-footer-design-name">
        <strong>Minimal Studio</strong>
        <span>Clean web design</span>
      </span>
    </a>

    <nav class="minimal-footer-design-nav" aria-label="Footer navigation">
      <a href="#">Work</a>
      <a href="#">Services</a>
      <a href="#">Journal</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>

  </div>

  <div class="minimal-footer-design-middle">

    <p class="minimal-footer-design-text">A minimal footer keeps the bottom of a website focused, readable, and elegant. Use this layout when you only need essential links, a short brand message, and simple social proof.</p>

    <div class="minimal-footer-design-socials" aria-label="Social links">
      <a href="#">X</a>
      <a href="#">in</a>
      <a href="#">Dr</a>
      <a href="#">Be</a>
    </div>

  </div>

  <div class="minimal-footer-design-bottom">

    <p>© 2026 Minimal Studio. All rights reserved.</p>

    <div class="minimal-footer-design-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>

  </div>

</footer>

CSS

.minimal-footer-design{
width:min(100%,1040px);
padding:34px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
box-shadow:0 24px 70px rgba(15,23,42,.08);
}

.minimal-footer-design-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding-bottom:24px;
border-bottom:1px solid rgba(15,23,42,.08);
}

.minimal-footer-design-brand{
display:flex;
align-items:center;
gap:13px;
text-decoration:none;
}

.minimal-footer-design-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:14px;
background:#0f172a;
color:#ffffff;
font-size:16px;
font-weight:950;
letter-spacing:-.02em;
box-shadow:0 14px 28px rgba(15,23,42,.16);
}

.minimal-footer-design-name{
display:grid;
gap:3px;
}

.minimal-footer-design-name strong{
display:block;
color:#0f172a;
font-size:20px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.minimal-footer-design-name span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.25;
font-weight:700;
}

.minimal-footer-design-nav{
display:flex;
align-items:center;
flex-wrap:wrap;
justify-content:flex-end;
gap:18px;
}

.minimal-footer-design-nav a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.2;
font-weight:750;
text-decoration:none !important;
transition:color .2s ease;
}

.minimal-footer-design-nav a:hover{
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
}

.minimal-footer-design-middle{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:26px;
padding:26px 0;
}

.minimal-footer-design-text{
max-width:560px;
margin:0;
color:#475569;
font-size:15px;
line-height:1.75;
font-weight:600;
}

.minimal-footer-design-socials{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:10px;
}

.minimal-footer-design-socials a{
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,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:13px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}

.minimal-footer-design-socials a:hover{
transform:translateY(-3px);
background:#0f172a;
border-color:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.minimal-footer-design-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:22px;
border-top:1px solid rgba(15,23,42,.08);
}

.minimal-footer-design-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.minimal-footer-design-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.minimal-footer-design-legal a{
color:#64748b !important;
-webkit-text-fill-color:#64748b !important;
font-size:13px;
font-weight:700;
text-decoration:none !important;
transition:color .2s ease;
}

.minimal-footer-design-legal a:hover{
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
}

@media (max-width:760px){
.minimal-footer-design{
padding:26px;
border-radius:24px;
}

.minimal-footer-design-top,
.minimal-footer-design-middle,
.minimal-footer-design-bottom{
align-items:flex-start;
flex-direction:column;
}

.minimal-footer-design-nav,
.minimal-footer-design-socials,
.minimal-footer-design-legal{
justify-content:flex-start;
}

.minimal-footer-design-nav{
gap:12px 16px;
}
}

This minimal footer design is a good choice when the website does not need a large footer with many columns. It keeps the layout simple, professional, and easy to scan, while still including the most important navigation, social, and legal links.

4. Dark Mode Footer

A dark mode footer gives the bottom of a website a premium and modern look. It works especially well for SaaS websites, tech companies, creative agencies, AI tools, product landing pages, and modern business websites that use a darker visual style.

The example below uses a dark layered footer with glowing accent backgrounds, a strong CTA area, structured navigation columns, contact details, and a clean bottom row. It feels more dramatic than a minimal footer while still staying readable and responsive.

  • Premium dark mode footer design
  • Includes CTA, link columns, contact information, and legal links
  • Works well for SaaS, AI, agency, tech, and landing page websites
  • Uses gradients, soft borders, and subtle glow effects
  • Fully responsive HTML and CSS footer section

HTML

<footer class="dark-mode-footer">

  <div class="dark-mode-footer-cta">

    <div>
      <div class="dark-mode-footer-kicker">Dark footer section</div>
      <h3>Build a stronger final section for your <span>modern website</span></h3>
    </div>

    <div class="dark-mode-footer-cta-actions">
      <a class="dark-mode-footer-button" href="#">Start Project</a>
      <a class="dark-mode-footer-button is-secondary" href="#">View Work</a>
    </div>

  </div>

  <div class="dark-mode-footer-main">

    <div class="dark-mode-footer-brand">

      <a class="dark-mode-footer-logo" href="#">
        <span class="dark-mode-footer-logo-mark">D</span>
        <span class="dark-mode-footer-logo-text">
          <strong>DarkLayer</strong>
          <span>Premium web systems</span>
        </span>
      </a>

      <p class="dark-mode-footer-description">A dark mode footer can make your website ending feel more premium, structured, and conversion-focused while keeping all important links easy to find.</p>

      <div class="dark-mode-footer-badges">
        <span>Fast</span>
        <span>Responsive</span>
        <span>Accessible</span>
      </div>

    </div>

    <div class="dark-mode-footer-column">
      <h3>Product</h3>
      <ul>
        <li><a href="#">Features</a></li>
        <li><a href="#">Use Cases</a></li>
        <li><a href="#">Integrations</a></li>
        <li><a href="#">Pricing</a></li>
      </ul>
    </div>

    <div class="dark-mode-footer-column">
      <h3>Company</h3>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <div class="dark-mode-footer-column">
      <h3>Support</h3>
      <ul>
        <li><a href="#">Help Center</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">System Status</a></li>
        <li><span>support@example.com</span></li>
      </ul>
    </div>

  </div>

  <div class="dark-mode-footer-bottom">

    <p>© 2026 DarkLayer. All rights reserved.</p>

    <div class="dark-mode-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Security</a>
      <a href="#">Cookies</a>
    </div>

  </div>

</footer>

CSS

.dark-mode-footer{
position:relative;
width:min(100%,1100px);
overflow:hidden;
border-radius:34px;
background:
radial-gradient(circle at 10% 0%,rgba(6,182,212,.18),transparent 34%),
radial-gradient(circle at 90% 0%,rgba(124,58,237,.18),transparent 30%),
linear-gradient(135deg,#0f172a,#020617);
border:1px solid rgba(148,163,184,.18);
box-shadow:0 34px 100px rgba(0,0,0,.46);
}

.dark-mode-footer::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.06),transparent 38%),
linear-gradient(to bottom,transparent,rgba(2,6,23,.72));
pointer-events:none;
}

.dark-mode-footer-cta{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:center;
padding:36px;
border-bottom:1px solid rgba(148,163,184,.16);
}

.dark-mode-footer-kicker{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(6,182,212,.13);
border:1px solid rgba(6,182,212,.24);
color:#a5f3fc;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.dark-mode-footer-cta h3{
max-width:720px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(30px,4vw,52px);
line-height:1.05;
font-weight:950;
letter-spacing:-.06em;
}

.dark-mode-footer-cta h3 span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#60a5fa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.dark-mode-footer-cta-actions{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:12px;
}

.dark-mode-footer-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:13px 17px;
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 18px 40px rgba(37,99,235,.28);
transition:transform .2s ease,filter .2s ease;
}

.dark-mode-footer-button:hover{
transform:translateY(-2px);
filter:saturate(1.1);
}

.dark-mode-footer-button.is-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.22);
box-shadow:none;
}

.dark-mode-footer-main{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.25fr repeat(3,minmax(0,1fr));
gap:26px;
padding:36px;
}

.dark-mode-footer-brand{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
}

.dark-mode-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.dark-mode-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#22d3ee,#7c3aed);
color:#ffffff;
font-size:17px;
font-weight:950;
box-shadow:0 16px 34px rgba(124,58,237,.26);
}

.dark-mode-footer-logo-text{
display:grid;
gap:3px;
}

.dark-mode-footer-logo-text strong{
display:block;
color:#ffffff;
font-size:20px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.dark-mode-footer-logo-text span{
display:block;
color:#94a3b8;
font-size:13px;
font-weight:700;
line-height:1.2;
}

.dark-mode-footer-description{
max-width:360px;
margin:0;
color:#cbd5e1;
font-size:15px;
line-height:1.75;
font-weight:600;
}

.dark-mode-footer-badges{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.dark-mode-footer-badges span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
color:#e5e7eb;
font-size:12px;
font-weight:850;
line-height:1;
}

.dark-mode-footer-column h3{
margin:0 0 15px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.dark-mode-footer-column ul{
display:grid;
gap:11px;
margin:0;
padding:0;
list-style:none;
}

.dark-mode-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.dark-mode-footer-column a,
.dark-mode-footer-column span{
display:inline-flex;
color:#cbd5e1 !important;
-webkit-text-fill-color:#cbd5e1 !important;
font-size:14px;
line-height:1.45;
font-weight:650;
text-decoration:none !important;
}

.dark-mode-footer-column a{
transition:color .2s ease,transform .2s ease;
}

.dark-mode-footer-column a:hover{
transform:translateX(3px);
color:#67e8f9 !important;
-webkit-text-fill-color:#67e8f9 !important;
}

.dark-mode-footer-bottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:22px 36px;
background:rgba(2,6,23,.62);
border-top:1px solid rgba(148,163,184,.14);
}

.dark-mode-footer-bottom p{
margin:0;
color:#94a3b8;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.dark-mode-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.dark-mode-footer-legal a{
color:#cbd5e1 !important;
-webkit-text-fill-color:#cbd5e1 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
transition:color .2s ease;
}

.dark-mode-footer-legal a:hover{
color:#67e8f9 !important;
-webkit-text-fill-color:#67e8f9 !important;
}

@media (max-width:980px){
.dark-mode-footer-cta{
grid-template-columns:1fr;
}

.dark-mode-footer-cta-actions{
justify-content:flex-start;
}

.dark-mode-footer-main{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:640px){
.dark-mode-footer{
border-radius:26px;
}

.dark-mode-footer-cta,
.dark-mode-footer-main{
padding:26px;
}

.dark-mode-footer-main{
grid-template-columns:1fr;
gap:24px;
}

.dark-mode-footer-cta h3{
font-size:32px;
}

.dark-mode-footer-button{
width:100%;
}

.dark-mode-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:22px 26px;
}

.dark-mode-footer-legal{
justify-content:flex-start;
}
}

This dark mode footer is ideal when the website needs a stronger and more premium ending section. The CTA area gives the footer a conversion-focused purpose, while the link columns and legal row keep the footer practical and easy to navigate.

5. Gradient Footer Section

A gradient footer section works well when you want the bottom of a website to feel energetic, modern, and visually memorable. Instead of using a plain dark or white background, this footer uses a bold gradient surface, floating cards, bright link groups, and a strong final brand message.

The example below is designed for landing pages, creative websites, startup websites, SaaS pages, and modern product websites where the footer should feel like a real design section, not just a basic list of links.

  • Colorful gradient footer for modern websites
  • Great for startups, SaaS pages, agencies, and product landing pages
  • Includes brand message, link cards, CTA button, and legal links
  • Uses layered gradients and clean contrast
  • Responsive HTML and CSS footer layout with no JavaScript

HTML

<footer class="gradient-footer-section">

  <div class="gradient-footer-section-main">

    <div class="gradient-footer-section-brand">

      <div>
        <div class="gradient-footer-section-kicker">Gradient Footer</div>
        <h3 class="gradient-footer-section-title">End your website with color, clarity, and action</h3>
        <p class="gradient-footer-section-text">Use this footer when your landing page needs a final section that feels modern, bright, and conversion-focused without losing important navigation links.</p>
      </div>

      <div class="gradient-footer-section-actions">
        <a class="gradient-footer-section-button" href="#">Start Building</a>
        <a class="gradient-footer-section-button is-outline" href="#">View Templates</a>
      </div>

    </div>

    <div class="gradient-footer-section-card-grid">

      <div class="gradient-footer-section-card">
        <h3>Platform</h3>
        <ul>
          <li><a href="#">Landing Pages</a></li>
          <li><a href="#">UI Sections</a></li>
          <li><a href="#">Design System</a></li>
          <li><a href="#">Templates</a></li>
        </ul>
      </div>

      <div class="gradient-footer-section-card">
        <h3>Resources</h3>
        <ul>
          <li><a href="#">CSS Examples</a></li>
          <li><a href="#">Web Design Guide</a></li>
          <li><a href="#">Responsive Tips</a></li>
          <li><a href="#">Documentation</a></li>
        </ul>
      </div>

      <div class="gradient-footer-section-card">
        <h3>Company</h3>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Customers</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

      <div class="gradient-footer-section-card">
        <h3>Connect</h3>
        <ul>
          <li><a href="#">Newsletter</a></li>
          <li><a href="#">LinkedIn</a></li>
          <li><a href="#">Dribbble</a></li>
          <li><a href="#">Support</a></li>
        </ul>
      </div>

    </div>

  </div>

  <div class="gradient-footer-section-bottom">
    <p>© 2026 Gradient Footer. All rights reserved.</p>

    <div class="gradient-footer-section-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.gradient-footer-section{
position:relative;
width:min(100%,1100px);
overflow:hidden;
border-radius:36px;
background:
radial-gradient(circle at 12% 0%,rgba(255,255,255,.34),transparent 34%),
radial-gradient(circle at 88% 8%,rgba(255,255,255,.22),transparent 30%),
linear-gradient(135deg,#f97316 0%,#ec4899 38%,#7c3aed 68%,#2563eb 100%);
box-shadow:0 34px 100px rgba(124,58,237,.32);
}

.gradient-footer-section::before{
content:"";
position:absolute;
inset:1px;
border-radius:35px;
border:1px solid rgba(255,255,255,.26);
pointer-events:none;
}

.gradient-footer-section-main{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:26px;
padding:38px;
}

.gradient-footer-section-brand{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
gap:28px;
min-height:310px;
}

.gradient-footer-section-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.26);
color:#ffffff;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.gradient-footer-section-title{
max-width:620px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.07em;
}

.gradient-footer-section-text{
max-width:560px;
margin:16px 0 0;
color:rgba(255,255,255,.86);
font-size:16px;
line-height:1.75;
font-weight:650;
}

.gradient-footer-section-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
}

.gradient-footer-section-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:13px 18px;
border-radius:999px;
background:#ffffff;
color:#4c1d95 !important;
-webkit-text-fill-color:#4c1d95 !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 .2s ease,box-shadow .2s ease;
}

.gradient-footer-section-button:hover{
transform:translateY(-2px);
box-shadow:0 22px 50px rgba(0,0,0,.24);
}

.gradient-footer-section-button.is-outline{
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.28);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
box-shadow:none;
}

.gradient-footer-section-card-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.gradient-footer-section-card{
padding:22px;
border-radius:26px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
backdrop-filter:blur(16px);
}

.gradient-footer-section-card h3{
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.gradient-footer-section-card ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.gradient-footer-section-card li{
margin:0;
padding:0;
list-style:none;
}

.gradient-footer-section-card a{
display:inline-flex;
color:rgba(255,255,255,.86) !important;
-webkit-text-fill-color:rgba(255,255,255,.86) !important;
font-size:14px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
transition:color .2s ease,transform .2s ease;
}

.gradient-footer-section-card a:hover{
transform:translateX(3px);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.gradient-footer-section-bottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px 38px;
background:rgba(15,23,42,.18);
border-top:1px solid rgba(255,255,255,.18);
}

.gradient-footer-section-bottom p{
margin:0;
color:rgba(255,255,255,.82);
font-size:13px;
line-height:1.5;
font-weight:700;
}

.gradient-footer-section-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.gradient-footer-section-legal a{
color:rgba(255,255,255,.84) !important;
-webkit-text-fill-color:rgba(255,255,255,.84) !important;
font-size:13px;
font-weight:800;
text-decoration:none !important;
}

.gradient-footer-section-legal a:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

@media (max-width:940px){
.gradient-footer-section-main{
grid-template-columns:1fr;
}

.gradient-footer-section-brand{
min-height:auto;
}
}

@media (max-width:640px){
.gradient-footer-section{
border-radius:28px;
}

.gradient-footer-section::before{
border-radius:27px;
}

.gradient-footer-section-main{
padding:26px;
}

.gradient-footer-section-title{
font-size:34px;
}

.gradient-footer-section-card-grid{
grid-template-columns:1fr;
}

.gradient-footer-section-actions{
width:100%;
}

.gradient-footer-section-button{
width:100%;
}

.gradient-footer-section-bottom{
align-items:flex-start;
flex-direction:column;
padding:22px 26px;
}

.gradient-footer-section-legal{
justify-content:flex-start;
}
}

This gradient footer section is a strong choice when the website needs a more expressive ending. It keeps the footer practical with link groups and legal links, but the large gradient surface makes it feel more like a designed landing page section.

6. Glassmorphism Footer

A glassmorphism footer uses transparent panels, soft blur effects, glowing borders, and layered backgrounds to create a futuristic website footer. This design style works especially well for AI tools, SaaS websites, portfolios, dashboards, crypto projects, creative studios, and technology landing pages.

The example below uses a dark atmospheric background with translucent footer cards, blurred surfaces, structured link groups, a newsletter box, and a clean bottom row. It is more decorative than a standard footer but still keeps the content readable and organized.

  • Futuristic glassmorphism footer design
  • Uses translucent cards, soft blur, borders, and glowing gradients
  • Great for AI, SaaS, tech, dashboard, and portfolio websites
  • Includes brand area, link groups, newsletter card, and legal row
  • Responsive CSS footer with no JavaScript required

HTML

<footer class="glassmorphism-footer">

  <div class="glassmorphism-footer-grid">

    <div class="glassmorphism-footer-panel glassmorphism-footer-brand-panel">

      <div>
        <a class="glassmorphism-footer-logo" href="#">
          <span class="glassmorphism-footer-mark">G</span>
          <span class="glassmorphism-footer-logo-text">
            <strong>GlassGrid</strong>
            <span>Futuristic website UI</span>
          </span>
        </a>

        <h3 class="glassmorphism-footer-title">A glass footer for <span>next-generation</span> websites</h3>
        <p class="glassmorphism-footer-text">Use this glassmorphism footer when your website needs a more immersive, futuristic, and premium final section with modern visual depth.</p>
      </div>

      <div class="glassmorphism-footer-socials" aria-label="Social links">
        <a href="#">X</a>
        <a href="#">in</a>
        <a href="#">Gh</a>
        <a href="#">Dr</a>
      </div>

    </div>

    <div class="glassmorphism-footer-side">

      <div class="glassmorphism-footer-panel glassmorphism-footer-newsletter">
        <h3>Join the interface lab</h3>
        <p>Get UI patterns, CSS layout ideas, and responsive section examples directly in your inbox.</p>

        <form class="glassmorphism-footer-form">
          <input type="email" placeholder="Email address">
          <button type="submit">Join</button>
        </form>
      </div>

      <div class="glassmorphism-footer-links">

        <div class="glassmorphism-footer-panel glassmorphism-footer-link-card">
          <h3>Build</h3>
          <ul>
            <li><a href="#">Components</a></li>
            <li><a href="#">Layouts</a></li>
            <li><a href="#">Templates</a></li>
            <li><a href="#">Design Systems</a></li>
          </ul>
        </div>

        <div class="glassmorphism-footer-panel glassmorphism-footer-link-card">
          <h3>Learn</h3>
          <ul>
            <li><a href="#">CSS Guides</a></li>
            <li><a href="#">Responsive UI</a></li>
            <li><a href="#">Best Practices</a></li>
            <li><a href="#">Documentation</a></li>
          </ul>
        </div>

      </div>

    </div>

  </div>

  <div class="glassmorphism-footer-bottom">
    <p>© 2026 GlassGrid. All rights reserved.</p>

    <div class="glassmorphism-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Security</a>
    </div>
  </div>

</footer>

CSS

.glassmorphism-footer{
position:relative;
width:min(100%,1100px);
overflow:hidden;
border-radius:36px;
background:
radial-gradient(circle at 18% 0%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 92% 8%,rgba(168,85,247,.18),transparent 30%),
rgba(15,23,42,.58);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 34px 100px rgba(0,0,0,.45);
backdrop-filter:blur(22px);
}

.glassmorphism-footer::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.10),transparent 42%),
linear-gradient(to bottom,transparent,rgba(2,6,23,.64));
pointer-events:none;
}

.glassmorphism-footer-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.15fr minmax(0,1fr);
gap:16px;
padding:18px;
}

.glassmorphism-footer-panel{
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
}

.glassmorphism-footer-brand-panel{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:28px;
min-height:360px;
padding:28px;
}

.glassmorphism-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.glassmorphism-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:18px;
background:linear-gradient(135deg,rgba(34,211,238,.95),rgba(168,85,247,.95));
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 18px 40px rgba(168,85,247,.28);
}

.glassmorphism-footer-logo-text{
display:grid;
gap:3px;
}

.glassmorphism-footer-logo-text strong{
display:block;
color:#ffffff;
font-size:21px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.glassmorphism-footer-logo-text span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.glassmorphism-footer-title{
max-width:640px;
margin:24px 0 0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.07em;
}

.glassmorphism-footer-title span{
background:linear-gradient(90deg,#67e8f9,#c4b5fd,#60a5fa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.glassmorphism-footer-text{
max-width:560px;
margin:14px 0 0;
color:#cbd5e1;
font-size:15px;
line-height:1.75;
font-weight:650;
}

.glassmorphism-footer-socials{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.glassmorphism-footer-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
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:13px;
font-weight:900;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.glassmorphism-footer-socials a:hover{
transform:translateY(-3px);
background:rgba(34,211,238,.16);
border-color:rgba(103,232,249,.42);
}

.glassmorphism-footer-side{
display:grid;
grid-template-rows:auto 1fr;
gap:16px;
}

.glassmorphism-footer-newsletter{
padding:24px;
}

.glassmorphism-footer-newsletter h3{
margin:0 0 9px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:23px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.glassmorphism-footer-newsletter p{
margin:0 0 18px;
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:600;
}

.glassmorphism-footer-form{
display:flex;
gap:8px;
padding:6px;
border-radius:18px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.13);
}

.glassmorphism-footer-form input{
min-width:0;
flex:1;
border:0;
outline:0;
padding:13px 12px;
border-radius:14px;
background:rgba(255,255,255,.10);
color:#ffffff;
font-size:14px;
font-weight:650;
}

.glassmorphism-footer-form input::placeholder{
color:#cbd5e1;
}

.glassmorphism-footer-form button{
border:0;
cursor:pointer;
padding:13px 15px;
border-radius:14px;
background:linear-gradient(135deg,#22d3ee,#7c3aed);
color:#ffffff;
font-size:14px;
font-weight:900;
white-space:nowrap;
}

.glassmorphism-footer-links{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}

.glassmorphism-footer-link-card{
padding:22px;
}

.glassmorphism-footer-link-card h3{
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.glassmorphism-footer-link-card ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.glassmorphism-footer-link-card li{
margin:0;
padding:0;
list-style:none;
}

.glassmorphism-footer-link-card a{
display:inline-flex;
color:#cbd5e1 !important;
-webkit-text-fill-color:#cbd5e1 !important;
font-size:14px;
line-height:1.4;
font-weight:650;
text-decoration:none !important;
transition:color .2s ease,transform .2s ease;
}

.glassmorphism-footer-link-card a:hover{
transform:translateX(3px);
color:#67e8f9 !important;
-webkit-text-fill-color:#67e8f9 !important;
}

.glassmorphism-footer-bottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px 28px;
border-top:1px solid rgba(255,255,255,.12);
background:rgba(2,6,23,.32);
}

.glassmorphism-footer-bottom p{
margin:0;
color:#94a3b8;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.glassmorphism-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.glassmorphism-footer-legal a{
color:#cbd5e1 !important;
-webkit-text-fill-color:#cbd5e1 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.glassmorphism-footer-legal a:hover{
color:#67e8f9 !important;
-webkit-text-fill-color:#67e8f9 !important;
}

@media (max-width:980px){
.glassmorphism-footer-grid{
grid-template-columns:1fr;
}

.glassmorphism-footer-brand-panel{
min-height:auto;
}
}

@media (max-width:640px){
.glassmorphism-footer{
border-radius:28px;
}

.glassmorphism-footer-grid{
padding:12px;
}

.glassmorphism-footer-brand-panel,
.glassmorphism-footer-newsletter,
.glassmorphism-footer-link-card{
padding:22px;
border-radius:22px;
}

.glassmorphism-footer-title{
font-size:34px;
}

.glassmorphism-footer-form{
flex-direction:column;
}

.glassmorphism-footer-form button{
width:100%;
}

.glassmorphism-footer-links{
grid-template-columns:1fr;
}

.glassmorphism-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:22px;
}

.glassmorphism-footer-legal{
justify-content:flex-start;
}
}

This glassmorphism footer is best for websites that need a futuristic and premium visual style. The translucent panels create depth, while the organized link cards, newsletter form, and legal row keep the footer useful and easy to navigate.

7. Newsletter Footer

A newsletter footer is useful when email subscribers are important for your website, blog, ecommerce store, SaaS product, or personal brand. Instead of hiding the signup form in a small column, this footer makes the newsletter area the main feature of the bottom section.

The example below uses a large newsletter signup panel, a short value-focused message, a clean email form, link columns, social links, and a simple legal row. It is designed to feel conversion-focused without making the footer look crowded.

  • Newsletter-focused footer design
  • Great for blogs, SaaS websites, ecommerce stores, and personal brands
  • Includes a large signup panel and supporting footer links
  • Uses a responsive layout that stacks cleanly on mobile
  • Clean HTML and CSS with no JavaScript required

HTML

<footer class="newsletter-footer">

  <div class="newsletter-footer-signup">
    <div class="newsletter-footer-signup-inner">

      <div>
        <div class="newsletter-footer-kicker">Weekly newsletter</div>
        <h3 class="newsletter-footer-title">Get better website ideas in your <span>inbox every week</span></h3>
        <p class="newsletter-footer-text">Use this footer when your blog, product, store, or service website needs a strong email signup area before the final navigation links.</p>
      </div>

      <div class="newsletter-footer-form-card">
        <h3>Join 12,000 readers</h3>
        <p>Receive practical CSS examples, layout ideas, and conversion-focused design tips.</p>

        <form class="newsletter-footer-form">
          <input type="email" placeholder="Enter your email address">
          <button type="submit">Subscribe Now</button>
        </form>

        <span class="newsletter-footer-note">No spam. Unsubscribe anytime.</span>
      </div>

    </div>
  </div>

  <div class="newsletter-footer-main">

    <div class="newsletter-footer-brand">

      <a class="newsletter-footer-logo" href="#">
        <span class="newsletter-footer-logo-mark">N</span>
        <span class="newsletter-footer-logo-text">
          <strong>NewsletterLab</strong>
          <span>Design notes for builders</span>
        </span>
      </a>

      <p>Practical website design tips, CSS layouts, and responsive UI examples for modern creators.</p>

      <div class="newsletter-footer-socials" aria-label="Social links">
        <a href="#">X</a>
        <a href="#">in</a>
        <a href="#">YT</a>
      </div>

    </div>

    <div class="newsletter-footer-column">
      <h3>Explore</h3>
      <ul>
        <li><a href="#">Latest Articles</a></li>
        <li><a href="#">CSS Examples</a></li>
        <li><a href="#">UI Patterns</a></li>
        <li><a href="#">Free Templates</a></li>
      </ul>
    </div>

    <div class="newsletter-footer-column">
      <h3>Topics</h3>
      <ul>
        <li><a href="#">Layouts</a></li>
        <li><a href="#">Forms</a></li>
        <li><a href="#">Navigation</a></li>
        <li><a href="#">Footers</a></li>
      </ul>
    </div>

    <div class="newsletter-footer-column">
      <h3>Company</h3>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Advertise</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Support</a></li>
      </ul>
    </div>

  </div>

  <div class="newsletter-footer-bottom">
    <p>© 2026 NewsletterLab. All rights reserved.</p>

    <div class="newsletter-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.newsletter-footer{
width:min(100%,1100px);
overflow:hidden;
border-radius:36px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 30px 90px rgba(15,23,42,.14);
}

.newsletter-footer-signup{
position:relative;
overflow:hidden;
padding:38px;
background:
radial-gradient(circle at 12% 0%,rgba(16,185,129,.24),transparent 32%),
radial-gradient(circle at 92% 12%,rgba(37,99,235,.20),transparent 30%),
linear-gradient(135deg,#052e2b,#0f172a);
}

.newsletter-footer-signup::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
linear-gradient(to bottom,transparent,rgba(2,6,23,.36));
pointer-events:none;
}

.newsletter-footer-signup-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
gap:28px;
align-items:center;
}

.newsletter-footer-kicker{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(16,185,129,.16);
border:1px solid rgba(110,231,183,.26);
color:#a7f3d0;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.newsletter-footer-title{
max-width:680px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(32px,5vw,58px);
line-height:1.04;
font-weight:950;
letter-spacing:-.07em;
}

.newsletter-footer-title span{
background:linear-gradient(90deg,#6ee7b7,#93c5fd,#c4b5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.newsletter-footer-text{
max-width:620px;
margin:16px 0 0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.newsletter-footer-form-card{
padding:22px;
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,.08);
}

.newsletter-footer-form-card h3{
margin:0 0 9px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.newsletter-footer-form-card p{
margin:0 0 18px;
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:600;
}

.newsletter-footer-form{
display:grid;
gap:10px;
}

.newsletter-footer-form input{
width:100%;
box-sizing:border-box;
border:1px solid rgba(255,255,255,.14);
outline:0;
padding:15px 15px;
border-radius:16px;
background:rgba(255,255,255,.94);
color:#0f172a;
font-size:14px;
font-weight:650;
box-shadow:0 14px 30px rgba(0,0,0,.14);
}

.newsletter-footer-form input::placeholder{
color:#64748b;
}

.newsletter-footer-form button{
border:0;
cursor:pointer;
width:100%;
padding:15px 18px;
border-radius:16px;
background:linear-gradient(135deg,#10b981,#2563eb);
color:#ffffff;
font-size:14px;
font-weight:950;
box-shadow:0 16px 34px rgba(16,185,129,.24);
transition:transform .2s ease,filter .2s ease;
}

.newsletter-footer-form button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
}

.newsletter-footer-note{
display:block;
margin-top:12px;
color:#94a3b8;
font-size:12px;
line-height:1.5;
font-weight:650;
}

.newsletter-footer-main{
display:grid;
grid-template-columns:1.2fr repeat(3,minmax(0,1fr));
gap:26px;
padding:34px 38px;
}

.newsletter-footer-brand{
display:flex;
flex-direction:column;
gap:14px;
}

.newsletter-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.newsletter-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:15px;
background:linear-gradient(135deg,#10b981,#2563eb);
color:#ffffff;
font-size:17px;
font-weight:950;
box-shadow:0 16px 32px rgba(16,185,129,.20);
}

.newsletter-footer-logo-text{
display:grid;
gap:3px;
}

.newsletter-footer-logo-text strong{
display:block;
color:#0f172a;
font-size:20px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.newsletter-footer-logo-text span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.newsletter-footer-brand p{
max-width:330px;
margin:0;
color:#475569;
font-size:14px;
line-height:1.7;
font-weight:600;
}

.newsletter-footer-socials{
display:flex;
flex-wrap:wrap;
gap:9px;
}

.newsletter-footer-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:12px;
font-weight:900;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease,color .2s ease;
}

.newsletter-footer-socials a:hover{
transform:translateY(-3px);
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.newsletter-footer-column h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.newsletter-footer-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.newsletter-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.newsletter-footer-column a{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.45;
font-weight:650;
text-decoration:none !important;
transition:color .2s ease,transform .2s ease;
}

.newsletter-footer-column a:hover{
transform:translateX(3px);
color:#059669 !important;
-webkit-text-fill-color:#059669 !important;
}

.newsletter-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 38px;
background:#f8fafc;
border-top:1px solid rgba(15,23,42,.08);
}

.newsletter-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.newsletter-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.newsletter-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.newsletter-footer-legal a:hover{
color:#059669 !important;
-webkit-text-fill-color:#059669 !important;
}

@media (max-width:980px){
.newsletter-footer-signup-inner,
.newsletter-footer-main{
grid-template-columns:1fr;
}

.newsletter-footer-brand p{
max-width:none;
}
}

@media (max-width:640px){
.newsletter-footer{
border-radius:28px;
}

.newsletter-footer-signup,
.newsletter-footer-main{
padding:26px;
}

.newsletter-footer-title{
font-size:34px;
}

.newsletter-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 26px;
}

.newsletter-footer-legal{
justify-content:flex-start;
}
}

This newsletter footer works best when the email signup is one of the most important actions on the page. The large signup area draws attention, while the link columns and legal row still make the footer useful for navigation and trust.

8. CTA Footer

A CTA footer turns the bottom of a website into a final conversion section. Instead of ending the page with only navigation links, this layout gives visitors a strong next step such as starting a project, requesting a quote, booking a call, downloading an app, or viewing pricing.

The example below uses a large call-to-action panel above a compact footer navigation area. It is ideal for landing pages, service websites, SaaS pages, agencies, portfolios, and product websites where the footer should help visitors take action.

  • Conversion-focused footer with a strong CTA area
  • Great for landing pages, agencies, SaaS websites, and service businesses
  • Includes CTA buttons, benefits, footer links, and legal links
  • Responsive design with stacked mobile layout
  • Pure HTML and CSS with no JavaScript required

HTML

<footer class="cta-footer">

  <div class="cta-footer-hero">

    <div class="cta-footer-hero-inner">

      <div>
        <div class="cta-footer-kicker">Final call to action</div>
        <h3 class="cta-footer-title">Ready to build a better <span>website footer?</span></h3>
        <p class="cta-footer-text">Use this CTA footer when the bottom of your landing page needs to guide visitors toward a clear next step instead of ending with only passive links.</p>
      </div>

      <div class="cta-footer-actions">
        <a class="cta-footer-button" href="#">Start a Project</a>
        <a class="cta-footer-button is-secondary" href="#">View Pricing</a>
      </div>

    </div>

    <div class="cta-footer-benefits">
      <div class="cta-footer-benefit">
        <strong>Fast setup</strong>
        <span>Clean HTML and CSS structure.</span>
      </div>
      <div class="cta-footer-benefit">
        <strong>Responsive</strong>
        <span>Stacks neatly on mobile screens.</span>
      </div>
      <div class="cta-footer-benefit">
        <strong>Conversion-ready</strong>
        <span>Designed around a clear next action.</span>
      </div>
    </div>

  </div>

  <div class="cta-footer-main">

    <div class="cta-footer-brand">
      <a class="cta-footer-logo" href="#">
        <span class="cta-footer-logo-mark">C</span>
        <span class="cta-footer-logo-text">
          <strong>CTAFooter</strong>
          <span>Conversion footer layout</span>
        </span>
      </a>

      <p>A CTA-focused footer helps visitors take action after they finish reading your page.</p>
    </div>

    <div class="cta-footer-column">
      <h3>Services</h3>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Landing Pages</a></li>
        <li><a href="#">UI Systems</a></li>
        <li><a href="#">Optimization</a></li>
      </ul>
    </div>

    <div class="cta-footer-column">
      <h3>Resources</h3>
      <ul>
        <li><a href="#">CSS Examples</a></li>
        <li><a href="#">Footer Guide</a></li>
        <li><a href="#">Design Tips</a></li>
        <li><a href="#">Case Studies</a></li>
      </ul>
    </div>

    <div class="cta-footer-column">
      <h3>Contact</h3>
      <ul>
        <li><span>hello@example.com</span></li>
        <li><span>+1 555 0155</span></li>
        <li><a href="#">Book a call</a></li>
        <li><a href="#">Support</a></li>
      </ul>
    </div>

  </div>

  <div class="cta-footer-bottom">
    <p>© 2026 CTAFooter. All rights reserved.</p>

    <div class="cta-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.cta-footer{
width:min(100%,1100px);
overflow:hidden;
border-radius:36px;
background:#111827;
border:1px solid rgba(15,23,42,.12);
box-shadow:0 30px 90px rgba(15,23,42,.22);
}

.cta-footer-hero{
position:relative;
overflow:hidden;
padding:42px;
background:
radial-gradient(circle at 12% 0%,rgba(249,115,22,.26),transparent 32%),
radial-gradient(circle at 92% 10%,rgba(124,58,237,.24),transparent 32%),
linear-gradient(135deg,#1e1b4b,#111827 56%,#7c2d12);
}

.cta-footer-hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
linear-gradient(to bottom,transparent,rgba(17,24,39,.58));
pointer-events:none;
}

.cta-footer-hero-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:28px;
align-items:center;
}

.cta-footer-kicker{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(249,115,22,.16);
border:1px solid rgba(251,146,60,.26);
color:#fed7aa;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.cta-footer-title{
max-width:760px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.07em;
}

.cta-footer-title span{
background:linear-gradient(90deg,#fb923c,#c4b5fd,#60a5fa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.cta-footer-text{
max-width:650px;
margin:16px 0 0;
color:#d1d5db;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.cta-footer-actions{
display:grid;
gap:12px;
min-width:230px;
}

.cta-footer-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:14px 18px;
border-radius:999px;
background:#ffffff;
color:#4c1d95 !important;
-webkit-text-fill-color:#4c1d95 !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(0,0,0,.22);
transition:transform .2s ease,box-shadow .2s ease;
}

.cta-footer-button:hover{
transform:translateY(-2px);
box-shadow:0 22px 50px rgba(0,0,0,.28);
}

.cta-footer-button.is-secondary{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
box-shadow:none;
}

.cta-footer-benefits{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-top:28px;
}

.cta-footer-benefit{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
}

.cta-footer-benefit strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:14px;
line-height:1.2;
font-weight:950;
}

.cta-footer-benefit span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.45;
font-weight:650;
}

.cta-footer-main{
display:grid;
grid-template-columns:1.1fr repeat(3,minmax(0,1fr));
gap:26px;
padding:34px 42px;
background:#ffffff;
}

.cta-footer-brand{
display:grid;
gap:14px;
}

.cta-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.cta-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:15px;
background:linear-gradient(135deg,#f97316,#7c3aed);
color:#ffffff;
font-size:17px;
font-weight:950;
box-shadow:0 16px 32px rgba(124,58,237,.20);
}

.cta-footer-logo-text{
display:grid;
gap:3px;
}

.cta-footer-logo-text strong{
display:block;
color:#111827;
font-size:20px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.cta-footer-logo-text span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.cta-footer-brand p{
max-width:330px;
margin:0;
color:#475569;
font-size:14px;
line-height:1.7;
font-weight:600;
}

.cta-footer-column h3{
margin:0 0 14px;
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.cta-footer-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.cta-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.cta-footer-column a,
.cta-footer-column span{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.45;
font-weight:650;
text-decoration:none !important;
}

.cta-footer-column a{
transition:color .2s ease,transform .2s ease;
}

.cta-footer-column a:hover{
transform:translateX(3px);
color:#7c3aed !important;
-webkit-text-fill-color:#7c3aed !important;
}

.cta-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 42px;
background:#f8fafc;
border-top:1px solid rgba(15,23,42,.08);
}

.cta-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.cta-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.cta-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.cta-footer-legal a:hover{
color:#7c3aed !important;
-webkit-text-fill-color:#7c3aed !important;
}

@media (max-width:980px){
.cta-footer-hero-inner{
grid-template-columns:1fr;
}

.cta-footer-actions{
display:flex;
flex-wrap:wrap;
min-width:0;
}

.cta-footer-main{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:720px){
.cta-footer{
border-radius:28px;
}

.cta-footer-hero,
.cta-footer-main{
padding:26px;
}

.cta-footer-title{
font-size:34px;
}

.cta-footer-actions{
display:grid;
width:100%;
}

.cta-footer-benefits{
grid-template-columns:1fr;
}

.cta-footer-main{
grid-template-columns:1fr;
}

.cta-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 26px;
}

.cta-footer-legal{
justify-content:flex-start;
}
}

This CTA footer is a strong option for pages where the footer should support conversions. It gives visitors a final clear action before the standard navigation and legal links, making it useful for landing pages, service websites, and product-focused pages.

9. Ecommerce Footer

An ecommerce footer needs to do more than show basic links. Online stores often use footers for product categories, customer service links, delivery information, returns, payment methods, trust badges, newsletter signup, and legal pages.

The example below is designed for ecommerce websites, WooCommerce stores, product catalogs, fashion shops, home decor stores, and online marketplaces. It combines shopping links, customer support, payment-style badges, a newsletter form, and a clean bottom bar.

  • Modern ecommerce footer layout for online stores
  • Includes shop categories, customer service links, and trust badges
  • Good for WooCommerce, product catalogs, and retail websites
  • Includes newsletter signup and payment-style visual badges
  • Responsive HTML and CSS footer section with no JavaScript

HTML

<footer class="ecommerce-footer">

  <div class="ecommerce-footer-promo">

    <div class="ecommerce-footer-promo-content">
      <div class="ecommerce-footer-promo-icon">%</div>
      <div>
        <h3>Get 10% off your first order</h3>
        <p>Join the store newsletter for product updates, seasonal offers, and exclusive discounts.</p>
      </div>
    </div>

    <a href="#">Shop Deals</a>

  </div>

  <div class="ecommerce-footer-main">

    <div class="ecommerce-footer-brand">

      <a class="ecommerce-footer-logo" href="#">
        <span class="ecommerce-footer-logo-mark">S</span>
        <span class="ecommerce-footer-logo-text">
          <strong>ShopBase</strong>
          <span>Modern online store</span>
        </span>
      </a>

      <p>A clean ecommerce footer helps shoppers find categories, support pages, delivery information, and trust signals before they buy.</p>

      <form class="ecommerce-footer-newsletter">
        <input type="email" placeholder="Email address">
        <button type="submit">Join</button>
      </form>

    </div>

    <div class="ecommerce-footer-column">
      <h3>Shop</h3>
      <ul>
        <li><a href="#">New Arrivals</a></li>
        <li><a href="#">Best Sellers</a></li>
        <li><a href="#">Gift Cards</a></li>
        <li><a href="#">Sale</a></li>
      </ul>
    </div>

    <div class="ecommerce-footer-column">
      <h3>Categories</h3>
      <ul>
        <li><a href="#">Home Decor</a></li>
        <li><a href="#">Outdoor</a></li>
        <li><a href="#">Accessories</a></li>
        <li><a href="#">Collections</a></li>
      </ul>
    </div>

    <div class="ecommerce-footer-column">
      <h3>Customer Care</h3>
      <ul>
        <li><a href="#">Shipping</a></li>
        <li><a href="#">Returns</a></li>
        <li><a href="#">Order Tracking</a></li>
        <li><a href="#">Help Center</a></li>
      </ul>
    </div>

    <div class="ecommerce-footer-column">
      <h3>Store Info</h3>
      <ul>
        <li><span>support@example.com</span></li>
        <li><span>Mon-Fri, 9:00-17:00</span></li>
        <li><a href="#">Contact Store</a></li>
        <li><a href="#">Size Guide</a></li>
      </ul>
    </div>

  </div>

  <div class="ecommerce-footer-trust">
    <div class="ecommerce-footer-trust-card">
      <strong>Secure checkout</strong>
      <span>Encrypted payment process.</span>
    </div>
    <div class="ecommerce-footer-trust-card">
      <strong>Fast delivery</strong>
      <span>Tracked shipping options.</span>
    </div>
    <div class="ecommerce-footer-trust-card">
      <strong>Easy returns</strong>
      <span>Simple 30-day return policy.</span>
    </div>
    <div class="ecommerce-footer-trust-card">
      <strong>Support</strong>
      <span>Helpful customer care team.</span>
    </div>
  </div>

  <div class="ecommerce-footer-bottom">

    <p>© 2026 ShopBase. All rights reserved.</p>

    <div class="ecommerce-footer-payments" aria-label="Payment methods">
      <span>VISA</span>
      <span>MC</span>
      <span>PAY</span>
    </div>

    <div class="ecommerce-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>

  </div>

</footer>

CSS

.ecommerce-footer{
width:min(100%,1120px);
overflow:hidden;
border-radius:36px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 30px 90px rgba(15,23,42,.14);
}

.ecommerce-footer-promo{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:center;
padding:28px 34px;
background:
radial-gradient(circle at 10% 0%,rgba(245,158,11,.24),transparent 34%),
linear-gradient(135deg,#111827,#1f2937);
}

.ecommerce-footer-promo-content{
display:flex;
align-items:center;
gap:16px;
}

.ecommerce-footer-promo-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#f59e0b,#f97316);
color:#ffffff;
font-size:20px;
font-weight:950;
box-shadow:0 16px 34px rgba(245,158,11,.24);
}

.ecommerce-footer-promo h3{
margin:0 0 5px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:24px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.ecommerce-footer-promo p{
margin:0;
color:#d1d5db;
font-size:14px;
line-height:1.55;
font-weight:650;
}

.ecommerce-footer-promo a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:12px 17px;
border-radius:999px;
background:#ffffff;
color:#92400e !important;
-webkit-text-fill-color:#92400e !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 16px 34px rgba(0,0,0,.18);
transition:transform .2s ease,box-shadow .2s ease;
}

.ecommerce-footer-promo a:hover{
transform:translateY(-2px);
box-shadow:0 20px 44px rgba(0,0,0,.24);
}

.ecommerce-footer-main{
display:grid;
grid-template-columns:1.15fr repeat(4,minmax(0,1fr));
gap:24px;
padding:36px 34px;
}

.ecommerce-footer-brand{
display:flex;
flex-direction:column;
gap:15px;
}

.ecommerce-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.ecommerce-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:16px;
background:#111827;
color:#ffffff;
font-size:17px;
font-weight:950;
box-shadow:0 16px 32px rgba(15,23,42,.18);
}

.ecommerce-footer-logo-text{
display:grid;
gap:3px;
}

.ecommerce-footer-logo-text strong{
display:block;
color:#111827;
font-size:21px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.ecommerce-footer-logo-text span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.ecommerce-footer-brand p{
max-width:320px;
margin:0;
color:#475569;
font-size:14px;
line-height:1.7;
font-weight:600;
}

.ecommerce-footer-newsletter{
display:flex;
gap:8px;
padding:6px;
border-radius:17px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.ecommerce-footer-newsletter input{
min-width:0;
flex:1;
border:0;
outline:0;
padding:12px 10px;
border-radius:13px;
background:transparent;
color:#111827;
font-size:13px;
font-weight:650;
}

.ecommerce-footer-newsletter input::placeholder{
color:#64748b;
}

.ecommerce-footer-newsletter button{
border:0;
cursor:pointer;
padding:12px 13px;
border-radius:13px;
background:#111827;
color:#ffffff;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.ecommerce-footer-column h3{
margin:0 0 14px;
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.ecommerce-footer-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.ecommerce-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.ecommerce-footer-column a,
.ecommerce-footer-column span{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.45;
font-weight:650;
text-decoration:none !important;
}

.ecommerce-footer-column a{
transition:color .2s ease,transform .2s ease;
}

.ecommerce-footer-column a:hover{
transform:translateX(3px);
color:#d97706 !important;
-webkit-text-fill-color:#d97706 !important;
}

.ecommerce-footer-trust{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
padding:0 34px 34px;
}

.ecommerce-footer-trust-card{
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.ecommerce-footer-trust-card strong{
display:block;
margin-bottom:5px;
color:#111827;
font-size:14px;
line-height:1.2;
font-weight:950;
}

.ecommerce-footer-trust-card span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:650;
}

.ecommerce-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 34px;
background:#111827;
}

.ecommerce-footer-bottom p{
margin:0;
color:#d1d5db;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.ecommerce-footer-payments{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:8px;
}

.ecommerce-footer-payments span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:46px;
height:28px;
padding:0 10px;
border-radius:9px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:11px;
font-weight:950;
letter-spacing:.04em;
}

.ecommerce-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.ecommerce-footer-legal a{
color:#d1d5db !important;
-webkit-text-fill-color:#d1d5db !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.ecommerce-footer-legal a:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

@media (max-width:1080px){
.ecommerce-footer-main{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.ecommerce-footer-brand{
grid-column:span 3;
}

.ecommerce-footer-brand p{
max-width:none;
}
}

@media (max-width:760px){
.ecommerce-footer{
border-radius:28px;
}

.ecommerce-footer-promo{
grid-template-columns:1fr;
padding:26px;
}

.ecommerce-footer-promo-content{
align-items:flex-start;
flex-direction:column;
}

.ecommerce-footer-main{
grid-template-columns:1fr;
padding:26px;
}

.ecommerce-footer-brand{
grid-column:auto;
}

.ecommerce-footer-newsletter{
flex-direction:column;
}

.ecommerce-footer-newsletter button{
width:100%;
}

.ecommerce-footer-trust{
grid-template-columns:1fr;
padding:0 26px 26px;
}

.ecommerce-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 26px;
}

.ecommerce-footer-payments,
.ecommerce-footer-legal{
justify-content:flex-start;
}
}

This ecommerce footer is useful for online stores that need more than basic navigation. It gives shoppers category links, support links, delivery and return signals, newsletter signup, payment-style badges, and legal links in one organized responsive footer section.

10. SaaS Footer

A SaaS footer should make it easy for users to find product information, pricing, documentation, integrations, support pages, company details, and legal links. SaaS websites often need more structure than a simple portfolio footer because visitors may be comparing features, checking trust signals, or looking for technical resources.

The example below uses a clean software-style footer with product navigation, resources, company links, a status pill, login/signup buttons, and a compact bottom bar. It is designed for SaaS products, AI tools, apps, dashboards, and B2B software websites.

  • Modern SaaS footer for software and app websites
  • Includes product links, resources, company links, and legal links
  • Good for AI tools, dashboards, apps, and B2B SaaS websites
  • Includes status badge and account action buttons
  • Responsive HTML and CSS with no JavaScript required

HTML

<footer class="saas-footer">

  <div class="saas-footer-top">

    <div class="saas-footer-brand-row">

      <a class="saas-footer-logo" href="#">
        <span class="saas-footer-logo-mark">S</span>
        <span class="saas-footer-logo-text">
          <strong>ScaleKit</strong>
          <span>AI workflow platform</span>
        </span>
      </a>

      <span class="saas-footer-status">All systems operational</span>

    </div>

    <div class="saas-footer-actions">
      <a class="saas-footer-login" href="#">Log in</a>
      <a class="saas-footer-signup" href="#">Start free trial</a>
    </div>

  </div>

  <div class="saas-footer-main">

    <div class="saas-footer-about">
      <p>ScaleKit helps teams automate workflows, organize customer data, and build smarter product experiences from one modern SaaS platform.</p>

      <div class="saas-footer-metrics">
        <div class="saas-footer-metric">
          <strong>99.9%</strong>
          <span>Uptime</span>
        </div>
        <div class="saas-footer-metric">
          <strong>24/7</strong>
          <span>Support</span>
        </div>
      </div>
    </div>

    <div class="saas-footer-column">
      <h3>Product</h3>
      <ul>
        <li><a href="#">Features</a></li>
        <li><a href="#">Automation</a></li>
        <li><a href="#">Integrations</a></li>
        <li><a href="#">Pricing</a></li>
      </ul>
    </div>

    <div class="saas-footer-column">
      <h3>Resources</h3>
      <ul>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">API Reference</a></li>
        <li><a href="#">Guides</a></li>
        <li><a href="#">Changelog</a></li>
      </ul>
    </div>

    <div class="saas-footer-column">
      <h3>Company</h3>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <div class="saas-footer-column">
      <h3>Trust</h3>
      <ul>
        <li><a href="#">Security</a></li>
        <li><a href="#">Status</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Compliance</a></li>
      </ul>
    </div>

  </div>

  <div class="saas-footer-bottom">
    <p>© 2026 ScaleKit. Built for modern software teams.</p>

    <div class="saas-footer-legal">
      <a href="#">Terms</a>
      <a href="#">Privacy</a>
      <a href="#">DPA</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.saas-footer{
width:min(100%,1120px);
overflow:hidden;
border-radius:36px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 30px 90px rgba(15,23,42,.14);
}

.saas-footer-top{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:22px;
align-items:center;
padding:34px 38px;
background:
radial-gradient(circle at 12% 0%,rgba(59,130,246,.18),transparent 34%),
radial-gradient(circle at 88% 0%,rgba(124,58,237,.16),transparent 32%),
linear-gradient(135deg,#0f172a,#111827);
}

.saas-footer-brand-row{
display:flex;
align-items:center;
gap:16px;
}

.saas-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.saas-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:17px;
background:linear-gradient(135deg,#3b82f6,#7c3aed);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 16px 34px rgba(59,130,246,.24);
}

.saas-footer-logo-text{
display:grid;
gap:3px;
}

.saas-footer-logo-text strong{
display:block;
color:#ffffff;
font-size:22px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.saas-footer-logo-text span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.saas-footer-status{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
padding:8px 11px;
border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(74,222,128,.24);
color:#bbf7d0;
font-size:12px;
font-weight:900;
line-height:1;
}

.saas-footer-status::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.saas-footer-actions{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:10px;
}

.saas-footer-actions a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:12px 16px;
border-radius:999px;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease;
}

.saas-footer-login{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.saas-footer-signup{
background:#ffffff;
color:#1d4ed8 !important;
-webkit-text-fill-color:#1d4ed8 !important;
box-shadow:0 16px 34px rgba(0,0,0,.18);
}

.saas-footer-actions a:hover{
transform:translateY(-2px);
}

.saas-footer-main{
display:grid;
grid-template-columns:1.25fr repeat(4,minmax(0,1fr));
gap:26px;
padding:38px;
}

.saas-footer-about{
display:flex;
flex-direction:column;
gap:18px;
}

.saas-footer-about p{
max-width:340px;
margin:0;
color:#475569;
font-size:15px;
line-height:1.75;
font-weight:600;
}

.saas-footer-metrics{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
max-width:330px;
}

.saas-footer-metric{
padding:14px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.saas-footer-metric strong{
display:block;
margin-bottom:4px;
color:#111827;
font-size:22px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
}

.saas-footer-metric span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:750;
}

.saas-footer-column h3{
margin:0 0 14px;
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.saas-footer-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.saas-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.saas-footer-column a,
.saas-footer-column span{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.45;
font-weight:650;
text-decoration:none !important;
}

.saas-footer-column a{
transition:color .2s ease,transform .2s ease;
}

.saas-footer-column a:hover{
transform:translateX(3px);
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

.saas-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 38px;
background:#f8fafc;
border-top:1px solid rgba(15,23,42,.08);
}

.saas-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.saas-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.saas-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
transition:color .2s ease;
}

.saas-footer-legal a:hover{
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

@media (max-width:1080px){
.saas-footer-main{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.saas-footer-about{
grid-column:span 3;
}

.saas-footer-about p,
.saas-footer-metrics{
max-width:none;
}
}

@media (max-width:760px){
.saas-footer{
border-radius:28px;
}

.saas-footer-top{
grid-template-columns:1fr;
padding:26px;
}

.saas-footer-brand-row{
align-items:flex-start;
flex-direction:column;
}

.saas-footer-actions{
justify-content:flex-start;
}

.saas-footer-actions a{
width:100%;
}

.saas-footer-main{
grid-template-columns:1fr;
padding:26px;
}

.saas-footer-about{
grid-column:auto;
}

.saas-footer-metrics{
grid-template-columns:1fr;
}

.saas-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 26px;
}

.saas-footer-legal{
justify-content:flex-start;
}
}

This SaaS footer is designed for software websites that need clear product navigation, support resources, trust links, and account actions. It gives users an organized way to continue exploring the product after they reach the bottom of the page.

11. Agency Footer

An agency footer should feel more creative than a standard website footer. Agencies, studios, and creative teams often use the footer as a final brand statement, combining a bold headline, project CTA, selected links, social proof, contact details, and a memorable visual layout.

The example below uses a large editorial footer with oversized typography, a diagonal link rail, service tags, a contact card, and a rotating-style circular CTA element. It is designed to feel more like a creative closing section than a traditional column-based footer.

  • Creative agency footer with bold editorial layout
  • Uses oversized typography and a diagonal visual rhythm
  • Includes services, contact details, social links, and project CTA
  • Great for studios, agencies, portfolios, and creative brands
  • Responsive HTML and CSS footer with no JavaScript required

HTML

<footer class="agency-footer">

  <div class="agency-footer-inner">

    <div class="agency-footer-topline">

      <a class="agency-footer-logo" href="#">
        <span class="agency-footer-logo-mark">A</span>
        <span class="agency-footer-logo-text">
          <strong>Arc Studio</strong>
          <span>Digital design agency</span>
        </span>
      </a>

      <span class="agency-footer-status">Open for Q2 projects</span>

    </div>

    <div class="agency-footer-hero">

      <h3 class="agency-footer-title">Let’s shape your next <span>digital move.</span></h3>

      <div class="agency-footer-orbit">
        <a href="#">Start<br>Project</a>
      </div>

    </div>

    <div class="agency-footer-content">

      <div class="agency-footer-left">

        <div class="agency-footer-intro">
          <p>We design brand systems, landing pages, ecommerce experiences, and custom website interfaces for ambitious companies that want to look sharper online.</p>
        </div>

        <div class="agency-footer-tags">
          <span>Branding</span>
          <span>Web Design</span>
          <span>UI Systems</span>
          <span>Conversion</span>
        </div>

        <div class="agency-footer-contact">
          <h3>Contact the studio</h3>

          <ul class="agency-footer-contact-list">
            <li><a href="#"><small>Email</small> hello@example.com</a></li>
            <li><a href="#"><small>Book</small> Schedule a call</a></li>
            <li><span><small>Location</small> Tallinn / Remote</span></li>
          </ul>
        </div>

      </div>

      <div class="agency-footer-links">

        <a class="agency-footer-link-card" href="#">
          <strong>Selected Work</strong>
          <span>View →</span>
        </a>

        <a class="agency-footer-link-card" href="#">
          <strong>Services</strong>
          <span>Explore →</span>
        </a>

        <a class="agency-footer-link-card" href="#">
          <strong>Process</strong>
          <span>Learn →</span>
        </a>

        <a class="agency-footer-link-card" href="#">
          <strong>Pricing</strong>
          <span>Start →</span>
        </a>

      </div>

    </div>

    <div class="agency-footer-bottom">

      <p>© 2026 Arc Studio. Creative website design and digital systems.</p>

      <div class="agency-footer-social">
        <a href="#">Instagram</a>
        <a href="#">Dribbble</a>
        <a href="#">LinkedIn</a>
      </div>

    </div>

  </div>

</footer>

CSS

.agency-footer{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:38px;
background:#111111;
color:#ffffff;
box-shadow:0 34px 100px rgba(17,17,17,.32);
}

.agency-footer::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 12% 12%,rgba(244,63,94,.32),transparent 32%),
radial-gradient(circle at 86% 20%,rgba(250,204,21,.18),transparent 28%),
radial-gradient(circle at 60% 100%,rgba(255,255,255,.08),transparent 34%);
pointer-events:none;
}

.agency-footer::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.06),transparent 40%),
repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 18px);
pointer-events:none;
}

.agency-footer-inner{
position:relative;
z-index:2;
padding:38px;
}

.agency-footer-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:54px;
}

.agency-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
color:#ffffff;
}

.agency-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:18px;
background:#ffffff;
color:#111111;
font-size:18px;
font-weight:950;
letter-spacing:-.04em;
}

.agency-footer-logo-text{
display:grid;
gap:3px;
}

.agency-footer-logo-text strong{
display:block;
color:#ffffff;
font-size:21px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.agency-footer-logo-text span{
display:block;
color:#d4d4d4;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.agency-footer-status{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#fef3c7;
font-size:12px;
font-weight:900;
line-height:1;
text-transform:uppercase;
letter-spacing:.08em;
}

.agency-footer-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#facc15;
box-shadow:0 0 0 4px rgba(250,204,21,.12);
}

.agency-footer-hero{
display:grid;
grid-template-columns:minmax(0,1fr) 220px;
gap:32px;
align-items:end;
margin-bottom:42px;
}

.agency-footer-title{
margin:0;
max-width:820px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(48px,8vw,112px);
line-height:.88;
font-weight:950;
letter-spacing:-.095em;
}

.agency-footer-title span{
display:block;
color:#facc15 !important;
-webkit-text-fill-color:#facc15 !important;
}

.agency-footer-orbit{
position:relative;
display:grid;
place-items:center;
width:190px;
height:190px;
justify-self:end;
border-radius:50%;
background:
radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.agency-footer-orbit::before{
content:"Start Project • Start Project •";
position:absolute;
inset:15px;
display:grid;
place-items:center;
border:1px dashed rgba(255,255,255,.26);
border-radius:50%;
color:#fef3c7;
font-size:11px;
font-weight:950;
letter-spacing:.1em;
text-align:center;
text-transform:uppercase;
}

.agency-footer-orbit a{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:94px;
height:94px;
border-radius:50%;
background:#f43f5e;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1.15;
text-align:center;
text-decoration:none !important;
box-shadow:0 18px 40px rgba(244,63,94,.36);
transition:transform .22s ease,box-shadow .22s ease;
}

.agency-footer-orbit a:hover{
transform:scale(1.06);
box-shadow:0 24px 54px rgba(244,63,94,.46);
}

.agency-footer-content{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:22px;
align-items:stretch;
}

.agency-footer-left{
display:grid;
gap:18px;
}

.agency-footer-intro{
padding:24px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
}

.agency-footer-intro p{
margin:0;
color:#e5e5e5;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.agency-footer-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.agency-footer-tags span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 12px;
border-radius:999px;
background:rgba(250,204,21,.12);
border:1px solid rgba(250,204,21,.20);
color:#fef3c7;
font-size:12px;
font-weight:900;
line-height:1;
text-transform:uppercase;
letter-spacing:.06em;
}

.agency-footer-links{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.agency-footer-link-card{
position:relative;
min-height:132px;
padding:20px;
border-radius:26px;
background:#ffffff;
overflow:hidden;
text-decoration:none !important;
box-shadow:0 18px 50px rgba(0,0,0,.18);
transition:transform .22s ease,box-shadow .22s ease;
}

.agency-footer-link-card:hover{
transform:translateY(-5px) rotate(-1deg);
box-shadow:0 24px 64px rgba(0,0,0,.24);
}

.agency-footer-link-card:nth-child(even):hover{
transform:translateY(-5px) rotate(1deg);
}

.agency-footer-link-card strong{
position:relative;
z-index:2;
display:block;
max-width:150px;
color:#111111;
font-size:22px;
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
}

.agency-footer-link-card span{
position:absolute;
right:18px;
bottom:16px;
z-index:2;
color:#f43f5e;
font-size:13px;
font-weight:950;
}

.agency-footer-link-card::after{
content:"";
position:absolute;
right:-22px;
top:-22px;
width:88px;
height:88px;
border-radius:50%;
background:rgba(244,63,94,.14);
}

.agency-footer-contact{
padding:24px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
}

.agency-footer-contact h3{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:18px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
}

.agency-footer-contact-list{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.agency-footer-contact-list li{
margin:0;
padding:0;
list-style:none;
}

.agency-footer-contact-list a,
.agency-footer-contact-list span{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:13px 0;
border-bottom:1px solid rgba(255,255,255,.10);
color:#e5e5e5 !important;
-webkit-text-fill-color:#e5e5e5 !important;
font-size:14px;
font-weight:700;
text-decoration:none !important;
}

.agency-footer-contact-list small{
color:#a3a3a3;
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
}

.agency-footer-contact-list a:hover{
color:#fef3c7 !important;
-webkit-text-fill-color:#fef3c7 !important;
}

.agency-footer-bottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:30px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.12);
}

.agency-footer-bottom p{
margin:0;
color:#a3a3a3;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.agency-footer-social{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.agency-footer-social a{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:900;
text-decoration:none !important;
text-transform:uppercase;
letter-spacing:.05em;
}

.agency-footer-social a:hover{
color:#facc15 !important;
-webkit-text-fill-color:#facc15 !important;
}

@media (max-width:940px){
.agency-footer-hero{
grid-template-columns:1fr;
}

.agency-footer-orbit{
justify-self:start;
}

.agency-footer-content{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.agency-footer{
border-radius:28px;
}

.agency-footer-inner{
padding:26px;
}

.agency-footer-topline,
.agency-footer-bottom{
align-items:flex-start;
flex-direction:column;
}

.agency-footer-title{
font-size:52px;
}

.agency-footer-orbit{
width:160px;
height:160px;
}

.agency-footer-orbit a{
width:82px;
height:82px;
font-size:13px;
}

.agency-footer-links{
grid-template-columns:1fr;
}

.agency-footer-social{
justify-content:flex-start;
}
}

This agency footer is a strong option when the footer needs to feel like a creative brand statement. It avoids the standard column-only structure and uses oversized typography, service tags, card links, and a circular CTA to create a more memorable ending.

12. Portfolio Footer

A portfolio footer should help visitors understand who you are, what you do, and how to contact you quickly. For designers, developers, freelancers, photographers, writers, and personal brands, the footer can work like a small profile card at the end of the website.

The example below uses a personal profile-card footer with an availability badge, skill chips, selected links, contact buttons, and a soft animated-looking background effect created with CSS gradients. It is compact, personal, and different from a typical multi-column footer.

  • Personal portfolio footer with profile-card layout
  • Includes availability badge, skills, contact links, and social links
  • Great for freelancers, designers, developers, and personal brands
  • Uses layered CSS gradients and soft card effects
  • Responsive footer layout with no JavaScript required
JS

Jamie Stone

Independent designer and front-end developer building fast, polished websites for modern brands.

Available for freelance work
Email Me Book Call
X in Gh Dr
Portfolio Footer

Let’s create a website that feels sharp and memorable.

01 Selected Work 02 Services 03 About Me
UI Design Front-End WordPress Landing Pages CSS Systems Responsive Design

© 2026 Jamie Stone. Portfolio and freelance design work.

Privacy Resume Contact

HTML

<footer class="portfolio-footer">

  <div class="portfolio-footer-inner">

    <div class="portfolio-footer-profile-card">

      <div class="portfolio-footer-profile-top">
        <div class="portfolio-footer-avatar">JS</div>
        <h3 class="portfolio-footer-name">Jamie Stone</h3>
        <p class="portfolio-footer-role">Independent designer and front-end developer building fast, polished websites for modern brands.</p>
        <span class="portfolio-footer-availability">Available for freelance work</span>
      </div>

      <div class="portfolio-footer-profile-bottom">

        <div class="portfolio-footer-contact-buttons">
          <a href="#">Email Me</a>
          <a href="#">Book Call</a>
        </div>

        <div class="portfolio-footer-socials" aria-label="Social links">
          <a href="#">X</a>
          <a href="#">in</a>
          <a href="#">Gh</a>
          <a href="#">Dr</a>
        </div>

      </div>

    </div>

    <div class="portfolio-footer-content">

      <div class="portfolio-footer-statement">
        <div class="portfolio-footer-kicker">Portfolio Footer</div>
        <h3 class="portfolio-footer-title">Let’s create a website that feels <span>sharp and memorable.</span></h3>
      </div>

      <div class="portfolio-footer-links-grid">

        <a class="portfolio-footer-mini-card" href="#">
          <small>01</small>
          <strong>Selected Work</strong>
        </a>

        <a class="portfolio-footer-mini-card" href="#">
          <small>02</small>
          <strong>Services</strong>
        </a>

        <a class="portfolio-footer-mini-card" href="#">
          <small>03</small>
          <strong>About Me</strong>
        </a>

      </div>

      <div class="portfolio-footer-skills">
        <span>UI Design</span>
        <span>Front-End</span>
        <span>WordPress</span>
        <span>Landing Pages</span>
        <span>CSS Systems</span>
        <span>Responsive Design</span>
      </div>

    </div>

  </div>

  <div class="portfolio-footer-bottom">
    <p>© 2026 Jamie Stone. Portfolio and freelance design work.</p>

    <div class="portfolio-footer-bottom-links">
      <a href="#">Privacy</a>
      <a href="#">Resume</a>
      <a href="#">Contact</a>
    </div>
  </div>

</footer>

CSS

.portfolio-footer{
position:relative;
width:min(100%,1060px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.portfolio-footer::before{
content:"";
position:absolute;
inset:-160px;
background:
radial-gradient(circle at 12% 16%,rgba(14,165,233,.24),transparent 30%),
radial-gradient(circle at 86% 24%,rgba(236,72,153,.20),transparent 32%),
radial-gradient(circle at 50% 100%,rgba(99,102,241,.16),transparent 34%);
pointer-events:none;
}

.portfolio-footer-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:360px minmax(0,1fr);
gap:22px;
padding:24px;
}

.portfolio-footer-profile-card{
position:relative;
overflow:hidden;
padding:26px;
border-radius:30px;
background:#0f172a;
color:#ffffff;
min-height:430px;
display:flex;
flex-direction:column;
justify-content:space-between;
box-shadow:0 22px 70px rgba(15,23,42,.28);
}

.portfolio-footer-profile-card::before{
content:"";
position:absolute;
inset:-90px;
background:
radial-gradient(circle at 20% 0%,rgba(14,165,233,.34),transparent 34%),
radial-gradient(circle at 100% 20%,rgba(236,72,153,.26),transparent 32%),
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%);
pointer-events:none;
}

.portfolio-footer-profile-top{
position:relative;
z-index:2;
}

.portfolio-footer-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:74px;
height:74px;
margin-bottom:20px;
border-radius:26px;
background:linear-gradient(135deg,#0ea5e9,#ec4899);
color:#ffffff;
font-size:24px;
font-weight:950;
letter-spacing:-.04em;
box-shadow:0 18px 40px rgba(14,165,233,.30);
}

.portfolio-footer-name{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:34px;
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.portfolio-footer-role{
margin:0;
color:#cbd5e1;
font-size:15px;
line-height:1.6;
font-weight:650;
}

.portfolio-footer-availability{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
margin-top:20px;
padding:9px 12px;
border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(74,222,128,.22);
color:#bbf7d0;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.07em;
}

.portfolio-footer-availability::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.portfolio-footer-profile-bottom{
position:relative;
z-index:2;
display:grid;
gap:14px;
}

.portfolio-footer-contact-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.portfolio-footer-contact-buttons a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:12px 14px;
border-radius:16px;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease;
}

.portfolio-footer-contact-buttons a:first-child{
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
}

.portfolio-footer-contact-buttons a:last-child{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.portfolio-footer-contact-buttons a:hover{
transform:translateY(-2px);
}

.portfolio-footer-socials{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.portfolio-footer-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:900;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease;
}

.portfolio-footer-socials a:hover{
transform:translateY(-3px);
background:rgba(255,255,255,.16);
}

.portfolio-footer-content{
display:grid;
grid-template-rows:auto 1fr auto;
gap:18px;
}

.portfolio-footer-statement{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.78);
border:1px solid rgba(15,23,42,.09);
box-shadow:0 18px 54px rgba(15,23,42,.08);
backdrop-filter:blur(14px);
}

.portfolio-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 11px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.portfolio-footer-title{
margin:0;
max-width:720px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:clamp(34px,5vw,64px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
}

.portfolio-footer-title span{
background:linear-gradient(135deg,#0ea5e9,#ec4899);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.portfolio-footer-links-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.portfolio-footer-mini-card{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:138px;
padding:20px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 16px 42px rgba(15,23,42,.08);
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.portfolio-footer-mini-card:hover{
transform:translateY(-5px);
border-color:rgba(14,165,233,.28);
box-shadow:0 22px 56px rgba(15,23,42,.12);
}

.portfolio-footer-mini-card small{
display:block;
color:#64748b;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.portfolio-footer-mini-card strong{
display:block;
margin-top:18px;
color:#0f172a;
font-size:21px;
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
}

.portfolio-footer-skills{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:22px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 16px 42px rgba(15,23,42,.07);
}

.portfolio-footer-skills span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 11px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#334155;
font-size:12px;
font-weight:900;
line-height:1;
}

.portfolio-footer-bottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:0 24px 24px;
}

.portfolio-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.portfolio-footer-bottom-links{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.portfolio-footer-bottom-links a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.portfolio-footer-bottom-links a:hover{
color:#0ea5e9 !important;
-webkit-text-fill-color:#0ea5e9 !important;
}

@media (max-width:980px){
.portfolio-footer-inner{
grid-template-columns:1fr;
}

.portfolio-footer-profile-card{
min-height:auto;
gap:42px;
}
}

@media (max-width:640px){
.portfolio-footer{
border-radius:28px;
}

.portfolio-footer-inner{
padding:14px;
}

.portfolio-footer-profile-card,
.portfolio-footer-statement{
padding:22px;
border-radius:24px;
}

.portfolio-footer-title{
font-size:36px;
}

.portfolio-footer-contact-buttons{
grid-template-columns:1fr;
}

.portfolio-footer-links-grid{
grid-template-columns:1fr;
}

.portfolio-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:0 14px 18px;
}

.portfolio-footer-bottom-links{
justify-content:flex-start;
}
}

This portfolio footer is designed for personal websites where the footer should feel more human and direct. Instead of using many standard columns, it works like a compact profile section with a clear contact path, selected links, and skill tags.

13. Blog Footer

A blog footer should help readers continue exploring after they finish an article. Instead of only showing basic pages, a good blog footer can highlight categories, popular guides, newsletter signup, author information, social links, and related content areas.

The example below uses an editorial blog footer layout with a featured newsletter strip, a large “read next” card, category pills, popular article links, and a clean legal row. It works well for SEO blogs, magazines, tutorial websites, creator blogs, and content-heavy websites.

  • Editorial blog footer for content-heavy websites
  • Includes newsletter signup, read-next card, categories, and popular links
  • Great for SEO blogs, magazines, tutorials, and creator websites
  • Uses a different layout from standard multi-column footers
  • Responsive HTML and CSS footer with no JavaScript required

HTML

<footer class="blog-footer">

  <div class="blog-footer-newsletter">
    <div class="blog-footer-newsletter-inner">

      <div>
        <div class="blog-footer-kicker">From the journal</div>
        <h3 class="blog-footer-title">Get new guides before they hit the <span>front page</span></h3>
      </div>

      <form class="blog-footer-form">
        <input type="email" placeholder="Email address">
        <button type="submit">Join the List</button>
      </form>

    </div>
  </div>

  <div class="blog-footer-main">

    <article class="blog-footer-featured">
      <div class="blog-footer-featured-content">

        <span class="blog-footer-featured-label">Read next</span>

        <h3>Designing better website sections with clean HTML and CSS</h3>

        <div class="blog-footer-featured-bottom">
          <p>A practical guide to building reusable layouts, cards, forms, navigation blocks, and footer sections for modern websites.</p>
          <a href="#">Read Guide</a>
        </div>

      </div>
    </article>

    <div class="blog-footer-sidebar">

      <div class="blog-footer-card">
        <h3>Browse Categories</h3>

        <div class="blog-footer-categories">
          <a href="#">CSS</a>
          <a href="#">Layouts</a>
          <a href="#">WordPress</a>
          <a href="#">UI Design</a>
          <a href="#">SEO</a>
          <a href="#">Frontend</a>
        </div>
      </div>

      <div class="blog-footer-card">
        <h3>Popular Articles</h3>

        <ul class="blog-footer-popular">
          <li>
            <a href="#">
              <span>1</span>
              <div>
                <strong>Modern CSS layouts for responsive websites</strong>
                <small>12 min read</small>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <span>2</span>
              <div>
                <strong>How to build better landing page sections</strong>
                <small>9 min read</small>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <span>3</span>
              <div>
                <strong>HTML and CSS patterns every beginner should know</strong>
                <small>15 min read</small>
              </div>
            </a>
          </li>
        </ul>
      </div>

    </div>

  </div>

  <div class="blog-footer-bottom">

    <div class="blog-footer-brandline">
      <span class="blog-footer-logo-mark">B</span>
      <p>© 2026 BlogCraft. Practical guides for designers, developers, and website builders.</p>
    </div>

    <div class="blog-footer-links">
      <a href="#">About</a>
      <a href="#">Advertise</a>
      <a href="#">Privacy</a>
      <a href="#">Contact</a>
    </div>

  </div>

</footer>

CSS

.blog-footer{
width:min(100%,1120px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.blog-footer-newsletter{
position:relative;
overflow:hidden;
padding:34px;
background:
radial-gradient(circle at 12% 0%,rgba(245,158,11,.26),transparent 32%),
radial-gradient(circle at 90% 10%,rgba(79,70,229,.24),transparent 32%),
linear-gradient(135deg,#111827,#312e81);
}

.blog-footer-newsletter::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 44%),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 24px);
pointer-events:none;
}

.blog-footer-newsletter-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);
gap:28px;
align-items:end;
}

.blog-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(245,158,11,.16);
border:1px solid rgba(251,191,36,.28);
color:#fde68a;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.blog-footer-title{
max-width:760px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.07em;
}

.blog-footer-title span{
background:linear-gradient(90deg,#fbbf24,#c4b5fd,#93c5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.blog-footer-form{
display:grid;
gap:10px;
padding:8px;
border-radius:22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}

.blog-footer-form input{
width:100%;
box-sizing:border-box;
border:0;
outline:0;
padding:15px 15px;
border-radius:16px;
background:#ffffff;
color:#111827;
font-size:14px;
font-weight:650;
}

.blog-footer-form input::placeholder{
color:#64748b;
}

.blog-footer-form button{
border:0;
cursor:pointer;
width:100%;
padding:15px 18px;
border-radius:16px;
background:linear-gradient(135deg,#f59e0b,#4f46e5);
color:#ffffff;
font-size:14px;
font-weight:950;
box-shadow:0 16px 34px rgba(79,70,229,.25);
transition:transform .2s ease,filter .2s ease;
}

.blog-footer-form button:hover{
transform:translateY(-2px);
filter:saturate(1.08);
}

.blog-footer-main{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:26px;
padding:34px;
}

.blog-footer-featured{
position:relative;
overflow:hidden;
min-height:300px;
padding:28px;
border-radius:30px;
background:#111827;
color:#ffffff;
box-shadow:0 22px 70px rgba(15,23,42,.20);
}

.blog-footer-featured::before{
content:"";
position:absolute;
inset:-100px;
background:
radial-gradient(circle at 10% 10%,rgba(245,158,11,.26),transparent 32%),
radial-gradient(circle at 90% 15%,rgba(79,70,229,.30),transparent 34%);
pointer-events:none;
}

.blog-footer-featured-content{
position:relative;
z-index:2;
display:flex;
height:100%;
flex-direction:column;
justify-content:space-between;
gap:28px;
}

.blog-footer-featured-label{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
color:#fde68a;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}

.blog-footer-featured h3{
max-width:600px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(30px,4vw,52px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.blog-footer-featured-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
}

.blog-footer-featured-bottom p{
max-width:420px;
margin:0;
color:#cbd5e1;
font-size:15px;
line-height:1.65;
font-weight:650;
}

.blog-footer-featured-bottom a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:12px 16px;
border-radius:999px;
background:#ffffff;
color:#312e81 !important;
-webkit-text-fill-color:#312e81 !important;
font-size:14px;
font-weight:950;
text-decoration:none !important;
white-space:nowrap;
transition:transform .2s ease;
}

.blog-footer-featured-bottom a:hover{
transform:translateY(-2px);
}

.blog-footer-sidebar{
display:grid;
gap:16px;
}

.blog-footer-card{
padding:22px;
border-radius:26px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.blog-footer-card h3{
margin:0 0 14px;
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:16px;
line-height:1.2;
font-weight:950;
letter-spacing:-.02em;
}

.blog-footer-categories{
display:flex;
flex-wrap:wrap;
gap:9px;
}

.blog-footer-categories a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 11px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:12px;
font-weight:850;
line-height:1;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease,color .2s ease;
}

.blog-footer-categories a:hover{
transform:translateY(-2px);
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.blog-footer-popular{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.blog-footer-popular li{
margin:0;
padding:0;
list-style:none;
}

.blog-footer-popular a{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:12px;
align-items:start;
text-decoration:none !important;
}

.blog-footer-popular span{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:12px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#4f46e5;
font-size:13px;
font-weight:950;
}

.blog-footer-popular strong{
display:block;
color:#111827;
font-size:14px;
line-height:1.35;
font-weight:850;
letter-spacing:-.02em;
}

.blog-footer-popular small{
display:block;
margin-top:3px;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:700;
}

.blog-footer-bottom{
display:grid;
grid-template-columns:1fr auto;
gap:20px;
align-items:center;
padding:22px 34px;
background:#f8fafc;
border-top:1px solid rgba(15,23,42,.08);
}

.blog-footer-brandline{
display:flex;
align-items:center;
gap:12px;
}

.blog-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:14px;
background:#111827;
color:#ffffff;
font-size:15px;
font-weight:950;
}

.blog-footer-brandline p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.blog-footer-links{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.blog-footer-links a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.blog-footer-links a:hover{
color:#4f46e5 !important;
-webkit-text-fill-color:#4f46e5 !important;
}

@media (max-width:940px){
.blog-footer-newsletter-inner,
.blog-footer-main{
grid-template-columns:1fr;
}

.blog-footer-featured-bottom{
align-items:flex-start;
flex-direction:column;
}

.blog-footer-bottom{
grid-template-columns:1fr;
}
.blog-footer-links{
justify-content:flex-start;
}
}

@media (max-width:640px){
.blog-footer{
border-radius:28px;
}

.blog-footer-newsletter,
.blog-footer-main{
padding:26px;
}

.blog-footer-title{
font-size:34px;
}

.blog-footer-featured,
.blog-footer-card{
border-radius:24px;
}

.blog-footer-featured{
padding:24px;
}

.blog-footer-featured h3{
font-size:32px;
}

.blog-footer-featured-bottom a{
width:100%;
}

.blog-footer-bottom{
padding:20px 26px;
}
}

This blog footer gives readers a clear next step after finishing a post. Instead of a generic footer, it highlights the newsletter, a recommended article, categories, and popular content so readers can continue exploring the website.

14. Corporate Footer

A corporate footer should feel structured, reliable, and easy to navigate. Larger companies, B2B websites, service providers, finance brands, legal firms, and enterprise websites often need a footer that includes company information, office details, departments, compliance links, investor links, and legal information.

The example below uses a corporate dashboard-style layout with a company information panel, office cards, department links, compliance links, and a structured legal bottom row. It is more formal than a creative agency footer and is built for clarity and trust.

  • Professional corporate footer for larger business websites
  • Includes office cards, department links, compliance links, and legal information
  • Good for B2B, enterprise, finance, consulting, and service companies
  • Uses structured panels instead of a decorative landing page layout
  • Responsive HTML and CSS footer with no JavaScript required

HTML

<footer class="corporate-footer">

  <div class="corporate-footer-header">

    <div class="corporate-footer-brand">
      <span class="corporate-footer-mark">C</span>
      <span class="corporate-footer-brand-text">
        <strong>CoreBridge Group</strong>
        <span>Enterprise consulting and operations</span>
      </span>
    </div>

    <div class="corporate-footer-header-actions">
      <a class="corporate-footer-secondary" href="#">Investor Relations</a>
      <a class="corporate-footer-primary" href="#">Contact Sales</a>
    </div>

  </div>

  <div class="corporate-footer-main">

    <aside class="corporate-footer-info-panel">
      <h3>Built for long-term business growth</h3>
      <p>CoreBridge Group supports enterprise teams with strategy, digital operations, compliance workflows, and scalable business systems.</p>

      <ul class="corporate-footer-contact-list">
        <li>
          <small>Head Office</small>
          <span>100 Market Street, New York</span>
        </li>
        <li>
          <small>Email</small>
          <a href="#">contact@example.com</a>
        </li>
        <li>
          <small>Phone</small>
          <span>+1 555 0188</span>
        </li>
      </ul>

      <div class="corporate-footer-certificates">
        <span>ISO 27001</span>
        <span>SOC 2</span>
        <span>GDPR</span>
        <span>WCAG</span>
      </div>
    </aside>

    <div class="corporate-footer-content">

      <div class="corporate-footer-offices">
        <div class="corporate-footer-office-card">
          <h3>New York</h3>
          <p>Corporate headquarters and executive operations.</p>
        </div>
        <div class="corporate-footer-office-card">
          <h3>London</h3>
          <p>European client services and consulting teams.</p>
        </div>
        <div class="corporate-footer-office-card">
          <h3>Singapore</h3>
          <p>APAC partnerships and enterprise support.</p>
        </div>
      </div>

      <div class="corporate-footer-link-panels">

        <div class="corporate-footer-column">
          <h3>Company</h3>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Leadership</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Newsroom</a></li>
          </ul>
        </div>

        <div class="corporate-footer-column">
          <h3>Solutions</h3>
          <ul>
            <li><a href="#">Consulting</a></li>
            <li><a href="#">Operations</a></li>
            <li><a href="#">Digital Systems</a></li>
            <li><a href="#">Risk Advisory</a></li>
          </ul>
        </div>

        <div class="corporate-footer-column">
          <h3>Resources</h3>
          <ul>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Case Studies</a></li>
            <li><a href="#">Insights</a></li>
            <li><a href="#">Events</a></li>
          </ul>
        </div>

        <div class="corporate-footer-column">
          <h3>Compliance</h3>
          <ul>
            <li><a href="#">Security</a></li>
            <li><a href="#">Privacy Center</a></li>
            <li><a href="#">Accessibility</a></li>
            <li><a href="#">Ethics Line</a></li>
          </ul>
        </div>

      </div>

      <div class="corporate-footer-alert">
        <p>Need enterprise support? Our corporate response team can help route your request.</p>
        <a href="#">Open Support Request</a>
      </div>

    </div>

  </div>

  <div class="corporate-footer-bottom">
    <p>© 2026 CoreBridge Group. All rights reserved.</p>

    <div class="corporate-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Compliance</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.corporate-footer{
width:min(100%,1120px);
overflow:hidden;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.corporate-footer-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:center;
padding:30px 34px;
background:#0f172a;
border-bottom:4px solid #1d4ed8;
}

.corporate-footer-brand{
display:flex;
align-items:center;
gap:14px;
}

.corporate-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:10px;
background:#ffffff;
color:#0f172a;
font-size:18px;
font-weight:950;
}

.corporate-footer-brand-text{
display:grid;
gap:3px;
}

.corporate-footer-brand-text strong{
display:block;
color:#ffffff;
font-size:22px;
line-height:1.1;
font-weight:950;
letter-spacing:-.03em;
}

.corporate-footer-brand-text span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.corporate-footer-header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:10px;
}

.corporate-footer-header-actions a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:12px 15px;
border-radius:10px;
font-size:13px;
font-weight:900;
line-height:1;
text-decoration:none !important;
}

.corporate-footer-primary{
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
}

.corporate-footer-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.corporate-footer-main{
display:grid;
grid-template-columns:330px minmax(0,1fr);
gap:24px;
padding:28px 34px 34px;
background:#f8fafc;
}

.corporate-footer-info-panel{
padding:24px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 16px 42px rgba(15,23,42,.07);
}

.corporate-footer-info-panel h3{
margin:0 0 12px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:20px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
}

.corporate-footer-info-panel p{
margin:0;
color:#475569;
font-size:14px;
line-height:1.7;
font-weight:600;
}

.corporate-footer-contact-list{
display:grid;
gap:11px;
margin:22px 0 0;
padding:0;
list-style:none;
}

.corporate-footer-contact-list li{
display:grid;
gap:4px;
margin:0;
padding:0;
list-style:none;
}

.corporate-footer-contact-list small{
color:#64748b;
font-size:11px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.corporate-footer-contact-list span,
.corporate-footer-contact-list a{
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:14px;
font-weight:800;
line-height:1.4;
text-decoration:none !important;
}

.corporate-footer-certificates{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:22px;
}

.corporate-footer-certificates span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:8px 10px;
border-radius:10px;
background:#eff6ff;
border:1px solid rgba(29,78,216,.12);
color:#1d4ed8;
font-size:12px;
font-weight:900;
line-height:1;
}

.corporate-footer-content{
display:grid;
gap:18px;
}

.corporate-footer-offices{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.corporate-footer-office-card{
padding:18px;
border-radius:18px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.corporate-footer-office-card h3{
margin:0 0 8px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:16px;
line-height:1.2;
font-weight:950;
}

.corporate-footer-office-card p{
margin:0;
color:#475569;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.corporate-footer-link-panels{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}

.corporate-footer-column{
padding:20px;
border-radius:18px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.corporate-footer-column h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:13px;
line-height:1.2;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.corporate-footer-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.corporate-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.corporate-footer-column a{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
transition:color .2s ease,transform .2s ease;
}

.corporate-footer-column a:hover{
transform:translateX(3px);
color:#1d4ed8 !important;
-webkit-text-fill-color:#1d4ed8 !important;
}

.corporate-footer-alert{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:18px 20px;
border-radius:18px;
background:#0f172a;
}

.corporate-footer-alert p{
margin:0;
color:#e5e7eb;
font-size:14px;
line-height:1.5;
font-weight:650;
}

.corporate-footer-alert a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:10px 14px;
border-radius:10px;
background:#1d4ed8;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:900;
text-decoration:none !important;
white-space:nowrap;
}

.corporate-footer-bottom{
display:grid;
grid-template-columns:1fr auto;
gap:20px;
align-items:center;
padding:20px 34px;
background:#ffffff;
border-top:1px solid rgba(15,23,42,.08);
}

.corporate-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.corporate-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.corporate-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.corporate-footer-legal a:hover{
color:#1d4ed8 !important;
-webkit-text-fill-color:#1d4ed8 !important;
}

@media (max-width:1080px){
.corporate-footer-main{
grid-template-columns:1fr;
}

.corporate-footer-link-panels{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:760px){
.corporate-footer{
border-radius:26px;
}

.corporate-footer-header{
grid-template-columns:1fr;
padding:26px;
}

.corporate-footer-header-actions{
justify-content:flex-start;
}

.corporate-footer-header-actions a{
width:100%;
}

.corporate-footer-main{
padding:24px;
}

.corporate-footer-offices,
.corporate-footer-link-panels,
.corporate-footer-certificates{
grid-template-columns:1fr;
}

.corporate-footer-alert{
align-items:flex-start;
flex-direction:column;
}

.corporate-footer-alert a{
width:100%;
}

.corporate-footer-bottom{
grid-template-columns:1fr;
padding:20px 24px;
}

.corporate-footer-legal{
justify-content:flex-start;
}
}

This corporate footer is useful for larger websites that need to show trust, structure, and business information clearly. The office cards, compliance links, department links, and support alert make the footer feel more professional and enterprise-ready.

15. Contact Footer

A contact footer is useful when visitors often reach the bottom of the page because they want to call, email, visit, request a quote, or get support. This type of footer works well for local businesses, service companies, agencies, clinics, consultants, restaurants, real estate websites, and B2B service providers.

The example below uses a contact-first layout with a large contact card, opening hours, quick action buttons, a map-style placeholder, and essential footer links. It is intentionally different from a standard link-column footer because contact information is the main focus.

  • Contact-focused footer for service and local business websites
  • Includes phone, email, address, opening hours, and quick actions
  • Uses a map-style visual panel built with CSS
  • Good for businesses where contact information is important
  • Responsive HTML and CSS footer with no JavaScript required

HTML

<footer class="contact-footer">

  <div class="contact-footer-main">

    <section class="contact-footer-info">
      <div class="contact-footer-info-inner">

        <div>
          <div class="contact-footer-kicker">Contact Footer</div>
          <h3 class="contact-footer-title">Need help? <span>Reach us today.</span></h3>
          <p class="contact-footer-text">Use this footer when contact information is one of the most important parts of the website experience.</p>
        </div>

        <div class="contact-footer-actions">

          <a class="contact-footer-action" href="#">
            <span class="contact-footer-action-icon">☎</span>
            <span>
              <strong>Call us</strong>
              <span>+1 555 0148</span>
            </span>
          </a>

          <a class="contact-footer-action" href="#">
            <span class="contact-footer-action-icon">@</span>
            <span>
              <strong>Email</strong>
              <span>hello@example.com</span>
            </span>
          </a>

        </div>

        <div class="contact-footer-details">

          <div class="contact-footer-detail-box">
            <small>Opening hours</small>
            <span>Mon-Fri<br>9:00-17:00</span>
          </div>

          <div class="contact-footer-detail-box">
            <small>Address</small>
            <span>120 Market Street<br>New York, NY</span>
          </div>

        </div>

      </div>
    </section>

    <section class="contact-footer-map-panel">

      <div class="contact-footer-map">

        <div class="contact-footer-pin-card">
          <div class="contact-footer-pin">⌖</div>
          <h3>Visit our office</h3>
          <p>Book a meeting or send us a message before stopping by.</p>
          <a href="#">Get Directions</a>
        </div>

      </div>

    </section>

  </div>

  <div class="contact-footer-bottom">
    <p>© 2026 ContactWorks. Local business footer layout.</p>

    <div class="contact-footer-links">
      <a href="#">Services</a>
      <a href="#">Support</a>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
    </div>
  </div>

</footer>

CSS

.contact-footer{
width:min(100%,1120px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.contact-footer-main{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:0;
min-height:520px;
}

.contact-footer-info{
position:relative;
overflow:hidden;
padding:38px;
background:
radial-gradient(circle at 10% 8%,rgba(20,184,166,.26),transparent 34%),
radial-gradient(circle at 90% 20%,rgba(249,115,22,.20),transparent 32%),
linear-gradient(135deg,#042f2e,#111827);
color:#ffffff;
}

.contact-footer-info::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
repeating-linear-gradient(0deg,rgba(255,255,255,.032) 0 1px,transparent 1px 22px);
pointer-events:none;
}

.contact-footer-info-inner{
position:relative;
z-index:2;
display:flex;
height:100%;
flex-direction:column;
justify-content:space-between;
gap:34px;
}

.contact-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(20,184,166,.16);
border:1px solid rgba(94,234,212,.24);
color:#99f6e4;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.contact-footer-title{
max-width:620px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,66px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
}

.contact-footer-title span{
color:#fdba74 !important;
-webkit-text-fill-color:#fdba74 !important;
}

.contact-footer-text{
max-width:540px;
margin:16px 0 0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.contact-footer-actions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.contact-footer-action{
display:flex;
align-items:flex-start;
gap:13px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
text-decoration:none !important;
transition:transform .2s ease,background .2s ease;
}

.contact-footer-action:hover{
transform:translateY(-3px);
background:rgba(255,255,255,.13);
}

.contact-footer-action-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
flex:0 0 38px;
border-radius:14px;
background:rgba(255,255,255,.14);
color:#ffffff;
font-size:16px;
font-weight:950;
}

.contact-footer-action strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:14px;
line-height:1.2;
font-weight:950;
}

.contact-footer-action span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.45;
font-weight:650;
}

.contact-footer-details{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.contact-footer-detail-box{
padding:16px;
border-radius:20px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
}

.contact-footer-detail-box small{
display:block;
margin-bottom:7px;
color:#0f766e;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.contact-footer-detail-box span{
display:block;
color:#111827;
font-size:14px;
line-height:1.5;
font-weight:800;
}

.contact-footer-map-panel{
position:relative;
overflow:hidden;
padding:28px;
background:#ecfeff;
}

.contact-footer-map{
position:relative;
height:100%;
min-height:520px;
overflow:hidden;
border-radius:30px;
background:
linear-gradient(90deg,rgba(15,23,42,.07) 1px,transparent 1px),
linear-gradient(0deg,rgba(15,23,42,.07) 1px,transparent 1px),
linear-gradient(135deg,#ccfbf1,#ffffff 48%,#ffedd5);
background-size:42px 42px,42px 42px,auto;
border:1px solid rgba(15,23,42,.10);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.contact-footer-map::before{
content:"";
position:absolute;
left:-10%;
top:46%;
width:120%;
height:46px;
background:rgba(15,23,42,.08);
transform:rotate(-16deg);
border-radius:999px;
}

.contact-footer-map::after{
content:"";
position:absolute;
left:38%;
top:-10%;
width:52px;
height:120%;
background:rgba(20,184,166,.16);
transform:rotate(18deg);
border-radius:999px;
}

.contact-footer-pin-card{
position:absolute;
left:50%;
top:50%;
z-index:3;
width:min(300px,calc(100% - 36px));
padding:20px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
box-shadow:0 24px 70px rgba(15,23,42,.18);
transform:translate(-50%,-50%);
}

.contact-footer-pin{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
margin-bottom:14px;
border-radius:18px;
background:linear-gradient(135deg,#14b8a6,#f97316);
color:#ffffff;
font-size:22px;
font-weight:950;
box-shadow:0 16px 34px rgba(20,184,166,.25);
}

.contact-footer-pin-card h3{
margin:0 0 8px;
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.contact-footer-pin-card p{
margin:0 0 16px;
color:#475569;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.contact-footer-pin-card a{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:42px;
border-radius:14px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
text-decoration:none !important;
}

.contact-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 28px;
background:#ffffff;
border-top:1px solid rgba(15,23,42,.08);
}

.contact-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.contact-footer-links{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.contact-footer-links a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.contact-footer-links a:hover{
color:#0f766e !important;
-webkit-text-fill-color:#0f766e !important;
}

@media (max-width:980px){
.contact-footer-main{
grid-template-columns:1fr;
}

.contact-footer-map{
min-height:420px;
}
}

@media (max-width:640px){
.contact-footer{
border-radius:28px;
}

.contact-footer-info,
.contact-footer-map-panel{
padding:24px;
}

.contact-footer-title{
font-size:38px;
}

.contact-footer-actions,
.contact-footer-details{
grid-template-columns:1fr;
}

.contact-footer-map{
min-height:420px;
border-radius:24px;
}

.contact-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 24px;
}

.contact-footer-links{
justify-content:flex-start;
}
}

This contact footer is ideal for websites where the visitor’s next step is likely to be a phone call, email, visit, or booking request. The map-style panel and quick contact cards make the footer more useful than a simple set of links.

16. Footer with Social Media Links

A footer with social media links is useful for brands, creators, agencies, restaurants, communities, events, and personal websites where social channels are important. Instead of hiding small icons in a corner, this footer makes social links the main visual element.

The example below uses a social-first footer with large horizontal social cards, hover movement, bold typography, a short brand statement, and a compact legal row. It feels more interactive and modern than a basic footer with tiny social icons.

  • Social-first footer layout with large social link cards
  • Great for creators, agencies, communities, restaurants, and brands
  • Uses hover movement and bold link panels
  • Includes a brand statement, social links, and legal links
  • Responsive HTML and CSS footer with no JavaScript required

HTML

<footer class="social-footer">

  <div class="social-footer-inner">

    <div class="social-footer-top">

      <div>
        <div class="social-footer-kicker">Follow the brand</div>
        <h3 class="social-footer-title">Find us where the <span>conversation happens.</span></h3>
      </div>

      <a class="social-footer-logo" href="#">
        <span class="social-footer-logo-mark">S</span>
        <span class="social-footer-logo-text">
          <strong>SocialWave</strong>
          <span>Community-first brand</span>
        </span>
      </a>

    </div>

    <div class="social-footer-grid">

      <a class="social-footer-card" href="#">
        <span class="social-footer-card-top">
          <span class="social-footer-network">in</span>
          <span class="social-footer-arrow">↗</span>
        </span>
        <span class="social-footer-card-bottom">
          <strong>LinkedIn</strong>
          <span>Company updates and industry insights.</span>
        </span>
      </a>

      <a class="social-footer-card" href="#">
        <span class="social-footer-card-top">
          <span class="social-footer-network">IG</span>
          <span class="social-footer-arrow">↗</span>
        </span>
        <span class="social-footer-card-bottom">
          <strong>Instagram</strong>
          <span>Behind the scenes and visual stories.</span>
        </span>
      </a>

      <a class="social-footer-card" href="#">
        <span class="social-footer-card-top">
          <span class="social-footer-network">YT</span>
          <span class="social-footer-arrow">↗</span>
        </span>
        <span class="social-footer-card-bottom">
          <strong>YouTube</strong>
          <span>Tutorials, videos, and product demos.</span>
        </span>
      </a>

      <a class="social-footer-card" href="#">
        <span class="social-footer-card-top">
          <span class="social-footer-network">X</span>
          <span class="social-footer-arrow">↗</span>
        </span>
        <span class="social-footer-card-bottom">
          <strong>Updates</strong>
          <span>Short notes, launches, and quick ideas.</span>
        </span>
      </a>

    </div>

    <div class="social-footer-mid">
      <p>A social-first footer is useful when community, content, and conversation are part of your brand experience.</p>

      <div class="social-footer-mini-links">
        <a href="#">Newsletter</a>
        <a href="#">Press Kit</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <div class="social-footer-bottom">
      <p>© 2026 SocialWave. All rights reserved.</p>

      <div class="social-footer-legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Cookies</a>
      </div>
    </div>

  </div>

</footer>

CSS

.social-footer{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:38px;
background:#0f172a;
box-shadow:0 34px 100px rgba(15,23,42,.28);
}

.social-footer::before{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 12% 10%,rgba(236,72,153,.26),transparent 34%),
radial-gradient(circle at 88% 10%,rgba(6,182,212,.24),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(124,58,237,.20),transparent 36%);
pointer-events:none;
}

.social-footer-inner{
position:relative;
z-index:2;
padding:36px;
}

.social-footer-top{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:start;
margin-bottom:34px;
}

.social-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(236,72,153,.14);
border:1px solid rgba(244,114,182,.24);
color:#fbcfe8;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.social-footer-title{
max-width:780px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(42px,7vw,90px);
line-height:.9;
font-weight:950;
letter-spacing:-.085em;
}

.social-footer-title span{
background:linear-gradient(90deg,#f472b6,#67e8f9,#c4b5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.social-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
padding:12px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
text-decoration:none;
}

.social-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:17px;
font-weight:950;
}

.social-footer-logo-text{
display:grid;
gap:3px;
}

.social-footer-logo-text strong{
display:block;
color:#ffffff;
font-size:17px;
line-height:1.1;
font-weight:950;
letter-spacing:-.03em;
}

.social-footer-logo-text span{
display:block;
color:#cbd5e1;
font-size:12px;
line-height:1.2;
font-weight:700;
}

.social-footer-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:30px;
}

.social-footer-card{
position:relative;
overflow:hidden;
min-height:180px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:20px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
text-decoration:none !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
transition:transform .22s ease,background .22s ease,border-color .22s ease;
}

.social-footer-card::before{
content:"";
position:absolute;
right:-34px;
top:-34px;
width:110px;
height:110px;
border-radius:50%;
background:rgba(255,255,255,.12);
transition:transform .22s ease;
}

.social-footer-card:hover{
transform:translateY(-8px);
background:rgba(255,255,255,.13);
border-color:rgba(255,255,255,.24);
}

.social-footer-card:hover::before{
transform:scale(1.28);
}

.social-footer-card:nth-child(1){
background:linear-gradient(135deg,rgba(29,78,216,.56),rgba(255,255,255,.08));
}

.social-footer-card:nth-child(2){
background:linear-gradient(135deg,rgba(236,72,153,.56),rgba(255,255,255,.08));
}

.social-footer-card:nth-child(3){
background:linear-gradient(135deg,rgba(6,182,212,.50),rgba(255,255,255,.08));
}

.social-footer-card:nth-child(4){
background:linear-gradient(135deg,rgba(124,58,237,.56),rgba(255,255,255,.08));
}

.social-footer-card-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.social-footer-network{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:18px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.social-footer-arrow{
color:#ffffff;
font-size:24px;
font-weight:950;
line-height:1;
}

.social-footer-card-bottom{
position:relative;
z-index:2;
}

.social-footer-card strong{
display:block;
color:#ffffff;
font-size:24px;
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
}

.social-footer-card span{
display:block;
margin-top:7px;
color:#e5e7eb;
font-size:13px;
line-height:1.4;
font-weight:650;
}

.social-footer-mid{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:center;
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
}

.social-footer-mid p{
max-width:720px;
margin:0;
color:#d1d5db;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.social-footer-mini-links{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:10px;
}

.social-footer-mini-links a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:10px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:12px;
font-weight:900;
text-decoration:none !important;
}

.social-footer-mini-links a:hover{
background:rgba(255,255,255,.14);
}

.social-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:24px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.12);
}

.social-footer-bottom p{
margin:0;
color:#94a3b8;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.social-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.social-footer-legal a{
color:#cbd5e1 !important;
-webkit-text-fill-color:#cbd5e1 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.social-footer-legal a:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

@media (max-width:980px){
.social-footer-top,
.social-footer-mid{
grid-template-columns:1fr;
}

.social-footer-logo{
width:max-content;
}

.social-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.social-footer-mini-links{
justify-content:flex-start;
}
}

@media (max-width:640px){
.social-footer{
border-radius:28px;
}

.social-footer-inner{
padding:26px;
}

.social-footer-title{
font-size:48px;
}

.social-footer-grid{
grid-template-columns:1fr;
}

.social-footer-card{
min-height:150px;
}

.social-footer-bottom{
align-items:flex-start;
flex-direction:column;
}

.social-footer-legal{
justify-content:flex-start;
}
}

This social media footer is best when social channels are part of the brand experience. Large social link cards make the footer feel interactive and intentional, while the legal links and brand message keep the section practical.

17. Footer with App Download Buttons

A footer with app download buttons is useful for mobile apps, SaaS products, fitness apps, finance apps, delivery apps, productivity tools, and startup landing pages. Instead of using a basic link footer, this layout helps visitors download the app directly from the bottom of the page.

The example below uses a mobile app landing-page style footer with a large phone mockup, download buttons, feature highlights, QR-style block, and compact footer navigation. It is designed to feel different from a standard multi-column footer and works well when app installs are the main goal.

  • App-focused footer with large download buttons
  • Includes phone mockup, feature highlights, and QR-style block
  • Great for mobile apps, SaaS tools, startups, and product landing pages
  • Uses CSS-only mockup and button styling
  • Responsive HTML and CSS footer with no JavaScript required

HTML

<footer class="app-download-footer">

  <div class="app-download-footer-main">

    <div class="app-download-footer-content">

      <a class="app-download-footer-logo" href="#">
        <span class="app-download-footer-logo-mark">A</span>
        <span class="app-download-footer-logo-text">
          <strong>AppFlow</strong>
          <span>Productivity on mobile</span>
        </span>
      </a>

      <h3 class="app-download-footer-title">Take your workflow <span>anywhere.</span></h3>

      <p class="app-download-footer-text">Use this footer when the main goal is to guide visitors toward downloading your app from the final section of a landing page.</p>

      <div class="app-download-footer-buttons">
        <a class="app-download-footer-store" href="#">
          <span class="app-download-footer-store-icon">A</span>
          <span>
            <small>Download on the</small>
            <strong>App Store</strong>
          </span>
        </a>

        <a class="app-download-footer-store" href="#">
          <span class="app-download-footer-store-icon">G</span>
          <span>
            <small>Get it on</small>
            <strong>Google Play</strong>
          </span>
        </a>
      </div>

      <div class="app-download-footer-features">
        <div class="app-download-footer-feature">
          <strong>Fast sync</strong>
          <span>Keep your tasks updated.</span>
        </div>
        <div class="app-download-footer-feature">
          <strong>Offline mode</strong>
          <span>Work without connection.</span>
        </div>
        <div class="app-download-footer-feature">
          <strong>Smart alerts</strong>
          <span>Never miss important work.</span>
        </div>
      </div>

    </div>

    <div class="app-download-footer-visual">

      <div class="app-download-footer-phone">
        <div class="app-download-footer-screen">
          <h3>Your day, organized.</h3>
          <div class="app-download-footer-screen-card">
            <div class="app-download-footer-screen-row"></div>
            <div class="app-download-footer-screen-row"></div>
            <div class="app-download-footer-screen-row"></div>
          </div>
        </div>
      </div>

      <div class="app-download-footer-qr">
        <div class="app-download-footer-qr-grid">
          <span></span><span></span><span></span><span></span><span></span>
          <span></span><span></span><span></span><span></span><span></span>
          <span></span><span></span><span></span><span></span><span></span>
          <span></span><span></span><span></span><span></span><span></span>
          <span></span><span></span><span></span><span></span><span></span>
        </div>
        <small>Scan to download</small>
      </div>

    </div>

  </div>

  <div class="app-download-footer-bottom">
    <p>© 2026 AppFlow. Mobile productivity footer example.</p>

    <div class="app-download-footer-links">
      <a href="#">Features</a>
      <a href="#">Security</a>
      <a href="#">Privacy</a>
      <a href="#">Support</a>
    </div>
  </div>

</footer>

CSS

.app-download-footer{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:40px;
background:
radial-gradient(circle at 12% 0%,rgba(59,130,246,.26),transparent 32%),
radial-gradient(circle at 90% 10%,rgba(34,197,94,.20),transparent 32%),
linear-gradient(135deg,#0f172a,#111827);
box-shadow:0 34px 100px rgba(15,23,42,.32);
}

.app-download-footer::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px);
pointer-events:none;
}

.app-download-footer-main{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:34px;
align-items:center;
padding:40px 40px 24px;
}

.app-download-footer-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:24px;
}

.app-download-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.app-download-footer-logo-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:18px;
background:linear-gradient(135deg,#3b82f6,#22c55e);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 18px 38px rgba(59,130,246,.28);
}

.app-download-footer-logo-text{
display:grid;
gap:3px;
}

.app-download-footer-logo-text strong{
display:block;
color:#ffffff;
font-size:21px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.app-download-footer-logo-text span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.app-download-footer-title{
max-width:720px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(38px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.085em;
}

.app-download-footer-title span{
background:linear-gradient(90deg,#93c5fd,#86efac,#c4b5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.app-download-footer-text{
max-width:620px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.app-download-footer-buttons{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.app-download-footer-store{
display:flex;
align-items:center;
gap:12px;
min-width:170px;
padding:12px 15px;
border-radius:18px;
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
text-decoration:none !important;
box-shadow:0 18px 42px rgba(0,0,0,.20);
transition:transform .2s ease,box-shadow .2s ease;
}

.app-download-footer-store:hover{
transform:translateY(-3px);
box-shadow:0 24px 54px rgba(0,0,0,.26);
}

.app-download-footer-store-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:13px;
background:#0f172a;
color:#ffffff;
font-size:15px;
font-weight:950;
}

.app-download-footer-store small{
display:block;
color:#64748b;
font-size:11px;
font-weight:800;
line-height:1.1;
}

.app-download-footer-store strong{
display:block;
margin-top:3px;
color:#0f172a;
font-size:16px;
font-weight:950;
line-height:1.1;
letter-spacing:-.03em;
}

.app-download-footer-features{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
width:100%;
max-width:720px;
}

.app-download-footer-feature{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
}

.app-download-footer-feature strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:14px;
line-height:1.2;
font-weight:950;
}

.app-download-footer-feature span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.45;
font-weight:650;
}

.app-download-footer-visual{
position:relative;
display:grid;
place-items:center;
min-height:440px;
}

.app-download-footer-phone{
position:relative;
width:250px;
height:430px;
border-radius:38px;
background:#020617;
border:10px solid rgba(255,255,255,.88);
box-shadow:0 34px 90px rgba(0,0,0,.44);
overflow:hidden;
transform:rotate(4deg);
}

.app-download-footer-phone::before{
content:"";
position:absolute;
left:50%;
top:10px;
width:76px;
height:18px;
border-radius:999px;
background:#020617;
transform:translateX(-50%);
z-index:4;
}

.app-download-footer-screen{
position:absolute;
inset:0;
padding:38px 18px 18px;
background:
radial-gradient(circle at 30% 10%,rgba(59,130,246,.32),transparent 35%),
radial-gradient(circle at 80% 20%,rgba(34,197,94,.26),transparent 32%),
linear-gradient(135deg,#172554,#020617);
}

.app-download-footer-screen h3{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:24px;
line-height:1.05;
font-weight:950;
letter-spacing:-.055em;
}

.app-download-footer-screen-card{
display:grid;
gap:10px;
margin-top:18px;
}

.app-download-footer-screen-row{
height:54px;
border-radius:18px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
}

.app-download-footer-qr{
position:absolute;
left:0;
bottom:36px;
z-index:5;
width:126px;
padding:14px;
border-radius:24px;
background:#ffffff;
box-shadow:0 24px 60px rgba(0,0,0,.24);
transform:rotate(-7deg);
}

.app-download-footer-qr-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:4px;
margin-bottom:10px;
}

.app-download-footer-qr-grid span{
aspect-ratio:1;
border-radius:4px;
background:#0f172a;
}

.app-download-footer-qr-grid span:nth-child(2n){
background:#d1d5db;
}

.app-download-footer-qr small{
display:block;
color:#475569;
font-size:11px;
font-weight:900;
line-height:1.25;
text-align:center;
}

.app-download-footer-bottom{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr auto;
gap:18px;
align-items:center;
padding:22px 40px;
border-top:1px solid rgba(255,255,255,.12);
background:rgba(2,6,23,.26);
}

.app-download-footer-bottom p{
margin:0;
color:#94a3b8;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.app-download-footer-links{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.app-download-footer-links a{
color:#cbd5e1 !important;
-webkit-text-fill-color:#cbd5e1 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.app-download-footer-links a:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

@media (max-width:980px){
.app-download-footer-main{
grid-template-columns:1fr;
}

.app-download-footer-visual{
min-height:430px;
}
}

@media (max-width:640px){
.app-download-footer{
border-radius:30px;
}

.app-download-footer-main{
padding:28px 24px 20px;
}

.app-download-footer-title{
font-size:42px;
}

.app-download-footer-buttons{
width:100%;
}

.app-download-footer-store{
width:100%;
}

.app-download-footer-features{
grid-template-columns:1fr;
}

.app-download-footer-phone{
width:220px;
height:390px;
}

.app-download-footer-qr{
left:8px;
bottom:20px;
}

.app-download-footer-bottom{
grid-template-columns:1fr;
padding:22px 24px;
}

.app-download-footer-links{
justify-content:flex-start;
}
}

This app download footer is a good choice when mobile app installs are a key conversion goal. The phone mockup, app store buttons, QR-style block, and feature highlights make the footer feel like a product-focused closing section instead of a simple navigation area.

18. Footer with Trust Badges

A footer with trust badges is useful when visitors need reassurance before they buy, sign up, request a quote, or contact a business. Ecommerce stores, SaaS websites, service businesses, hosting companies, financial websites, and checkout flows often use trust badges to highlight security, reviews, guarantees, support, and payment confidence.

The example below uses a trust-first layout with a large rating card, security badges, guarantee blocks, review signals, and a compact footer navigation area. It is built to make the bottom of the website feel safer and more credible.

  • Trust-focused footer with rating, security, and guarantee badges
  • Great for ecommerce, SaaS, service websites, and checkout pages
  • Uses badge cards instead of a standard link-column layout
  • Includes review score, support signal, payment-style labels, and legal links
  • Responsive HTML and CSS footer with no JavaScript required
Trusted checkout

Confidence signals for the final decision moment.

Use this footer when trust badges, security, support, payment methods, and guarantees matter near the end of the page.

4.9 ★★★★★ Average customer rating from verified buyers.
✓

Secure payment

Encrypted checkout and protected customer information.

↺

Easy returns

Simple return process with clear customer support.

★

Verified reviews

Real feedback from customers and product users.

⚡

Fast delivery

Tracked delivery options and clear shipping updates.

24

Support team

Helpful customer support for questions and issues.

G

Guarantee

Clear satisfaction guarantee and transparent policies.

Accepted payments

VISA MC PAY ACH

Need help before buying?

Talk to support before placing your order or starting your subscription.

Contact Support

Shop

Support

Trust

Company

© 2026 TrustBase. Secure footer badge example.

Privacy Terms Cookies

HTML

<footer class="trust-badges-footer">

  <div class="trust-badges-footer-hero">
    <div class="trust-badges-footer-hero-inner">

      <div>
        <div class="trust-badges-footer-kicker">Trusted checkout</div>
        <h3 class="trust-badges-footer-title">Confidence signals for the final <span>decision moment.</span></h3>
        <p class="trust-badges-footer-text">Use this footer when trust badges, security, support, payment methods, and guarantees matter near the end of the page.</p>
      </div>

      <div class="trust-badges-footer-score">
        <strong>4.9</strong>
        <span class="trust-badges-footer-stars">★★★★★</span>
        <span>Average customer rating from verified buyers.</span>
      </div>

    </div>
  </div>

  <div class="trust-badges-footer-main">

    <div class="trust-badges-footer-grid">

      <div class="trust-badges-footer-badge">
        <div class="trust-badges-footer-icon">✓</div>
        <h3>Secure payment</h3>
        <p>Encrypted checkout and protected customer information.</p>
      </div>

      <div class="trust-badges-footer-badge">
        <div class="trust-badges-footer-icon">↺</div>
        <h3>Easy returns</h3>
        <p>Simple return process with clear customer support.</p>
      </div>

      <div class="trust-badges-footer-badge">
        <div class="trust-badges-footer-icon">★</div>
        <h3>Verified reviews</h3>
        <p>Real feedback from customers and product users.</p>
      </div>

      <div class="trust-badges-footer-badge">
        <div class="trust-badges-footer-icon">⚡</div>
        <h3>Fast delivery</h3>
        <p>Tracked delivery options and clear shipping updates.</p>
      </div>

      <div class="trust-badges-footer-badge">
        <div class="trust-badges-footer-icon">24</div>
        <h3>Support team</h3>
        <p>Helpful customer support for questions and issues.</p>
      </div>

      <div class="trust-badges-footer-badge">
        <div class="trust-badges-footer-icon">G</div>
        <h3>Guarantee</h3>
        <p>Clear satisfaction guarantee and transparent policies.</p>
      </div>

    </div>

    <div class="trust-badges-footer-sidebar">

      <div class="trust-badges-footer-payment-card">
        <h3>Accepted payments</h3>
        <div class="trust-badges-footer-payments">
          <span>VISA</span>
          <span>MC</span>
          <span>PAY</span>
          <span>ACH</span>
        </div>
      </div>

      <div class="trust-badges-footer-support-card">
        <h3>Need help before buying?</h3>
        <p>Talk to support before placing your order or starting your subscription.</p>
        <a href="#">Contact Support</a>
      </div>

    </div>

  </div>

  <div class="trust-badges-footer-links">

    <div class="trust-badges-footer-link-col">
      <h3>Shop</h3>
      <ul>
        <li><a href="#">Products</a></li>
        <li><a href="#">Best Sellers</a></li>
        <li><a href="#">New Arrivals</a></li>
      </ul>
    </div>

    <div class="trust-badges-footer-link-col">
      <h3>Support</h3>
      <ul>
        <li><a href="#">Help Center</a></li>
        <li><a href="#">Shipping</a></li>
        <li><a href="#">Returns</a></li>
      </ul>
    </div>

    <div class="trust-badges-footer-link-col">
      <h3>Trust</h3>
      <ul>
        <li><a href="#">Security</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Guarantee</a></li>
      </ul>
    </div>

    <div class="trust-badges-footer-link-col">
      <h3>Company</h3>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Policies</a></li>
      </ul>
    </div>

  </div>

  <div class="trust-badges-footer-bottom">
    <p>© 2026 TrustBase. Secure footer badge example.</p>

    <div class="trust-badges-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.trust-badges-footer{
width:min(100%,1120px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.trust-badges-footer-hero{
position:relative;
overflow:hidden;
padding:36px;
background:
radial-gradient(circle at 12% 0%,rgba(16,185,129,.24),transparent 34%),
radial-gradient(circle at 90% 8%,rgba(245,158,11,.20),transparent 32%),
linear-gradient(135deg,#064e3b,#111827);
}

.trust-badges-footer-hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 44%),
repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 20px);
pointer-events:none;
}

.trust-badges-footer-hero-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) 260px;
gap:26px;
align-items:center;
}

.trust-badges-footer-kicker{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(16,185,129,.16);
border:1px solid rgba(110,231,183,.24);
color:#a7f3d0;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.trust-badges-footer-title{
max-width:740px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,64px);
line-height:1;
font-weight:950;
letter-spacing:-.075em;
}

.trust-badges-footer-title span{
color:#fcd34d !important;
-webkit-text-fill-color:#fcd34d !important;
}

.trust-badges-footer-text{
max-width:640px;
margin:16px 0 0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.trust-badges-footer-score{
padding:24px;
border-radius:28px;
background:#ffffff;
box-shadow:0 24px 60px rgba(0,0,0,.20);
}

.trust-badges-footer-score strong{
display:block;
color:#0f172a;
font-size:62px;
line-height:.9;
font-weight:950;
letter-spacing:-.08em;
}

.trust-badges-footer-stars{
display:block;
margin:10px 0 8px;
color:#f59e0b;
font-size:18px;
letter-spacing:.03em;
}

.trust-badges-footer-score span{
display:block;
color:#475569;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.trust-badges-footer-main{
display:grid;
grid-template-columns:1fr 320px;
gap:22px;
padding:30px 36px;
background:#f8fafc;
}

.trust-badges-footer-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.trust-badges-footer-badge{
position:relative;
overflow:hidden;
padding:20px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.07);
}

.trust-badges-footer-badge::after{
content:"";
position:absolute;
right:-24px;
top:-24px;
width:78px;
height:78px;
border-radius:50%;
background:rgba(16,185,129,.10);
}

.trust-badges-footer-icon{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
margin-bottom:16px;
border-radius:16px;
background:#ecfdf5;
color:#047857;
font-size:18px;
font-weight:950;
}

.trust-badges-footer-badge h3{
position:relative;
z-index:2;
margin:0 0 7px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:18px;
line-height:1.15;
font-weight:950;
letter-spacing:-.035em;
}

.trust-badges-footer-badge p{
position:relative;
z-index:2;
margin:0;
color:#475569;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.trust-badges-footer-sidebar{
display:grid;
gap:14px;
}

.trust-badges-footer-payment-card,
.trust-badges-footer-support-card{
padding:22px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.07);
}

.trust-badges-footer-payment-card h3,
.trust-badges-footer-support-card h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:17px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
}

.trust-badges-footer-payments{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.trust-badges-footer-payments span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:52px;
height:34px;
padding:0 10px;
border-radius:11px;
background:#0f172a;
color:#ffffff;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
}

.trust-badges-footer-support-card p{
margin:0 0 14px;
color:#475569;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.trust-badges-footer-support-card a{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:42px;
border-radius:14px;
background:#10b981;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
text-decoration:none !important;
}

.trust-badges-footer-links{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
padding:0 36px 30px;
background:#f8fafc;
}

.trust-badges-footer-link-col h3{
margin:0 0 12px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:13px;
line-height:1.2;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.trust-badges-footer-link-col ul{
display:grid;
gap:9px;
margin:0;
padding:0;
list-style:none;
}

.trust-badges-footer-link-col li{
margin:0;
padding:0;
list-style:none;
}

.trust-badges-footer-link-col a{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
}

.trust-badges-footer-link-col a:hover{
color:#059669 !important;
-webkit-text-fill-color:#059669 !important;
}

.trust-badges-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 36px;
background:#ffffff;
border-top:1px solid rgba(15,23,42,.08);
}

.trust-badges-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.trust-badges-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.trust-badges-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.trust-badges-footer-legal a:hover{
color:#059669 !important;
-webkit-text-fill-color:#059669 !important;
}

@media (max-width:1040px){
.trust-badges-footer-hero-inner,
.trust-badges-footer-main{
grid-template-columns:1fr;
}

.trust-badges-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:700px){
.trust-badges-footer{
border-radius:28px;
}

.trust-badges-footer-hero,
.trust-badges-footer-main{
padding:26px;
}

.trust-badges-footer-title{
font-size:36px;
}

.trust-badges-footer-grid,
.trust-badges-footer-links{
grid-template-columns:1fr;
}

.trust-badges-footer-links{
padding:0 26px 26px;
}

.trust-badges-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 26px;
}

.trust-badges-footer-legal{
justify-content:flex-start;
}
}

This trust badges footer is useful when confidence matters near the end of a page. It turns the footer into a reassurance section with rating signals, security messages, guarantees, payment labels, and support access before the final legal links.

19. Footer with Mega Links

A footer with mega links is useful for larger websites that need to organize many pages, categories, resources, products, support links, and legal pages in one structured footer. Instead of using only three or four columns, a mega footer works more like a compact sitemap at the bottom of the website.

The example below uses a large mega-footer layout with grouped navigation blocks, category labels, featured resource cards, a quick search-style input, and a structured bottom row. It is useful for large blogs, ecommerce websites, SaaS platforms, documentation sites, marketplaces, and corporate websites.

  • Large mega footer for websites with many links
  • Includes grouped link sections, resource cards, and quick navigation
  • Great for ecommerce, SaaS, documentation, marketplaces, and corporate websites
  • Uses a structured sitemap-style layout
  • Responsive HTML and CSS footer with no JavaScript required

HTML

<footer class="mega-links-footer">

  <div class="mega-links-footer-top">

    <div class="mega-links-footer-brand">
      <span class="mega-links-footer-logo">M</span>
      <div class="mega-links-footer-heading">
        <h3>Find every important page from one organized footer.</h3>
        <p>Use a mega footer when your website has many categories, resources, products, support pages, and legal links that need clear structure.</p>
      </div>
    </div>

    <form class="mega-links-footer-search">
      <label>Quick find</label>
      <div class="mega-links-footer-search-row">
        <input type="search" placeholder="Search resources">
        <button type="submit">Search</button>
      </div>
    </form>

  </div>

  <div class="mega-links-footer-body">

    <div class="mega-links-footer-directory">

      <div class="mega-links-footer-group">
        <h3>Products</h3>
        <ul>
          <li><a href="#">Website Builder</a></li>
          <li><a href="#">Templates</a></li>
          <li><a href="#">Components</a></li>
          <li><a href="#">Integrations</a></li>
          <li><a href="#">Pricing</a></li>
        </ul>
      </div>

      <div class="mega-links-footer-group">
        <h3>Solutions</h3>
        <ul>
          <li><a href="#">For Agencies</a></li>
          <li><a href="#">For Ecommerce</a></li>
          <li><a href="#">For SaaS</a></li>
          <li><a href="#">For Blogs</a></li>
          <li><a href="#">For Teams</a></li>
        </ul>
      </div>

      <div class="mega-links-footer-group">
        <h3>Resources</h3>
        <ul>
          <li><a href="#">CSS Guides</a></li>
          <li><a href="#">Documentation</a></li>
          <li><a href="#">Tutorials</a></li>
          <li><a href="#">Case Studies</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
      </div>

      <div class="mega-links-footer-group">
        <h3>Support</h3>
        <ul>
          <li><a href="#">Help Center</a></li>
          <li><a href="#">Contact Support</a></li>
          <li><a href="#">System Status</a></li>
          <li><a href="#">Security</a></li>
          <li><a href="#">Community</a></li>
        </ul>
      </div>

      <div class="mega-links-footer-group">
        <h3>Company</h3>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Press</a></li>
          <li><a href="#">Partners</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

      <div class="mega-links-footer-group">
        <h3>Developers</h3>
        <ul>
          <li><a href="#">API</a></li>
          <li><a href="#">Changelog</a></li>
          <li><a href="#">GitHub</a></li>
          <li><a href="#">CLI Tools</a></li>
          <li><a href="#">Releases</a></li>
        </ul>
      </div>

      <div class="mega-links-footer-group">
        <h3>Learn</h3>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Frontend CSS</a></li>
          <li><a href="#">WordPress</a></li>
          <li><a href="#">SEO Basics</a></li>
          <li><a href="#">Accessibility</a></li>
        </ul>
      </div>

      <div class="mega-links-footer-group">
        <h3>Legal</h3>
        <ul>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Cookies</a></li>
          <li><a href="#">DPA</a></li>
          <li><a href="#">Licenses</a></li>
        </ul>
      </div>

    </div>

    <aside class="mega-links-footer-side">

      <a class="mega-links-footer-resource" href="#">
        <small>Featured guide</small>
        <strong>How to organize a large website footer</strong>
        <span>Learn how to group footer links without making the design feel crowded.</span>
      </a>

      <div class="mega-links-footer-stats">
        <div class="mega-links-footer-stat">
          <strong>120+</strong>
          <span>Useful pages</span>
        </div>
        <div class="mega-links-footer-stat">
          <strong>8</strong>
          <span>Main groups</span>
        </div>
      </div>

    </aside>

  </div>

  <div class="mega-links-footer-bottom">
    <p>© 2026 MegaDirectory. Large website footer example.</p>

    <div class="mega-links-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
      <a href="#">Sitemap</a>
    </div>
  </div>

</footer>

CSS

.mega-links-footer{
width:min(100%,1140px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.mega-links-footer-top{
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:26px;
align-items:center;
padding:34px;
background:
radial-gradient(circle at 12% 0%,rgba(37,99,235,.22),transparent 34%),
radial-gradient(circle at 88% 8%,rgba(14,165,233,.16),transparent 32%),
linear-gradient(135deg,#0f172a,#1e293b);
}

.mega-links-footer-brand{
display:flex;
align-items:flex-start;
gap:16px;
}

.mega-links-footer-logo{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
flex:0 0 54px;
border-radius:18px;
background:linear-gradient(135deg,#2563eb,#06b6d4);
color:#ffffff;
font-size:19px;
font-weight:950;
box-shadow:0 18px 38px rgba(37,99,235,.26);
}

.mega-links-footer-heading h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(28px,4vw,46px);
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
}

.mega-links-footer-heading p{
max-width:680px;
margin:0;
color:#cbd5e1;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.mega-links-footer-search{
padding:8px;
border-radius:22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}

.mega-links-footer-search label{
display:block;
margin:0 0 8px;
padding:0 4px;
color:#cbd5e1;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.mega-links-footer-search-row{
display:flex;
gap:8px;
}

.mega-links-footer-search-row input{
min-width:0;
flex:1;
border:0;
outline:0;
padding:14px 14px;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:14px;
font-weight:650;
}

.mega-links-footer-search-row input::placeholder{
color:#64748b;
}

.mega-links-footer-search-row button{
border:0;
cursor:pointer;
padding:14px 16px;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#06b6d4);
color:#ffffff;
font-size:14px;
font-weight:950;
white-space:nowrap;
}

.mega-links-footer-body{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:24px;
padding:30px 34px;
background:#f8fafc;
}

.mega-links-footer-directory{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}

.mega-links-footer-group{
padding:20px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.06);
}

.mega-links-footer-group h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:13px;
line-height:1.2;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.mega-links-footer-group ul{
display:grid;
gap:9px;
margin:0;
padding:0;
list-style:none;
}

.mega-links-footer-group li{
margin:0;
padding:0;
list-style:none;
}

.mega-links-footer-group a{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
transition:color .2s ease,transform .2s ease;
}

.mega-links-footer-group a::after{
content:"→";
opacity:.35;
font-weight:950;
transition:opacity .2s ease,transform .2s ease;
}

.mega-links-footer-group a:hover{
transform:translateX(3px);
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

.mega-links-footer-group a:hover::after{
opacity:1;
transform:translateX(2px);
}

.mega-links-footer-side{
display:grid;
gap:14px;
align-content:start;
}

.mega-links-footer-resource{
position:relative;
overflow:hidden;
padding:22px;
border-radius:24px;
background:#0f172a;
border:1px solid rgba(15,23,42,.10);
box-shadow:0 18px 46px rgba(15,23,42,.18);
text-decoration:none !important;
}

.mega-links-footer-resource::before{
content:"";
position:absolute;
inset:-80px;
background:
radial-gradient(circle at 18% 0%,rgba(37,99,235,.32),transparent 34%),
radial-gradient(circle at 90% 20%,rgba(14,165,233,.22),transparent 32%);
pointer-events:none;
}

.mega-links-footer-resource small,
.mega-links-footer-resource strong,
.mega-links-footer-resource span{
position:relative;
z-index:2;
display:block;
}

.mega-links-footer-resource small{
margin-bottom:12px;
color:#93c5fd;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.mega-links-footer-resource strong{
color:#ffffff;
font-size:22px;
line-height:1.08;
font-weight:950;
letter-spacing:-.045em;
}

.mega-links-footer-resource span{
margin-top:14px;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.mega-links-footer-stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.mega-links-footer-stat{
padding:18px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.06);
}

.mega-links-footer-stat strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:26px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.mega-links-footer-stat span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:800;
}

.mega-links-footer-bottom{
display:grid;
grid-template-columns:1fr auto;
gap:20px;
align-items:center;
padding:22px 34px;
background:#ffffff;
border-top:1px solid rgba(15,23,42,.08);
}

.mega-links-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.mega-links-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.mega-links-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.mega-links-footer-legal a:hover{
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

@media (max-width:1080px){
.mega-links-footer-top,
.mega-links-footer-body{
grid-template-columns:1fr;
}

.mega-links-footer-directory{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:700px){
.mega-links-footer{
border-radius:28px;
}

.mega-links-footer-top,
.mega-links-footer-body{
padding:26px;
}

.mega-links-footer-brand{
flex-direction:column;
}

.mega-links-footer-search-row{
flex-direction:column;
}

.mega-links-footer-search-row button{
width:100%;
}

.mega-links-footer-directory,
.mega-links-footer-stats{
grid-template-columns:1fr;
}

.mega-links-footer-bottom{
grid-template-columns:1fr;
padding:20px 26px;
}

.mega-links-footer-legal{
justify-content:flex-start;
}
}

This mega links footer is useful when a website has too much important content for a small footer. The grouped sitemap structure helps users scan many links quickly while the featured resource and search-style area make the footer feel more useful and organized.

20. Compact Footer

A compact footer is best when the website does not need a large closing section. Landing pages, small portfolios, one-page websites, app pages, startup microsites, and simple business pages often need a footer that is clean, short, and easy to scan.

The example below uses a single-row compact footer with a brand mark, short legal text, navigation links, and social buttons. The hover effects are subtle, and the footer becomes stacked on small screens so it remains readable and touch-friendly.

  • Small compact footer for simple websites and landing pages
  • Uses a single-row desktop layout
  • Includes brand, navigation links, social buttons, and legal text
  • Great for one-page websites, portfolios, and product landing pages
  • Responsive HTML and CSS footer with no JavaScript required

HTML

<footer class="compact-footer">

  <a class="compact-footer-brand" href="#">
    <span class="compact-footer-mark">C</span>
    <span>
      <strong>Compactly</strong>
      <span>Small website footer</span>
    </span>
  </a>

  <nav class="compact-footer-nav" aria-label="Footer navigation">
    <a href="#">Work</a>
    <a href="#">About</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
    <a href="#">Privacy</a>
  </nav>

  <div class="compact-footer-right">
    <p class="compact-footer-copy">© 2026 Compactly</p>

    <div class="compact-footer-socials" aria-label="Social links">
      <a href="#">X</a>
      <a href="#">in</a>
      <a href="#">Gh</a>
    </div>
  </div>

</footer>

CSS

.compact-footer{
width:min(100%,1080px);
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:20px;
align-items:center;
padding:18px;
border-radius:999px;
background:rgba(255,255,255,.82);
border:1px solid rgba(15,23,42,.10);
box-shadow:0 24px 70px rgba(15,23,42,.12);
backdrop-filter:blur(14px);
}

.compact-footer-brand{
display:inline-flex;
align-items:center;
gap:11px;
text-decoration:none;
min-width:max-content;
}

.compact-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:15px;
font-weight:950;
box-shadow:0 14px 30px rgba(15,23,42,.18);
}

.compact-footer-brand strong{
display:block;
color:#0f172a;
font-size:15px;
line-height:1.1;
font-weight:950;
letter-spacing:-.03em;
}

.compact-footer-brand span{
display:block;
margin-top:2px;
color:#64748b;
font-size:12px;
line-height:1.2;
font-weight:700;
}

.compact-footer-nav{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:8px;
}

.compact-footer-nav a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:9px 12px;
border-radius:999px;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:800;
line-height:1;
text-decoration:none !important;
transition:background .2s ease,color .2s ease,transform .2s ease;
}

.compact-footer-nav a:hover{
transform:translateY(-2px);
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.compact-footer-right{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}

.compact-footer-copy{
margin:0;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:700;
white-space:nowrap;
}

.compact-footer-socials{
display:flex;
align-items:center;
gap:6px;
}

.compact-footer-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:12px;
font-weight:900;
text-decoration:none !important;
transition:background .2s ease,color .2s ease,transform .2s ease;
}

.compact-footer-socials a:hover{
transform:translateY(-2px);
background:#6366f1;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

@media (max-width:880px){
.compact-footer{
grid-template-columns:1fr;
border-radius:28px;
padding:22px;
}

.compact-footer-brand,
.compact-footer-nav,
.compact-footer-right{
justify-content:center;
}

.compact-footer-right{
flex-direction:column;
}
}

@media (max-width:560px){
.compact-footer{
align-items:flex-start;
}

.compact-footer-brand,
.compact-footer-nav,
.compact-footer-right{
justify-content:flex-start;
width:100%;
}

.compact-footer-nav{
justify-content:flex-start;
}

.compact-footer-copy{
white-space:normal;
}
}

This compact footer is best when the website needs a clean ending without a large navigation structure. It keeps the footer lightweight, readable, and easy to use while still including the essentials: brand, navigation, copyright, and social links.

21. Sticky Footer Layout

A sticky footer layout keeps the footer at the bottom of the viewport when the page content is short, but still allows it to move naturally below the content when the page is longer. This is useful for dashboards, simple landing pages, login pages, app layouts, documentation pages, and websites with variable content length.

The example below shows a full-page layout inside the preview box. The page wrapper uses min-height, flexbox, and margin-top:auto so the footer stays at the bottom when there is not much content. The preview itself is scrollable, so the full visual layout remains usable inside the article.

  • Sticky footer layout using modern CSS flexbox
  • Footer stays at the bottom on short pages
  • Works well for dashboards, login pages, app shells, and simple websites
  • Includes content area, CTA card, and bottom footer navigation
  • Scrollable preview box for taller visual examples
S StickyBase Flex footer layout
Sticky footer layout

Keep the footer at the bottom of short pages.

This layout uses a page wrapper with flexbox so the footer stays at the bottom when content is short, but still flows normally when the page becomes longer.

View Layout Learn CSS

HTML

<div class="sticky-footer-layout-page">

  <header class="sticky-footer-layout-header">

    <a class="sticky-footer-layout-brand" href="#">
      <span class="sticky-footer-layout-mark">S</span>
      <span>
        <strong>StickyBase</strong>
        <span>Flex footer layout</span>
      </span>
    </a>

    <nav class="sticky-footer-layout-nav" aria-label="Page navigation">
      <a href="#">Home</a>
      <a href="#">Features</a>
      <a href="#">Docs</a>
      <a href="#">Contact</a>
    </nav>

  </header>

  <main class="sticky-footer-layout-content">

    <section class="sticky-footer-layout-card">
      <div class="sticky-footer-layout-kicker">Sticky footer layout</div>
      <h3>Keep the footer at the <span>bottom of short pages.</span></h3>
      <p>This layout uses a page wrapper with flexbox so the footer stays at the bottom when content is short, but still flows normally when the page becomes longer.</p>

      <div class="sticky-footer-layout-actions">
        <a class="sticky-footer-layout-button" href="#">View Layout</a>
        <a class="sticky-footer-layout-button is-light" href="#">Learn CSS</a>
      </div>
    </section>

  </main>

  <footer class="sticky-footer-layout-footer">

    <div class="sticky-footer-layout-footer-inner">
      <p>© 2026 StickyBase. Sticky footer layout example.</p>

      <div class="sticky-footer-layout-footer-links">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Support</a>
      </div>
    </div>

  </footer>

</div>

CSS

.sticky-footer-layout-page{
min-height:680px;
display:flex;
flex-direction:column;
overflow:hidden;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.sticky-footer-layout-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px 26px;
background:#ffffff;
border-bottom:1px solid rgba(15,23,42,.08);
}

.sticky-footer-layout-brand{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.sticky-footer-layout-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#6366f1,#06b6d4);
color:#ffffff;
font-size:16px;
font-weight:950;
box-shadow:0 16px 34px rgba(99,102,241,.22);
}

.sticky-footer-layout-brand strong{
display:block;
color:#0f172a;
font-size:18px;
line-height:1.1;
font-weight:950;
letter-spacing:-.035em;
}

.sticky-footer-layout-brand span{
display:block;
margin-top:3px;
color:#64748b;
font-size:12px;
line-height:1.2;
font-weight:750;
}

.sticky-footer-layout-nav{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:8px;
}

.sticky-footer-layout-nav a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:9px 12px;
border-radius:999px;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:800;
line-height:1;
text-decoration:none !important;
transition:background .2s ease,color .2s ease,transform .2s ease;
}

.sticky-footer-layout-nav a:hover{
transform:translateY(-2px);
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.sticky-footer-layout-content{
flex:1;
display:grid;
place-items:center;
padding:42px 28px;
background:
radial-gradient(circle at 20% 20%,rgba(99,102,241,.10),transparent 32%),
linear-gradient(135deg,#ffffff,#f8fafc);
}

.sticky-footer-layout-card{
width:min(100%,740px);
text-align:center;
padding:38px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.10);
}

.sticky-footer-layout-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.sticky-footer-layout-card h3{
max-width:620px;
margin:0 auto 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:clamp(34px,5vw,58px);
line-height:1;
font-weight:950;
letter-spacing:-.075em;
}

.sticky-footer-layout-card h3 span{
background:linear-gradient(135deg,#6366f1,#06b6d4);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.sticky-footer-layout-card p{
max-width:620px;
margin:0 auto 24px;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.sticky-footer-layout-actions{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
}

.sticky-footer-layout-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:13px 17px;
border-radius:999px;
background:#0f172a;
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 18px 42px rgba(15,23,42,.20);
transition:transform .2s ease,box-shadow .2s ease;
}

.sticky-footer-layout-button:hover{
transform:translateY(-2px);
box-shadow:0 22px 52px rgba(15,23,42,.26);
}

.sticky-footer-layout-button.is-light{
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
box-shadow:none;
}

.sticky-footer-layout-footer{
margin-top:auto;
padding:24px 26px;
background:#0f172a;
}

.sticky-footer-layout-footer-inner{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:20px;
align-items:center;
}

.sticky-footer-layout-footer p{
margin:0;
color:#94a3b8;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.sticky-footer-layout-footer-links{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.sticky-footer-layout-footer-links a{
color:#cbd5e1 !important;
-webkit-text-fill-color:#cbd5e1 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.sticky-footer-layout-footer-links a:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

@media (max-width:720px){
.sticky-footer-layout-page{
min-height:700px;
border-radius:26px;
}

.sticky-footer-layout-header{
align-items:flex-start;
flex-direction:column;
padding:22px;
}

.sticky-footer-layout-nav{
justify-content:flex-start;
}

.sticky-footer-layout-content{
padding:30px 18px;
}

.sticky-footer-layout-card{
padding:26px;
border-radius:26px;
}

.sticky-footer-layout-card h3{
font-size:36px;
}

.sticky-footer-layout-actions{
width:100%;
}

.sticky-footer-layout-button{
width:100%;
}

.sticky-footer-layout-footer{
padding:22px;
}

.sticky-footer-layout-footer-inner{
grid-template-columns:1fr;
}

.sticky-footer-layout-footer-links{
justify-content:flex-start;
}
}

This sticky footer layout is useful when page content can be short. The page wrapper uses flexbox so the footer is pushed to the bottom of the layout, while the footer still behaves naturally when there is more content above it.

22. Split Footer Layout

A split footer layout divides the footer into two visually different sides. This is useful when one side needs to communicate a strong brand message or call-to-action while the other side holds navigation, contact details, newsletter signup, or legal links.

The example below uses a dramatic left panel with large typography and a lighter right panel with organized actions and links. It creates a strong contrast and works well for agencies, landing pages, SaaS products, service websites, portfolios, and modern business websites.

  • Split footer layout with two different visual panels
  • Large brand message on the left and navigation/actions on the right
  • Great for agencies, SaaS pages, service websites, and portfolios
  • Uses CSS Grid, hover effects, and responsive stacking
  • Scrollable visual preview box for taller footer examples
Split footer layout

A stronger ending for modern websites.

Use a split footer when you want one side to feel like a bold campaign message and the other side to hold practical links, contact paths, and signup actions.

Brand Links Contact Newsletter

Ready to build something better?

Start with a strong closing section that combines conversion and navigation.

Start Project View Work

Explore

Contact

Get layout ideas

Subscribe for useful CSS examples and website section inspiration.

© 2026 SplitStudio.

X in Dr

HTML

<footer class="split-footer-layout">

  <section class="split-footer-layout-left">

    <div class="split-footer-layout-left-content">

      <a class="split-footer-layout-logo" href="#">
        <span class="split-footer-layout-mark">S</span>
        <span>
          <strong>SplitStudio</strong>
          <span>Creative footer layout</span>
        </span>
      </a>

      <div class="split-footer-layout-kicker">Split footer layout</div>
      <h3 class="split-footer-layout-title">A stronger ending for <span>modern websites.</span></h3>

    </div>

    <div class="split-footer-layout-left-bottom">
      <p>Use a split footer when you want one side to feel like a bold campaign message and the other side to hold practical links, contact paths, and signup actions.</p>

      <div class="split-footer-layout-tags">
        <span>Brand</span>
        <span>Links</span>
        <span>Contact</span>
        <span>Newsletter</span>
      </div>
    </div>

  </section>

  <section class="split-footer-layout-right">

    <div class="split-footer-layout-cta">
      <h3>Ready to build something better?</h3>
      <p>Start with a strong closing section that combines conversion and navigation.</p>

      <div class="split-footer-layout-buttons">
        <a class="split-footer-layout-button is-primary" href="#">Start Project</a>
        <a class="split-footer-layout-button is-secondary" href="#">View Work</a>
      </div>
    </div>

    <div class="split-footer-layout-links">

      <div class="split-footer-layout-column">
        <h3>Explore</h3>
        <ul>
          <li><a href="#">Services</a></li>
          <li><a href="#">Case Studies</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Process</a></li>
        </ul>
      </div>

      <div class="split-footer-layout-column">
        <h3>Contact</h3>
        <ul>
          <li><span>hello@example.com</span></li>
          <li><span>+1 555 0144</span></li>
          <li><a href="#">Book a call</a></li>
          <li><a href="#">Support</a></li>
        </ul>
      </div>

    </div>

    <div class="split-footer-layout-newsletter">
      <h3>Get layout ideas</h3>
      <p>Subscribe for useful CSS examples and website section inspiration.</p>

      <form class="split-footer-layout-form">
        <input type="email" placeholder="Email address">
        <button type="submit">Join</button>
      </form>
    </div>

    <div class="split-footer-layout-bottom">
      <p>© 2026 SplitStudio.</p>

      <div class="split-footer-layout-socials" aria-label="Social links">
        <a href="#">X</a>
        <a href="#">in</a>
        <a href="#">Dr</a>
      </div>
    </div>

  </section>

</footer>

CSS

.split-footer-layout{
width:min(100%,1120px);
overflow:hidden;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
border-radius:40px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}

.split-footer-layout-left{
position:relative;
overflow:hidden;
min-height:560px;
padding:38px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:34px;
background:
radial-gradient(circle at 12% 8%,rgba(244,63,94,.28),transparent 34%),
radial-gradient(circle at 90% 18%,rgba(37,99,235,.20),transparent 32%),
linear-gradient(135deg,#111827,#1f2937);
}

.split-footer-layout-left::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px);
pointer-events:none;
}

.split-footer-layout-left-content,
.split-footer-layout-left-bottom{
position:relative;
z-index:2;
}

.split-footer-layout-logo{
display:inline-flex;
align-items:center;
gap:12px;
margin-bottom:42px;
text-decoration:none;
}

.split-footer-layout-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:50px;
height:50px;
border-radius:18px;
background:#ffffff;
color:#111827;
font-size:18px;
font-weight:950;
box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.split-footer-layout-logo strong{
display:block;
color:#ffffff;
font-size:21px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.split-footer-layout-logo span{
display:block;
margin-top:3px;
color:#cbd5e1;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.split-footer-layout-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(244,63,94,.14);
border:1px solid rgba(251,113,133,.24);
color:#fecdd3;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.split-footer-layout-title{
max-width:620px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(42px,7vw,88px);
line-height:.92;
font-weight:950;
letter-spacing:-.09em;
}

.split-footer-layout-title span{
background:linear-gradient(90deg,#fb7185,#93c5fd,#c4b5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.split-footer-layout-left-bottom{
display:grid;
gap:18px;
}

.split-footer-layout-left-bottom p{
max-width:560px;
margin:0;
color:#d1d5db;
font-size:16px;
line-height:1.7;
font-weight:650;
}

.split-footer-layout-tags{
display:flex;
flex-wrap:wrap;
gap:9px;
}

.split-footer-layout-tags span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 11px;
border-radius:999px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:12px;
font-weight:900;
line-height:1;
}

.split-footer-layout-right{
padding:26px;
background:#ffffff;
display:grid;
gap:18px;
align-content:stretch;
}

.split-footer-layout-cta{
padding:26px;
border-radius:30px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.split-footer-layout-cta h3{
margin:0 0 10px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:30px;
line-height:1.05;
font-weight:950;
letter-spacing:-.06em;
}

.split-footer-layout-cta p{
margin:0 0 20px;
color:#475569;
font-size:15px;
line-height:1.65;
font-weight:650;
}

.split-footer-layout-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.split-footer-layout-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:12px 14px;
border-radius:999px;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .2s ease,box-shadow .2s ease;
}

.split-footer-layout-button:hover{
transform:translateY(-2px);
}

.split-footer-layout-button.is-primary{
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
box-shadow:0 16px 36px rgba(15,23,42,.18);
}

.split-footer-layout-button.is-secondary{
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
}

.split-footer-layout-links{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.split-footer-layout-column{
padding:22px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.06);
}

.split-footer-layout-column h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:13px;
line-height:1.2;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.split-footer-layout-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.split-footer-layout-column li{
margin:0;
padding:0;
list-style:none;
}

.split-footer-layout-column a,
.split-footer-layout-column span{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
}

.split-footer-layout-column a{
transition:color .2s ease,transform .2s ease;
}

.split-footer-layout-column a:hover{
transform:translateX(3px);
color:#e11d48 !important;
-webkit-text-fill-color:#e11d48 !important;
}

.split-footer-layout-newsletter{
padding:22px;
border-radius:24px;
background:
radial-gradient(circle at 20% 0%,rgba(244,63,94,.12),transparent 34%),
linear-gradient(135deg,#fff1f2,#ffffff);
border:1px solid rgba(244,63,94,.14);
}

.split-footer-layout-newsletter h3{
margin:0 0 8px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:22px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
}

.split-footer-layout-newsletter p{
margin:0 0 16px;
color:#475569;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.split-footer-layout-form{
display:flex;
gap:8px;
padding:6px;
border-radius:18px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
}

.split-footer-layout-form input{
min-width:0;
flex:1;
border:0;
outline:0;
padding:12px 10px;
border-radius:14px;
background:transparent;
color:#0f172a;
font-size:14px;
font-weight:650;
}

.split-footer-layout-form input::placeholder{
color:#64748b;
}

.split-footer-layout-form button{
border:0;
cursor:pointer;
padding:12px 14px;
border-radius:14px;
background:#e11d48;
color:#ffffff;
font-size:13px;
font-weight:950;
white-space:nowrap;
}

.split-footer-layout-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding-top:12px;
}

.split-footer-layout-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.split-footer-layout-socials{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
}

.split-footer-layout-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:12px;
font-weight:900;
text-decoration:none !important;
transition:background .2s ease,color .2s ease,transform .2s ease;
}

.split-footer-layout-socials a:hover{
transform:translateY(-2px);
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

@media (max-width:980px){
.split-footer-layout{
grid-template-columns:1fr;
}

.split-footer-layout-left{
min-height:460px;
}
}

@media (max-width:640px){
.split-footer-layout{
border-radius:30px;
}

.split-footer-layout-left{
min-height:520px;
padding:28px 24px;
}

.split-footer-layout-title{
font-size:48px;
}

.split-footer-layout-right{
padding:18px;
}

.split-footer-layout-cta,
.split-footer-layout-column,
.split-footer-layout-newsletter{
border-radius:24px;
}

.split-footer-layout-buttons,
.split-footer-layout-links{
grid-template-columns:1fr;
}

.split-footer-layout-form{
flex-direction:column;
}

.split-footer-layout-form button{
width:100%;
}

.split-footer-layout-bottom{
align-items:flex-start;
flex-direction:column;
}

.split-footer-layout-socials{
justify-content:flex-start;
}
}

This split footer layout is useful when you want the footer to feel more like a strong closing section. The left side delivers the brand message, while the right side keeps the practical actions, links, newsletter form, and social links organized.

23. Footer with Background Image

A footer with a background image can make the end of a website feel more emotional, visual, and brand-focused. This type of footer works well for travel websites, restaurants, hotels, real estate websites, outdoor brands, creative agencies, event pages, and premium landing pages.

The example below uses a CSS background image effect with layered gradients, dark overlay, floating content cards, and a strong call-to-action. The preview box is scrollable, so the full visual footer remains usable even when the design is tall.

  • Visual footer layout with background image effect
  • Uses overlay gradients for readable text
  • Great for travel, hospitality, events, real estate, and lifestyle brands
  • Includes CTA, link cards, contact information, and legal links
  • Scrollable preview box for taller footer examples
Next escape Summer 2026
Background image footer

End the page with a visual destination.

Use this footer when the final section should feel atmospheric, emotional, and connected to the brand story.

Destinations

Show key travel, property, or event categories.

Experiences

Highlight the emotional value of the brand.

Support

Give visitors a clear contact path.

Ready to plan the next trip?

Use a strong CTA card over the visual background to keep the footer conversion-focused.

Start Planning

© 2026 VistaTravel. Background image footer example.

About Contact Privacy Terms

HTML

<footer class="background-image-footer">

  <div class="background-image-footer-inner">

    <div class="background-image-footer-top">

      <a class="background-image-footer-logo" href="#">
        <span class="background-image-footer-mark">V</span>
        <span>
          <strong>VistaTravel</strong>
          <span>Visual footer design</span>
        </span>
      </a>

      <div class="background-image-footer-weather">
        <small>Next escape</small>
        <strong>Summer 2026</strong>
      </div>

    </div>

    <div class="background-image-footer-hero">
      <div class="background-image-footer-kicker">Background image footer</div>
      <h3 class="background-image-footer-title">End the page with a <span>visual destination.</span></h3>
      <p class="background-image-footer-text">Use this footer when the final section should feel atmospheric, emotional, and connected to the brand story.</p>
    </div>

    <div class="background-image-footer-content">

      <div class="background-image-footer-card-grid">

        <div class="background-image-footer-card">
          <h3>Destinations</h3>
          <p>Show key travel, property, or event categories.</p>
        </div>

        <div class="background-image-footer-card">
          <h3>Experiences</h3>
          <p>Highlight the emotional value of the brand.</p>
        </div>

        <div class="background-image-footer-card">
          <h3>Support</h3>
          <p>Give visitors a clear contact path.</p>
        </div>

      </div>

      <div class="background-image-footer-cta">
        <h3>Ready to plan the next trip?</h3>
        <p>Use a strong CTA card over the visual background to keep the footer conversion-focused.</p>
        <a href="#">Start Planning</a>
      </div>

    </div>

    <div class="background-image-footer-bottom">
      <p>© 2026 VistaTravel. Background image footer example.</p>

      <div class="background-image-footer-links">
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
      </div>
    </div>

  </div>

</footer>

CSS

.background-image-footer{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:40px;
min-height:620px;
background:
linear-gradient(135deg,rgba(2,6,23,.78),rgba(2,6,23,.34) 48%,rgba(124,45,18,.72)),
radial-gradient(circle at 20% 16%,rgba(14,165,233,.34),transparent 30%),
radial-gradient(circle at 80% 18%,rgba(249,115,22,.28),transparent 32%),
linear-gradient(135deg,#0f172a,#164e63 45%,#7c2d12);
box-shadow:0 34px 100px rgba(15,23,42,.28);
}

.background-image-footer::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:46px 46px;
opacity:.55;
pointer-events:none;
}

.background-image-footer::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(to top,rgba(2,6,23,.88),transparent 56%),
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%);
pointer-events:none;
}

.background-image-footer-inner{
position:relative;
z-index:2;
display:flex;
min-height:620px;
flex-direction:column;
justify-content:space-between;
gap:36px;
padding:38px;
}

.background-image-footer-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
}

.background-image-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
padding:12px;
border-radius:22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(14px);
text-decoration:none;
}

.background-image-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:17px;
font-weight:950;
box-shadow:0 16px 34px rgba(0,0,0,.20);
}

.background-image-footer-logo strong{
display:block;
color:#ffffff;
font-size:18px;
line-height:1.1;
font-weight:950;
letter-spacing:-.035em;
}

.background-image-footer-logo span{
display:block;
margin-top:3px;
color:#cbd5e1;
font-size:12px;
line-height:1.2;
font-weight:700;
}

.background-image-footer-weather{
display:grid;
gap:4px;
padding:14px 16px;
border-radius:22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(14px);
text-align:right;
}

.background-image-footer-weather small{
color:#bae6fd;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.background-image-footer-weather strong{
color:#ffffff;
font-size:22px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
}

.background-image-footer-hero{
max-width:760px;
}

.background-image-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(14,165,233,.16);
border:1px solid rgba(125,211,252,.24);
color:#bae6fd;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.background-image-footer-title{
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(42px,7vw,88px);
line-height:.94;
font-weight:950;
letter-spacing:-.09em;
}

.background-image-footer-title span{
color:#fed7aa !important;
-webkit-text-fill-color:#fed7aa !important;
}

.background-image-footer-text{
max-width:620px;
margin:18px 0 0;
color:#e5e7eb;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.background-image-footer-content{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:18px;
align-items:end;
}

.background-image-footer-card-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.background-image-footer-card{
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(16px);
transition:transform .22s ease,background .22s ease;
}

.background-image-footer-card:hover{
transform:translateY(-5px);
background:rgba(255,255,255,.16);
}

.background-image-footer-card h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:18px;
line-height:1.15;
font-weight:950;
letter-spacing:-.035em;
}

.background-image-footer-card p{
margin:0;
color:#d1d5db;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.background-image-footer-cta{
padding:24px;
border-radius:30px;
background:#ffffff;
box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.background-image-footer-cta h3{
margin:0 0 10px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:27px;
line-height:1.05;
font-weight:950;
letter-spacing:-.055em;
}

.background-image-footer-cta p{
margin:0 0 18px;
color:#475569;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.background-image-footer-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
border-radius:999px;
background:linear-gradient(135deg,#0ea5e9,#f97316);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
text-decoration:none !important;
box-shadow:0 16px 34px rgba(14,165,233,.22);
transition:transform .2s ease,box-shadow .2s ease;
}

.background-image-footer-cta a:hover{
transform:translateY(-2px);
box-shadow:0 20px 44px rgba(14,165,233,.30);
}

.background-image-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.14);
}

.background-image-footer-bottom p{
margin:0;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.background-image-footer-links{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.background-image-footer-links a{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:800;
text-decoration:none !important;
}

.background-image-footer-links a:hover{
color:#fed7aa !important;
-webkit-text-fill-color:#fed7aa !important;
}

@media (max-width:980px){
.background-image-footer-content{
grid-template-columns:1fr;
}

.background-image-footer-card-grid{
grid-template-columns:1fr;
}

.background-image-footer-cta{
max-width:420px;
}
}

@media (max-width:640px){
.background-image-footer{
border-radius:30px;
min-height:760px;
}

.background-image-footer-inner{
min-height:760px;
padding:26px;
}

.background-image-footer-top,
.background-image-footer-bottom{
align-items:flex-start;
flex-direction:column;
}

.background-image-footer-weather{
text-align:left;
}

.background-image-footer-title{
font-size:48px;
}

.background-image-footer-cta{
max-width:none;
}

.background-image-footer-links{
justify-content:flex-start;
}
}

This background image footer is best when the final section should feel more atmospheric and visual. The layered background, overlay, floating cards, and CTA panel make the footer feel like a branded closing scene instead of a basic navigation block.

24. Footer with Logo and Navigation

A footer with logo and navigation is one of the most practical footer patterns. It works well when a website needs a clean branded ending with a visible logo, simple navigation links, social links, and legal text without making the footer too large or complex.

The example below uses a centered logo-first layout with animated navigation pills, a soft layered background, and a balanced bottom row. It is cleaner and lighter than a mega footer, making it useful for business websites, portfolios, SaaS landing pages, and small brand websites.

  • Clean logo and navigation footer layout
  • Great for business websites, portfolios, SaaS pages, and small brands
  • Includes logo, navigation pills, social links, and legal row
  • Uses subtle hover effects and soft background layers
  • Scrollable visual preview box for consistent article layout

HTML

<footer class="logo-navigation-footer">

  <div class="logo-navigation-footer-inner">

    <div class="logo-navigation-footer-main">

      <a class="logo-navigation-footer-brand" href="#">
        <span class="logo-navigation-footer-logo">L</span>
        <span>
          <strong>LogoNav</strong>
          <span>A clean footer with a strong logo, simple navigation, social links, and legal information.</span>
        </span>
      </a>

      <nav class="logo-navigation-footer-nav" aria-label="Footer navigation">
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">Work</a>
        <a href="#">Resources</a>
        <a href="#">Pricing</a>
        <a href="#">Contact</a>
      </nav>

      <div class="logo-navigation-footer-divider"></div>

      <div class="logo-navigation-footer-socials" aria-label="Social links">
        <a href="#">X</a>
        <a href="#">in</a>
        <a href="#">Gh</a>
        <a href="#">Dr</a>
      </div>

    </div>

    <div class="logo-navigation-footer-bottom">
      <p>© 2026 LogoNav. Logo and navigation footer example.</p>

      <div class="logo-navigation-footer-legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Cookies</a>
      </div>
    </div>

  </div>

</footer>

CSS

.logo-navigation-footer{
position:relative;
width:min(100%,1080px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.logo-navigation-footer::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 20% 12%,rgba(99,102,241,.20),transparent 34%),
radial-gradient(circle at 82% 20%,rgba(16,185,129,.18),transparent 32%),
radial-gradient(circle at 50% 100%,rgba(14,165,233,.12),transparent 34%);
pointer-events:none;
}

.logo-navigation-footer-inner{
position:relative;
z-index:2;
padding:38px;
}

.logo-navigation-footer-main{
display:grid;
justify-items:center;
text-align:center;
gap:24px;
padding:34px;
border-radius:32px;
background:rgba(248,250,252,.76);
border:1px solid rgba(15,23,42,.08);
backdrop-filter:blur(14px);
}

.logo-navigation-footer-brand{
display:grid;
justify-items:center;
gap:14px;
text-decoration:none;
}

.logo-navigation-footer-logo{
display:inline-flex;
align-items:center;
justify-content:center;
width:72px;
height:72px;
border-radius:26px;
background:
linear-gradient(135deg,#6366f1,#10b981);
color:#ffffff;
font-size:26px;
font-weight:950;
letter-spacing:-.05em;
box-shadow:0 20px 48px rgba(99,102,241,.24);
transition:transform .24s ease,box-shadow .24s ease;
}

.logo-navigation-footer-brand:hover .logo-navigation-footer-logo{
transform:translateY(-4px) rotate(-3deg);
box-shadow:0 26px 58px rgba(99,102,241,.32);
}

.logo-navigation-footer-brand strong{
display:block;
color:#0f172a;
font-size:clamp(30px,4vw,48px);
line-height:1;
font-weight:950;
letter-spacing:-.07em;
}

.logo-navigation-footer-brand span{
display:block;
max-width:560px;
color:#64748b;
font-size:15px;
line-height:1.6;
font-weight:650;
}

.logo-navigation-footer-nav{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:9px;
}

.logo-navigation-footer-nav a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:12px 15px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:14px;
font-weight:850;
line-height:1;
text-decoration:none !important;
box-shadow:0 12px 28px rgba(15,23,42,.05);
overflow:hidden;
transition:transform .2s ease,color .2s ease,border-color .2s ease;
}

.logo-navigation-footer-nav a::before{
content:"";
position:absolute;
left:50%;
bottom:-18px;
width:52px;
height:52px;
border-radius:50%;
background:rgba(99,102,241,.12);
transform:translateX(-50%) scale(.2);
opacity:0;
transition:transform .24s ease,opacity .24s ease;
}

.logo-navigation-footer-nav a:hover{
transform:translateY(-3px);
border-color:rgba(99,102,241,.20);
color:#4f46e5 !important;
-webkit-text-fill-color:#4f46e5 !important;
}

.logo-navigation-footer-nav a:hover::before{
opacity:1;
transform:translateX(-50%) scale(1);
}

.logo-navigation-footer-socials{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px;
}

.logo-navigation-footer-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:900;
text-decoration:none !important;
box-shadow:0 14px 30px rgba(15,23,42,.14);
transition:transform .2s ease,background .2s ease;
}

.logo-navigation-footer-socials a:hover{
transform:translateY(-3px);
background:#4f46e5;
}

.logo-navigation-footer-divider{
width:100%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(15,23,42,.12),transparent);
}

.logo-navigation-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:24px;
margin-top:24px;
border-top:1px solid rgba(15,23,42,.08);
}

.logo-navigation-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.logo-navigation-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.logo-navigation-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.logo-navigation-footer-legal a:hover{
color:#4f46e5 !important;
-webkit-text-fill-color:#4f46e5 !important;
}

@media (max-width:640px){
.logo-navigation-footer{
border-radius:30px;
}

.logo-navigation-footer-inner{
padding:22px;
}

.logo-navigation-footer-main{
padding:26px 18px;
border-radius:26px;
}

.logo-navigation-footer-brand strong{
font-size:34px;
}

.logo-navigation-footer-nav{
align-items:stretch;
width:100%;
}

.logo-navigation-footer-nav a{
width:100%;
}

.logo-navigation-footer-bottom{
align-items:flex-start;
flex-direction:column;
}

.logo-navigation-footer-legal{
justify-content:flex-start;
}
}

This logo and navigation footer is useful when the website needs a clean branded ending without a heavy layout. The centered logo, navigation pills, social buttons, and legal row keep the footer simple, professional, and easy to scan.

25. Footer with Newsletter and Links

A footer with newsletter and links is a practical pattern for websites that want to collect subscribers while still giving users clear navigation. It works well for blogs, SaaS websites, ecommerce stores, agencies, creators, and product websites.

The example below uses a large newsletter card on the left and organized link groups on the right. The visual preview box is scrollable, so the full footer can be viewed inside the article without breaking the page layout.

  • Newsletter-focused footer with useful navigation links
  • Great for blogs, SaaS products, ecommerce stores, and agencies
  • Includes subscribe form, link groups, social links, and legal links
  • Uses a split card layout with soft gradients
  • Scrollable preview box for taller footer examples

HTML

<footer class="newsletter-links-footer">

  <div class="newsletter-links-footer-inner">

    <div class="newsletter-links-footer-grid">

      <section class="newsletter-links-footer-signup">

        <div class="newsletter-links-footer-signup-content">
          <div class="newsletter-links-footer-kicker">Newsletter and links</div>
          <h3 class="newsletter-links-footer-title">Get useful ideas before everyone <span>else does.</span></h3>
          <p class="newsletter-links-footer-text">Use this footer when newsletter signup and navigation links are both important parts of the final website section.</p>
        </div>

        <div class="newsletter-links-footer-form-wrap">
          <div class="newsletter-links-footer-form-card">
            <h3>Join the weekly list</h3>
            <p>Receive practical CSS layouts, UI patterns, and website section ideas.</p>

            <form class="newsletter-links-footer-form">
              <input type="email" placeholder="Email address">
              <button type="submit">Subscribe</button>
            </form>

            <span class="newsletter-links-footer-note">No spam. Only useful design and development ideas.</span>
          </div>
        </div>

      </section>

      <section class="newsletter-links-footer-right">

        <div class="newsletter-links-footer-topbar">

          <a class="newsletter-links-footer-logo" href="#">
            <span class="newsletter-links-footer-mark">N</span>
            <span>
              <strong>NewsletterKit</strong>
              <span>Footer with links</span>
            </span>
          </a>

          <div class="newsletter-links-footer-socials" aria-label="Social links">
            <a href="#">X</a>
            <a href="#">in</a>
            <a href="#">YT</a>
          </div>

        </div>

        <div class="newsletter-links-footer-link-grid">

          <div class="newsletter-links-footer-column">
            <h3>Explore</h3>
            <ul>
              <li><a href="#">Latest Articles</a></li>
              <li><a href="#">CSS Examples</a></li>
              <li><a href="#">UI Patterns</a></li>
              <li><a href="#">Templates</a></li>
            </ul>
          </div>

          <div class="newsletter-links-footer-column">
            <h3>Company</h3>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Advertise</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Partners</a></li>
            </ul>
          </div>

          <div class="newsletter-links-footer-column">
            <h3>Resources</h3>
            <ul>
              <li><a href="#">Guides</a></li>
              <li><a href="#">Free Tools</a></li>
              <li><a href="#">Newsletter Archive</a></li>
              <li><a href="#">Design Notes</a></li>
            </ul>
          </div>

          <div class="newsletter-links-footer-column">
            <h3>Support</h3>
            <ul>
              <li><a href="#">Help Center</a></li>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Cookies</a></li>
            </ul>
          </div>

        </div>

      </section>

    </div>

    <div class="newsletter-links-footer-bottom">
      <p>© 2026 NewsletterKit. Newsletter and links footer example.</p>

      <div class="newsletter-links-footer-legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Cookies</a>
      </div>
    </div>

  </div>

</footer>

CSS

.newsletter-links-footer{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.newsletter-links-footer::before{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 16% 12%,rgba(168,85,247,.18),transparent 34%),
radial-gradient(circle at 86% 18%,rgba(34,197,94,.16),transparent 32%),
radial-gradient(circle at 50% 100%,rgba(14,165,233,.12),transparent 34%);
pointer-events:none;
}

.newsletter-links-footer-inner{
position:relative;
z-index:2;
padding:28px;
}

.newsletter-links-footer-grid{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:18px;
align-items:stretch;
}

.newsletter-links-footer-signup{
position:relative;
overflow:hidden;
min-height:500px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:34px;
padding:34px;
border-radius:32px;
background:
radial-gradient(circle at 12% 0%,rgba(255,255,255,.18),transparent 34%),
linear-gradient(135deg,#581c87,#111827 68%);
box-shadow:0 24px 70px rgba(88,28,135,.22);
}

.newsletter-links-footer-signup::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px);
pointer-events:none;
}

.newsletter-links-footer-signup-content,
.newsletter-links-footer-form-wrap{
position:relative;
z-index:2;
}

.newsletter-links-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
color:#e9d5ff;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.newsletter-links-footer-title{
max-width:620px;
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:-.085em;
}

.newsletter-links-footer-title span{
background:linear-gradient(90deg,#e9d5ff,#86efac,#93c5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.newsletter-links-footer-text{
max-width:540px;
margin:18px 0 0;
color:#d1d5db;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.newsletter-links-footer-form-card{
padding:18px;
border-radius:26px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(14px);
}

.newsletter-links-footer-form-card h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.newsletter-links-footer-form-card p{
margin:0 0 16px;
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.newsletter-links-footer-form{
display:flex;
gap:8px;
padding:6px;
border-radius:18px;
background:#ffffff;
}

.newsletter-links-footer-form input{
min-width:0;
flex:1;
border:0;
outline:0;
padding:13px 12px;
border-radius:14px;
background:transparent;
color:#111827;
font-size:14px;
font-weight:650;
}

.newsletter-links-footer-form input::placeholder{
color:#64748b;
}

.newsletter-links-footer-form button{
border:0;
cursor:pointer;
padding:13px 15px;
border-radius:14px;
background:linear-gradient(135deg,#7c3aed,#10b981);
color:#ffffff;
font-size:14px;
font-weight:950;
white-space:nowrap;
}

.newsletter-links-footer-note{
display:block;
margin-top:12px;
color:#cbd5e1;
font-size:12px;
line-height:1.5;
font-weight:700;
}

.newsletter-links-footer-right{
display:grid;
gap:18px;
align-content:stretch;
}

.newsletter-links-footer-topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.07);
}

.newsletter-links-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.newsletter-links-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#7c3aed,#10b981);
color:#ffffff;
font-size:17px;
font-weight:950;
box-shadow:0 16px 34px rgba(124,58,237,.20);
}

.newsletter-links-footer-logo strong{
display:block;
color:#0f172a;
font-size:19px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.newsletter-links-footer-logo span{
display:block;
margin-top:3px;
color:#64748b;
font-size:12px;
line-height:1.2;
font-weight:700;
}

.newsletter-links-footer-socials{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
}

.newsletter-links-footer-socials a{
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:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:12px;
font-weight:900;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease,color .2s ease;
}

.newsletter-links-footer-socials a:hover{
transform:translateY(-3px);
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.newsletter-links-footer-link-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.newsletter-links-footer-column{
padding:22px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.06);
}

.newsletter-links-footer-column h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:13px;
line-height:1.2;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.newsletter-links-footer-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.newsletter-links-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.newsletter-links-footer-column a{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
transition:color .2s ease,transform .2s ease;
}

.newsletter-links-footer-column a:hover{
transform:translateX(3px);
color:#7c3aed !important;
-webkit-text-fill-color:#7c3aed !important;
}

.newsletter-links-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:22px;
margin-top:22px;
border-top:1px solid rgba(15,23,42,.08);
}

.newsletter-links-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.newsletter-links-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.newsletter-links-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.newsletter-links-footer-legal a:hover{
color:#7c3aed !important;
-webkit-text-fill-color:#7c3aed !important;
}

@media (max-width:980px){
.newsletter-links-footer-grid{
grid-template-columns:1fr;
}

.newsletter-links-footer-signup{
min-height:420px;
}
}

@media (max-width:640px){
.newsletter-links-footer{
border-radius:30px;
}

.newsletter-links-footer-inner{
padding:18px;
}

.newsletter-links-footer-signup{
min-height:520px;
padding:26px;
border-radius:26px;
}

.newsletter-links-footer-title{
font-size:42px;
}

.newsletter-links-footer-form{
flex-direction:column;
}

.newsletter-links-footer-form button{
width:100%;
}

.newsletter-links-footer-topbar{
align-items:flex-start;
flex-direction:column;
}

.newsletter-links-footer-socials{
justify-content:flex-start;
}

.newsletter-links-footer-link-grid{
grid-template-columns:1fr;
}

.newsletter-links-footer-bottom{
align-items:flex-start;
flex-direction:column;
}

.newsletter-links-footer-legal{
justify-content:flex-start;
}
}

This newsletter and links footer is a strong choice when the website needs both conversion and navigation. The large signup card draws attention, while the right-side link groups keep important pages easy to find.

26. Footer with Accordion Links

A footer with accordion links is useful when a website has many footer links but needs to stay compact on mobile. Accordions let users open only the link group they need, which is especially helpful for ecommerce stores, SaaS websites, documentation websites, and content-heavy blogs.

The example below uses native HTML <details> and <summary> elements, so it works without JavaScript. On desktop, the accordion blocks look like organized cards. On mobile, they remain easy to tap and scan.

  • Footer with accordion link groups
  • Uses native HTML details and summary elements
  • Works without JavaScript
  • Great for mobile-friendly ecommerce, SaaS, blog, and support footers
  • Scrollable preview box for taller footer examples

HTML

<footer class="accordion-links-footer">

  <div class="accordion-links-footer-hero">

    <div class="accordion-links-footer-hero-inner">

      <div>
        <div class="accordion-links-footer-kicker">Accordion links</div>
        <h3 class="accordion-links-footer-title">Organize many footer links without <span>visual clutter.</span></h3>
        <p class="accordion-links-footer-text">Use native accordion sections when your footer has many pages but still needs to stay mobile-friendly.</p>
      </div>

      <a class="accordion-links-footer-logo" href="#">
        <span class="accordion-links-footer-mark">A</span>
        <span>
          <strong>AccordionBase</strong>
          <small>Native details footer</small>
        </span>
      </a>

    </div>

  </div>

  <div class="accordion-links-footer-body">

    <aside class="accordion-links-footer-info">
      <h3>Tap, scan, and find faster.</h3>
      <p>This footer uses native HTML accordion elements, so users can open only the section they need.</p>
      <a href="#">View All Resources</a>
    </aside>

    <div class="accordion-links-footer-accordion">

      <details class="accordion-links-footer-item" open>
        <summary>Products</summary>
        <div class="accordion-links-footer-panel">
          <a href="#">Website Builder</a>
          <a href="#">Templates</a>
          <a href="#">Components</a>
          <a href="#">Pricing</a>
        </div>
      </details>

      <details class="accordion-links-footer-item">
        <summary>Resources</summary>
        <div class="accordion-links-footer-panel">
          <a href="#">Documentation</a>
          <a href="#">CSS Guides</a>
          <a href="#">Tutorials</a>
          <a href="#">Blog</a>
        </div>
      </details>

      <details class="accordion-links-footer-item">
        <summary>Company</summary>
        <div class="accordion-links-footer-panel">
          <a href="#">About</a>
          <a href="#">Careers</a>
          <a href="#">Contact</a>
          <a href="#">Press</a>
        </div>
      </details>

      <details class="accordion-links-footer-item">
        <summary>Support</summary>
        <div class="accordion-links-footer-panel">
          <a href="#">Help Center</a>
          <a href="#">System Status</a>
          <a href="#">Security</a>
          <a href="#">Community</a>
        </div>
      </details>

    </div>

  </div>

  <div class="accordion-links-footer-bottom">
    <p>© 2026 AccordionBase. Accordion footer links example.</p>

    <div class="accordion-links-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.accordion-links-footer{
width:min(100%,1120px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.accordion-links-footer-hero{
position:relative;
overflow:hidden;
padding:36px;
background:
radial-gradient(circle at 12% 0%,rgba(14,165,233,.26),transparent 34%),
radial-gradient(circle at 90% 12%,rgba(245,158,11,.20),transparent 32%),
linear-gradient(135deg,#0f172a,#164e63);
}

.accordion-links-footer-hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px);
pointer-events:none;
}

.accordion-links-footer-hero-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:end;
}

.accordion-links-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(14,165,233,.16);
border:1px solid rgba(125,211,252,.24);
color:#bae6fd;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.accordion-links-footer-title{
max-width:760px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,64px);
line-height:1;
font-weight:950;
letter-spacing:-.075em;
}

.accordion-links-footer-title span{
color:#fcd34d !important;
-webkit-text-fill-color:#fcd34d !important;
}

.accordion-links-footer-text{
max-width:620px;
margin:16px 0 0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.accordion-links-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
padding:12px;
border-radius:22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
text-decoration:none;
}

.accordion-links-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:17px;
font-weight:950;
}

.accordion-links-footer-logo strong{
display:block;
color:#ffffff;
font-size:17px;
line-height:1.1;
font-weight:950;
letter-spacing:-.03em;
}

.accordion-links-footer-logo small{
display:block;
margin-top:3px;
color:#cbd5e1;
font-size:12px;
line-height:1.2;
font-weight:700;
}

.accordion-links-footer-body{
display:grid;
grid-template-columns:330px minmax(0,1fr);
gap:22px;
padding:30px 36px;
background:#f8fafc;
}

.accordion-links-footer-info{
padding:24px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.07);
}

.accordion-links-footer-info h3{
margin:0 0 10px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:26px;
line-height:1.05;
font-weight:950;
letter-spacing:-.055em;
}

.accordion-links-footer-info p{
margin:0 0 18px;
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.accordion-links-footer-info a{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
text-decoration:none !important;
}

.accordion-links-footer-accordion{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
align-content:start;
}

.accordion-links-footer-item{
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.06);
overflow:hidden;
}

.accordion-links-footer-item summary{
cursor:pointer;
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px;
color:#0f172a;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
user-select:none;
}

.accordion-links-footer-item summary::-webkit-details-marker{
display:none;
}

.accordion-links-footer-item summary::after{
content:"+";
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
flex:0 0 30px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#0f172a;
font-size:18px;
font-weight:900;
line-height:1;
transition:transform .2s ease,background .2s ease,color .2s ease;
}

.accordion-links-footer-item[open] summary::after{
content:"−";
background:#0ea5e9;
color:#ffffff;
border-color:#0ea5e9;
}

.accordion-links-footer-panel{
display:grid;
gap:10px;
padding:0 20px 20px;
}

.accordion-links-footer-panel a{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 0;
border-top:1px solid rgba(15,23,42,.08);
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
transition:color .2s ease,transform .2s ease;
}

.accordion-links-footer-panel a::after{
content:"→";
opacity:.35;
font-weight:950;
}

.accordion-links-footer-panel a:hover{
transform:translateX(3px);
color:#0ea5e9 !important;
-webkit-text-fill-color:#0ea5e9 !important;
}

.accordion-links-footer-panel a:hover::after{
opacity:1;
}

.accordion-links-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 36px;
background:#ffffff;
border-top:1px solid rgba(15,23,42,.08);
}

.accordion-links-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.accordion-links-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.accordion-links-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.accordion-links-footer-legal a:hover{
color:#0ea5e9 !important;
-webkit-text-fill-color:#0ea5e9 !important;
}

@media (max-width:980px){
.accordion-links-footer-hero-inner,
.accordion-links-footer-body{
grid-template-columns:1fr;
}

.accordion-links-footer-logo{
width:max-content;
}
}

@media (max-width:700px){
.accordion-links-footer{
border-radius:30px;
}

.accordion-links-footer-hero,
.accordion-links-footer-body{
padding:26px;
}

.accordion-links-footer-title{
font-size:36px;
}

.accordion-links-footer-accordion{
grid-template-columns:1fr;
}

.accordion-links-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 26px;
}

.accordion-links-footer-legal{
justify-content:flex-start;
}
}

This accordion links footer is useful when the footer has many sections but should stay clean and mobile-friendly. Native details and summary elements keep the layout functional without requiring JavaScript.

27. Footer with Tabs

A footer with tabs is useful when you want to show different footer content groups without making the footer extremely tall. Instead of displaying every link, feature, resource, and contact block at once, visitors can switch between focused sections.

The example below uses a tabbed footer with sections for product links, resources, company information, and support. It includes a small JavaScript snippet to switch active panels. The preview box is scrollable, so the visual example stays contained inside the article layout.

  • Tabbed footer layout for organized footer content
  • Good for SaaS, apps, documentation websites, and larger business sites
  • Includes product, resources, company, and support panels
  • Uses accessible tab buttons with simple JavaScript
  • Scrollable preview box for taller visual examples

HTML

<footer class="tabs-footer">

  <div class="tabs-footer-hero">
    <div class="tabs-footer-hero-inner">

      <div>
        <div class="tabs-footer-kicker">Tabbed footer</div>
        <h3 class="tabs-footer-title">Switch between footer sections without <span>adding clutter.</span></h3>
        <p class="tabs-footer-text">Use footer tabs when you need to show several groups of content but want the design to stay focused and easy to scan.</p>
      </div>

      <div class="tabs-footer-newsletter">
        <h3>Get product updates</h3>
        <p>Subscribe for new features, guides, and useful resources.</p>

        <form class="tabs-footer-form">
          <input type="email" placeholder="Email address">
          <button type="submit">Subscribe</button>
        </form>
      </div>

    </div>
  </div>

  <div class="tabs-footer-body">

    <div class="tabs-footer-tablist" role="tablist" aria-label="Footer tabs">
      <button class="tabs-footer-tab is-active" type="button" data-tabs-footer-target="tabs-footer-product">Product</button>
      <button class="tabs-footer-tab" type="button" data-tabs-footer-target="tabs-footer-resources">Resources</button>
      <button class="tabs-footer-tab" type="button" data-tabs-footer-target="tabs-footer-company">Company</button>
      <button class="tabs-footer-tab" type="button" data-tabs-footer-target="tabs-footer-support">Support</button>
    </div>

    <div class="tabs-footer-panel is-active" id="tabs-footer-product">

      <div class="tabs-footer-panel-main">
        <div class="tabs-footer-link-card">
          <h3>Features</h3>
          <ul>
            <li><a href="#">Automation</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Integrations</a></li>
          </ul>
        </div>

        <div class="tabs-footer-link-card">
          <h3>Plans</h3>
          <ul>
            <li><a href="#">Free Plan</a></li>
            <li><a href="#">Pro Plan</a></li>
            <li><a href="#">Enterprise</a></li>
          </ul>
        </div>

        <div class="tabs-footer-link-card">
          <h3>Use Cases</h3>
          <ul>
            <li><a href="#">Marketing Teams</a></li>
            <li><a href="#">Agencies</a></li>
            <li><a href="#">SaaS Teams</a></li>
          </ul>
        </div>
      </div>

      <div class="tabs-footer-feature">
        <small>Product highlight</small>
        <h3>Build faster with one organized system.</h3>
        <p>Show the most important product CTA inside the active footer tab.</p>
        <a href="#">Explore Product</a>
      </div>

    </div>

    <div class="tabs-footer-panel" id="tabs-footer-resources">
      <!-- Same structure as the first panel, but with resource links. -->
    </div>

    <div class="tabs-footer-panel" id="tabs-footer-company">
      <!-- Same structure as the first panel, but with company links. -->
    </div>

    <div class="tabs-footer-panel" id="tabs-footer-support">
      <!-- Same structure as the first panel, but with support links. -->
    </div>

  </div>

  <div class="tabs-footer-bottom">
    <p>© 2026 TabFooter. Tabbed footer example.</p>

    <div class="tabs-footer-legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>

</footer>

CSS

.tabs-footer{
width:min(100%,1120px);
overflow:hidden;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.14);
}

.tabs-footer-hero{
position:relative;
overflow:hidden;
padding:36px;
background:
radial-gradient(circle at 12% 0%,rgba(59,130,246,.26),transparent 34%),
radial-gradient(circle at 90% 10%,rgba(168,85,247,.22),transparent 32%),
linear-gradient(135deg,#0f172a,#312e81);
}

.tabs-footer-hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px);
pointer-events:none;
}

.tabs-footer-hero-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:28px;
align-items:end;
}

.tabs-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(59,130,246,.16);
border:1px solid rgba(147,197,253,.24);
color:#bfdbfe;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.tabs-footer-title{
max-width:760px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,64px);
line-height:1;
font-weight:950;
letter-spacing:-.075em;
}

.tabs-footer-title span{
background:linear-gradient(90deg,#93c5fd,#c4b5fd,#86efac);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.tabs-footer-text{
max-width:620px;
margin:16px 0 0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.tabs-footer-newsletter{
padding:18px;
border-radius:26px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}

.tabs-footer-newsletter h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:20px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.tabs-footer-newsletter p{
margin:0 0 14px;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.tabs-footer-form{
display:grid;
gap:8px;
}

.tabs-footer-form input{
width:100%;
box-sizing:border-box;
border:0;
outline:0;
padding:13px 14px;
border-radius:14px;
background:#ffffff;
color:#0f172a;
font-size:14px;
font-weight:650;
}

.tabs-footer-form button{
border:0;
cursor:pointer;
padding:13px 14px;
border-radius:14px;
background:linear-gradient(135deg,#3b82f6,#8b5cf6);
color:#ffffff;
font-size:14px;
font-weight:950;
}

.tabs-footer-body{
padding:30px 36px;
background:#f8fafc;
}

.tabs-footer-tablist{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:18px;
}

.tabs-footer-tab{
border:0;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:12px 16px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:14px;
font-weight:900;
line-height:1;
box-shadow:0 12px 28px rgba(15,23,42,.05);
transition:transform .2s ease,background .2s ease,color .2s ease;
}

.tabs-footer-tab:hover{
transform:translateY(-2px);
}

.tabs-footer-tab.is-active{
background:#0f172a;
color:#ffffff;
}

.tabs-footer-panel{
display:none;
grid-template-columns:minmax(0,1fr) 300px;
gap:18px;
align-items:stretch;
}

.tabs-footer-panel.is-active{
display:grid;
}

.tabs-footer-panel-main{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.tabs-footer-link-card{
padding:22px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.06);
}

.tabs-footer-link-card h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:17px;
line-height:1.15;
font-weight:950;
letter-spacing:-.035em;
}

.tabs-footer-link-card ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.tabs-footer-link-card li{
margin:0;
padding:0;
list-style:none;
}

.tabs-footer-link-card a{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
transition:transform .2s ease,color .2s ease;
}

.tabs-footer-link-card a::after{
content:"→";
opacity:.35;
font-weight:950;
}

.tabs-footer-link-card a:hover{
transform:translateX(3px);
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

.tabs-footer-feature{
position:relative;
overflow:hidden;
padding:24px;
border-radius:26px;
background:#0f172a;
box-shadow:0 18px 48px rgba(15,23,42,.18);
}

.tabs-footer-feature::before{
content:"";
position:absolute;
inset:-80px;
background:
radial-gradient(circle at 20% 0%,rgba(59,130,246,.32),transparent 34%),
radial-gradient(circle at 88% 18%,rgba(168,85,247,.24),transparent 32%);
pointer-events:none;
}

.tabs-footer-feature small,
.tabs-footer-feature h3,
.tabs-footer-feature p,
.tabs-footer-feature a{
position:relative;
z-index:2;
}

.tabs-footer-feature small{
display:block;
margin-bottom:12px;
color:#bfdbfe;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.tabs-footer-feature h3{
margin:0 0 10px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:25px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
}

.tabs-footer-feature p{
margin:0 0 18px;
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.tabs-footer-feature a{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:42px;
border-radius:999px;
background:#ffffff;
color:#1d4ed8 !important;
-webkit-text-fill-color:#1d4ed8 !important;
font-size:14px;
font-weight:950;
text-decoration:none !important;
}

.tabs-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 36px;
background:#ffffff;
border-top:1px solid rgba(15,23,42,.08);
}

.tabs-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.tabs-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.tabs-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.tabs-footer-legal a:hover{
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

@media (max-width:980px){
.tabs-footer-hero-inner,
.tabs-footer-panel{
grid-template-columns:1fr;
}

.tabs-footer-panel-main{
grid-template-columns:1fr;
}
}

@media (max-width:700px){
.tabs-footer{
border-radius:30px;
}

.tabs-footer-hero,
.tabs-footer-body{
padding:26px;
}

.tabs-footer-title{
font-size:36px;
}

.tabs-footer-tablist{
display:grid;
grid-template-columns:1fr;
}

.tabs-footer-tab{
width:100%;
}

.tabs-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 26px;
}

.tabs-footer-legal{
justify-content:flex-start;
}
}

JavaScript

document.querySelectorAll(".tabs-footer").forEach(function(footer){
  const tabs = footer.querySelectorAll(".tabs-footer-tab");
  const panels = footer.querySelectorAll(".tabs-footer-panel");

  tabs.forEach(function(tab){
    tab.addEventListener("click", function(){
      const targetId = tab.getAttribute("data-tabs-footer-target");

      tabs.forEach(function(item){
        item.classList.remove("is-active");
      });

      panels.forEach(function(panel){
        panel.classList.remove("is-active");
      });

      tab.classList.add("is-active");

      const targetPanel = footer.querySelector("#" + targetId);
      if(targetPanel){
        targetPanel.classList.add("is-active");
      }
    });
  });
});

This tabbed footer is useful when a website has many footer sections but should not show everything at once. It keeps the footer focused, interactive, and easier to scan than a very long static link list.

28. Dashboard Footer

A dashboard footer is designed for admin panels, SaaS dashboards, web apps, client portals, analytics tools, and internal systems. It usually needs to be compact, informative, and practical rather than decorative.

The example below uses an app-style footer with system status, version number, quick utility links, documentation links, and support access. It looks different from marketing footers because it is built for logged-in product interfaces.

  • Dashboard-style footer for SaaS apps and admin interfaces
  • Includes system status, version number, utility links, and support
  • Good for dashboards, portals, admin panels, and web applications
  • Compact structure with practical UI details
  • Scrollable preview box for consistent article layout
D DashCore Admin dashboard UI
MH Admin User

Dashboard footer for app interfaces

This layout shows how a footer can work inside a SaaS dashboard, admin panel, portal, or logged-in product interface.

System online
Active projects 24 Projects currently being tracked.
API usage 82% Monthly usage across integrations.
Open tickets 6 Support requests waiting for review.

HTML

<div class="dashboard-footer-app">

  <header class="dashboard-footer-topbar">

    <a class="dashboard-footer-brand" href="#">
      <span class="dashboard-footer-mark">D</span>
      <span>
        <strong>DashCore</strong>
        <span>Admin dashboard UI</span>
      </span>
    </a>

    <div class="dashboard-footer-user">
      <span class="dashboard-footer-user-avatar">MH</span>
      <span>Admin User</span>
    </div>

  </header>

  <div class="dashboard-footer-content">

    <aside class="dashboard-footer-sidebar">
      <nav aria-label="Dashboard navigation">
        <a class="is-active" href="#">Overview</a>
        <a href="#">Reports</a>
        <a href="#">Projects</a>
        <a href="#">Settings</a>
      </nav>
    </aside>

    <main class="dashboard-footer-main">

      <section class="dashboard-footer-welcome">
        <div>
          <h3>Dashboard footer for app interfaces</h3>
          <p>This layout shows how a footer can work inside a SaaS dashboard, admin panel, portal, or logged-in product interface.</p>
        </div>

        <span class="dashboard-footer-status-pill">System online</span>
      </section>

      <section class="dashboard-footer-cards">

        <div class="dashboard-footer-card">
          <small>Active projects</small>
          <strong>24</strong>
          <span>Projects currently being tracked.</span>
        </div>

        <div class="dashboard-footer-card">
          <small>API usage</small>
          <strong>82%</strong>
          <span>Monthly usage across integrations.</span>
        </div>

        <div class="dashboard-footer-card">
          <small>Open tickets</small>
          <strong>6</strong>
          <span>Support requests waiting for review.</span>
        </div>

      </section>

    </main>

  </div>

  <footer class="dashboard-footer">

    <div class="dashboard-footer-mainbar">

      <div class="dashboard-footer-system">
        <span class="is-online">All systems operational</span>
        <span>Version 2.8.4</span>
        <span>Last sync: 2 min ago</span>
      </div>

      <div class="dashboard-footer-links">
        <a href="#">Docs</a>
        <a href="#">API</a>
        <a href="#">Status</a>
        <a href="#">Changelog</a>
      </div>

      <a class="dashboard-footer-support" href="#">Contact Support</a>

    </div>

    <div class="dashboard-footer-subbar">
      <p>© 2026 DashCore. Dashboard footer example.</p>

      <div class="dashboard-footer-subbar-links">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Security</a>
      </div>
    </div>

  </footer>

</div>

CSS

.dashboard-footer-app{
min-height:700px;
display:flex;
flex-direction:column;
overflow:hidden;
border-radius:32px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.dashboard-footer-topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:18px 22px;
background:#ffffff;
border-bottom:1px solid rgba(15,23,42,.08);
}

.dashboard-footer-brand{
display:inline-flex;
align-items:center;
gap:11px;
text-decoration:none;
}

.dashboard-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:14px;
background:linear-gradient(135deg,#10b981,#3b82f6);
color:#ffffff;
font-size:15px;
font-weight:950;
box-shadow:0 14px 30px rgba(16,185,129,.20);
}

.dashboard-footer-brand strong{
display:block;
color:#0f172a;
font-size:17px;
line-height:1.1;
font-weight:950;
letter-spacing:-.035em;
}

.dashboard-footer-brand span{
display:block;
margin-top:3px;
color:#64748b;
font-size:12px;
line-height:1.2;
font-weight:750;
}

.dashboard-footer-user{
display:flex;
align-items:center;
gap:10px;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.dashboard-footer-user-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:12px;
font-weight:950;
}

.dashboard-footer-user span{
color:#475569;
font-size:13px;
font-weight:800;
}

.dashboard-footer-content{
flex:1;
display:grid;
grid-template-columns:220px minmax(0,1fr);
gap:0;
}

.dashboard-footer-sidebar{
padding:18px;
background:#ffffff;
border-right:1px solid rgba(15,23,42,.08);
}

.dashboard-footer-sidebar nav{
display:grid;
gap:8px;
}

.dashboard-footer-sidebar a{
display:flex;
align-items:center;
gap:10px;
padding:11px 12px;
border-radius:14px;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:800;
line-height:1;
text-decoration:none !important;
transition:background .2s ease,color .2s ease,transform .2s ease;
}

.dashboard-footer-sidebar a:hover,
.dashboard-footer-sidebar a.is-active{
background:#ecfdf5;
color:#047857 !important;
-webkit-text-fill-color:#047857 !important;
}

.dashboard-footer-main{
padding:28px;
display:grid;
align-content:start;
gap:18px;
}

.dashboard-footer-welcome{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
padding:26px;
border-radius:26px;
background:
radial-gradient(circle at 10% 0%,rgba(16,185,129,.16),transparent 34%),
linear-gradient(135deg,#ffffff,#f8fafc);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.06);
}

.dashboard-footer-welcome h3{
margin:0 0 8px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:32px;
line-height:1.05;
font-weight:950;
letter-spacing:-.065em;
}

.dashboard-footer-welcome p{
max-width:620px;
margin:0;
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.dashboard-footer-status-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 12px;
border-radius:999px;
background:#ecfdf5;
border:1px solid rgba(16,185,129,.14);
color:#047857;
font-size:12px;
font-weight:950;
line-height:1;
text-transform:uppercase;
letter-spacing:.06em;
}

.dashboard-footer-status-pill::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.dashboard-footer-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.dashboard-footer-card{
padding:20px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.06);
}

.dashboard-footer-card small{
display:block;
margin-bottom:8px;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.dashboard-footer-card strong{
display:block;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.dashboard-footer-card span{
display:block;
margin-top:7px;
color:#64748b;
font-size:13px;
line-height:1.4;
font-weight:650;
}

.dashboard-footer{
margin-top:auto;
background:#ffffff;
border-top:1px solid rgba(15,23,42,.08);
}

.dashboard-footer-mainbar{
display:grid;
grid-template-columns:1fr auto auto;
gap:18px;
align-items:center;
padding:18px 22px;
}

.dashboard-footer-system{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.dashboard-footer-system span{
display:inline-flex;
align-items:center;
gap:7px;
min-height:34px;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:850;
line-height:1;
}

.dashboard-footer-system span.is-online::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:#22c55e;
}

.dashboard-footer-links{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
}

.dashboard-footer-links a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:800;
text-decoration:none !important;
}

.dashboard-footer-links a:hover{
color:#047857 !important;
-webkit-text-fill-color:#047857 !important;
}

.dashboard-footer-support{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:10px 14px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:900;
line-height:1;
text-decoration:none !important;
box-shadow:0 14px 30px rgba(15,23,42,.16);
transition:transform .2s ease;
}

.dashboard-footer-support:hover{
transform:translateY(-2px);
}

.dashboard-footer-subbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:14px 22px;
background:#f8fafc;
border-top:1px solid rgba(15,23,42,.08);
}

.dashboard-footer-subbar p{
margin:0;
color:#64748b;
font-size:12px;
line-height:1.5;
font-weight:700;
}

.dashboard-footer-subbar-links{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:12px;
}

.dashboard-footer-subbar-links a{
color:#64748b !important;
-webkit-text-fill-color:#64748b !important;
font-size:12px;
font-weight:800;
text-decoration:none !important;
}

.dashboard-footer-subbar-links a:hover{
color:#047857 !important;
-webkit-text-fill-color:#047857 !important;
}

@media (max-width:920px){
.dashboard-footer-content{
grid-template-columns:1fr;
}

.dashboard-footer-sidebar{
border-right:0;
border-bottom:1px solid rgba(15,23,42,.08);
}

.dashboard-footer-sidebar nav{
grid-template-columns:repeat(4,minmax(0,1fr));
}

.dashboard-footer-welcome{
grid-template-columns:1fr;
}

.dashboard-footer-cards{
grid-template-columns:1fr;
}

.dashboard-footer-mainbar{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.dashboard-footer-app{
border-radius:26px;
}

.dashboard-footer-topbar{
align-items:flex-start;
flex-direction:column;
}

.dashboard-footer-sidebar nav{
grid-template-columns:1fr;
}

.dashboard-footer-main{
padding:20px;
}

.dashboard-footer-welcome h3{
font-size:28px;
}

.dashboard-footer-mainbar,
.dashboard-footer-subbar{
align-items:flex-start;
flex-direction:column;
}

.dashboard-footer-links,
.dashboard-footer-subbar-links{
justify-content:flex-start;
}

.dashboard-footer-support{
width:100%;
}
}

This dashboard footer is best for logged-in interfaces where users need status, documentation, support, version details, and legal links. It is more compact and practical than a marketing footer, making it suitable for admin panels and SaaS dashboards.

29. Landing Page Footer

A landing page footer should not feel like an afterthought. On a conversion-focused page, the footer can repeat the main CTA, answer last-minute objections, show trust signals, and give visitors a clean way to continue without distracting them from the primary goal.

The example below uses a landing page style footer with a bold CTA, benefit cards, guarantee strip, minimal navigation, and strong button placement. The preview box is scrollable, so the full visual footer stays contained inside the article layout.

  • Conversion-focused landing page footer
  • Includes final CTA, benefits, guarantee message, and minimal links
  • Great for SaaS landing pages, product pages, lead generation pages, and startup websites
  • Uses bold gradients, benefit cards, and a clean legal row
  • Scrollable preview box for taller footer examples
14-day free trial
Final call to action

Ready to launch a page that converts better?

Use this footer when the final section should repeat the main landing page offer, reduce hesitation, and guide visitors toward one clear action.

Start building today

No credit card required. Cancel anytime. Launch your first page faster.

Start Free Trial
Fast setup Get started without a long onboarding process.
No-code edits Update copy, links, and sections quickly.
Mobile ready Designed to work across screen sizes.
Support included Help is available when you need it.

Simple guarantee: Try the product risk-free and upgrade only when it fits your workflow.

Features Pricing FAQ Contact

© 2026 LaunchPage. Landing page footer example.

Privacy Terms Cookies

HTML

<footer class="landing-page-footer">

  <div class="landing-page-footer-inner">

    <div class="landing-page-footer-top">

      <a class="landing-page-footer-logo" href="#">
        <span class="landing-page-footer-mark">L</span>
        <span>
          <strong>LaunchPage</strong>
          <span>Conversion footer</span>
        </span>
      </a>

      <span class="landing-page-footer-badge">14-day free trial</span>

    </div>

    <div class="landing-page-footer-hero">

      <div>
        <div class="landing-page-footer-kicker">Final call to action</div>
        <h3 class="landing-page-footer-title">Ready to launch a page that <span>converts better?</span></h3>
        <p class="landing-page-footer-text">Use this footer when the final section should repeat the main landing page offer, reduce hesitation, and guide visitors toward one clear action.</p>
      </div>

      <div class="landing-page-footer-cta-card">
        <h3>Start building today</h3>
        <p>No credit card required. Cancel anytime. Launch your first page faster.</p>
        <a href="#">Start Free Trial</a>
      </div>

    </div>

    <div class="landing-page-footer-benefits">

      <div class="landing-page-footer-benefit">
        <strong>Fast setup</strong>
        <span>Get started without a long onboarding process.</span>
      </div>

      <div class="landing-page-footer-benefit">
        <strong>No-code edits</strong>
        <span>Update copy, links, and sections quickly.</span>
      </div>

      <div class="landing-page-footer-benefit">
        <strong>Mobile ready</strong>
        <span>Designed to work across screen sizes.</span>
      </div>

      <div class="landing-page-footer-benefit">
        <strong>Support included</strong>
        <span>Help is available when you need it.</span>
      </div>

    </div>

    <div class="landing-page-footer-guarantee">
      <p><strong>Simple guarantee:</strong> Try the product risk-free and upgrade only when it fits your workflow.</p>

      <div class="landing-page-footer-mini-nav">
        <a href="#">Features</a>
        <a href="#">Pricing</a>
        <a href="#">FAQ</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <div class="landing-page-footer-bottom">
      <p>© 2026 LaunchPage. Landing page footer example.</p>

      <div class="landing-page-footer-legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Cookies</a>
      </div>
    </div>

  </div>

</footer>

CSS

.landing-page-footer{
position:relative;
width:min(100%,1120px);
overflow:hidden;
border-radius:42px;
background:#0f172a;
box-shadow:0 34px 100px rgba(15,23,42,.30);
}

.landing-page-footer::before{
content:"";
position:absolute;
inset:-140px;
background:
radial-gradient(circle at 14% 8%,rgba(244,63,94,.34),transparent 34%),
radial-gradient(circle at 86% 16%,rgba(59,130,246,.28),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(168,85,247,.20),transparent 36%);
pointer-events:none;
}

.landing-page-footer::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 28px);
pointer-events:none;
}

.landing-page-footer-inner{
position:relative;
z-index:2;
padding:40px;
}

.landing-page-footer-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:46px;
}

.landing-page-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.landing-page-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:50px;
height:50px;
border-radius:18px;
background:#ffffff;
color:#0f172a;
font-size:18px;
font-weight:950;
box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.landing-page-footer-logo strong{
display:block;
color:#ffffff;
font-size:21px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.landing-page-footer-logo span{
display:block;
margin-top:3px;
color:#cbd5e1;
font-size:13px;
line-height:1.2;
font-weight:700;
}

.landing-page-footer-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 13px;
border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(74,222,128,.24);
color:#bbf7d0;
font-size:12px;
font-weight:950;
line-height:1;
letter-spacing:.06em;
text-transform:uppercase;
}

.landing-page-footer-badge::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.landing-page-footer-hero{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:30px;
align-items:end;
margin-bottom:30px;
}

.landing-page-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(244,63,94,.16);
border:1px solid rgba(251,113,133,.24);
color:#fecdd3;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.landing-page-footer-title{
max-width:780px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(42px,7vw,86px);
line-height:.93;
font-weight:950;
letter-spacing:-.09em;
}

.landing-page-footer-title span{
background:linear-gradient(90deg,#fb7185,#93c5fd,#c4b5fd);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.landing-page-footer-text{
max-width:660px;
margin:18px 0 0;
color:#d1d5db;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.landing-page-footer-cta-card{
padding:22px;
border-radius:30px;
background:#ffffff;
box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.landing-page-footer-cta-card h3{
margin:0 0 8px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:24px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
}

.landing-page-footer-cta-card p{
margin:0 0 16px;
color:#475569;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.landing-page-footer-cta-card a{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
border-radius:999px;
background:linear-gradient(135deg,#f43f5e,#3b82f6);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
text-decoration:none !important;
box-shadow:0 16px 34px rgba(244,63,94,.24);
transition:transform .2s ease,box-shadow .2s ease;
}

.landing-page-footer-cta-card a:hover{
transform:translateY(-2px);
box-shadow:0 20px 44px rgba(244,63,94,.32);
}

.landing-page-footer-benefits{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:28px;
}

.landing-page-footer-benefit{
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(14px);
transition:transform .22s ease,background .22s ease;
}

.landing-page-footer-benefit:hover{
transform:translateY(-4px);
background:rgba(255,255,255,.13);
}

.landing-page-footer-benefit strong{
display:block;
margin-bottom:7px;
color:#ffffff;
font-size:16px;
line-height:1.15;
font-weight:950;
letter-spacing:-.035em;
}

.landing-page-footer-benefit span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.landing-page-footer-guarantee{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:18px 20px;
border-radius:26px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
margin-bottom:28px;
}

.landing-page-footer-guarantee p{
margin:0;
color:#e5e7eb;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.landing-page-footer-guarantee strong{
color:#ffffff;
font-weight:950;
}

.landing-page-footer-mini-nav{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:10px;
}

.landing-page-footer-mini-nav a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:10px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:12px;
font-weight:900;
line-height:1;
text-decoration:none !important;
}

.landing-page-footer-mini-nav a:hover{
background:rgba(255,255,255,.14);
}

.landing-page-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.14);
}

.landing-page-footer-bottom p{
margin:0;
color:#94a3b8;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.landing-page-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.landing-page-footer-legal a{
color:#cbd5e1 !important;
-webkit-text-fill-color:#cbd5e1 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.landing-page-footer-legal a:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

@media (max-width:980px){
.landing-page-footer-hero{
grid-template-columns:1fr;
}

.landing-page-footer-benefits{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.landing-page-footer-cta-card{
max-width:420px;
}
}

@media (max-width:640px){
.landing-page-footer{
border-radius:30px;
}

.landing-page-footer-inner{
padding:26px;
}

.landing-page-footer-top,
.landing-page-footer-guarantee,
.landing-page-footer-bottom{
align-items:flex-start;
flex-direction:column;
}

.landing-page-footer-title{
font-size:46px;
}

.landing-page-footer-benefits{
grid-template-columns:1fr;
}

.landing-page-footer-cta-card{
max-width:none;
}

.landing-page-footer-mini-nav,
.landing-page-footer-legal{
justify-content:flex-start;
}
}

This landing page footer is best when the footer should support conversion instead of simply ending the page. The CTA card, benefit blocks, guarantee message, and minimal links help visitors make a final decision without creating unnecessary distractions.

30. Complete Responsive Footer Section

A complete responsive footer section combines the most common footer elements into one polished layout: brand message, newsletter signup, navigation columns, contact details, trust signals, social links, and legal links. This type of footer is useful when you want one reusable footer design that works for many website types.

The example below is a complete footer section with a top CTA area, brand block, newsletter form, link columns, contact card, social links, trust badges, and bottom legal row. It is designed to be a practical starting point for real websites.

  • Complete responsive footer section for modern websites
  • Includes CTA, newsletter, links, contact, trust badges, social links, and legal row
  • Good for business websites, SaaS pages, agencies, blogs, and ecommerce sites
  • Responsive CSS Grid and Flexbox layout
  • Scrollable preview box for taller footer examples

HTML

<footer class="complete-responsive-footer">

  <div class="complete-responsive-footer-inner">

    <section class="complete-responsive-footer-cta">

      <div class="complete-responsive-footer-cta-content">
        <div class="complete-responsive-footer-kicker">Complete footer section</div>
        <h3>Build a footer that works across <span>real website projects.</span></h3>
        <p>This complete responsive footer combines brand messaging, conversion, navigation, newsletter signup, contact details, trust signals, and legal links.</p>
      </div>

      <div class="complete-responsive-footer-cta-actions">
        <a class="complete-responsive-footer-button is-primary" href="#">Start Project</a>
        <a class="complete-responsive-footer-button is-secondary" href="#">View Services</a>
      </div>

    </section>

    <div class="complete-responsive-footer-main">

      <section class="complete-responsive-footer-brand-card">

        <a class="complete-responsive-footer-logo" href="#">
          <span class="complete-responsive-footer-mark">R</span>
          <span>
            <strong>ResponsiveBase</strong>
            <span>Complete footer section</span>
          </span>
        </a>

        <p>A reusable footer layout for modern websites that need navigation, newsletter signup, contact details, social links, and trust signals in one section.</p>

        <div class="complete-responsive-footer-socials" aria-label="Social links">
          <a href="#">X</a>
          <a href="#">in</a>
          <a href="#">YT</a>
          <a href="#">Gh</a>
        </div>

        <form class="complete-responsive-footer-newsletter">
          <input type="email" placeholder="Email address">
          <button type="submit">Join</button>
        </form>

      </section>

      <section class="complete-responsive-footer-links-card">

        <div class="complete-responsive-footer-links-grid">

          <div class="complete-responsive-footer-column">
            <h3>Company</h3>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>

          <div class="complete-responsive-footer-column">
            <h3>Services</h3>
            <ul>
              <li><a href="#">Web Design</a></li>
              <li><a href="#">Development</a></li>
              <li><a href="#">SEO</a></li>
              <li><a href="#">Branding</a></li>
            </ul>
          </div>

          <div class="complete-responsive-footer-column">
            <h3>Resources</h3>
            <ul>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Guides</a></li>
              <li><a href="#">Examples</a></li>
              <li><a href="#">Support</a></li>
            </ul>
          </div>

        </div>

      </section>

      <aside class="complete-responsive-footer-contact-card">

        <h3>Need help choosing the right layout?</h3>
        <p>Use this footer when a website needs a complete, polished, responsive ending section.</p>

        <ul class="complete-responsive-footer-contact-list">
          <li>
            <small>Email</small>
            <a href="#">hello@example.com</a>
          </li>
          <li>
            <small>Phone</small>
            <span>+1 555 0199</span>
          </li>
          <li>
            <small>Location</small>
            <span>New York / Remote</span>
          </li>
        </ul>

        <div class="complete-responsive-footer-trust">
          <span>Secure</span>
          <span>Fast</span>
          <span>Responsive</span>
          <span>SEO-ready</span>
        </div>

      </aside>

    </div>

    <div class="complete-responsive-footer-bottom">
      <p>© 2026 ResponsiveBase. Complete responsive footer example.</p>

      <div class="complete-responsive-footer-legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Cookies</a>
        <a href="#">Accessibility</a>
      </div>
    </div>

  </div>

</footer>

CSS

.complete-responsive-footer{
position:relative;
width:min(100%,1140px);
overflow:hidden;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}

.complete-responsive-footer::before{
content:"";
position:absolute;
inset:-150px;
background:
radial-gradient(circle at 15% 8%,rgba(37,99,235,.18),transparent 34%),
radial-gradient(circle at 88% 14%,rgba(16,185,129,.16),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(168,85,247,.12),transparent 36%);
pointer-events:none;
}

.complete-responsive-footer-inner{
position:relative;
z-index:2;
padding:28px;
}

.complete-responsive-footer-cta{
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:center;
padding:32px;
border-radius:34px;
background:
radial-gradient(circle at 12% 0%,rgba(37,99,235,.28),transparent 34%),
radial-gradient(circle at 90% 10%,rgba(16,185,129,.20),transparent 32%),
linear-gradient(135deg,#0f172a,#1e293b);
box-shadow:0 24px 70px rgba(15,23,42,.18);
margin-bottom:24px;
}

.complete-responsive-footer-cta::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px);
pointer-events:none;
}

.complete-responsive-footer-cta-content,
.complete-responsive-footer-cta-actions{
position:relative;
z-index:2;
}

.complete-responsive-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(59,130,246,.16);
border:1px solid rgba(147,197,253,.24);
color:#bfdbfe;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.complete-responsive-footer-cta h3{
max-width:760px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(32px,5vw,58px);
line-height:1;
font-weight:950;
letter-spacing:-.075em;
}

.complete-responsive-footer-cta h3 span{
color:#86efac !important;
-webkit-text-fill-color:#86efac !important;
}

.complete-responsive-footer-cta p{
max-width:680px;
margin:14px 0 0;
color:#cbd5e1;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.complete-responsive-footer-cta-actions{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:10px;
}

.complete-responsive-footer-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:13px 17px;
border-radius:999px;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .2s ease,box-shadow .2s ease;
}

.complete-responsive-footer-button:hover{
transform:translateY(-2px);
}

.complete-responsive-footer-button.is-primary{
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
box-shadow:0 16px 34px rgba(0,0,0,.18);
}

.complete-responsive-footer-button.is-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.complete-responsive-footer-main{
display:grid;
grid-template-columns:1.1fr 1.4fr 320px;
gap:20px;
align-items:start;
}

.complete-responsive-footer-brand-card,
.complete-responsive-footer-links-card,
.complete-responsive-footer-contact-card{
padding:24px;
border-radius:30px;
background:rgba(248,250,252,.84);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 42px rgba(15,23,42,.06);
backdrop-filter:blur(14px);
}

.complete-responsive-footer-logo{
display:inline-flex;
align-items:center;
gap:12px;
margin-bottom:16px;
text-decoration:none;
}

.complete-responsive-footer-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:18px;
background:linear-gradient(135deg,#2563eb,#10b981);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.complete-responsive-footer-logo strong{
display:block;
color:#0f172a;
font-size:21px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.complete-responsive-footer-logo span{
display:block;
margin-top:3px;
color:#64748b;
font-size:12px;
line-height:1.2;
font-weight:750;
}

.complete-responsive-footer-brand-card p{
margin:0 0 18px;
color:#475569;
font-size:14px;
line-height:1.7;
font-weight:650;
}

.complete-responsive-footer-socials{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:18px;
}

.complete-responsive-footer-socials a{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#334155 !important;
-webkit-text-fill-color:#334155 !important;
font-size:12px;
font-weight:900;
text-decoration:none !important;
transition:transform .2s ease,background .2s ease,color .2s ease;
}

.complete-responsive-footer-socials a:hover{
transform:translateY(-3px);
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.complete-responsive-footer-newsletter{
padding:7px;
border-radius:18px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
display:flex;
gap:8px;
}

.complete-responsive-footer-newsletter input{
min-width:0;
flex:1;
border:0;
outline:0;
padding:12px 10px;
border-radius:14px;
background:transparent;
color:#0f172a;
font-size:14px;
font-weight:650;
}

.complete-responsive-footer-newsletter input::placeholder{
color:#64748b;
}

.complete-responsive-footer-newsletter button{
border:0;
cursor:pointer;
padding:12px 14px;
border-radius:14px;
background:#0f172a;
color:#ffffff;
font-size:13px;
font-weight:950;
white-space:nowrap;
}

.complete-responsive-footer-links-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}

.complete-responsive-footer-column h3{
margin:0 0 14px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:13px;
line-height:1.2;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.complete-responsive-footer-column ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.complete-responsive-footer-column li{
margin:0;
padding:0;
list-style:none;
}

.complete-responsive-footer-column a{
display:inline-flex;
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:14px;
line-height:1.4;
font-weight:700;
text-decoration:none !important;
transition:transform .2s ease,color .2s ease;
}

.complete-responsive-footer-column a:hover{
transform:translateX(3px);
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

.complete-responsive-footer-contact-card h3{
margin:0 0 10px;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:24px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
}

.complete-responsive-footer-contact-card p{
margin:0 0 16px;
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.complete-responsive-footer-contact-list{
display:grid;
gap:11px;
margin:0 0 18px;
padding:0;
list-style:none;
}

.complete-responsive-footer-contact-list li{
display:grid;
gap:4px;
margin:0;
padding:0;
list-style:none;
}

.complete-responsive-footer-contact-list small{
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.complete-responsive-footer-contact-list span,
.complete-responsive-footer-contact-list a{
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:14px;
font-weight:800;
line-height:1.4;
text-decoration:none !important;
}

.complete-responsive-footer-trust{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}

.complete-responsive-footer-trust span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:8px 10px;
border-radius:999px;
background:#ecfdf5;
border:1px solid rgba(16,185,129,.14);
color:#047857;
font-size:12px;
font-weight:900;
line-height:1;
}

.complete-responsive-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:24px;
margin-top:24px;
border-top:1px solid rgba(15,23,42,.08);
}

.complete-responsive-footer-bottom p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:650;
}

.complete-responsive-footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:14px;
}

.complete-responsive-footer-legal a{
color:#475569 !important;
-webkit-text-fill-color:#475569 !important;
font-size:13px;
font-weight:750;
text-decoration:none !important;
}

.complete-responsive-footer-legal a:hover{
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}

@media (max-width:1080px){
.complete-responsive-footer-cta,
.complete-responsive-footer-main{
grid-template-columns:1fr;
}

.complete-responsive-footer-cta-actions{
justify-content:flex-start;
}
}

@media (max-width:760px){
.complete-responsive-footer{
border-radius:30px;
}

.complete-responsive-footer-inner{
padding:18px;
}

.complete-responsive-footer-cta{
padding:26px;
border-radius:26px;
}

.complete-responsive-footer-cta h3{
font-size:36px;
}

.complete-responsive-footer-cta-actions,
.complete-responsive-footer-button{
width:100%;
}

.complete-responsive-footer-brand-card,
.complete-responsive-footer-links-card,
.complete-responsive-footer-contact-card{
padding:22px;
border-radius:24px;
}

.complete-responsive-footer-newsletter{
flex-direction:column;
}

.complete-responsive-footer-newsletter button{
width:100%;
}

.complete-responsive-footer-links-grid,
.complete-responsive-footer-trust{
grid-template-columns:1fr;
}

.complete-responsive-footer-bottom{
align-items:flex-start;
flex-direction:column;
}

.complete-responsive-footer-legal{
justify-content:flex-start;
}
}

This complete responsive footer section is a strong reusable option for real website projects. It includes the essential footer elements most modern websites need while staying responsive, organized, and easy to adapt.

Recommended hosting for WordPress projects

Build faster footer pages on better WordPress hosting

If you are building landing pages, business websites, blogs, SaaS pages, or client websites with many CSS examples, fast hosting helps your layouts, images, code demos, and content sections load more smoothly.

Explore Kinsta Hosting
Kinsta managed WordPress hosting

A good CSS footer should do more than look nice. It should help visitors find important information, understand where to go next, and trust the website. The best modern footers are structured, readable, responsive, and intentionally designed around the website’s goals.

Before choosing a footer layout, think about what the footer must achieve. A portfolio footer may only need a short contact CTA and social links. An ecommerce footer may need product categories, delivery links, return policy, payment badges, and support information. A SaaS footer may need pricing, documentation, integrations, login links, status, legal pages, and security information.

01

Group footer links clearly

Use logical groups such as Product, Company, Resources, Support, Contact, and Legal. Visitors should understand each column without thinking.

02

Keep typography readable

Footer text is often smaller than main content, but it still needs enough contrast, spacing, and line-height to be easy to read.

03

Make the footer useful

Include practical links visitors expect, such as contact, privacy policy, terms, support, pricing, resources, newsletter, or social channels.

04

Design for mobile first

Footer columns should stack cleanly on small screens. If the footer has many links, consider accordions or a simpler mobile layout.

Footer design is also a good place to support internal linking. Link to important service pages, product categories, help pages, guides, or high-value blog posts. For example, a web design blog can connect footer-related content with modern CSS navigation menus, modern CSS layouts, modern CSS forms, and modern CSS buttons.

Do not overload the footer with every page on the website. A footer should make navigation easier, not more confusing. If you need many links, use a mega footer, grouped columns, accordion links on mobile, or a dedicated sitemap page.

Responsive footer design is important because footers often contain many different content types: columns, forms, social links, contact details, badges, buttons, and legal links. A desktop footer can use a wide grid, but mobile screens need a simpler vertical flow.

Start with the most important footer content first. On mobile, visitors should not have to scroll through a long list of low-priority links before finding contact, support, privacy policy, or the main call-to-action.

How to make CSS footers responsive

Use flexible grids, avoid fixed widths, test long link labels, and make all tap targets comfortable on mobile. A footer that looks good on desktop but becomes crowded on mobile will hurt usability.

Use CSS Grid or Flexbox

Grid works well for column-based footers, while Flexbox is useful for compact rows, social links, and bottom bars.

Stack columns early

Do not wait until the layout breaks. If four columns feel tight on tablet, switch to two columns or one column sooner.

Make forms mobile friendly

Newsletter input and submit buttons should stack on small screens if the row becomes too narrow.

Keep tap targets large

Footer links, social icons, legal links, and CTA buttons should have enough padding for touch screens.

If your footer has many sections, consider using a mobile accordion pattern. This keeps the page shorter and makes it easier for users to open only the section they need. You can also use ideas from modern CSS accordions and modern CSS tabs when building more advanced footer navigation.

Footer design mistakes usually happen when the footer is treated as a place to put everything that did not fit elsewhere. A footer should be useful, but it should not become a crowded collection of unrelated links, icons, badges, forms, and long paragraphs.

Too many links without structure

A long unorganized list of footer links makes users work harder. Group links into clear categories and remove anything that does not help navigation.

Poor contrast

Light gray text on a dark footer may look stylish, but it can become difficult to read. Footer links must be readable and accessible.

Newsletter form without context

A form that only says “Subscribe” is weak. Tell visitors what they will receive and why joining is useful.

Footer not tested on mobile

Many footers look good on desktop but become too long, cramped, or hard to tap on mobile screens.

Missing legal links

Most websites should include Privacy Policy, Terms, Cookie Policy, or other legal pages where relevant.

Weak final action

If the page has a conversion goal, the footer should support it with a clear CTA, contact path, trial button, or quote request.

Another common mistake is designing the footer separately from the rest of the website. A footer should match the brand, typography, button style, spacing, border radius, and overall UI direction. If the rest of the website uses modern cards, gradients, soft shadows, and rounded buttons, the footer should feel like part of the same system.

CSS Footers FAQ

What is a website footer?

A website footer is the bottom section of a page. It often includes navigation links, contact details, social links, copyright text, legal links, newsletter signup, support links, trust badges, payment methods, or a final call-to-action.

What should I include in a modern footer?

A modern footer should include the most useful information for visitors at the end of the page. Common elements include brand text, navigation columns, contact details, newsletter signup, social media links, legal pages, privacy policy, terms, cookie policy, support links, and trust signals.

How do I make a footer responsive with CSS?

You can make a footer responsive by using CSS Grid or Flexbox, avoiding fixed widths, using media queries, stacking columns on smaller screens, increasing tap target spacing, and making forms stack vertically on mobile. For larger footers, accordion link groups can also improve mobile usability.

Should a footer be simple or detailed?

It depends on the website. A portfolio or landing page may only need a simple footer with a few links. An ecommerce site, SaaS product, documentation website, or large blog may need a more detailed footer with multiple link groups, support links, resources, legal pages, and trust signals.

Are footer links important for SEO?

Footer links can support internal linking and help users discover important pages, but they should be used naturally. Do not overload the footer with keyword-stuffed links. Use footer links for genuinely useful pages such as services, categories, guides, contact, support, privacy policy, and terms.

Can I use these CSS footer examples in WordPress?

Yes. These HTML and CSS footer examples can be adapted for WordPress blocks, custom themes, page builders, or template files. If you use WordPress, you can place the HTML in a Custom HTML block and move the CSS into your theme, child theme, customizer, or a custom CSS plugin.

Conclusion

A modern CSS footer is not just the end of a page. It is a navigation area, trust section, conversion opportunity, contact point, and brand detail all in one. A well-designed footer can help users find important pages, understand your website, contact your business, subscribe to updates, or take one final action before leaving.

The best footer layout depends on the website type. A minimal footer works well for portfolios and simple landing pages. A newsletter footer is useful for blogs and content websites. A mega footer is better for large websites with many pages. A trust badge footer can help ecommerce and service websites. A complete responsive footer section is a good starting point when you need one flexible footer design for many projects.

Use the examples in this guide as starting points. Replace the demo text, links, forms, badges, and colors with your own content, then test the footer on desktop, tablet, and mobile. Keep the layout clean, the links organized, the text readable, and the final action clear.

If you are building full website sections, these related CSS guides can help you create a more complete design system with matching navigation, buttons, forms, cards, layouts, hero sections, tabs, accordions, and pricing sections.

Navigation 25 Modern CSS Navigation Menus

Responsive navbar, dropdown, mega menu, hamburger menu, and website header examples.

 Hero Sections 30 Modern Website Hero Sections

Responsive HTML and CSS hero section examples for landing pages and modern websites.

 Layouts 25 Modern CSS Layouts

Grid, Flexbox, container query, dashboard, magazine, card, and responsive layout examples.

 Forms 30 Modern CSS Forms

Contact forms, login forms, checkout forms, quote forms, newsletter forms, and UI examples.

 Accordions 30 Modern CSS Accordions

FAQ, product, support, documentation, mobile filter, and content toggle examples.

 Tabs 30 Modern CSS Tabs

Responsive tab UI, product tabs, dashboard tabs, documentation tabs, and content sections.

 Pricing 30 Modern CSS Pricing Tables

Responsive pricing cards, SaaS pricing tables, comparison sections, and pricing layouts.

 Cards 25 Modern CSS Cards

Modern card layouts for websites, landing pages, blogs, products, and UI sections.

 Buttons 20 Modern CSS Buttons

Hover effects, animations, CTA buttons, gradient buttons, and modern UI button styles.
]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-footers/feed/ 0 30 Modern CSS Testimonials for Websites – Review, Quote & Social Proof Examples https://veebilehed24.ee/en/blog/css-effects/modern-css-testimonials/ https://veebilehed24.ee/en/blog/css-effects/modern-css-testimonials/#respond Sat, 30 May 2026 05:58:02 +0000 https://veebilehed24.ee/?p=1431 Testimonials are one of the most useful trust-building sections on a modern website. A good testimonial section can show customer feedback, client quotes, star ratings, review cards, case study snippets, and social proof in a way that helps visitors feel more confident before they click, sign up, buy, or contact you.

In this guide, you will find 30 modern CSS testimonials for websites, including responsive testimonial cards, review grids, quote sections, star rating layouts, social proof walls, testimonial sliders, video testimonial layouts, ecommerce review cards, SaaS testimonials, and complete HTML and CSS testimonial section examples you can customize for your own projects.

View All 30 CSS Testimonial Examples
On this page

Table of Contents

Kinsta hosting

What Are CSS Testimonials?

CSS testimonials are website sections designed with HTML and CSS to display customer quotes, client reviews, star ratings, user feedback, case study snippets, or social proof blocks. They are often used on homepages, landing pages, pricing pages, product pages, service pages, portfolios, and checkout flows to make a website feel more trustworthy.

A testimonial section can be simple, such as three review cards in a responsive grid, or more advanced, such as a testimonial carousel, review summary, video testimonial layout, customer story card, or complete social proof section with ratings, logos, avatars, and call-to-action buttons.

Why Testimonials Matter in Website Design

Testimonials matter because they help visitors see that other people have already trusted your product, service, brand, or website. When reviews are easy to scan and placed near important conversion points, they can support better decision-making and reduce hesitation.

  • They build trust by showing real-looking customer feedback and client experiences.
  • They support conversions when placed near pricing tables, contact forms, signup buttons, or product sections.
  • They make offers feel safer by showing ratings, review counts, customer quotes, or verified buyer labels.
  • They improve landing page flow by adding social proof between hero sections, feature blocks, pricing sections, and forms.
  • They make brands feel more credible when combined with logos, avatars, case study results, or customer story cards.

If you are building a full landing page, testimonials work especially well together with modern website hero sections, modern CSS pricing tables, modern CSS forms, and modern CSS buttons. For card-based layouts, you may also like our guide to modern CSS cards.

What Makes a Good Testimonial Section?

A good testimonial section should be easy to read, visually trustworthy, and responsive on all screen sizes. The best testimonial layouts do not just decorate a page; they make reviews easier to understand and place social proof where it can help visitors make a decision.

Clear quote

Use short review text that is specific, believable, and easy to scan.

Author context

Add a name, role, company, customer type, or verified buyer label when relevant.

Readable layout

Keep quote cards clean, spaced properly, and easy to read on mobile screens.

Useful social proof

Use ratings, avatars, logos, review counts, or badges only when they support trust.

Before adding testimonials to a website, think about where they will have the strongest effect. A homepage may need a simple social proof section, a pricing page may need short review cards near the pricing table, an ecommerce product page may need star ratings and verified buyer reviews, while a service page may need longer client feedback with project context.

  • Use short, specific quotes instead of long blocks of generic praise.
  • Show who the testimonial is from with author information, role, company, or customer type.
  • Keep the design readable with enough spacing, contrast, and line height.
  • Make the section responsive so testimonial cards stack cleanly on mobile.
  • Add ratings only when they make sense for reviews, products, apps, ecommerce, or service feedback.
  • Place social proof near conversion areas such as pricing sections, lead forms, checkout blocks, or CTA sections.

You can also combine testimonial sections with other UI patterns. For example, customer reviews can sit below a modern CSS layout, inside review category CSS tabs, near pricing FAQs built with CSS accordions, or inside a complete website header and landing page flow with modern CSS navigation menus.

30 Modern CSS Testimonial Examples

Now let’s look at 30 modern CSS testimonial examples for real website projects. Each example uses a different layout approach, so you can use them for landing pages, SaaS websites, agency pages, ecommerce stores, app websites, portfolios, service businesses, pricing pages, review sections, customer story blocks, and complete responsive social proof sections.

1. Modern Testimonial Cards

Modern testimonial cards are one of the most flexible ways to show customer feedback on a website. This layout works well for homepages, service pages, SaaS landing pages, portfolios, and product pages where you want reviews to feel clean, trustworthy, and easy to scan.

The example below uses a premium three-card testimonial grid with star ratings, short customer quotes, avatar placeholders, names, roles, and soft modern styling. It is fully responsive and stacks into a clean single-column layout on mobile screens.

  • Great starting point for modern CSS testimonials
  • Uses three responsive testimonial cards
  • Includes star ratings, quotes, and customer details
  • Works well for landing pages, service websites, and SaaS pages
  • Clean HTML and CSS structure with no JavaScript required
Customer Feedback

Loved by teams that care about better websites

Use this testimonial card layout to show short customer quotes, ratings, and author details in a clean responsive section.

★★★★★
Verified

“The new website section made our homepage feel more trustworthy instantly. The cards are clean, readable, and easy for visitors to scan.”

AK
Anna Keller Marketing Lead
★★★★★
Client

“We needed a testimonial design that looked modern without feeling overdesigned. This layout gives us trust, structure, and strong visual balance.”

DM
Daniel Moore Product Founder
★★★★★
Review

“The responsive layout works perfectly on mobile. Each review stays readable, and the design still feels premium on smaller screens.”

SR
Sofia Reed Creative Director

HTML

<section class="modern-testimonial-cards">

  <div class="modern-testimonial-cards-header">
    <div class="modern-testimonial-cards-kicker">Customer Feedback</div>
    <h3 class="modern-testimonial-cards-title">Loved by teams that care about <span>better websites</span></h3>
    <p class="modern-testimonial-cards-text">Use this testimonial card layout to show short customer quotes, ratings, and author details in a clean responsive section.</p>
  </div>

  <div class="modern-testimonial-cards-grid">

    <article class="modern-testimonial-card">
      <div class="modern-testimonial-card-top">
        <div class="modern-testimonial-stars">★★★★★</div>
        <span class="modern-testimonial-label">Verified</span>
      </div>
      <p class="modern-testimonial-quote">“The new website section made our homepage feel more trustworthy instantly. The cards are clean, readable, and easy for visitors to scan.”</p>
      <div class="modern-testimonial-author">
        <div class="modern-testimonial-avatar">AK</div>
        <div class="modern-testimonial-author-info">
          <strong>Anna Keller</strong>
          <span>Marketing Lead</span>
        </div>
      </div>
    </article>

    <article class="modern-testimonial-card">
      <div class="modern-testimonial-card-top">
        <div class="modern-testimonial-stars">★★★★★</div>
        <span class="modern-testimonial-label">Client</span>
      </div>
      <p class="modern-testimonial-quote">“We needed a testimonial design that looked modern without feeling overdesigned. This layout gives us trust, structure, and strong visual balance.”</p>
      <div class="modern-testimonial-author">
        <div class="modern-testimonial-avatar">DM</div>
        <div class="modern-testimonial-author-info">
          <strong>Daniel Moore</strong>
          <span>Product Founder</span>
        </div>
      </div>
    </article>

    <article class="modern-testimonial-card">
      <div class="modern-testimonial-card-top">
        <div class="modern-testimonial-stars">★★★★★</div>
        <span class="modern-testimonial-label">Review</span>
      </div>
      <p class="modern-testimonial-quote">“The responsive layout works perfectly on mobile. Each review stays readable, and the design still feels premium on smaller screens.”</p>
      <div class="modern-testimonial-author">
        <div class="modern-testimonial-avatar">SR</div>
        <div class="modern-testimonial-author-info">
          <strong>Sofia Reed</strong>
          <span>Creative Director</span>
        </div>
      </div>
    </article>

  </div>

</section>

CSS

.modern-testimonial-cards{
width:min(100%,1040px);
}

.modern-testimonial-cards-header{
max-width:720px;
margin:0 auto 34px;
text-align:center;
}

.modern-testimonial-cards-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.modern-testimonial-cards-title{
margin:0 0 14px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.modern-testimonial-cards-title span{
background:linear-gradient(135deg,#f97316,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.modern-testimonial-cards-text{
max-width:650px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
}

.modern-testimonial-cards-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.modern-testimonial-card{
position:relative;
display:flex;
flex-direction:column;
padding:26px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.10);
overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.modern-testimonial-card::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 0%,rgba(249,115,22,.10),transparent 35%),
linear-gradient(135deg,rgba(124,58,237,.07),transparent 42%);
opacity:.85;
pointer-events:none;
}

.modern-testimonial-card:hover{
transform:translateY(-6px);
box-shadow:0 30px 76px rgba(15,23,42,.14);
border-color:rgba(249,115,22,.26);
}

.modern-testimonial-card-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:24px;
}

.modern-testimonial-stars{
display:flex;
gap:4px;
color:#f59e0b;
font-size:17px;
letter-spacing:.02em;
}

.modern-testimonial-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:850;
line-height:1;
}

.modern-testimonial-quote{
position:relative;
z-index:2;
margin:0 0 26px;
color:#1e293b;
font-size:17px;
line-height:1.75;
font-weight:650;
}

.modern-testimonial-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:13px;
margin-top:auto;
padding-top:20px;
border-top:1px solid rgba(15,23,42,.08);
}

.modern-testimonial-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:16px;
background:linear-gradient(135deg,#f97316,#7c3aed);
color:#ffffff;
font-size:15px;
font-weight:950;
letter-spacing:.02em;
box-shadow:0 14px 30px rgba(124,58,237,.22);
}

.modern-testimonial-author-info strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.modern-testimonial-author-info span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.35;
font-weight:700;
}

@media (max-width:900px){
.modern-testimonial-cards-grid{
grid-template-columns:1fr;
max-width:540px;
margin:0 auto;
}
}

@media (max-width:640px){
.modern-testimonial-cards-header{
text-align:left;
}

.modern-testimonial-cards-title{
font-size:34px;
}

.modern-testimonial-card{
padding:22px;
border-radius:24px;
}

.modern-testimonial-quote{
font-size:16px;
}
}

This modern testimonial card layout is a strong foundation for many website projects. You can use it as a clean customer review section, place it below a hero section, add it near a pricing table, or customize the cards with real customer names, ratings, and project-specific quotes.

2. Responsive Testimonial Grid

Responsive testimonial grids are useful when you want to show more reviews without making the page feel crowded. Instead of using only three large cards, this layout uses a larger review grid with different card emphasis, a rating summary, and compact review content.

The example below is built like a professional social proof section. It includes a left-side summary card, multiple customer review cards, star ratings, badges, and a responsive grid that adapts from desktop to tablet and mobile screens.

  • Designed for review-heavy landing pages and product pages
  • Combines rating summary and customer testimonial cards
  • Uses a more dynamic grid instead of equal repeated cards
  • Works well for SaaS, apps, ecommerce, and service websites
  • Fully responsive HTML and CSS testimonial section
Social Proof Grid

Reviews that help visitors trust your product faster

Use this grid when you want to show multiple testimonials, review signals, and a stronger rating summary in one section.

★★★★★
SaaS

“The testimonial grid gave our landing page a much stronger trust section without needing a heavy carousel or complex script.”

LC
Liam Carter Growth Manager
★★★★★
Agency

“We used this structure for a client website and it immediately made the case studies feel more visible and credible.”

NO
Nora Olsen Agency Designer
★★★★★
Store

“The layout works well for product reviews because each card is short, scannable, and clear on mobile.”

MR
Maya Rivers Shop Owner
★★★★★
Startup

“This section helped us show early customer feedback in a polished way while keeping the whole page fast and simple.”

ET
Ethan Taylor Startup Founder
★★★★★
Result

“The best part is that the testimonial grid feels like a real social proof section, not just a repeated set of identical cards. It gives the page more depth and better visual rhythm.”

JW
James Walker Conversion Specialist
38% More CTA clicks

HTML

<section class="responsive-testimonial-grid">

  <div class="responsive-testimonial-grid-header">
    <div>
      <div class="responsive-testimonial-grid-kicker">Social Proof Grid</div>
      <h3 class="responsive-testimonial-grid-title">Reviews that help visitors trust your <span>product faster</span></h3>
    </div>
    <p class="responsive-testimonial-grid-note">Use this grid when you want to show multiple testimonials, review signals, and a stronger rating summary in one section.</p>
  </div>

  <div class="responsive-testimonial-grid-layout">

    <aside class="responsive-testimonial-summary">
      <div class="responsive-testimonial-score">
        <strong>4.9</strong>
        <span>Average customer rating</span>
      </div>
      <p>Over 2,400 customers use our design system to build faster landing pages, better review sections, and cleaner responsive website layouts.</p>
      <div class="responsive-testimonial-summary-bottom">
        <span class="responsive-testimonial-summary-badge">Trusted Reviews</span>
        <span class="responsive-testimonial-summary-small">Based on verified feedback from product teams, agencies, and small business websites.</span>
      </div>
    </aside>

    <div class="responsive-testimonial-review-grid">

      <article class="responsive-testimonial-review">
        <div class="responsive-testimonial-review-top">
          <div class="responsive-testimonial-review-stars">★★★★★</div>
          <span class="responsive-testimonial-review-type">SaaS</span>
        </div>
        <p>“The testimonial grid gave our landing page a much stronger trust section without needing a heavy carousel or complex script.”</p>
        <div class="responsive-testimonial-review-author">
          <div class="responsive-testimonial-review-avatar">LC</div>
          <div>
            <strong>Liam Carter</strong>
            <span>Growth Manager</span>
          </div>
        </div>
      </article>

      <article class="responsive-testimonial-review">
        <div class="responsive-testimonial-review-top">
          <div class="responsive-testimonial-review-stars">★★★★★</div>
          <span class="responsive-testimonial-review-type">Agency</span>
        </div>
        <p>“We used this structure for a client website and it immediately made the case studies feel more visible and credible.”</p>
        <div class="responsive-testimonial-review-author">
          <div class="responsive-testimonial-review-avatar">NO</div>
          <div>
            <strong>Nora Olsen</strong>
            <span>Agency Designer</span>
          </div>
        </div>
      </article>

      <article class="responsive-testimonial-review">
        <div class="responsive-testimonial-review-top">
          <div class="responsive-testimonial-review-stars">★★★★★</div>
          <span class="responsive-testimonial-review-type">Store</span>
        </div>
        <p>“The layout works well for product reviews because each card is short, scannable, and clear on mobile.”</p>
        <div class="responsive-testimonial-review-author">
          <div class="responsive-testimonial-review-avatar">MR</div>
          <div>
            <strong>Maya Rivers</strong>
            <span>Shop Owner</span>
          </div>
        </div>
      </article>

      <article class="responsive-testimonial-review">
        <div class="responsive-testimonial-review-top">
          <div class="responsive-testimonial-review-stars">★★★★★</div>
          <span class="responsive-testimonial-review-type">Startup</span>
        </div>
        <p>“This section helped us show early customer feedback in a polished way while keeping the whole page fast and simple.”</p>
        <div class="responsive-testimonial-review-author">
          <div class="responsive-testimonial-review-avatar">ET</div>
          <div>
            <strong>Ethan Taylor</strong>
            <span>Startup Founder</span>
          </div>
        </div>
      </article>

      <article class="responsive-testimonial-review is-wide">
        <div>
          <div class="responsive-testimonial-review-top">
            <div class="responsive-testimonial-review-stars">★★★★★</div>
            <span class="responsive-testimonial-review-type">Result</span>
          </div>
          <p>“The best part is that the testimonial grid feels like a real social proof section, not just a repeated set of identical cards. It gives the page more depth and better visual rhythm.”</p>
          <div class="responsive-testimonial-review-author">
            <div class="responsive-testimonial-review-avatar">JW</div>
            <div>
              <strong>James Walker</strong>
              <span>Conversion Specialist</span>
            </div>
          </div>
        </div>
        <div class="responsive-testimonial-wide-stat">
          <strong>38%</strong>
          <span>More CTA clicks</span>
        </div>
      </article>

    </div>

  </div>

</section>

CSS

.responsive-testimonial-grid{
width:min(100%,1080px);
}

.responsive-testimonial-grid-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.responsive-testimonial-grid-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(249,115,22,.14);
border:1px solid rgba(251,146,60,.24);
color:#fed7aa;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.responsive-testimonial-grid-title{
margin:0;
max-width:700px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.responsive-testimonial-grid-title span{
background:linear-gradient(90deg,#fb923c,#a78bfa,#38bdf8);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.responsive-testimonial-grid-note{
max-width:310px;
margin:0;
padding:16px 18px;
border-radius:22px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.20);
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.responsive-testimonial-grid-layout{
display:grid;
grid-template-columns:320px minmax(0,1fr);
gap:18px;
align-items:stretch;
}

.responsive-testimonial-summary{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:100%;
padding:26px;
border-radius:32px;
background:
linear-gradient(135deg,rgba(249,115,22,.24),rgba(124,58,237,.18)),
rgba(15,23,42,.92);
border:1px solid rgba(251,146,60,.36);
box-shadow:0 24px 70px rgba(0,0,0,.30);
overflow:hidden;
}

.responsive-testimonial-summary::before{
content:"";
position:absolute;
inset:-90px -80px auto auto;
width:180px;
height:180px;
border-radius:999px;
background:rgba(251,146,60,.22);
filter:blur(8px);
pointer-events:none;
}

.responsive-testimonial-score{
position:relative;
z-index:2;
}

.responsive-testimonial-score strong{
display:block;
margin-bottom:8px;
color:#ffffff;
font-size:70px;
line-height:.9;
font-weight:950;
letter-spacing:-.08em;
}

.responsive-testimonial-score span{
display:block;
color:#fed7aa;
font-size:15px;
font-weight:900;
letter-spacing:.04em;
}

.responsive-testimonial-summary p{
position:relative;
z-index:2;
margin:28px 0;
color:#e2e8f0;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.responsive-testimonial-summary-bottom{
position:relative;
z-index:2;
display:grid;
gap:10px;
}

.responsive-testimonial-summary-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#ffffff;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.07em;
}

.responsive-testimonial-summary-small{
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.responsive-testimonial-review-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}

.responsive-testimonial-review{
position:relative;
display:flex;
flex-direction:column;
padding:22px;
border-radius:28px;
background:rgba(15,23,42,.74);
border:1px solid rgba(148,163,184,.24);
box-shadow:0 22px 60px rgba(0,0,0,.24);
overflow:hidden;
transition:transform .22s ease,border-color .22s ease,background .22s ease;
}

.responsive-testimonial-review::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%);
opacity:.8;
pointer-events:none;
}

.responsive-testimonial-review:hover{
transform:translateY(-5px);
border-color:rgba(251,146,60,.48);
background:rgba(15,23,42,.92);
}

.responsive-testimonial-review-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}

.responsive-testimonial-review-stars{
color:#fbbf24;
font-size:15px;
letter-spacing:.02em;
}

.responsive-testimonial-review-type{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.16);
color:#cbd5e1;
font-size:11px;
font-weight:900;
line-height:1;
text-transform:uppercase;
letter-spacing:.05em;
}

.responsive-testimonial-review p{
position:relative;
z-index:2;
margin:0 0 20px;
color:#e5e7eb;
font-size:15px;
line-height:1.7;
font-weight:600;
}

.responsive-testimonial-review-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:12px;
margin-top:auto;
}

.responsive-testimonial-review-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:15px;
background:linear-gradient(135deg,#38bdf8,#7c3aed);
color:#ffffff;
font-size:13px;
font-weight:950;
}

.responsive-testimonial-review-author strong{
display:block;
margin-bottom:2px;
color:#ffffff;
font-size:14px;
line-height:1.2;
font-weight:900;
}

.responsive-testimonial-review-author span{
display:block;
color:#94a3b8;
font-size:12px;
line-height:1.35;
font-weight:700;
}

.responsive-testimonial-review.is-wide{
grid-column:span 2;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:end;
}

.responsive-testimonial-wide-stat{
position:relative;
z-index:2;
display:grid;
place-items:center;
min-width:120px;
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.18);
text-align:center;
}

.responsive-testimonial-wide-stat strong{
display:block;
color:#ffffff;
font-size:32px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.responsive-testimonial-wide-stat span{
display:block;
margin-top:6px;
color:#cbd5e1;
font-size:12px;
line-height:1.35;
font-weight:800;
}

@media (max-width:980px){
.responsive-testimonial-grid-header{
grid-template-columns:1fr;
}

.responsive-testimonial-grid-note{
max-width:100%;
}

.responsive-testimonial-grid-layout{
grid-template-columns:1fr;
}

.responsive-testimonial-summary{
min-height:auto;
}

.responsive-testimonial-review-grid{
grid-template-columns:1fr;
}

.responsive-testimonial-review.is-wide{
grid-column:auto;
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.responsive-testimonial-grid-title{
font-size:34px;
}

.responsive-testimonial-summary,
.responsive-testimonial-review{
padding:20px;
border-radius:24px;
}

.responsive-testimonial-score strong{
font-size:56px;
}

.responsive-testimonial-wide-stat{
min-width:0;
}
}

This responsive testimonial grid is a better choice when you want to show several customer reviews and a stronger social proof summary in one section. The layout gives the page more visual rhythm than a simple row of cards, while still staying readable and responsive on smaller screens.

3. Minimal Testimonial Section

Minimal testimonial sections are ideal when you want customer feedback to feel calm, elegant, and professional. This type of layout works especially well for portfolios, consultants, agencies, SaaS websites, personal brands, and service businesses where the review should support the page without overpowering it.

The example below uses a clean editorial layout with one large featured quote, a slim customer row, soft borders, and plenty of whitespace. It is simple, responsive, and easy to adapt for websites that need a premium but quiet testimonial design.

  • Clean minimal testimonial section with strong whitespace
  • Uses one featured customer quote instead of many cards
  • Great for portfolio, agency, consultant, and SaaS pages
  • Includes author details and a simple credibility line
  • No JavaScript required
Client Story

A quieter way to show powerful feedback.

Use this minimal testimonial layout when the quote is strong enough to stand on its own.

“

The design feels clean, calm, and premium. It gave our service page the trust signal it needed without adding visual noise.

EM
Emily Martin Brand Consultant
Trusted by 120+ client projects

HTML

<section class="minimal-testimonial-section">

  <div class="minimal-testimonial-inner">

    <div class="minimal-testimonial-sidebar">
      <div class="minimal-testimonial-kicker">Client Story</div>
      <h3 class="minimal-testimonial-title">A quieter way to show powerful feedback.</h3>
      <p class="minimal-testimonial-note">Use this minimal testimonial layout when the quote is strong enough to stand on its own.</p>
    </div>

    <div class="minimal-testimonial-content">
      <div class="minimal-testimonial-mark">“</div>
      <p class="minimal-testimonial-quote">The design feels clean, calm, and premium. It gave our service page the trust signal it needed without adding visual noise.</p>

      <div class="minimal-testimonial-author-row">
        <div class="minimal-testimonial-author">
          <div class="minimal-testimonial-avatar">EM</div>
          <div>
            <strong>Emily Martin</strong>
            <span>Brand Consultant</span>
          </div>
        </div>
        <div class="minimal-testimonial-result">Trusted by 120+ client projects</div>
      </div>
    </div>

  </div>

</section>

CSS

.minimal-testimonial-section{
width:min(100%,980px);
padding:54px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 70px rgba(15,23,42,.08);
}

.minimal-testimonial-inner{
display:grid;
grid-template-columns:260px minmax(0,1fr);
gap:46px;
align-items:start;
}

.minimal-testimonial-sidebar{
display:grid;
gap:18px;
}

.minimal-testimonial-kicker{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:#f1f5f9;
color:#475569;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}

.minimal-testimonial-title{
margin:0;
color:#0f172a;
font-size:clamp(28px,4vw,42px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
}

.minimal-testimonial-note{
margin:0;
color:#64748b;
font-size:15px;
line-height:1.75;
font-weight:600;
}

.minimal-testimonial-content{
position:relative;
padding-left:34px;
border-left:1px solid rgba(15,23,42,.12);
}

.minimal-testimonial-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
margin-bottom:24px;
border-radius:20px;
background:#0f172a;
color:#ffffff;
font-size:34px;
line-height:1;
font-weight:950;
}

.minimal-testimonial-quote{
margin:0 0 30px;
color:#111827;
font-size:clamp(25px,4vw,42px);
line-height:1.22;
font-weight:850;
letter-spacing:-.045em;
}

.minimal-testimonial-author-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-top:24px;
border-top:1px solid rgba(15,23,42,.09);
}

.minimal-testimonial-author{
display:flex;
align-items:center;
gap:14px;
}

.minimal-testimonial-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:50px;
height:50px;
border-radius:999px;
background:#e2e8f0;
color:#0f172a;
font-size:14px;
font-weight:950;
}

.minimal-testimonial-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.minimal-testimonial-author span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.minimal-testimonial-result{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#334155;
font-size:13px;
font-weight:850;
white-space:nowrap;
}

@media (max-width:820px){
.minimal-testimonial-section{
padding:34px;
}

.minimal-testimonial-inner{
grid-template-columns:1fr;
gap:30px;
}

.minimal-testimonial-content{
padding-left:0;
border-left:0;
}

.minimal-testimonial-author-row{
align-items:flex-start;
flex-direction:column;
}
}

@media (max-width:640px){
.minimal-testimonial-section{
padding:24px;
border-radius:26px;
}

.minimal-testimonial-quote{
font-size:28px;
}

.minimal-testimonial-result{
white-space:normal;
}
}

This minimal testimonial section is best when you have one strong quote that deserves focus. Instead of showing many reviews at once, the layout uses typography, spacing, and a clean author area to make one customer story feel more important and more believable.

4. Dark Mode Testimonials

Dark mode testimonials are perfect for modern SaaS websites, AI tools, startup landing pages, developer products, dashboards, and tech brands. A darker testimonial section can create strong contrast, make review cards feel premium, and help social proof stand out inside a futuristic landing page design.

The example below uses a dark background, glowing review cards, gradient accents, compact customer details, and a large trust metric. It has a different structure from a basic card grid because the featured quote, metric panel, and smaller reviews work together as one complete dark testimonial section.

  • Modern dark testimonial section for SaaS and tech websites
  • Includes one featured quote and supporting review cards
  • Uses neon gradient accents and soft glow effects
  • Works well after a dark hero section or product feature block
  • Responsive layout with no JavaScript required
Dark Social Proof

Customer trust for modern digital products

A dark testimonial section can make review content feel premium, especially for SaaS, AI tools, dashboards, and startup websites.

★★★★★
Featured Review

“The product felt more credible the moment we added a stronger testimonial section. The dark layout fits perfectly with our SaaS landing page.”

RC
Rachel Cole Head of Product
+42% trial signups
98% of customers said the new website experience felt clearer and more trustworthy.

“The glow, spacing, and card hierarchy make the reviews feel high-end without making the layout heavy.”

Marcus Lee ★★★★★

“This is the kind of social proof section that fits perfectly between product features and pricing.”

Olivia Stone ★★★★★

HTML

<section class="dark-mode-testimonials">

  <div class="dark-mode-testimonials-header">
    <div class="dark-mode-testimonials-kicker">Dark Social Proof</div>
    <h3 class="dark-mode-testimonials-title">Customer trust for <span>modern digital products</span></h3>
    <p class="dark-mode-testimonials-text">A dark testimonial section can make review content feel premium, especially for SaaS, AI tools, dashboards, and startup websites.</p>
  </div>

  <div class="dark-mode-testimonials-layout">

    <article class="dark-mode-featured-testimonial">
      <div class="dark-mode-featured-top">
        <div class="dark-mode-featured-stars">★★★★★</div>
        <span class="dark-mode-featured-pill">Featured Review</span>
      </div>

      <p class="dark-mode-featured-quote">“The product felt more credible the moment we added a stronger testimonial section. The dark layout fits perfectly with our SaaS landing page.”</p>

      <div class="dark-mode-featured-author">
        <div class="dark-mode-featured-author-left">
          <div class="dark-mode-featured-avatar">RC</div>
          <div>
            <strong>Rachel Cole</strong>
            <span>Head of Product</span>
          </div>
        </div>
        <div class="dark-mode-featured-result">+42% trial signups</div>
      </div>
    </article>

    <div class="dark-mode-side-panel">

      <div class="dark-mode-trust-metric">
        <strong>98%</strong>
        <span>of customers said the new website experience felt clearer and more trustworthy.</span>
      </div>

      <div class="dark-mode-small-reviews">

        <article class="dark-mode-small-review">
          <p>“The glow, spacing, and card hierarchy make the reviews feel high-end without making the layout heavy.”</p>
          <div class="dark-mode-small-review-footer">
            <strong>Marcus Lee</strong>
            <span>★★★★★</span>
          </div>
        </article>

        <article class="dark-mode-small-review">
          <p>“This is the kind of social proof section that fits perfectly between product features and pricing.”</p>
          <div class="dark-mode-small-review-footer">
            <strong>Olivia Stone</strong>
            <span>★★★★★</span>
          </div>
        </article>

      </div>

    </div>

  </div>

</section>

CSS

.dark-mode-testimonials{
width:min(100%,1080px);
}

.dark-mode-testimonials-header{
max-width:760px;
margin:0 0 30px;
}

.dark-mode-testimonials-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.12);
border:1px solid rgba(103,232,249,.22);
color:#a5f3fc;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.dark-mode-testimonials-title{
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.dark-mode-testimonials-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#fb923c);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.dark-mode-testimonials-text{
max-width:650px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.dark-mode-testimonials-layout{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
gap:18px;
align-items:stretch;
}

.dark-mode-featured-testimonial{
position:relative;
min-height:100%;
padding:30px;
border-radius:34px;
background:
linear-gradient(135deg,rgba(34,211,238,.16),rgba(124,58,237,.16)),
rgba(15,23,42,.86);
border:1px solid rgba(103,232,249,.28);
box-shadow:0 28px 90px rgba(0,0,0,.35);
overflow:hidden;
}

.dark-mode-featured-testimonial::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(34,211,238,.20);
filter:blur(10px);
pointer-events:none;
}

.dark-mode-featured-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:54px;
}

.dark-mode-featured-stars{
color:#fbbf24;
font-size:17px;
letter-spacing:.03em;
}

.dark-mode-featured-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#e0f2fe;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}

.dark-mode-featured-quote{
position:relative;
z-index:2;
margin:0 0 34px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(27px,4vw,46px);
line-height:1.15;
font-weight:900;
letter-spacing:-.05em;
}

.dark-mode-featured-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.12);
}

.dark-mode-featured-author-left{
display:flex;
align-items:center;
gap:14px;
}

.dark-mode-featured-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#22d3ee,#7c3aed);
color:#ffffff;
font-size:15px;
font-weight:950;
box-shadow:0 18px 42px rgba(34,211,238,.18);
}

.dark-mode-featured-author strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.dark-mode-featured-author span{
display:block;
color:#94a3b8;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.dark-mode-featured-result{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:rgba(34,211,238,.12);
border:1px solid rgba(103,232,249,.22);
color:#cffafe;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.dark-mode-side-panel{
display:grid;
grid-template-rows:auto 1fr;
gap:18px;
}

.dark-mode-trust-metric{
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.20);
box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.dark-mode-trust-metric strong{
display:block;
margin-bottom:8px;
color:#ffffff;
font-size:52px;
line-height:.95;
font-weight:950;
letter-spacing:-.06em;
}

.dark-mode-trust-metric span{
display:block;
color:#cbd5e1;
font-size:14px;
line-height:1.55;
font-weight:700;
}

.dark-mode-small-reviews{
display:grid;
gap:18px;
}

.dark-mode-small-review{
position:relative;
padding:22px;
border-radius:28px;
background:rgba(15,23,42,.82);
border:1px solid rgba(148,163,184,.20);
box-shadow:0 24px 70px rgba(0,0,0,.24);
overflow:hidden;
}

.dark-mode-small-review::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 45%);
pointer-events:none;
}

.dark-mode-small-review p{
position:relative;
z-index:2;
margin:0 0 18px;
color:#e5e7eb;
font-size:15px;
line-height:1.7;
font-weight:600;
}

.dark-mode-small-review-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.dark-mode-small-review-footer strong{
color:#ffffff;
font-size:14px;
font-weight:900;
}

.dark-mode-small-review-footer span{
color:#fbbf24;
font-size:13px;
letter-spacing:.02em;
}

@media (max-width:920px){
.dark-mode-testimonials-layout{
grid-template-columns:1fr;
}

.dark-mode-featured-top,
.dark-mode-featured-author{
align-items:flex-start;
flex-direction:column;
}

.dark-mode-featured-result{
white-space:normal;
}
}

@media (max-width:640px){
.dark-mode-testimonials-title{
font-size:34px;
}

.dark-mode-featured-testimonial,
.dark-mode-trust-metric,
.dark-mode-small-review{
padding:22px;
border-radius:24px;
}

.dark-mode-featured-top{
margin-bottom:34px;
}

.dark-mode-featured-quote{
font-size:29px;
}
}

This dark mode testimonial section is a strong choice for technology-focused websites where the surrounding page already uses dark UI, gradients, or futuristic visuals. The featured quote gives the section emotional weight, while the metric card and smaller reviews add extra credibility without making the layout feel repetitive.

5. Gradient Testimonial Cards

Gradient testimonial cards are a good choice when you want customer reviews to feel more energetic, visual, and memorable. This style works well for creative agencies, digital products, startup websites, app landing pages, design tools, and modern service pages.

The example below uses colorful gradient cards with layered quote marks, compact ratings, author rows, and a responsive layout. Unlike a plain testimonial grid, each card has its own visual personality while still staying consistent as one section.

  • Modern gradient testimonial cards with strong visual impact
  • Useful for startups, agencies, apps, and creative landing pages
  • Each testimonial card has a different gradient background
  • Includes quote text, star ratings, author details, and labels
  • Responsive HTML and CSS with no JavaScript required
Colorful Reviews

Testimonials with bold gradient energy

Use gradient testimonial cards when the section should feel more visual, expressive, and memorable.

★★★★★
Agency

The new testimonial section finally matches the energy of our brand. It feels modern, colorful, and still easy to read.

HL
Hannah Lewis Creative Strategist
★★★★★
SaaS

The gradient cards helped our product reviews stand out without adding extra scripts or slowing down the page.

PN
Peter Novak SaaS Founder
★★★★★
App

This layout works perfectly for app testimonials because the cards feel polished, fast, and highly visual.

IR
Isabella Ross App Designer

HTML

<section class="gradient-testimonial-cards">

  <div class="gradient-testimonial-cards-header">
    <div class="gradient-testimonial-cards-heading">
      <div class="gradient-testimonial-cards-kicker">Colorful Reviews</div>
      <h3 class="gradient-testimonial-cards-title">Testimonials with <span>bold gradient energy</span></h3>
    </div>
    <p class="gradient-testimonial-cards-note">Use gradient testimonial cards when the section should feel more visual, expressive, and memorable.</p>
  </div>

  <div class="gradient-testimonial-cards-grid">

    <article class="gradient-testimonial-card orange">
      <div class="gradient-testimonial-card-top">
        <div class="gradient-testimonial-stars">★★★★★</div>
        <span class="gradient-testimonial-tag">Agency</span>
      </div>
      <p class="gradient-testimonial-quote">The new testimonial section finally matches the energy of our brand. It feels modern, colorful, and still easy to read.</p>
      <div class="gradient-testimonial-author">
        <div class="gradient-testimonial-avatar">HL</div>
        <div>
          <strong>Hannah Lewis</strong>
          <span>Creative Strategist</span>
        </div>
      </div>
    </article>

    <article class="gradient-testimonial-card purple">
      <div class="gradient-testimonial-card-top">
        <div class="gradient-testimonial-stars">★★★★★</div>
        <span class="gradient-testimonial-tag">SaaS</span>
      </div>
      <p class="gradient-testimonial-quote">The gradient cards helped our product reviews stand out without adding extra scripts or slowing down the page.</p>
      <div class="gradient-testimonial-author">
        <div class="gradient-testimonial-avatar">PN</div>
        <div>
          <strong>Peter Novak</strong>
          <span>SaaS Founder</span>
        </div>
      </div>
    </article>

    <article class="gradient-testimonial-card blue">
      <div class="gradient-testimonial-card-top">
        <div class="gradient-testimonial-stars">★★★★★</div>
        <span class="gradient-testimonial-tag">App</span>
      </div>
      <p class="gradient-testimonial-quote">This layout works perfectly for app testimonials because the cards feel polished, fast, and highly visual.</p>
      <div class="gradient-testimonial-author">
        <div class="gradient-testimonial-avatar">IR</div>
        <div>
          <strong>Isabella Ross</strong>
          <span>App Designer</span>
        </div>
      </div>
    </article>

  </div>

</section>

CSS

.gradient-testimonial-cards{
width:min(100%,1080px);
}

.gradient-testimonial-cards-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:28px;
margin-bottom:30px;
}

.gradient-testimonial-cards-heading{
max-width:720px;
}

.gradient-testimonial-cards-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#fce7f3;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.gradient-testimonial-cards-title{
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.gradient-testimonial-cards-title span{
background:linear-gradient(90deg,#fb923c,#ec4899,#38bdf8);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.gradient-testimonial-cards-note{
max-width:300px;
margin:0;
padding:16px 18px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#dbeafe;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.gradient-testimonial-cards-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.gradient-testimonial-card{
position:relative;
display:flex;
flex-direction:column;
min-height:410px;
padding:26px;
border-radius:32px;
overflow:hidden;
border:1px solid rgba(255,255,255,.22);
box-shadow:0 24px 70px rgba(0,0,0,.28);
transition:transform .22s ease,box-shadow .22s ease;
}

.gradient-testimonial-card:hover{
transform:translateY(-6px);
box-shadow:0 34px 90px rgba(0,0,0,.34);
}

.gradient-testimonial-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 42%);
pointer-events:none;
}

.gradient-testimonial-card::after{
content:"“";
position:absolute;
right:18px;
top:2px;
color:rgba(255,255,255,.16);
font-size:130px;
line-height:1;
font-weight:950;
letter-spacing:-.08em;
pointer-events:none;
}

.gradient-testimonial-card.orange{
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.20),transparent 34%),
linear-gradient(135deg,#f97316,#db2777);
}

.gradient-testimonial-card.purple{
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.20),transparent 34%),
linear-gradient(135deg,#7c3aed,#2563eb);
}

.gradient-testimonial-card.blue{
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.20),transparent 34%),
linear-gradient(135deg,#0891b2,#4338ca);
}

.gradient-testimonial-card-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:42px;
}

.gradient-testimonial-stars{
color:#ffffff;
font-size:15px;
letter-spacing:.03em;
text-shadow:0 2px 20px rgba(0,0,0,.18);
}

.gradient-testimonial-tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
color:#ffffff;
font-size:12px;
font-weight:900;
line-height:1;
text-transform:uppercase;
letter-spacing:.05em;
}

.gradient-testimonial-quote{
position:relative;
z-index:2;
margin:0 0 26px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:20px;
line-height:1.55;
font-weight:850;
letter-spacing:-.025em;
}

.gradient-testimonial-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:13px;
margin-top:auto;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.22);
}

.gradient-testimonial-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:18px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.26);
color:#ffffff;
font-size:14px;
font-weight:950;
box-shadow:0 14px 34px rgba(0,0,0,.16);
}

.gradient-testimonial-author strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.gradient-testimonial-author span{
display:block;
color:rgba(255,255,255,.78);
font-size:13px;
line-height:1.35;
font-weight:750;
}

@media (max-width:920px){
.gradient-testimonial-cards-header{
align-items:flex-start;
flex-direction:column;
}

.gradient-testimonial-cards-note{
max-width:100%;
}

.gradient-testimonial-cards-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.gradient-testimonial-card{
min-height:auto;
}
}

@media (max-width:640px){
.gradient-testimonial-cards-title{
font-size:34px;
}

.gradient-testimonial-card{
padding:22px;
border-radius:26px;
}

.gradient-testimonial-quote{
font-size:18px;
}
}

Gradient testimonial cards are useful when a page needs more personality than a simple white card layout. This example keeps the structure readable while using color, large quote marks, and strong author rows to make each review feel like a polished visual element.

6. Glassmorphism Testimonials

Glassmorphism testimonials use translucent cards, blurred backgrounds, soft borders, and layered light effects to create a modern UI style. This works especially well for SaaS websites, AI products, app landing pages, dashboards, portfolio websites, and futuristic website sections.

The example below uses a glass-style testimonial panel with floating review cards, a central featured quote, translucent surfaces, and soft glowing background shapes. It creates a very different feeling from traditional review cards while still keeping the content readable.

  • Glassmorphism testimonial section with translucent cards
  • Great for SaaS, AI, app, and futuristic landing pages
  • Uses blur, soft borders, gradient background lights, and layered cards
  • Includes one featured quote and supporting customer review cards
  • Responsive HTML and CSS testimonial design with no JavaScript
Glass UI Reviews

Soft glass cards for modern social proof

Use this glassmorphism testimonial section when your website already uses blur, gradients, dark UI, or futuristic interface elements.

★★★★★
Featured Quote

“The glassmorphism testimonial section made our landing page feel premium, modern, and more trustworthy without making it look crowded.”

AV
Alex Vega UI Product Lead
Used across 8 landing pages

“The translucent cards fit perfectly with our AI product page and still keep the quote text readable.”

Mila Hart ★★★★★

“This testimonial design feels more like a polished UI component than a basic review block.”

Noah Price ★★★★★

“The layout gives us a strong featured quote and smaller support reviews in one clean section.”

Ella Morgan ★★★★★

HTML

<section class="glassmorphism-testimonials">

  <div class="glassmorphism-testimonials-header">
    <div>
      <div class="glassmorphism-testimonials-kicker">Glass UI Reviews</div>
      <h3 class="glassmorphism-testimonials-title">Soft glass cards for <span>modern social proof</span></h3>
    </div>
    <p class="glassmorphism-testimonials-intro">Use this glassmorphism testimonial section when your website already uses blur, gradients, dark UI, or futuristic interface elements.</p>
  </div>

  <div class="glassmorphism-testimonials-layout">

    <article class="glassmorphism-featured-card">
      <div class="glassmorphism-featured-top">
        <div class="glassmorphism-stars">★★★★★</div>
        <span class="glassmorphism-pill">Featured Quote</span>
      </div>

      <p class="glassmorphism-featured-quote">“The glassmorphism testimonial section made our landing page feel premium, modern, and more trustworthy without making it look crowded.”</p>

      <div class="glassmorphism-featured-footer">
        <div class="glassmorphism-author">
          <div class="glassmorphism-avatar">AV</div>
          <div>
            <strong>Alex Vega</strong>
            <span>UI Product Lead</span>
          </div>
        </div>
        <div class="glassmorphism-result">Used across 8 landing pages</div>
      </div>
    </article>

    <div class="glassmorphism-side-cards">

      <article class="glassmorphism-small-card">
        <p>“The translucent cards fit perfectly with our AI product page and still keep the quote text readable.”</p>
        <div class="glassmorphism-small-card-footer">
          <strong>Mila Hart</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <article class="glassmorphism-small-card">
        <p>“This testimonial design feels more like a polished UI component than a basic review block.”</p>
        <div class="glassmorphism-small-card-footer">
          <strong>Noah Price</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <article class="glassmorphism-small-card">
        <p>“The layout gives us a strong featured quote and smaller support reviews in one clean section.”</p>
        <div class="glassmorphism-small-card-footer">
          <strong>Ella Morgan</strong>
          <span>★★★★★</span>
        </div>
      </article>

    </div>

  </div>

</section>

CSS

.glassmorphism-testimonials{
position:relative;
width:min(100%,1080px);
padding:32px;
border-radius:38px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 30px 100px rgba(0,0,0,.32);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
overflow:hidden;
}

.glassmorphism-testimonials::before,
.glassmorphism-testimonials::after{
content:"";
position:absolute;
border-radius:999px;
filter:blur(2px);
pointer-events:none;
}

.glassmorphism-testimonials::before{
width:190px;
height:190px;
left:-70px;
top:-80px;
background:rgba(34,211,238,.24);
}

.glassmorphism-testimonials::after{
width:240px;
height:240px;
right:-110px;
bottom:-120px;
background:rgba(168,85,247,.24);
}

.glassmorphism-testimonials-header{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);
gap:28px;
align-items:end;
margin-bottom:26px;
}

.glassmorphism-testimonials-kicker{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
color:#e0f2fe;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.glassmorphism-testimonials-title{
margin:0;
max-width:720px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.glassmorphism-testimonials-title span{
background:linear-gradient(90deg,#67e8f9,#c084fc,#fb923c);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.glassmorphism-testimonials-intro{
margin:0;
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#dbeafe;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.glassmorphism-testimonials-layout{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:18px;
align-items:stretch;
}

.glassmorphism-featured-card{
position:relative;
min-height:420px;
padding:30px;
border-radius:34px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 24px 80px rgba(0,0,0,.24);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
overflow:hidden;
}

.glassmorphism-featured-card::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(255,255,255,.18),transparent 42%),
radial-gradient(circle at 82% 16%,rgba(34,211,238,.18),transparent 36%);
pointer-events:none;
}

.glassmorphism-featured-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:68px;
}

.glassmorphism-stars{
color:#fbbf24;
font-size:16px;
letter-spacing:.03em;
}

.glassmorphism-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.05em;
}

.glassmorphism-featured-quote{
position:relative;
z-index:2;
max-width:720px;
margin:0 0 34px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(27px,4vw,46px);
line-height:1.15;
font-weight:900;
letter-spacing:-.05em;
}

.glassmorphism-featured-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.16);
}

.glassmorphism-author{
display:flex;
align-items:center;
gap:14px;
}

.glassmorphism-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:20px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.glassmorphism-author strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.glassmorphism-author span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.glassmorphism-result{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:rgba(34,211,238,.14);
border:1px solid rgba(103,232,249,.22);
color:#cffafe;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.glassmorphism-side-cards{
display:grid;
gap:18px;
}

.glassmorphism-small-card{
position:relative;
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.11);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 22px 70px rgba(0,0,0,.22);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
overflow:hidden;
}

.glassmorphism-small-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 48%);
pointer-events:none;
}

.glassmorphism-small-card p{
position:relative;
z-index:2;
margin:0 0 18px;
color:#f8fafc;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.glassmorphism-small-card-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.glassmorphism-small-card-footer strong{
color:#ffffff;
font-size:14px;
font-weight:900;
}

.glassmorphism-small-card-footer span{
color:#fbbf24;
font-size:13px;
letter-spacing:.02em;
}

@media (max-width:940px){
.glassmorphism-testimonials{
padding:24px;
}

.glassmorphism-testimonials-header,
.glassmorphism-testimonials-layout{
grid-template-columns:1fr;
}

.glassmorphism-featured-card{
min-height:auto;
}

.glassmorphism-featured-top,
.glassmorphism-featured-footer{
align-items:flex-start;
flex-direction:column;
}

.glassmorphism-result{
white-space:normal;
}
}

@media (max-width:640px){
.glassmorphism-testimonials{
padding:18px;
border-radius:28px;
}

.glassmorphism-testimonials-title{
font-size:34px;
}

.glassmorphism-featured-card,
.glassmorphism-small-card{
padding:22px;
border-radius:24px;
}

.glassmorphism-featured-top{
margin-bottom:36px;
}

.glassmorphism-featured-quote{
font-size:28px;
}
}

This glassmorphism testimonial section works best on websites that already use modern UI effects, dark backgrounds, gradients, or app-style visuals. The blur and translucent cards create depth, while the featured quote and smaller review cards keep the social proof structure practical and easy to understand.

7. Testimonial with Star Ratings

Testimonials with star ratings are useful when the review score is just as important as the customer quote. This style works well for ecommerce stores, app websites, product pages, service businesses, software tools, booking websites, and any page where visitors expect to see rating-based social proof.

The example below is different from a normal testimonial card layout because the rating summary is the main focus. It includes an average score, rating bars, verified review cards, and a responsive two-column structure that works well on desktop and mobile.

  • Rating-focused testimonial section with review score
  • Includes star ratings, rating bars, and verified review cards
  • Great for product pages, app reviews, and service websites
  • Uses a dashboard-style layout instead of repeated testimonial cards
  • Fully responsive HTML and CSS with no JavaScript required
Rated by Customers

Reviews that make your offer feel safer to choose

Use this rating-focused testimonial layout when visitors need to see review scores, star ratings, and verified customer feedback before making a decision.

CB
Charlotte Brooks Verified buyer
★★★★★

“The section made the reviews feel much more trustworthy. The average score, rating bars, and verified badges helped visitors understand the feedback quickly.”

Verified review 2 days ago
FT
Felix Turner App customer
★★★★★

“This layout is perfect for an app landing page because the rating score is visible first, and the review cards add useful context below it.”

Verified review 1 week ago
LP
Lena Price Service client
★★★★★

“The design gives the page a review-platform feeling without relying on a third-party widget. It is clean, fast, and easy to adapt.”

Verified review 3 weeks ago

HTML

<section class="star-rating-testimonials">

  <div class="star-rating-testimonials-header">
    <div class="star-rating-testimonials-kicker">Rated by Customers</div>
    <h3 class="star-rating-testimonials-title">Reviews that make your offer feel <span>safer to choose</span></h3>
    <p class="star-rating-testimonials-text">Use this rating-focused testimonial layout when visitors need to see review scores, star ratings, and verified customer feedback before making a decision.</p>
  </div>

  <div class="star-rating-testimonials-layout">

    <aside class="star-rating-summary-panel">

      <div class="star-rating-score-box">
        <strong>4.8</strong>
        <div class="star-rating-score-stars">★★★★★</div>
        <span>Average from 1,280 reviews</span>
      </div>

      <div class="star-rating-bars">
        <div class="star-rating-bar-row">
          <span>5 star</span>
          <div class="star-rating-track"><div class="star-rating-fill w92"></div></div>
          <span>92%</span>
        </div>
        <div class="star-rating-bar-row">
          <span>4 star</span>
          <div class="star-rating-track"><div class="star-rating-fill w74"></div></div>
          <span>74%</span>
        </div>
        <div class="star-rating-bar-row">
          <span>3 star</span>
          <div class="star-rating-track"><div class="star-rating-fill w44"></div></div>
          <span>44%</span>
        </div>
        <div class="star-rating-bar-row">
          <span>2 star</span>
          <div class="star-rating-track"><div class="star-rating-fill w18"></div></div>
          <span>18%</span>
        </div>
        <div class="star-rating-bar-row">
          <span>1 star</span>
          <div class="star-rating-track"><div class="star-rating-fill w8"></div></div>
          <span>8%</span>
        </div>
      </div>

      <p class="star-rating-summary-note">Rating summaries work well near product details, pricing sections, checkout pages, and service comparison sections.</p>

    </aside>

    <div class="star-rating-review-list">

      <article class="star-rating-review-card">
        <div class="star-rating-review-avatar">CB</div>
        <div class="star-rating-review-content">
          <div class="star-rating-review-top">
            <div class="star-rating-review-author">
              <strong>Charlotte Brooks</strong>
              <span>Verified buyer</span>
            </div>
            <div class="star-rating-review-stars">★★★★★</div>
          </div>
          <p>“The section made the reviews feel much more trustworthy. The average score, rating bars, and verified badges helped visitors understand the feedback quickly.”</p>
          <div class="star-rating-review-footer">
            <span class="star-rating-review-badge">Verified review</span>
            <span class="star-rating-review-date">2 days ago</span>
          </div>
        </div>
      </article>

      <article class="star-rating-review-card">
        <div class="star-rating-review-avatar">FT</div>
        <div class="star-rating-review-content">
          <div class="star-rating-review-top">
            <div class="star-rating-review-author">
              <strong>Felix Turner</strong>
              <span>App customer</span>
            </div>
            <div class="star-rating-review-stars">★★★★★</div>
          </div>
          <p>“This layout is perfect for an app landing page because the rating score is visible first, and the review cards add useful context below it.”</p>
          <div class="star-rating-review-footer">
            <span class="star-rating-review-badge">Verified review</span>
            <span class="star-rating-review-date">1 week ago</span>
          </div>
        </div>
      </article>

      <article class="star-rating-review-card">
        <div class="star-rating-review-avatar">LP</div>
        <div class="star-rating-review-content">
          <div class="star-rating-review-top">
            <div class="star-rating-review-author">
              <strong>Lena Price</strong>
              <span>Service client</span>
            </div>
            <div class="star-rating-review-stars">★★★★★</div>
          </div>
          <p>“The design gives the page a review-platform feeling without relying on a third-party widget. It is clean, fast, and easy to adapt.”</p>
          <div class="star-rating-review-footer">
            <span class="star-rating-review-badge">Verified review</span>
            <span class="star-rating-review-date">3 weeks ago</span>
          </div>
        </div>
      </article>

    </div>

  </div>

</section>

CSS

.star-rating-testimonials{
width:min(100%,1080px);
}

.star-rating-testimonials-header{
max-width:760px;
margin:0 auto 32px;
text-align:center;
}

.star-rating-testimonials-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fef3c7;
color:#92400e;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.star-rating-testimonials-title{
margin:0 0 14px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.star-rating-testimonials-title span{
background:linear-gradient(135deg,#f59e0b,#f97316);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.star-rating-testimonials-text{
max-width:650px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.star-rating-testimonials-layout{
display:grid;
grid-template-columns:360px minmax(0,1fr);
gap:20px;
align-items:start;
}

.star-rating-summary-panel{
position:sticky;
top:18px;
padding:28px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.star-rating-score-box{
display:grid;
place-items:center;
margin-bottom:26px;
padding:26px 20px;
border-radius:28px;
background:
radial-gradient(circle at 50% 0%,rgba(250,204,21,.22),transparent 44%),
linear-gradient(135deg,#fffbeb,#ffffff);
border:1px solid rgba(245,158,11,.18);
text-align:center;
}

.star-rating-score-box strong{
display:block;
margin-bottom:8px;
color:#0f172a;
font-size:72px;
line-height:.9;
font-weight:950;
letter-spacing:-.08em;
}

.star-rating-score-stars{
margin-bottom:8px;
color:#f59e0b;
font-size:20px;
letter-spacing:.04em;
}

.star-rating-score-box span{
display:block;
color:#64748b;
font-size:14px;
font-weight:800;
}

.star-rating-bars{
display:grid;
gap:13px;
margin-bottom:26px;
}

.star-rating-bar-row{
display:grid;
grid-template-columns:44px minmax(0,1fr) 42px;
gap:10px;
align-items:center;
}

.star-rating-bar-row span{
color:#475569;
font-size:13px;
font-weight:850;
}

.star-rating-track{
height:10px;
border-radius:999px;
background:#e2e8f0;
overflow:hidden;
}

.star-rating-fill{
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#f59e0b,#f97316);
}

.star-rating-fill.w92{
width:92%;
}

.star-rating-fill.w74{
width:74%;
}

.star-rating-fill.w44{
width:44%;
}

.star-rating-fill.w18{
width:18%;
}

.star-rating-fill.w8{
width:8%;
}

.star-rating-summary-note{
margin:0;
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.star-rating-review-list{
display:grid;
gap:16px;
}

.star-rating-review-card{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:16px;
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 18px 50px rgba(15,23,42,.08);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.star-rating-review-card:hover{
transform:translateY(-4px);
box-shadow:0 26px 70px rgba(15,23,42,.12);
border-color:rgba(245,158,11,.26);
}

.star-rating-review-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:20px;
background:linear-gradient(135deg,#f59e0b,#f97316);
color:#ffffff;
font-size:15px;
font-weight:950;
box-shadow:0 14px 34px rgba(249,115,22,.22);
}

.star-rating-review-content{
min-width:0;
}

.star-rating-review-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:10px;
}

.star-rating-review-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.star-rating-review-author span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.star-rating-review-stars{
color:#f59e0b;
font-size:14px;
letter-spacing:.03em;
white-space:nowrap;
}

.star-rating-review-card p{
margin:0 0 14px;
color:#334155;
font-size:15px;
line-height:1.7;
font-weight:600;
}

.star-rating-review-footer{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
}

.star-rating-review-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#f0fdf4;
color:#15803d;
font-size:12px;
font-weight:900;
line-height:1;
}

.star-rating-review-date{
color:#64748b;
font-size:12px;
font-weight:750;
}

@media (max-width:920px){
.star-rating-testimonials-layout{
grid-template-columns:1fr;
}

.star-rating-summary-panel{
position:relative;
top:auto;
}
}

@media (max-width:640px){
.star-rating-testimonials-header{
text-align:left;
}

.star-rating-testimonials-title{
font-size:34px;
}

.star-rating-summary-panel,
.star-rating-review-card{
padding:20px;
border-radius:24px;
}

.star-rating-review-card{
grid-template-columns:1fr;
}

.star-rating-review-top{
align-items:flex-start;
flex-direction:column;
}

.star-rating-score-box strong{
font-size:58px;
}
}

This testimonial with star ratings works best when visitors need a quick trust signal before reading individual reviews. The average rating, rating bars, verified labels, and customer quotes create a review section that feels more structured than a simple testimonial grid.

8. Quote Testimonial Section

Quote testimonial sections are designed around one strong customer statement instead of many small reviews. This layout is useful for landing pages, case study pages, agency websites, consultant pages, B2B service pages, and any section where one powerful quote can support the message better than a full grid.

The example below uses a large editorial quote, a customer profile panel, supporting proof points, and a split-screen layout. It is intentionally different from card-based testimonial examples because the quote becomes the hero element of the section.

  • Large editorial testimonial quote section
  • Best for one strong customer quote or case study highlight
  • Uses split-screen layout with profile and proof points
  • Works well for B2B, agency, consulting, and service pages
  • Responsive HTML and CSS with no JavaScript required
Featured Customer Quote
“

This was the first website section that made our client feedback feel like a real business asset.

3.2x More visitors reached the contact form
41% Higher click-through on the main CTA
12k+ Monthly visitors saw the quote section

HTML

<section class="quote-testimonial-section">

  <div class="quote-testimonial-layout">

    <div class="quote-testimonial-main">

      <div>
        <div class="quote-testimonial-kicker">Featured Customer Quote</div>
        <div class="quote-testimonial-mark">“</div>
        <p class="quote-testimonial-quote">This was the first website section that made our client feedback feel like a <span>real business asset.</span></p>
      </div>

      <div class="quote-testimonial-bottom">
        <div class="quote-testimonial-proof">
          <strong>3.2x</strong>
          <span>More visitors reached the contact form</span>
        </div>
        <div class="quote-testimonial-proof">
          <strong>41%</strong>
          <span>Higher click-through on the main CTA</span>
        </div>
        <div class="quote-testimonial-proof">
          <strong>12k+</strong>
          <span>Monthly visitors saw the quote section</span>
        </div>
      </div>

    </div>

    <aside class="quote-testimonial-profile">

      <div class="quote-testimonial-profile-top">
        <div class="quote-testimonial-avatar-large">JR</div>
        <h3>From quiet feedback to visible trust.</h3>
        <p>This quote section is designed for one strong testimonial, a customer profile, and a few supporting proof points.</p>
      </div>

      <div class="quote-testimonial-profile-footer">
        <div class="quote-testimonial-author-line">
          <strong>Julia Reyes</strong>
          <span>Operations Director, BrightLayer Studio</span>
        </div>
        <a class="quote-testimonial-button" href="#">Read customer story</a>
      </div>

    </aside>

  </div>

</section>

CSS

.quote-testimonial-section{
position:relative;
width:min(100%,1080px);
padding:34px;
border-radius:38px;
background:#ffffff;
box-shadow:0 30px 100px rgba(0,0,0,.30);
overflow:hidden;
}

.quote-testimonial-section::before{
content:"";
position:absolute;
left:-120px;
top:-120px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(244,63,94,.12);
pointer-events:none;
}

.quote-testimonial-section::after{
content:"";
position:absolute;
right:-130px;
bottom:-140px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(99,102,241,.12);
pointer-events:none;
}

.quote-testimonial-layout{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.1fr) 340px;
gap:28px;
align-items:stretch;
}

.quote-testimonial-main{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:520px;
padding:26px 20px 26px 0;
}

.quote-testimonial-kicker{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:22px;
padding:8px 12px;
border-radius:999px;
background:#ffe4e6;
color:#be123c;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.quote-testimonial-mark{
margin-bottom:18px;
color:#e11d48;
font-size:92px;
line-height:.7;
font-weight:950;
letter-spacing:-.08em;
}

.quote-testimonial-quote{
max-width:720px;
margin:0;
color:#0f172a;
font-size:clamp(34px,5vw,64px);
line-height:1.02;
font-weight:950;
letter-spacing:-.07em;
}

.quote-testimonial-quote span{
background:linear-gradient(135deg,#e11d48,#4f46e5);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.quote-testimonial-bottom{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-top:42px;
}

.quote-testimonial-proof{
padding:18px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.quote-testimonial-proof strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
}

.quote-testimonial-proof span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.quote-testimonial-profile{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:26px;
border-radius:32px;
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.20),transparent 34%),
linear-gradient(135deg,#0f172a,#312e81);
color:#ffffff;
overflow:hidden;
box-shadow:0 24px 70px rgba(49,46,129,.28);
}

.quote-testimonial-profile::before{
content:"";
position:absolute;
right:-70px;
top:-70px;
width:180px;
height:180px;
border-radius:999px;
background:rgba(244,63,94,.24);
pointer-events:none;
}

.quote-testimonial-profile-top{
position:relative;
z-index:2;
display:grid;
gap:18px;
}

.quote-testimonial-avatar-large{
display:inline-flex;
align-items:center;
justify-content:center;
width:76px;
height:76px;
border-radius:26px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:22px;
font-weight:950;
box-shadow:0 18px 42px rgba(0,0,0,.20);
}

.quote-testimonial-profile h3{
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:28px;
line-height:1.08;
font-weight:950;
letter-spacing:-.04em;
}

.quote-testimonial-profile p{
margin:0;
color:#cbd5e1;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.quote-testimonial-profile-footer{
position:relative;
z-index:2;
display:grid;
gap:14px;
margin-top:34px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.14);
}

.quote-testimonial-author-line strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.quote-testimonial-author-line span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.quote-testimonial-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:42px;
padding:0 16px;
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;
transition:transform .22s ease,box-shadow .22s ease;
}

.quote-testimonial-button:hover{
color:#111827 !important;
-webkit-text-fill-color:#111827 !important;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(255,255,255,.18);
}

@media (max-width:920px){
.quote-testimonial-layout{
grid-template-columns:1fr;
}

.quote-testimonial-main{
min-height:auto;
padding:0;
}

.quote-testimonial-bottom{
grid-template-columns:1fr;
}

.quote-testimonial-profile{
min-height:420px;
}
}

@media (max-width:640px){
.quote-testimonial-section{
padding:22px;
border-radius:28px;
}

.quote-testimonial-quote{
font-size:38px;
}

.quote-testimonial-mark{
font-size:72px;
}

.quote-testimonial-profile{
min-height:auto;
padding:22px;
border-radius:24px;
}

.quote-testimonial-button{
width:100%;
}
}

This quote testimonial section is best when one customer statement is strong enough to carry the whole section. The layout feels closer to an editorial case study block than a review grid, which makes it useful for B2B websites, agency pages, and high-value service offers.

9. Testimonial Slider UI

Testimonial slider UI sections are useful when you want to show customer feedback in a compact, focused format. A slider-style layout works well on SaaS websites, app landing pages, startup pages, product websites, and service pages where you do not want a large review grid to take too much vertical space.

The example below creates a static testimonial slider interface using only HTML and CSS. It does not move automatically, but it visually shows how a professional testimonial slider can be designed with a featured review card, side preview cards, navigation buttons, and a clean progress indicator.

  • Slider-style testimonial UI without JavaScript
  • Uses one focused testimonial and two side preview cards
  • Includes navigation button styling and progress indicator
  • Great for compact landing page social proof sections
  • Responsive layout that stacks cleanly on smaller screens
Slider UI

A focused review slider for compact social proof

★★★★★

“The slider-style section keeps reviews visible without taking over the whole page.”

NO
Nina Olsen
★★★★★
Review 02 / 06

“The testimonial slider gave our landing page a cleaner story flow and made each customer quote feel more intentional.”

MT
Michael Torres Landing Page Strategist
02 / 06
★★★★★

“It feels polished and simple, especially for homepage sections with limited space.”

RS
Ruby Scott

HTML

<section class="testimonial-slider-ui">

  <div class="testimonial-slider-ui-header">
    <div>
      <div class="testimonial-slider-ui-kicker">Slider UI</div>
      <h3 class="testimonial-slider-ui-title">A focused review slider for <span>compact social proof</span></h3>
    </div>
    <div class="testimonial-slider-ui-controls">
      <button class="testimonial-slider-ui-arrow" type="button" aria-label="Previous testimonial">‹</button>
      <button class="testimonial-slider-ui-arrow" type="button" aria-label="Next testimonial">›</button>
    </div>
  </div>

  <div class="testimonial-slider-ui-stage">

    <article class="testimonial-slider-side-card">
      <div class="testimonial-slider-side-stars">★★★★★</div>
      <p>“The slider-style section keeps reviews visible without taking over the whole page.”</p>
      <div class="testimonial-slider-side-author">
        <div class="testimonial-slider-side-avatar">NO</div>
        <div>
          <strong>Nina Olsen</strong>
        </div>
      </div>
    </article>

    <article class="testimonial-slider-featured">
      <div>
        <div class="testimonial-slider-featured-top">
          <div class="testimonial-slider-featured-stars">★★★★★</div>
          <span class="testimonial-slider-count">Review 02 / 06</span>
        </div>

        <p class="testimonial-slider-featured-quote">“The testimonial slider gave our landing page a <span>cleaner story flow</span> and made each customer quote feel more intentional.”</p>
      </div>

      <div class="testimonial-slider-featured-footer">
        <div class="testimonial-slider-author">
          <div class="testimonial-slider-avatar">MT</div>
          <div>
            <strong>Michael Torres</strong>
            <span>Landing Page Strategist</span>
          </div>
        </div>
        <div class="testimonial-slider-progress">
          <div class="testimonial-slider-progress-bar">
            <div class="testimonial-slider-progress-fill"></div>
          </div>
          <span>02 / 06</span>
        </div>
      </div>
    </article>

    <article class="testimonial-slider-side-card">
      <div class="testimonial-slider-side-stars">★★★★★</div>
      <p>“It feels polished and simple, especially for homepage sections with limited space.”</p>
      <div class="testimonial-slider-side-author">
        <div class="testimonial-slider-side-avatar">RS</div>
        <div>
          <strong>Ruby Scott</strong>
        </div>
      </div>
    </article>

  </div>

</section>

CSS

.testimonial-slider-ui{
width:min(100%,1080px);
}

.testimonial-slider-ui-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.testimonial-slider-ui-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.testimonial-slider-ui-title{
margin:0;
max-width:720px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.testimonial-slider-ui-title span{
background:linear-gradient(135deg,#2563eb,#db2777);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.testimonial-slider-ui-controls{
display:flex;
align-items:center;
gap:10px;
}

.testimonial-slider-ui-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border:0;
border-radius:999px;
background:#ffffff;
color:#0f172a;
font-size:20px;
font-weight:950;
box-shadow:0 16px 40px rgba(15,23,42,.10);
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.testimonial-slider-ui-arrow:hover{
transform:translateY(-2px);
background:#0f172a;
color:#ffffff;
box-shadow:0 20px 46px rgba(15,23,42,.16);
}

.testimonial-slider-ui-stage{
display:grid;
grid-template-columns:190px minmax(0,1fr) 190px;
gap:18px;
align-items:center;
}

.testimonial-slider-side-card{
min-height:310px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.72);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
opacity:.72;
transform:scale(.94);
}

.testimonial-slider-side-stars{
color:#f59e0b;
font-size:13px;
letter-spacing:.02em;
}

.testimonial-slider-side-card p{
margin:18px 0;
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.testimonial-slider-side-author{
display:flex;
align-items:center;
gap:10px;
}

.testimonial-slider-side-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:#e2e8f0;
color:#0f172a;
font-size:12px;
font-weight:950;
}

.testimonial-slider-side-author strong{
display:block;
color:#0f172a;
font-size:13px;
line-height:1.2;
font-weight:900;
}

.testimonial-slider-featured{
position:relative;
min-height:460px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:34px;
border-radius:38px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 30px 90px rgba(15,23,42,.14);
overflow:hidden;
}

.testimonial-slider-featured::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:230px;
height:230px;
border-radius:999px;
background:rgba(59,130,246,.12);
pointer-events:none;
}

.testimonial-slider-featured::after{
content:"";
position:absolute;
left:-90px;
bottom:-110px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(236,72,153,.10);
pointer-events:none;
}

.testimonial-slider-featured-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:34px;
}

.testimonial-slider-featured-stars{
color:#f59e0b;
font-size:17px;
letter-spacing:.03em;
}

.testimonial-slider-count{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.testimonial-slider-featured-quote{
position:relative;
z-index:2;
max-width:760px;
margin:0 0 34px;
color:#0f172a;
font-size:clamp(28px,4vw,48px);
line-height:1.14;
font-weight:950;
letter-spacing:-.055em;
}

.testimonial-slider-featured-quote span{
background:linear-gradient(135deg,#2563eb,#db2777);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.testimonial-slider-featured-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-top:24px;
border-top:1px solid rgba(15,23,42,.09);
}

.testimonial-slider-author{
display:flex;
align-items:center;
gap:14px;
}

.testimonial-slider-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:19px;
background:linear-gradient(135deg,#2563eb,#db2777);
color:#ffffff;
font-size:15px;
font-weight:950;
box-shadow:0 16px 36px rgba(37,99,235,.22);
}

.testimonial-slider-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.testimonial-slider-author span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.testimonial-slider-progress{
display:flex;
align-items:center;
gap:8px;
min-width:170px;
}

.testimonial-slider-progress-bar{
position:relative;
height:8px;
flex:1;
border-radius:999px;
background:#e2e8f0;
overflow:hidden;
}

.testimonial-slider-progress-fill{
position:absolute;
inset:0 auto 0 0;
width:42%;
border-radius:999px;
background:linear-gradient(90deg,#2563eb,#db2777);
}

.testimonial-slider-progress span{
color:#64748b;
font-size:12px;
font-weight:850;
white-space:nowrap;
}

@media (max-width:980px){
.testimonial-slider-ui-header{
grid-template-columns:1fr;
}

.testimonial-slider-ui-stage{
grid-template-columns:1fr;
}

.testimonial-slider-side-card{
min-height:auto;
transform:none;
opacity:1;
}

.testimonial-slider-featured{
order:-1;
}
}

@media (max-width:640px){
.testimonial-slider-ui-title{
font-size:34px;
}

.testimonial-slider-ui-controls{
width:100%;
justify-content:flex-start;
}

.testimonial-slider-featured{
min-height:auto;
padding:22px;
border-radius:26px;
}

.testimonial-slider-featured-footer{
align-items:flex-start;
flex-direction:column;
}

.testimonial-slider-progress{
width:100%;
}

.testimonial-slider-featured-quote{
font-size:30px;
}
}

This testimonial slider UI is best when you want the visual style of a carousel without adding JavaScript. It gives one testimonial full attention, shows nearby review previews, and keeps the section compact enough for landing pages where space matters.

10. Testimonial Carousel with Dots

Testimonial carousels with dots are useful when you want visitors to browse multiple reviews inside one compact section. This layout is different from the previous static slider UI because it includes real clickable dot navigation powered by a small JavaScript snippet.

The example below uses a clean carousel layout with three testimonial slides, dot controls, smooth content switching, customer details, and accessible button labels. It works well for landing pages, SaaS websites, app pages, and homepage sections where only one review should be visible at a time.

  • Clickable testimonial carousel with dot navigation
  • Shows one review slide at a time
  • Includes accessible dot buttons and simple JavaScript
  • Great for compact homepage and landing page sections
  • Responsive HTML, CSS, and JavaScript example
Clickable Carousel

Browse customer stories with simple dot controls

3 featured reviews
SK
Sarah Kim Product Marketing Lead
★★★★★

“The carousel made our customer stories feel focused and easy to browse without making the page too long.”

SaaS website Landing page Verified client
DR
David Ross Agency Founder
★★★★★

“The dot navigation is simple, clear, and easy for visitors to understand. It feels much cleaner than a crowded review wall.”

Agency website Social proof Client review
MJ
Mia Johnson App Designer
★★★★★

“This testimonial carousel gives us a polished review section that works well on desktop and mobile.”

App landing page Mobile-friendly UI review

HTML

<section class="testimonial-carousel-dots">

  <div class="testimonial-carousel-dots-shell">

    <div class="testimonial-carousel-dots-header">
      <div>
        <div class="testimonial-carousel-dots-kicker">Clickable Carousel</div>
        <h3 class="testimonial-carousel-dots-title">Browse customer stories with <span>simple dot controls</span></h3>
      </div>
      <div class="testimonial-carousel-dots-badge">3 featured reviews</div>
    </div>

    <div class="testimonial-carousel-dots-window">

      <article class="testimonial-carousel-slide is-active">
        <div class="testimonial-carousel-profile">
          <div class="testimonial-carousel-avatar">SK</div>
          <div class="testimonial-carousel-profile-bottom">
            <strong>Sarah Kim</strong>
            <span>Product Marketing Lead</span>
          </div>
        </div>
        <div class="testimonial-carousel-content">
          <div class="testimonial-carousel-stars">★★★★★</div>
          <p class="testimonial-carousel-quote">“The carousel made our customer stories feel focused and easy to browse without making the page too long.”</p>
          <div class="testimonial-carousel-meta">
            <span>SaaS website</span>
            <span>Landing page</span>
            <span>Verified client</span>
          </div>
        </div>
      </article>

      <article class="testimonial-carousel-slide">
        <div class="testimonial-carousel-profile">
          <div class="testimonial-carousel-avatar">DR</div>
          <div class="testimonial-carousel-profile-bottom">
            <strong>David Ross</strong>
            <span>Agency Founder</span>
          </div>
        </div>
        <div class="testimonial-carousel-content">
          <div class="testimonial-carousel-stars">★★★★★</div>
          <p class="testimonial-carousel-quote">“The dot navigation is simple, clear, and easy for visitors to understand. It feels much cleaner than a crowded review wall.”</p>
          <div class="testimonial-carousel-meta">
            <span>Agency website</span>
            <span>Social proof</span>
            <span>Client review</span>
          </div>
        </div>
      </article>

      <article class="testimonial-carousel-slide">
        <div class="testimonial-carousel-profile">
          <div class="testimonial-carousel-avatar">MJ</div>
          <div class="testimonial-carousel-profile-bottom">
            <strong>Mia Johnson</strong>
            <span>App Designer</span>
          </div>
        </div>
        <div class="testimonial-carousel-content">
          <div class="testimonial-carousel-stars">★★★★★</div>
          <p class="testimonial-carousel-quote">“This testimonial carousel gives us a polished review section that works well on desktop and mobile.”</p>
          <div class="testimonial-carousel-meta">
            <span>App landing page</span>
            <span>Mobile-friendly</span>
            <span>UI review</span>
          </div>
        </div>
      </article>

    </div>

    <div class="testimonial-carousel-dots-nav" aria-label="Testimonial carousel navigation">
      <button class="testimonial-carousel-dot is-active" type="button" aria-label="Show testimonial 1"></button>
      <button class="testimonial-carousel-dot" type="button" aria-label="Show testimonial 2"></button>
      <button class="testimonial-carousel-dot" type="button" aria-label="Show testimonial 3"></button>
    </div>

  </div>

</section>

CSS

.testimonial-carousel-dots{
width:min(100%,980px);
}

.testimonial-carousel-dots-shell{
position:relative;
padding:34px;
border-radius:40px;
background:
linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.055));
border:1px solid rgba(255,255,255,.16);
box-shadow:0 30px 100px rgba(0,0,0,.34);
overflow:hidden;
}

.testimonial-carousel-dots-shell::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(16,185,129,.18);
pointer-events:none;
}

.testimonial-carousel-dots-shell::after{
content:"";
position:absolute;
left:-110px;
bottom:-120px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(59,130,246,.14);
pointer-events:none;
}

.testimonial-carousel-dots-header{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:start;
margin-bottom:34px;
}

.testimonial-carousel-dots-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(16,185,129,.14);
border:1px solid rgba(52,211,153,.24);
color:#a7f3d0;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.testimonial-carousel-dots-title{
margin:0;
max-width:720px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.testimonial-carousel-dots-title span{
background:linear-gradient(90deg,#34d399,#38bdf8,#a78bfa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.testimonial-carousel-dots-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
color:#e2e8f0;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.testimonial-carousel-dots-window{
position:relative;
z-index:2;
}

.testimonial-carousel-slide{
display:none;
grid-template-columns:180px minmax(0,1fr);
gap:28px;
align-items:stretch;
padding:28px;
border-radius:32px;
background:rgba(15,23,42,.80);
border:1px solid rgba(148,163,184,.20);
box-shadow:0 24px 80px rgba(0,0,0,.24);
}

.testimonial-carousel-slide.is-active{
display:grid;
}

.testimonial-carousel-profile{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:24px;
padding:22px;
border-radius:26px;
background:
linear-gradient(135deg,rgba(16,185,129,.18),rgba(59,130,246,.14));
border:1px solid rgba(255,255,255,.12);
}

.testimonial-carousel-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:72px;
height:72px;
border-radius:26px;
background:linear-gradient(135deg,#34d399,#38bdf8);
color:#020617;
font-size:22px;
font-weight:950;
box-shadow:0 18px 42px rgba(16,185,129,.18);
}

.testimonial-carousel-profile-bottom strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.testimonial-carousel-profile-bottom span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.4;
font-weight:700;
}

.testimonial-carousel-content{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:26px;
min-width:0;
}

.testimonial-carousel-stars{
color:#fbbf24;
font-size:17px;
letter-spacing:.03em;
}

.testimonial-carousel-quote{
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(26px,4vw,42px);
line-height:1.2;
font-weight:900;
letter-spacing:-.045em;
}

.testimonial-carousel-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
}

.testimonial-carousel-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(148,163,184,.16);
color:#dbeafe;
font-size:12px;
font-weight:900;
line-height:1;
}

.testimonial-carousel-dots-nav{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:24px;
}

.testimonial-carousel-dot{
width:12px;
height:12px;
border:0;
border-radius:999px;
background:rgba(255,255,255,.25);
cursor:pointer;
transition:width .22s ease,background .22s ease,transform .22s ease;
}

.testimonial-carousel-dot:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.45);
}

.testimonial-carousel-dot.is-active{
width:36px;
background:linear-gradient(90deg,#34d399,#38bdf8);
}

@media (max-width:820px){
.testimonial-carousel-dots-header{
grid-template-columns:1fr;
}

.testimonial-carousel-dots-badge{
width:max-content;
}

.testimonial-carousel-slide{
grid-template-columns:1fr;
}

.testimonial-carousel-profile{
flex-direction:row;
align-items:center;
}
}

@media (max-width:640px){
.testimonial-carousel-dots-shell{
padding:22px;
border-radius:28px;
}

.testimonial-carousel-dots-title{
font-size:34px;
}

.testimonial-carousel-slide{
padding:20px;
border-radius:24px;
}

.testimonial-carousel-profile{
align-items:flex-start;
flex-direction:column;
}

.testimonial-carousel-quote{
font-size:28px;
}
}

JavaScript

document.querySelectorAll(".testimonial-carousel-dots").forEach(function(carousel){
  const slides = carousel.querySelectorAll(".testimonial-carousel-slide");
  const dots = carousel.querySelectorAll(".testimonial-carousel-dot");

  dots.forEach(function(dot, index){
    dot.addEventListener("click", function(){
      slides.forEach(function(slide){
        slide.classList.remove("is-active");
      });

      dots.forEach(function(item){
        item.classList.remove("is-active");
      });

      slides[index].classList.add("is-active");
      dot.classList.add("is-active");
    });
  });
});

This testimonial carousel with dots is a practical option when you want interactive customer reviews without building a large slider library. The JavaScript is small, the HTML stays readable, and the dot navigation makes it clear that visitors can browse more testimonial slides.

11. Video Testimonial Layout

Video testimonial layouts are useful when a customer story should feel more personal and believable. This type of testimonial section works well for service businesses, SaaS websites, online courses, coaching websites, product landing pages, agencies, and B2B pages where a real customer story can support conversion.

The example below uses a video-style preview panel on the left and a written testimonial summary on the right. It does not require a real video file; the preview area is built as a clean CSS video placeholder with a play button, customer details, rating, and supporting results.

  • Video testimonial section with CSS-only video placeholder
  • Great for customer stories, case studies, and service websites
  • Combines visual video preview with written review content
  • Includes play button, rating, author info, and proof metrics
  • Fully responsive HTML and CSS with no JavaScript required
Video Customer Story

A more personal way to show customer trust

Use this layout when a video testimonial, customer interview, or case study should become the strongest social proof element on the page.

Customer Video 02:18
KL
Kate Lawson Founder, Studio North
★★★★★
“

The video testimonial helped visitors understand the real result faster than a normal review card.

This layout combines the emotional value of a video story with written proof points, making it useful for service pages, SaaS case studies, and high-trust offers.

2.7x More demo requests
64% More page engagement
Watch customer story

HTML

<section class="video-testimonial-layout">

  <div class="video-testimonial-header">
    <div class="video-testimonial-kicker">Video Customer Story</div>
    <h3 class="video-testimonial-title">A more personal way to show <span>customer trust</span></h3>
    <p class="video-testimonial-text">Use this layout when a video testimonial, customer interview, or case study should become the strongest social proof element on the page.</p>
  </div>

  <div class="video-testimonial-card">

    <div class="video-testimonial-media">
      <div class="video-testimonial-video-bar">
        <span class="video-testimonial-video-label">Customer Video</span>
        <span class="video-testimonial-video-time">02:18</span>
      </div>

      <div class="video-testimonial-play" aria-label="Play video testimonial"></div>

      <div class="video-testimonial-caption">
        <div class="video-testimonial-caption-author">
          <div class="video-testimonial-avatar">KL</div>
          <div>
            <strong>Kate Lawson</strong>
            <span>Founder, Studio North</span>
          </div>
        </div>
        <div class="video-testimonial-caption-rating">★★★★★</div>
      </div>
    </div>

    <div class="video-testimonial-content">
      <div>
        <div class="video-testimonial-quote-mark">“</div>
        <p class="video-testimonial-quote">The video testimonial helped visitors understand the real result faster than a normal review card.</p>
        <p class="video-testimonial-summary">This layout combines the emotional value of a video story with written proof points, making it useful for service pages, SaaS case studies, and high-trust offers.</p>
      </div>

      <div class="video-testimonial-results">
        <div class="video-testimonial-result">
          <strong>2.7x</strong>
          <span>More demo requests</span>
        </div>
        <div class="video-testimonial-result">
          <strong>64%</strong>
          <span>More page engagement</span>
        </div>
      </div>

      <a class="video-testimonial-button" href="#">Watch customer story</a>
    </div>

  </div>

</section>

CSS

.video-testimonial-layout{
width:min(100%,1080px);
}

.video-testimonial-header{
max-width:760px;
margin:0 auto 32px;
text-align:center;
}

.video-testimonial-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(239,68,68,.14);
border:1px solid rgba(248,113,113,.24);
color:#fecaca;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.video-testimonial-title{
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.video-testimonial-title span{
background:linear-gradient(90deg,#f87171,#fb923c,#60a5fa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.video-testimonial-text{
max-width:650px;
margin:0 auto;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.video-testimonial-card{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);
gap:20px;
align-items:stretch;
padding:22px;
border-radius:38px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 100px rgba(0,0,0,.34);
}

.video-testimonial-media{
position:relative;
min-height:500px;
border-radius:30px;
overflow:hidden;
background:
linear-gradient(135deg,rgba(15,23,42,.20),rgba(15,23,42,.70)),
radial-gradient(circle at 24% 18%,rgba(248,113,113,.38),transparent 34%),
radial-gradient(circle at 84% 22%,rgba(59,130,246,.35),transparent 38%),
linear-gradient(135deg,#1e293b,#020617);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 80px rgba(0,0,0,.30);
}

.video-testimonial-media::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:42px 42px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 90%);
pointer-events:none;
}

.video-testimonial-video-bar{
position:absolute;
left:22px;
right:22px;
top:22px;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}

.video-testimonial-video-label{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 11px;
border-radius:999px;
background:rgba(0,0,0,.34);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}

.video-testimonial-video-label::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#ef4444;
box-shadow:0 0 0 4px rgba(239,68,68,.18);
}

.video-testimonial-video-time{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:rgba(0,0,0,.34);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:12px;
font-weight:850;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}

.video-testimonial-play{
position:absolute;
left:50%;
top:50%;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:92px;
height:92px;
border-radius:999px;
background:rgba(255,255,255,.92);
color:#ef4444;
box-shadow:0 28px 80px rgba(0,0,0,.34);
transform:translate(-50%,-50%);
}

.video-testimonial-play::before{
content:"";
display:block;
width:0;
height:0;
margin-left:6px;
border-top:17px solid transparent;
border-bottom:17px solid transparent;
border-left:24px solid currentColor;
}

.video-testimonial-caption{
position:absolute;
left:22px;
right:22px;
bottom:22px;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px;
border-radius:24px;
background:rgba(0,0,0,.38);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}

.video-testimonial-caption-author{
display:flex;
align-items:center;
gap:13px;
}

.video-testimonial-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:17px;
background:linear-gradient(135deg,#ef4444,#f97316);
color:#ffffff;
font-size:14px;
font-weight:950;
}

.video-testimonial-caption strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.video-testimonial-caption span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.video-testimonial-caption-rating{
color:#fbbf24;
font-size:14px;
letter-spacing:.03em;
white-space:nowrap;
}

.video-testimonial-content{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:24px;
padding:30px;
border-radius:30px;
background:#ffffff;
box-shadow:0 24px 80px rgba(0,0,0,.20);
}

.video-testimonial-quote-mark{
color:#ef4444;
font-size:76px;
line-height:.72;
font-weight:950;
letter-spacing:-.08em;
}

.video-testimonial-quote{
margin:0;
color:#0f172a;
font-size:clamp(26px,4vw,42px);
line-height:1.14;
font-weight:950;
letter-spacing:-.05em;
}

.video-testimonial-summary{
margin:18px 0 0;
color:#475569;
font-size:15px;
line-height:1.75;
font-weight:600;
}

.video-testimonial-results{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.video-testimonial-result{
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.video-testimonial-result strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:25px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
}

.video-testimonial-result span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:800;
}

.video-testimonial-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:46px;
padding:0 18px;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.video-testimonial-button:hover{
background:#ef4444;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(239,68,68,.24);
}

@media (max-width:940px){
.video-testimonial-card{
grid-template-columns:1fr;
}

.video-testimonial-media{
min-height:420px;
}
}

@media (max-width:640px){
.video-testimonial-header{
text-align:left;
}

.video-testimonial-title{
font-size:34px;
}

.video-testimonial-card{
padding:16px;
border-radius:28px;
}

.video-testimonial-media{
min-height:390px;
border-radius:24px;
}

.video-testimonial-play{
width:76px;
height:76px;
}

.video-testimonial-caption{
align-items:flex-start;
flex-direction:column;
}

.video-testimonial-content{
padding:22px;
border-radius:24px;
}

.video-testimonial-results{
grid-template-columns:1fr;
}

.video-testimonial-button{
width:100%;
}
}

This video testimonial layout is useful when a written quote alone is not enough. The video-style preview creates a more human trust signal, while the written summary, rating, and result metrics keep the section informative even before someone clicks play.

12. SaaS Testimonials Section

SaaS testimonial sections usually need to do more than show praise. They should connect customer feedback with product outcomes, growth metrics, team trust, and conversion-focused social proof. This makes them useful for SaaS landing pages, pricing pages, product pages, startup websites, and software comparison pages.

The example below uses a SaaS-style dashboard layout with customer logos, usage metrics, a featured review, smaller team quotes, and a CTA area. It is intentionally different from a normal testimonial card grid because it feels like a full product trust section.

  • SaaS testimonial section with metrics and product trust signals
  • Includes customer logos, featured quote, and smaller team reviews
  • Great for software landing pages, pricing pages, and startup websites
  • Uses a dashboard-inspired layout instead of simple review cards
  • Responsive HTML and CSS with no JavaScript required
SaaS Social Proof

Customer proof for teams that need faster product growth

Use this SaaS testimonial layout when reviews should be connected with product outcomes, customer logos, and conversion-focused metrics.

North AI
FlowKit
CloudBase
Metricly
AppCore
★★★★★
Featured SaaS Review

“The platform helped our team launch campaigns faster, understand users better, and improve every signup flow with less manual work.”

AL
Andrew Lane VP of Growth
North AI
47% Increase in qualified trial signups after improving landing page trust signals.

“The testimonial section made our pricing page feel much more credible before the user clicked Start Trial.”

Lisa Chen ★★★★★

“It connects customer feedback with actual product value, which is exactly what SaaS pages need.”

Tom Becker ★★★★★
Show customer proof near your signup CTA. Start free trial

HTML

<section class="saas-testimonials-section">

  <div class="saas-testimonials-shell">

    <div class="saas-testimonials-header">
      <div>
        <div class="saas-testimonials-kicker">SaaS Social Proof</div>
        <h3 class="saas-testimonials-title">Customer proof for teams that need <span>faster product growth</span></h3>
      </div>
      <p class="saas-testimonials-intro">Use this SaaS testimonial layout when reviews should be connected with product outcomes, customer logos, and conversion-focused metrics.</p>
    </div>

    <div class="saas-logo-row">
      <div class="saas-logo-item">North AI</div>
      <div class="saas-logo-item">FlowKit</div>
      <div class="saas-logo-item">CloudBase</div>
      <div class="saas-logo-item">Metricly</div>
      <div class="saas-logo-item">AppCore</div>
    </div>

    <div class="saas-testimonials-grid">

      <article class="saas-featured-review">
        <div>
          <div class="saas-featured-top">
            <div class="saas-featured-stars">★★★★★</div>
            <span class="saas-featured-badge">Featured SaaS Review</span>
          </div>
          <p class="saas-featured-quote">“The platform helped our team launch campaigns faster, understand users better, and improve every signup flow with less manual work.”</p>
        </div>

        <div class="saas-featured-footer">
          <div class="saas-featured-author">
            <div class="saas-featured-avatar">AL</div>
            <div>
              <strong>Andrew Lane</strong>
              <span>VP of Growth</span>
            </div>
          </div>
          <div class="saas-featured-company">North AI</div>
        </div>
      </article>

      <div class="saas-side-column">

        <div class="saas-metric-card">
          <strong>47%</strong>
          <span>Increase in qualified trial signups after improving landing page trust signals.</span>
        </div>

        <article class="saas-small-review">
          <p>“The testimonial section made our pricing page feel much more credible before the user clicked Start Trial.”</p>
          <div class="saas-small-review-footer">
            <strong>Lisa Chen</strong>
            <span>★★★★★</span>
          </div>
        </article>

        <article class="saas-small-review">
          <p>“It connects customer feedback with actual product value, which is exactly what SaaS pages need.”</p>
          <div class="saas-small-review-footer">
            <strong>Tom Becker</strong>
            <span>★★★★★</span>
          </div>
        </article>

        <div class="saas-cta-card">
          <strong>Show customer proof near your signup CTA.</strong>
          <a href="#">Start free trial</a>
        </div>

      </div>

    </div>

  </div>

</section>

CSS

.saas-testimonials-section{
width:min(100%,1120px);
}

.saas-testimonials-shell{
position:relative;
padding:28px;
border-radius:40px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 90px rgba(15,23,42,.12);
overflow:hidden;
}

.saas-testimonials-shell::before{
content:"";
position:absolute;
right:-120px;
top:-130px;
width:310px;
height:310px;
border-radius:999px;
background:rgba(14,165,233,.12);
pointer-events:none;
}

.saas-testimonials-shell::after{
content:"";
position:absolute;
left:-150px;
bottom:-160px;
width:340px;
height:340px;
border-radius:999px;
background:rgba(99,102,241,.10);
pointer-events:none;
}

.saas-testimonials-header{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.34fr);
gap:26px;
align-items:end;
margin-bottom:26px;
}

.saas-testimonials-kicker{
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.saas-testimonials-title{
margin:0;
max-width:760px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.saas-testimonials-title span{
background:linear-gradient(135deg,#0284c7,#4f46e5);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.saas-testimonials-intro{
margin:0;
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.saas-logo-row{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
margin-bottom:20px;
}

.saas-logo-item{
display:flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:10px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#64748b;
font-size:13px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.saas-testimonials-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.1fr) 320px;
gap:20px;
align-items:stretch;
}

.saas-featured-review{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:480px;
padding:30px;
border-radius:34px;
background:
linear-gradient(135deg,#0f172a,#1e3a8a);
box-shadow:0 28px 80px rgba(30,58,138,.28);
overflow:hidden;
position:relative;
}

.saas-featured-review::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:230px;
height:230px;
border-radius:999px;
background:rgba(56,189,248,.22);
pointer-events:none;
}

.saas-featured-review::after{
content:"";
position:absolute;
left:-100px;
bottom:-110px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(99,102,241,.24);
pointer-events:none;
}

.saas-featured-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:50px;
}

.saas-featured-stars{
color:#fbbf24;
font-size:16px;
letter-spacing:.03em;
}

.saas-featured-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#dbeafe;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.saas-featured-quote{
position:relative;
z-index:2;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(28px,4vw,46px);
line-height:1.15;
font-weight:950;
letter-spacing:-.055em;
}

.saas-featured-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:34px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.14);
}

.saas-featured-author{
display:flex;
align-items:center;
gap:14px;
}

.saas-featured-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:19px;
background:linear-gradient(135deg,#38bdf8,#818cf8);
color:#020617;
font-size:15px;
font-weight:950;
}

.saas-featured-author strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.saas-featured-author span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.saas-featured-company{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.saas-side-column{
display:grid;
gap:16px;
}

.saas-metric-card{
padding:22px;
border-radius:28px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.saas-metric-card strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:38px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.saas-metric-card span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:800;
}

.saas-small-review{
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
}

.saas-small-review p{
margin:0 0 18px;
color:#334155;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.saas-small-review-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.saas-small-review-footer strong{
color:#0f172a;
font-size:14px;
font-weight:950;
}

.saas-small-review-footer span{
color:#f59e0b;
font-size:13px;
letter-spacing:.03em;
}

.saas-cta-card{
display:grid;
gap:12px;
padding:22px;
border-radius:28px;
background:#eef2ff;
border:1px solid rgba(79,70,229,.14);
}

.saas-cta-card strong{
color:#0f172a;
font-size:18px;
line-height:1.25;
font-weight:950;
}

.saas-cta-card a{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:42px;
padding:0 15px;
border-radius:999px;
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
}

@media (max-width:960px){
.saas-testimonials-header,
.saas-testimonials-grid{
grid-template-columns:1fr;
}

.saas-logo-row{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.saas-featured-review{
min-height:auto;
}

.saas-featured-footer{
align-items:flex-start;
flex-direction:column;
}

.saas-featured-company{
white-space:normal;
}
}

@media (max-width:640px){
.saas-testimonials-shell{
padding:18px;
border-radius:28px;
}

.saas-testimonials-title{
font-size:34px;
}

.saas-logo-row{
grid-template-columns:1fr;
}

.saas-featured-review,
.saas-metric-card,
.saas-small-review,
.saas-cta-card{
padding:22px;
border-radius:24px;
}

.saas-featured-top{
align-items:flex-start;
flex-direction:column;
margin-bottom:34px;
}

.saas-cta-card a{
width:100%;
}
}

This SaaS testimonial section is useful when the goal is not only to show reviews, but also to connect customer feedback with product growth. The logo row, featured review, metrics, smaller quotes, and CTA make it feel like a complete trust section for a modern software landing page.

13. Agency Client Testimonials

Agency client testimonials should feel more like project proof than generic reviews. Agencies, studios, freelancers, consultants, and service businesses often need testimonial sections that show client feedback, project context, results, and the type of work delivered.

The example below uses a split agency case-study layout with a project summary, client quote, service tags, result cards, and a polished client profile. It is intentionally different from a normal review grid because it connects the testimonial to a real project outcome.

  • Agency-style testimonial section with project context
  • Includes client quote, service tags, and result metrics
  • Great for web design agencies, studios, freelancers, and consultants
  • Uses a case-study layout instead of repeated review cards
  • Responsive HTML and CSS with no JavaScript required
Agency Client Result

Client feedback connected to a real project outcome

Use this layout when an agency testimonial needs project context, service tags, and measurable results instead of a generic review card.

Brand Strategy Web Design Conversion UI Landing Page
61% More quote requests
4.8 Client satisfaction score
6wk Launch timeline
★★★★★

The agency turned our confusing service page into a clear conversion path. The new testimonial section helped the whole page feel more credible.

VM
Victoria Miles Founder, Bloom Studio
Bloom Studio
Project challenge

The old website had strong visuals but weak proof near the contact form.

Design solution

Client quotes, result metrics, and service tags were added near key CTAs.

HTML

<section class="agency-client-testimonials">

  <div class="agency-client-shell">

    <div class="agency-client-left">
      <div>
        <div class="agency-client-kicker">Agency Client Result</div>
        <h3 class="agency-client-title">Client feedback connected to a <span>real project outcome</span></h3>
        <p class="agency-client-description">Use this layout when an agency testimonial needs project context, service tags, and measurable results instead of a generic review card.</p>
      </div>

      <div class="agency-client-tags">
        <span>Brand Strategy</span>
        <span>Web Design</span>
        <span>Conversion UI</span>
        <span>Landing Page</span>
      </div>

      <div class="agency-client-results">
        <div class="agency-client-result">
          <strong>61%</strong>
          <span>More quote requests</span>
        </div>
        <div class="agency-client-result">
          <strong>4.8</strong>
          <span>Client satisfaction score</span>
        </div>
        <div class="agency-client-result">
          <strong>6wk</strong>
          <span>Launch timeline</span>
        </div>
      </div>
    </div>

    <div class="agency-client-right">

      <article class="agency-client-quote-card">
        <div class="agency-client-stars">★★★★★</div>
        <p class="agency-client-quote">The agency turned our confusing service page into a clear conversion path. The new testimonial section helped the whole page feel more credible.</p>

        <div class="agency-client-author-row">
          <div class="agency-client-author">
            <div class="agency-client-avatar">VM</div>
            <div>
              <strong>Victoria Miles</strong>
              <span>Founder, Bloom Studio</span>
            </div>
          </div>
          <div class="agency-client-company">Bloom Studio</div>
        </div>
      </article>

      <div class="agency-client-mini-row">
        <div class="agency-client-mini-card">
          <strong>Project challenge</strong>
          <p>The old website had strong visuals but weak proof near the contact form.</p>
        </div>
        <div class="agency-client-mini-card">
          <strong>Design solution</strong>
          <p>Client quotes, result metrics, and service tags were added near key CTAs.</p>
        </div>
      </div>

    </div>

  </div>

</section>

CSS

.agency-client-testimonials{
width:min(100%,1120px);
}

.agency-client-shell{
position:relative;
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:22px;
padding:28px;
border-radius:40px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 90px rgba(15,23,42,.12);
overflow:hidden;
}

.agency-client-shell::before{
content:"";
position:absolute;
left:-130px;
top:-140px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(124,58,237,.10);
pointer-events:none;
}

.agency-client-shell::after{
content:"";
position:absolute;
right:-150px;
bottom:-160px;
width:360px;
height:360px;
border-radius:999px;
background:rgba(249,115,22,.10);
pointer-events:none;
}

.agency-client-left,
.agency-client-right{
position:relative;
z-index:2;
}

.agency-client-left{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:28px;
padding:26px;
border-radius:32px;
background:#0f172a;
overflow:hidden;
}

.agency-client-left::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:230px;
height:230px;
border-radius:999px;
background:rgba(124,58,237,.28);
pointer-events:none;
}

.agency-client-kicker{
position:relative;
z-index:2;
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#ddd6fe;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.agency-client-title{
position:relative;
z-index:2;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.agency-client-title span{
background:linear-gradient(90deg,#c084fc,#fb923c);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.agency-client-description{
position:relative;
z-index:2;
max-width:520px;
margin:18px 0 0;
color:#cbd5e1;
font-size:15px;
line-height:1.75;
font-weight:650;
}

.agency-client-tags{
position:relative;
z-index:2;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.agency-client-tags span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:12px;
font-weight:900;
line-height:1;
}

.agency-client-results{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.agency-client-result{
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
}

.agency-client-result strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:26px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.agency-client-result span{
display:block;
color:#cbd5e1;
font-size:12px;
line-height:1.45;
font-weight:750;
}

.agency-client-right{
display:flex;
flex-direction:column;
gap:18px;
}

.agency-client-quote-card{
position:relative;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:30px;
padding:30px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 60px rgba(15,23,42,.08);
}

.agency-client-quote-card::before{
content:"“";
position:absolute;
right:24px;
top:4px;
color:rgba(124,58,237,.10);
font-size:130px;
line-height:1;
font-weight:950;
letter-spacing:-.08em;
pointer-events:none;
}

.agency-client-stars{
position:relative;
z-index:2;
color:#f59e0b;
font-size:16px;
letter-spacing:.03em;
}

.agency-client-quote{
position:relative;
z-index:2;
margin:0;
color:#0f172a;
font-size:clamp(25px,4vw,42px);
line-height:1.18;
font-weight:950;
letter-spacing:-.05em;
}

.agency-client-author-row{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:24px;
border-top:1px solid rgba(15,23,42,.08);
}

.agency-client-author{
display:flex;
align-items:center;
gap:14px;
}

.agency-client-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:19px;
background:linear-gradient(135deg,#7c3aed,#f97316);
color:#ffffff;
font-size:15px;
font-weight:950;
box-shadow:0 16px 36px rgba(124,58,237,.22);
}

.agency-client-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.agency-client-author span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.agency-client-company{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.agency-client-mini-row{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}

.agency-client-mini-card{
padding:22px;
border-radius:28px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.agency-client-mini-card strong{
display:block;
margin-bottom:8px;
color:#0f172a;
font-size:16px;
line-height:1.25;
font-weight:950;
}

.agency-client-mini-card p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}

@media (max-width:940px){
.agency-client-shell{
grid-template-columns:1fr;
}

.agency-client-results{
grid-template-columns:1fr;
}

.agency-client-author-row{
align-items:flex-start;
flex-direction:column;
}

.agency-client-company{
white-space:normal;
}
}

@media (max-width:640px){
.agency-client-shell{
padding:18px;
border-radius:28px;
}

.agency-client-left,
.agency-client-quote-card,
.agency-client-mini-card{
padding:22px;
border-radius:24px;
}

.agency-client-title{
font-size:34px;
}

.agency-client-mini-row{
grid-template-columns:1fr;
}
}

This agency client testimonial layout is useful when a simple review card would feel too generic. By adding project context, service tags, measurable results, and a strong client quote, the section becomes closer to a compact case study that can support agency conversions.

14. eCommerce Review Cards

eCommerce review cards are designed for product pages, category pages, landing pages, and online store sections where buyers want to see product-specific feedback. Unlike general testimonials, ecommerce reviews often need ratings, verified buyer labels, product details, delivery notes, and short scannable comments.

The example below uses a product review section with a featured product card, customer review cards, star ratings, verified buyer badges, and small purchase details. It is designed for online stores that want review content to feel practical, trustworthy, and close to the buying decision.

  • eCommerce testimonial section for product reviews
  • Includes product card, star ratings, and verified buyer labels
  • Great for product pages, category pages, and online stores
  • Uses shopping-focused details instead of generic testimonials
  • Responsive HTML and CSS with no JavaScript required
Verified Product Reviews

Customer reviews that support the buying decision

★★★★★ 4.9 from 842 buyers
AR
Ava Roberts Verified buyer
★★★★★

“The product arrived quickly, matched the description, and felt better quality than expected. The reviews helped me choose with confidence.”

Verified purchase Size: Medium
JS
Jack Stone Repeat customer
★★★★★

“The review section made it easy to compare real customer experiences before adding the product to cart.”

Verified purchase Color: Green
ME
Mia Evans Verified buyer
★★★★★

“Short reviews, star ratings, and product details made the page feel much more trustworthy.”

Verified purchase Fast delivery
LN
Leo Nelson Online shopper
★★★★★

“The layout feels like a real ecommerce review section, not a generic testimonial block copied from a landing page.”

Verified purchase Recommended
CH
Clara Hill Verified buyer
★★★★★

“Seeing verified customer details and product-specific review notes made the purchase feel safer. This is exactly what a product review section should do.”

Verified purchase Helpful review
98% Recommend

HTML

<section class="ecommerce-review-cards">

  <div class="ecommerce-review-header">
    <div>
      <div class="ecommerce-review-kicker">Verified Product Reviews</div>
      <h3 class="ecommerce-review-title">Customer reviews that support the <span>buying decision</span></h3>
    </div>
    <div class="ecommerce-review-summary-pill"><span>★★★★★</span> 4.9 from 842 buyers</div>
  </div>

  <div class="ecommerce-review-layout">

    <aside class="ecommerce-product-card">
      <div class="ecommerce-product-image">
        <span class="ecommerce-product-badge">Best Seller</span>
      </div>
      <h3>Everyday Comfort Kit</h3>
      <p>A product-focused review section works best when the testimonial content stays close to the product being purchased.</p>
      <div class="ecommerce-product-rating">
        <strong>4.9</strong>
        <span>★★★★★</span>
      </div>
    </aside>

    <div class="ecommerce-review-grid">

      <article class="ecommerce-review-card">
        <div class="ecommerce-review-top">
          <div class="ecommerce-review-buyer">
            <div class="ecommerce-review-avatar">AR</div>
            <div>
              <strong>Ava Roberts</strong>
              <span>Verified buyer</span>
            </div>
          </div>
          <div class="ecommerce-review-stars">★★★★★</div>
        </div>
        <p>“The product arrived quickly, matched the description, and felt better quality than expected. The reviews helped me choose with confidence.”</p>
        <div class="ecommerce-review-footer">
          <span class="ecommerce-review-badge">Verified purchase</span>
          <span class="ecommerce-review-detail">Size: Medium</span>
        </div>
      </article>

      <article class="ecommerce-review-card">
        <div class="ecommerce-review-top">
          <div class="ecommerce-review-buyer">
            <div class="ecommerce-review-avatar">JS</div>
            <div>
              <strong>Jack Stone</strong>
              <span>Repeat customer</span>
            </div>
          </div>
          <div class="ecommerce-review-stars">★★★★★</div>
        </div>
        <p>“The review section made it easy to compare real customer experiences before adding the product to cart.”</p>
        <div class="ecommerce-review-footer">
          <span class="ecommerce-review-badge">Verified purchase</span>
          <span class="ecommerce-review-detail">Color: Green</span>
        </div>
      </article>

      <article class="ecommerce-review-card">
        <div class="ecommerce-review-top">
          <div class="ecommerce-review-buyer">
            <div class="ecommerce-review-avatar">ME</div>
            <div>
              <strong>Mia Evans</strong>
              <span>Verified buyer</span>
            </div>
          </div>
          <div class="ecommerce-review-stars">★★★★★</div>
        </div>
        <p>“Short reviews, star ratings, and product details made the page feel much more trustworthy.”</p>
        <div class="ecommerce-review-footer">
          <span class="ecommerce-review-badge">Verified purchase</span>
          <span class="ecommerce-review-detail">Fast delivery</span>
        </div>
      </article>

      <article class="ecommerce-review-card">
        <div class="ecommerce-review-top">
          <div class="ecommerce-review-buyer">
            <div class="ecommerce-review-avatar">LN</div>
            <div>
              <strong>Leo Nelson</strong>
              <span>Online shopper</span>
            </div>
          </div>
          <div class="ecommerce-review-stars">★★★★★</div>
        </div>
        <p>“The layout feels like a real ecommerce review section, not a generic testimonial block copied from a landing page.”</p>
        <div class="ecommerce-review-footer">
          <span class="ecommerce-review-badge">Verified purchase</span>
          <span class="ecommerce-review-detail">Recommended</span>
        </div>
      </article>

      <article class="ecommerce-review-card is-wide">
        <div>
          <div class="ecommerce-review-top">
            <div class="ecommerce-review-buyer">
              <div class="ecommerce-review-avatar">CH</div>
              <div>
                <strong>Clara Hill</strong>
                <span>Verified buyer</span>
              </div>
            </div>
            <div class="ecommerce-review-stars">★★★★★</div>
          </div>
          <p>“Seeing verified customer details and product-specific review notes made the purchase feel safer. This is exactly what a product review section should do.”</p>
          <div class="ecommerce-review-footer">
            <span class="ecommerce-review-badge">Verified purchase</span>
            <span class="ecommerce-review-detail">Helpful review</span>
          </div>
        </div>
        <div class="ecommerce-review-mini-score">
          <div>
            <strong>98%</strong>
            <span>Recommend</span>
          </div>
        </div>
      </article>

    </div>

  </div>

</section>

CSS

.ecommerce-review-cards{
width:min(100%,1120px);
}

.ecommerce-review-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:end;
margin-bottom:26px;
}

.ecommerce-review-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.ecommerce-review-title{
margin:0;
max-width:760px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.ecommerce-review-title span{
background:linear-gradient(135deg,#16a34a,#0284c7);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.ecommerce-review-summary-pill{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 15px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 40px rgba(15,23,42,.08);
color:#334155;
font-size:14px;
font-weight:900;
white-space:nowrap;
}

.ecommerce-review-summary-pill span{
color:#f59e0b;
letter-spacing:.03em;
}

.ecommerce-review-layout{
display:grid;
grid-template-columns:320px minmax(0,1fr);
gap:20px;
align-items:start;
}

.ecommerce-product-card{
position:sticky;
top:18px;
padding:22px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.ecommerce-product-image{
position:relative;
min-height:230px;
margin-bottom:18px;
border-radius:28px;
background:
radial-gradient(circle at 35% 20%,rgba(255,255,255,.80),transparent 28%),
linear-gradient(135deg,#dcfce7,#dbeafe);
overflow:hidden;
}

.ecommerce-product-image::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:142px;
height:142px;
border-radius:34px;
background:
linear-gradient(135deg,#ffffff,#f8fafc);
box-shadow:0 24px 60px rgba(15,23,42,.16);
transform:translate(-50%,-50%) rotate(-8deg);
}

.ecommerce-product-image::after{
content:"Product";
position:absolute;
left:50%;
top:50%;
display:inline-flex;
align-items:center;
justify-content:center;
width:96px;
height:96px;
border-radius:28px;
background:linear-gradient(135deg,#16a34a,#0284c7);
color:#ffffff;
font-size:14px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
transform:translate(-50%,-50%) rotate(-8deg);
}

.ecommerce-product-badge{
position:absolute;
left:16px;
top:16px;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#ffffff;
color:#15803d;
font-size:12px;
font-weight:900;
box-shadow:0 12px 30px rgba(15,23,42,.12);
}

.ecommerce-product-card h3{
margin:0 0 8px;
color:#0f172a;
font-size:24px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.ecommerce-product-card p{
margin:0 0 18px;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.ecommerce-product-rating{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.ecommerce-product-rating strong{
color:#0f172a;
font-size:22px;
font-weight:950;
}

.ecommerce-product-rating span{
color:#f59e0b;
font-size:14px;
letter-spacing:.03em;
}

.ecommerce-review-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}

.ecommerce-review-card{
position:relative;
display:flex;
flex-direction:column;
gap:18px;
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.ecommerce-review-card:hover{
transform:translateY(-4px);
box-shadow:0 26px 70px rgba(15,23,42,.12);
border-color:rgba(34,197,94,.26);
}

.ecommerce-review-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}

.ecommerce-review-buyer{
display:flex;
align-items:center;
gap:12px;
}

.ecommerce-review-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#16a34a,#0284c7);
color:#ffffff;
font-size:13px;
font-weight:950;
}

.ecommerce-review-buyer strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:14px;
line-height:1.2;
font-weight:950;
}

.ecommerce-review-buyer span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:750;
}

.ecommerce-review-stars{
color:#f59e0b;
font-size:13px;
letter-spacing:.03em;
white-space:nowrap;
}

.ecommerce-review-card p{
margin:0;
color:#334155;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.ecommerce-review-footer{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin-top:auto;
padding-top:16px;
border-top:1px solid rgba(15,23,42,.08);
}

.ecommerce-review-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#f0fdf4;
color:#15803d;
font-size:12px;
font-weight:900;
line-height:1;
}

.ecommerce-review-detail{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:12px;
font-weight:850;
line-height:1;
}

.ecommerce-review-card.is-wide{
grid-column:span 2;
display:grid;
grid-template-columns:minmax(0,1fr) 180px;
align-items:center;
}

.ecommerce-review-mini-score{
display:grid;
place-items:center;
min-height:150px;
border-radius:24px;
background:#f0fdf4;
border:1px solid rgba(34,197,94,.14);
text-align:center;
}

.ecommerce-review-mini-score strong{
display:block;
color:#0f172a;
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.ecommerce-review-mini-score span{
display:block;
margin-top:8px;
color:#15803d;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}

@media (max-width:960px){
.ecommerce-review-header{
grid-template-columns:1fr;
}

.ecommerce-review-summary-pill{
width:max-content;
}

.ecommerce-review-layout{
grid-template-columns:1fr;
}

.ecommerce-product-card{
position:relative;
top:auto;
}

.ecommerce-review-grid{
grid-template-columns:1fr;
}

.ecommerce-review-card.is-wide{
grid-column:auto;
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.ecommerce-review-title{
font-size:34px;
}

.ecommerce-review-summary-pill{
width:100%;
}

.ecommerce-product-card,
.ecommerce-review-card{
padding:20px;
border-radius:24px;
}

.ecommerce-review-top{
align-items:flex-start;
flex-direction:column;
}

.ecommerce-product-image{
min-height:200px;
}
}

This eCommerce review card section is best when testimonials need to support a specific product decision. Product context, verified buyer labels, ratings, and purchase details make the review content feel more practical and more relevant than a general customer quote section.

15. App Review Testimonials

App review testimonials are useful for mobile apps, SaaS apps, productivity tools, fitness apps, finance apps, learning apps, and product landing pages where user feedback should feel connected to the actual app experience. This type of testimonial section often combines app ratings, user quotes, mobile UI mockups, and store-style review signals.

The example below uses a mobile app showcase layout with a phone-style preview, app store rating summary, user review bubbles, and benefit cards. It is different from a regular testimonial grid because the testimonials are designed around the app interface and product experience.

  • App-focused testimonial section with phone mockup
  • Includes app rating, review bubbles, and product benefits
  • Great for mobile app landing pages and SaaS app websites
  • Uses product UI context instead of simple review cards
  • Responsive HTML and CSS with no JavaScript required
A

AppFlow

A simple mobile workflow app trusted by thousands of daily users.

4.9
★★★★★
Based on 18,400 app reviews
“Easy to use from the first day.”
“The dashboard finally makes sense on mobile.”
“Fast, clean, and reliable.”
App Store Reviews

User feedback designed around the mobile app experience

Use this app testimonial layout when user reviews should feel connected to ratings, app usage, mobile UI, and product benefits.

★★★★★

“The app feels simple, polished, and fast. I can understand my daily workflow without opening a desktop dashboard.”

NL
Natalie Lane Daily app user
92% of users say the app helped them complete tasks faster on mobile.
Rated highly for speed, clarity, and ease of use.
Fast onboarding

New users understand the core workflow without a long tutorial.

Clear mobile UI

The review section highlights why users enjoy the app experience.

Trusted rating

App store style ratings make the product feel safer to try.

HTML

<section class="app-review-testimonials">

  <div class="app-review-shell">

    <div class="app-review-phone-wrap">
      <div class="app-review-phone-glow"></div>

      <div class="app-review-phone">
        <div class="app-review-phone-screen">
          <div class="app-review-phone-notch"></div>

          <div class="app-review-app-icon">A</div>
          <h3 class="app-review-phone-title">AppFlow</h3>
          <p class="app-review-phone-text">A simple mobile workflow app trusted by thousands of daily users.</p>

          <div class="app-review-rating-card">
            <div class="app-review-rating-top">
              <strong>4.9</strong>
              <div class="app-review-rating-stars">★★★★★</div>
            </div>
            <span>Based on 18,400 app reviews</span>
          </div>

          <div class="app-review-phone-bubbles">
            <div class="app-review-phone-bubble">“Easy to use from the first day.”</div>
            <div class="app-review-phone-bubble">“The dashboard finally makes sense on mobile.”</div>
            <div class="app-review-phone-bubble">“Fast, clean, and reliable.”</div>
          </div>

        </div>
      </div>
    </div>

    <div class="app-review-content">

      <div class="app-review-kicker">App Store Reviews</div>
      <h3 class="app-review-title">User feedback designed around the <span>mobile app experience</span></h3>
      <p class="app-review-intro">Use this app testimonial layout when user reviews should feel connected to ratings, app usage, mobile UI, and product benefits.</p>

      <div class="app-review-main-grid">

        <article class="app-review-featured">
          <div class="app-review-featured-stars">★★★★★</div>
          <p class="app-review-featured-quote">“The app feels simple, polished, and fast. I can understand my daily workflow without opening a desktop dashboard.”</p>
          <div class="app-review-featured-author">
            <div class="app-review-avatar">NL</div>
            <div>
              <strong>Natalie Lane</strong>
              <span>Daily app user</span>
            </div>
          </div>
        </article>

        <div class="app-review-store-card">
          <div>
            <strong>92%</strong>
            <span>of users say the app helped them complete tasks faster on mobile.</span>
          </div>
          <span>Rated highly for speed, clarity, and ease of use.</span>
        </div>

      </div>

      <div class="app-review-benefits">
        <div class="app-review-benefit">
          <strong>Fast onboarding</strong>
          <p>New users understand the core workflow without a long tutorial.</p>
        </div>
        <div class="app-review-benefit">
          <strong>Clear mobile UI</strong>
          <p>The review section highlights why users enjoy the app experience.</p>
        </div>
        <div class="app-review-benefit">
          <strong>Trusted rating</strong>
          <p>App store style ratings make the product feel safer to try.</p>
        </div>
      </div>

    </div>

  </div>

</section>

CSS

.app-review-testimonials{
width:min(100%,1120px);
}

.app-review-shell{
display:grid;
grid-template-columns:340px minmax(0,1fr);
gap:28px;
align-items:center;
}

.app-review-phone-wrap{
position:relative;
display:grid;
place-items:center;
min-height:640px;
}

.app-review-phone-glow{
position:absolute;
width:330px;
height:330px;
border-radius:999px;
background:rgba(34,211,238,.18);
filter:blur(12px);
pointer-events:none;
}

.app-review-phone{
position:relative;
z-index:2;
width:292px;
min-height:590px;
padding:14px;
border-radius:44px;
background:#020617;
border:1px solid rgba(255,255,255,.18);
box-shadow:
0 30px 90px rgba(0,0,0,.38),
inset 0 0 0 6px rgba(255,255,255,.04);
}

.app-review-phone-screen{
position:relative;
min-height:560px;
padding:22px;
border-radius:34px;
background:
radial-gradient(circle at 50% 0%,rgba(34,211,238,.22),transparent 36%),
linear-gradient(135deg,#0f172a,#111827);
overflow:hidden;
}

.app-review-phone-notch{
position:absolute;
left:50%;
top:10px;
width:86px;
height:20px;
border-radius:999px;
background:#020617;
transform:translateX(-50%);
}

.app-review-app-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:58px;
height:58px;
margin-top:30px;
border-radius:20px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#020617;
font-size:22px;
font-weight:950;
box-shadow:0 18px 42px rgba(34,211,238,.20);
}

.app-review-phone-title{
margin:18px 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:27px;
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
}

.app-review-phone-text{
margin:0 0 20px;
color:#cbd5e1;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.app-review-rating-card{
padding:16px;
border-radius:24px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
}

.app-review-rating-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}

.app-review-rating-top strong{
color:#ffffff;
font-size:34px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.app-review-rating-stars{
color:#fbbf24;
font-size:14px;
letter-spacing:.03em;
}

.app-review-rating-card span{
display:block;
color:#94a3b8;
font-size:12px;
line-height:1.4;
font-weight:750;
}

.app-review-phone-bubbles{
display:grid;
gap:12px;
margin-top:18px;
}

.app-review-phone-bubble{
padding:13px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e5e7eb;
font-size:12px;
line-height:1.5;
font-weight:650;
}

.app-review-content{
min-width:0;
}

.app-review-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.13);
border:1px solid rgba(103,232,249,.24);
color:#a5f3fc;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.app-review-title{
max-width:760px;
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.app-review-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#34d399);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.app-review-intro{
max-width:680px;
margin:0 0 28px;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.app-review-main-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 230px;
gap:18px;
align-items:stretch;
margin-bottom:18px;
}

.app-review-featured{
position:relative;
padding:28px;
border-radius:32px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 24px 80px rgba(0,0,0,.25);
overflow:hidden;
}

.app-review-featured::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:200px;
height:200px;
border-radius:999px;
background:rgba(168,85,247,.20);
pointer-events:none;
}

.app-review-featured-stars{
position:relative;
z-index:2;
margin-bottom:24px;
color:#fbbf24;
font-size:16px;
letter-spacing:.03em;
}

.app-review-featured-quote{
position:relative;
z-index:2;
margin:0 0 24px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(24px,3vw,36px);
line-height:1.22;
font-weight:900;
letter-spacing:-.04em;
}

.app-review-featured-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:13px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.12);
}

.app-review-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:17px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#020617;
font-size:14px;
font-weight:950;
}

.app-review-featured-author strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:15px;
font-weight:950;
}

.app-review-featured-author span{
display:block;
color:#94a3b8;
font-size:13px;
font-weight:700;
}

.app-review-store-card{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
padding:24px;
border-radius:32px;
background:linear-gradient(135deg,#22d3ee,#34d399);
color:#020617;
box-shadow:0 24px 80px rgba(34,211,238,.18);
}

.app-review-store-card strong{
display:block;
font-size:46px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.app-review-store-card span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:850;
}

.app-review-benefits{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.app-review-benefit{
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
}

.app-review-benefit strong{
display:block;
margin-bottom:7px;
color:#ffffff;
font-size:16px;
font-weight:950;
}

.app-review-benefit p{
margin:0;
color:#cbd5e1;
font-size:13px;
line-height:1.55;
font-weight:650;
}

@media (max-width:980px){
.app-review-shell{
grid-template-columns:1fr;
}

.app-review-phone-wrap{
min-height:auto;
}

.app-review-phone{
width:min(100%,320px);
}

.app-review-main-grid{
grid-template-columns:1fr;
}

.app-review-benefits{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.app-review-title{
font-size:34px;
}

.app-review-phone{
width:100%;
border-radius:34px;
}

.app-review-phone-screen{
min-height:520px;
border-radius:26px;
}

.app-review-featured,
.app-review-store-card,
.app-review-benefit{
padding:22px;
border-radius:24px;
}
}

This app review testimonial section works best when customer feedback should support a mobile product experience. The phone mockup, app-style rating card, review bubbles, featured quote, and benefit cards make the testimonials feel connected to the actual product instead of looking like a generic review grid.

16. Social Proof Wall

Social proof walls are useful when you want to show many short testimonials, quotes, reactions, or customer comments in one high-energy section. This layout works well for launches, SaaS products, creator tools, communities, online courses, agencies, and websites that have many small pieces of positive feedback.

The example below uses a dense social proof wall with many compact quote cards, floating badges, different card sizes, and a central trust message. It is intentionally different from a traditional testimonial grid because the goal is to create volume, momentum, and the feeling that many people are talking about the product.

  • High-density social proof wall with many short quote cards
  • Great for launches, communities, SaaS products, and online courses
  • Uses varied card sizes and compact customer reactions
  • Creates a strong feeling of review volume and social momentum
  • Responsive HTML and CSS with no JavaScript required

HTML

<section class="social-proof-wall">

  <div class="social-proof-wall-header">
    <div class="social-proof-wall-kicker">Social Proof Wall</div>
    <h3 class="social-proof-wall-title">A wall of customer reactions that creates <span>instant momentum</span></h3>
    <p class="social-proof-wall-text">Use this layout when many short quotes and customer reactions are stronger than one long testimonial.</p>
  </div>

  <div class="social-proof-wall-grid">

    <article class="social-proof-card hero">
      <p>“Everywhere we placed this section, the page instantly felt more active, trusted, and alive.”</p>
      <div class="social-proof-author">
        <div class="social-proof-avatar">AM</div>
        <div>
          <strong>Aria Morgan</strong>
          <span>Launch Manager</span>
        </div>
      </div>
    </article>

    <article class="social-proof-card medium quote">
      <p>“The short reviews make the product feel popular without forcing visitors to read long testimonials.”</p>
      <div class="social-proof-author">
        <div class="social-proof-avatar">BT</div>
        <div>
          <strong>Ben Turner</strong>
          <span>SaaS Founder</span>
        </div>
      </div>
    </article>

    <div class="social-proof-badge-card">
      <strong>12k+</strong>
      <span>positive customer reactions collected across product launches.</span>
    </div>

    <article class="social-proof-card small quote">
      <p>“Simple, fast, and very easy to trust.”</p>
      <div class="social-proof-mini-rating"><em>★★★★★</em> 5.0</div>
    </article>

    <article class="social-proof-card small quote">
      <p>“This section gave our page more energy.”</p>
      <div class="social-proof-mini-rating"><em>★★★★★</em> 5.0</div>
    </article>

    <article class="social-proof-card wide quote">
      <p>“A social proof wall works because the volume of feedback tells a story before the user even reads every card.”</p>
      <div class="social-proof-author">
        <div class="social-proof-avatar">CL</div>
        <div>
          <strong>Clara Lewis</strong>
          <span>Conversion Designer</span>
        </div>
      </div>
    </article>

    <article class="social-proof-card medium quote">
      <p>“It feels like real people are actively using and recommending the product.”</p>
      <div class="social-proof-author">
        <div class="social-proof-avatar">DN</div>
        <div>
          <strong>Daniel Noor</strong>
          <span>Community Lead</span>
        </div>
      </div>
    </article>

    <article class="social-proof-card small quote">
      <p>“Great for launch pages.”</p>
      <div class="social-proof-mini-rating"><em>★★★★★</em> 5.0</div>
    </article>

    <article class="social-proof-card small quote">
      <p>“The layout feels busy in a good way.”</p>
      <div class="social-proof-mini-rating"><em>★★★★★</em> 5.0</div>
    </article>

  </div>

</section>

CSS

.social-proof-wall{
width:min(100%,1120px);
}

.social-proof-wall-header{
max-width:780px;
margin:0 auto 30px;
text-align:center;
}

.social-proof-wall-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fce7f3;
color:#be185d;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.social-proof-wall-title{
margin:0 0 14px;
color:#0f172a;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.social-proof-wall-title span{
background:linear-gradient(135deg,#db2777,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.social-proof-wall-text{
max-width:650px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.social-proof-wall-grid{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:14px;
align-items:stretch;
}

.social-proof-card{
position:relative;
min-height:150px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:18px;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.social-proof-card:hover{
transform:translateY(-4px);
box-shadow:0 26px 70px rgba(15,23,42,.12);
border-color:rgba(219,39,119,.22);
}

.social-proof-card.small{
grid-column:span 3;
}

.social-proof-card.medium{
grid-column:span 4;
}

.social-proof-card.wide{
grid-column:span 5;
}

.social-proof-card.hero{
grid-column:span 6;
min-height:260px;
padding:26px;
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.24),transparent 35%),
linear-gradient(135deg,#db2777,#2563eb);
color:#ffffff;
}

.social-proof-card.hero::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:210px;
height:210px;
border-radius:999px;
background:rgba(255,255,255,.16);
pointer-events:none;
}

.social-proof-card.quote::before{
content:"“";
position:absolute;
right:16px;
top:0;
color:rgba(219,39,119,.08);
font-size:88px;
line-height:1;
font-weight:950;
pointer-events:none;
}

.social-proof-card p{
position:relative;
z-index:2;
margin:0;
color:#334155;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.social-proof-card.hero p{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(24px,3vw,36px);
line-height:1.18;
font-weight:950;
letter-spacing:-.04em;
}

.social-proof-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:10px;
}

.social-proof-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#db2777,#2563eb);
color:#ffffff;
font-size:12px;
font-weight:950;
}

.social-proof-card.hero .social-proof-avatar{
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.20);
}

.social-proof-author strong{
display:block;
color:#0f172a;
font-size:13px;
line-height:1.2;
font-weight:950;
}

.social-proof-author span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:700;
}

.social-proof-card.hero .social-proof-author strong,
.social-proof-card.hero .social-proof-author span{
color:#ffffff;
}

.social-proof-badge-card{
grid-column:span 3;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
gap:10px;
padding:22px;
border-radius:24px;
background:#0f172a;
box-shadow:0 22px 60px rgba(15,23,42,.16);
}

.social-proof-badge-card strong{
color:#ffffff;
font-size:32px;
line-height:1;
font-weight:950;
letter-spacing:-.055em;
}

.social-proof-badge-card span{
color:#cbd5e1;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.social-proof-mini-rating{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:900;
}

.social-proof-mini-rating em{
font-style:normal;
color:#f59e0b;
letter-spacing:.03em;
}

@media (max-width:980px){
.social-proof-card.small,
.social-proof-card.medium,
.social-proof-card.wide,
.social-proof-card.hero,
.social-proof-badge-card{
grid-column:span 6;
}
}

@media (max-width:640px){
.social-proof-wall-header{
text-align:left;
}

.social-proof-wall-title{
font-size:34px;
}

.social-proof-card.small,
.social-proof-card.medium,
.social-proof-card.wide,
.social-proof-card.hero,
.social-proof-badge-card{
grid-column:span 12;
}

.social-proof-card,
.social-proof-card.hero,
.social-proof-badge-card{
padding:20px;
border-radius:22px;
min-height:auto;
}

.social-proof-card.hero p{
font-size:28px;
}
}

This social proof wall is best when the strength of the section comes from quantity and energy. Instead of making every testimonial large, it uses many short reactions, varied card sizes, rating chips, and a highlighted quote to create a strong sense of momentum and customer activity.

17. Testimonial Masonry Layout

Testimonial masonry layouts are useful when customer quotes have different lengths and should feel more natural than a strict equal-height grid. This style works well for SaaS websites, agencies, creator platforms, communities, online tools, review pages, and landing pages where social proof should feel organic and varied.

The example below uses a masonry-style testimonial section with different card heights, compact author rows, rating chips, and a highlighted review card. It is different from a normal grid because the cards are intentionally varied to create a more editorial and authentic review wall.

  • Masonry-style testimonial layout with varied card heights
  • Great for review walls, social proof sections, and community feedback
  • Uses CSS columns for a natural masonry effect
  • Includes quote cards, ratings, badges, and customer details
  • Responsive HTML and CSS with no JavaScript required
Masonry Reviews

Customer quotes with a more natural review flow

850+ short testimonials collected from product users, clients, and community members.
★★★★★
Featured

“The masonry layout made our reviews feel more human because every quote did not need to fit the same card height.”

ST
Sara Thompson Product Marketer
★★★★★
SaaS

“Short, useful, and easy to scan.”

LE
Lucas Evans Founder
★★★★★
Agency

“This section feels more flexible than a strict review grid. We were able to use short quotes, long quotes, and customer notes together without the design feeling broken.”

IR
Ivy Reed Agency Partner
★★★★★
App

“The staggered cards give the review section more life.”

MK
Mason King App Lead
★★★★★
Client

“A normal grid made our testimonials look too repetitive. This masonry version feels more like a real collection of customer feedback from different people.”

NP
Nora Patel Creative Director
★★★★★
Store

“Perfect for a review page with mixed quote lengths.”

OW
Owen White Shop Owner
★★★★★
Team

“The card variation makes the section feel less templated.”

GA
Grace Adams Team Lead

HTML

<section class="testimonial-masonry-layout">

  <div class="testimonial-masonry-header">
    <div>
      <div class="testimonial-masonry-kicker">Masonry Reviews</div>
      <h3 class="testimonial-masonry-title">Customer quotes with a more <span>natural review flow</span></h3>
    </div>
    <div class="testimonial-masonry-summary">
      <strong>850+</strong>
      <span>short testimonials collected from product users, clients, and community members.</span>
    </div>
  </div>

  <div class="testimonial-masonry-columns">

    <article class="testimonial-masonry-card featured">
      <div class="testimonial-masonry-top">
        <div class="testimonial-masonry-stars">★★★★★</div>
        <span class="testimonial-masonry-chip">Featured</span>
      </div>
      <p class="testimonial-masonry-quote">“The masonry layout made our reviews feel more human because every quote did not need to fit the same card height.”</p>
      <div class="testimonial-masonry-author">
        <div class="testimonial-masonry-avatar">ST</div>
        <div>
          <strong>Sara Thompson</strong>
          <span>Product Marketer</span>
        </div>
      </div>
    </article>

    <article class="testimonial-masonry-card">
      <div class="testimonial-masonry-top">
        <div class="testimonial-masonry-stars">★★★★★</div>
        <span class="testimonial-masonry-chip">SaaS</span>
      </div>
      <p class="testimonial-masonry-quote">“Short, useful, and easy to scan.”</p>
      <div class="testimonial-masonry-author">
        <div class="testimonial-masonry-avatar">LE</div>
        <div>
          <strong>Lucas Evans</strong>
          <span>Founder</span>
        </div>
      </div>
    </article>

    <article class="testimonial-masonry-card tall">
      <div class="testimonial-masonry-top">
        <div class="testimonial-masonry-stars">★★★★★</div>
        <span class="testimonial-masonry-chip">Agency</span>
      </div>
      <p class="testimonial-masonry-quote">“This section feels more flexible than a strict review grid. We were able to use short quotes, long quotes, and customer notes together without the design feeling broken.”</p>
      <div class="testimonial-masonry-author">
        <div class="testimonial-masonry-avatar">IR</div>
        <div>
          <strong>Ivy Reed</strong>
          <span>Agency Partner</span>
        </div>
      </div>
    </article>

    <article class="testimonial-masonry-card">
      <div class="testimonial-masonry-top">
        <div class="testimonial-masonry-stars">★★★★★</div>
        <span class="testimonial-masonry-chip">App</span>
      </div>
      <p class="testimonial-masonry-quote">“The staggered cards give the review section more life.”</p>
      <div class="testimonial-masonry-author">
        <div class="testimonial-masonry-avatar">MK</div>
        <div>
          <strong>Mason King</strong>
          <span>App Lead</span>
        </div>
      </div>
    </article>

    <article class="testimonial-masonry-card tall">
      <div class="testimonial-masonry-top">
        <div class="testimonial-masonry-stars">★★★★★</div>
        <span class="testimonial-masonry-chip">Client</span>
      </div>
      <p class="testimonial-masonry-quote">“A normal grid made our testimonials look too repetitive. This masonry version feels more like a real collection of customer feedback from different people.”</p>
      <div class="testimonial-masonry-author">
        <div class="testimonial-masonry-avatar">NP</div>
        <div>
          <strong>Nora Patel</strong>
          <span>Creative Director</span>
        </div>
      </div>
    </article>

    <article class="testimonial-masonry-card">
      <div class="testimonial-masonry-top">
        <div class="testimonial-masonry-stars">★★★★★</div>
        <span class="testimonial-masonry-chip">Store</span>
      </div>
      <p class="testimonial-masonry-quote">“Perfect for a review page with mixed quote lengths.”</p>
      <div class="testimonial-masonry-author">
        <div class="testimonial-masonry-avatar">OW</div>
        <div>
          <strong>Owen White</strong>
          <span>Shop Owner</span>
        </div>
      </div>
    </article>

    <article class="testimonial-masonry-card">
      <div class="testimonial-masonry-top">
        <div class="testimonial-masonry-stars">★★★★★</div>
        <span class="testimonial-masonry-chip">Team</span>
      </div>
      <p class="testimonial-masonry-quote">“The card variation makes the section feel less templated.”</p>
      <div class="testimonial-masonry-author">
        <div class="testimonial-masonry-avatar">GA</div>
        <div>
          <strong>Grace Adams</strong>
          <span>Team Lead</span>
        </div>
      </div>
    </article>

  </div>

</section>

CSS

.testimonial-masonry-layout{
width:min(100%,1120px);
}

.testimonial-masonry-header{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.testimonial-masonry-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.testimonial-masonry-title{
max-width:760px;
margin:0;
color:#0f172a;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.testimonial-masonry-title span{
background:linear-gradient(135deg,#0284c7,#9333ea);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.testimonial-masonry-summary{
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
}

.testimonial-masonry-summary strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:34px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.testimonial-masonry-summary span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:750;
}

.testimonial-masonry-columns{
columns:3 280px;
column-gap:16px;
}

.testimonial-masonry-card{
position:relative;
display:inline-block;
width:100%;
margin:0 0 16px;
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
break-inside:avoid;
overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.testimonial-masonry-card:hover{
transform:translateY(-4px);
box-shadow:0 26px 70px rgba(15,23,42,.12);
border-color:rgba(14,165,233,.26);
}

.testimonial-masonry-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(14,165,233,.07),transparent 42%);
pointer-events:none;
}

.testimonial-masonry-card.featured{
padding:26px;
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.24),transparent 35%),
linear-gradient(135deg,#0284c7,#7c3aed);
border-color:rgba(255,255,255,.18);
box-shadow:0 24px 80px rgba(14,165,233,.18);
}

.testimonial-masonry-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}

.testimonial-masonry-stars{
color:#f59e0b;
font-size:14px;
letter-spacing:.03em;
}

.testimonial-masonry-card.featured .testimonial-masonry-stars{
color:#fbbf24;
}

.testimonial-masonry-chip{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.testimonial-masonry-card.featured .testimonial-masonry-chip{
background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.20);
color:#ffffff;
}

.testimonial-masonry-quote{
position:relative;
z-index:2;
margin:0 0 20px;
color:#334155;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.testimonial-masonry-card.tall .testimonial-masonry-quote{
font-size:17px;
line-height:1.75;
}

.testimonial-masonry-card.featured .testimonial-masonry-quote{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:24px;
line-height:1.35;
font-weight:900;
letter-spacing:-.035em;
}

.testimonial-masonry-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:12px;
padding-top:18px;
border-top:1px solid rgba(15,23,42,.08);
}

.testimonial-masonry-card.featured .testimonial-masonry-author{
border-top-color:rgba(255,255,255,.18);
}

.testimonial-masonry-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:15px;
background:linear-gradient(135deg,#0284c7,#7c3aed);
color:#ffffff;
font-size:13px;
font-weight:950;
}

.testimonial-masonry-card.featured .testimonial-masonry-avatar{
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.20);
}

.testimonial-masonry-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:14px;
line-height:1.2;
font-weight:950;
}

.testimonial-masonry-author span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:700;
}

.testimonial-masonry-card.featured .testimonial-masonry-author strong,
.testimonial-masonry-card.featured .testimonial-masonry-author span{
color:#ffffff;
}

@media (max-width:820px){
.testimonial-masonry-header{
grid-template-columns:1fr;
}

.testimonial-masonry-summary{
max-width:360px;
}
}

@media (max-width:640px){
.testimonial-masonry-title{
font-size:34px;
}

.testimonial-masonry-columns{
columns:1;
}

.testimonial-masonry-card,
.testimonial-masonry-card.featured{
padding:20px;
border-radius:24px;
}
}

This testimonial masonry layout is best when review content has different lengths and should not be forced into identical cards. The CSS column structure creates a natural staggered layout, while the featured card gives the section a clear visual anchor.

18. Featured Testimonial Layout

Featured testimonial layouts are useful when one customer story is more important than the others. This structure works well for landing pages, B2B websites, SaaS pages, productized services, agency websites, consultant pages, and homepage sections where one strong quote should become the center of attention.

The example below uses a hero-style featured testimonial with a large quote, customer profile, result metrics, and smaller supporting quotes. It is different from a basic grid because the entire section is built around one primary customer story.

  • Featured testimonial section with one dominant customer quote
  • Includes supporting review cards and result metrics
  • Great for B2B landing pages, SaaS, agencies, and consultants
  • Uses a hero-style testimonial layout instead of equal cards
  • Responsive HTML and CSS with no JavaScript required
Featured Customer Story
★★★★★
“

The testimonial became the section that finally explained why our product was worth trusting.

ER
Elena Roberts Head of Customer Success
58% More demo requests
4.9 Average rating

HTML

<section class="featured-testimonial-layout">

  <div class="featured-testimonial-shell">

    <article class="featured-testimonial-main">

      <div>
        <div class="featured-testimonial-main-top">
          <div class="featured-testimonial-kicker">Featured Customer Story</div>
          <div class="featured-testimonial-stars">★★★★★</div>
        </div>

        <div class="featured-testimonial-quote-wrap">
          <div class="featured-testimonial-mark">“</div>
          <p class="featured-testimonial-quote">The testimonial became the section that finally explained why our product was <span>worth trusting.</span></p>
        </div>
      </div>

      <div class="featured-testimonial-main-bottom">
        <div class="featured-testimonial-author">
          <div class="featured-testimonial-avatar">ER</div>
          <div>
            <strong>Elena Roberts</strong>
            <span>Head of Customer Success</span>
          </div>
        </div>

        <div class="featured-testimonial-metric">
          <div>
            <strong>58%</strong>
            <span>More demo requests</span>
          </div>
        </div>

        <div class="featured-testimonial-metric">
          <div>
            <strong>4.9</strong>
            <span>Average rating</span>
          </div>
        </div>
      </div>

    </article>

    <aside class="featured-testimonial-side">

      <article class="featured-testimonial-side-card dark">
        <p>“The featured review made the page feel less like marketing and more like a customer story.”</p>
        <div class="featured-testimonial-side-footer">
          <strong>Mark Ellis</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <article class="featured-testimonial-side-card">
        <p>“The smaller supporting quotes help reinforce the main testimonial without distracting from it.”</p>
        <div class="featured-testimonial-side-footer">
          <strong>Nina Fox</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <div class="featured-testimonial-cta">
        <strong>Place the strongest quote near your main CTA.</strong>
        <p>A featured testimonial can support conversions when it appears before pricing, contact forms, or signup sections.</p>
        <a href="#">View case study</a>
      </div>

    </aside>

  </div>

</section>

CSS

.featured-testimonial-layout{
width:min(100%,1120px);
}

.featured-testimonial-shell{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:20px;
padding:24px;
border-radius:42px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 100px rgba(0,0,0,.34);
overflow:hidden;
}

.featured-testimonial-shell::before{
content:"";
position:absolute;
left:-120px;
top:-120px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(249,115,22,.16);
pointer-events:none;
}

.featured-testimonial-shell::after{
content:"";
position:absolute;
right:-130px;
bottom:-140px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(79,70,229,.18);
pointer-events:none;
}

.featured-testimonial-main,
.featured-testimonial-side{
position:relative;
z-index:2;
}

.featured-testimonial-main{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:600px;
padding:34px;
border-radius:34px;
background:#ffffff;
box-shadow:0 24px 80px rgba(0,0,0,.22);
overflow:hidden;
}

.featured-testimonial-main-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:44px;
}

.featured-testimonial-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.featured-testimonial-stars{
color:#f59e0b;
font-size:16px;
letter-spacing:.03em;
}

.featured-testimonial-quote-wrap{
position:relative;
}

.featured-testimonial-mark{
position:absolute;
left:-6px;
top:-64px;
color:rgba(249,115,22,.12);
font-size:150px;
line-height:1;
font-weight:950;
letter-spacing:-.08em;
pointer-events:none;
}

.featured-testimonial-quote{
position:relative;
z-index:2;
max-width:760px;
margin:0;
color:#0f172a;
font-size:clamp(34px,5vw,64px);
line-height:1.03;
font-weight:950;
letter-spacing:-.07em;
}

.featured-testimonial-quote span{
background:linear-gradient(135deg,#f97316,#4f46e5);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.featured-testimonial-main-bottom{
display:grid;
grid-template-columns:minmax(0,1fr) repeat(2,150px);
gap:16px;
align-items:stretch;
margin-top:48px;
padding-top:24px;
border-top:1px solid rgba(15,23,42,.09);
}

.featured-testimonial-author{
display:flex;
align-items:center;
gap:14px;
}

.featured-testimonial-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
border-radius:20px;
background:linear-gradient(135deg,#f97316,#4f46e5);
color:#ffffff;
font-size:16px;
font-weight:950;
box-shadow:0 16px 38px rgba(79,70,229,.22);
}

.featured-testimonial-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.featured-testimonial-author span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.featured-testimonial-metric{
display:grid;
place-items:center;
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
text-align:center;
}

.featured-testimonial-metric strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.featured-testimonial-metric span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:800;
}

.featured-testimonial-side{
display:grid;
gap:16px;
}

.featured-testimonial-side-card{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.featured-testimonial-side-card.dark{
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.16),transparent 35%),
linear-gradient(135deg,#f97316,#7c3aed);
border-color:rgba(255,255,255,.20);
}

.featured-testimonial-side-card p{
margin:0;
color:#e5e7eb;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.featured-testimonial-side-card.dark p{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:20px;
line-height:1.45;
font-weight:900;
letter-spacing:-.025em;
}

.featured-testimonial-side-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.14);
}

.featured-testimonial-side-footer strong{
color:#ffffff;
font-size:14px;
font-weight:950;
}

.featured-testimonial-side-footer span{
color:#fbbf24;
font-size:13px;
letter-spacing:.03em;
}

.featured-testimonial-cta{
display:grid;
gap:12px;
padding:24px;
border-radius:30px;
background:#ffffff;
box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.featured-testimonial-cta strong{
color:#0f172a;
font-size:19px;
line-height:1.25;
font-weight:950;
}

.featured-testimonial-cta p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.featured-testimonial-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:42px;
padding:0 15px;
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;
}

@media (max-width:980px){
.featured-testimonial-shell{
grid-template-columns:1fr;
}

.featured-testimonial-main{
min-height:auto;
}

.featured-testimonial-main-bottom{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.featured-testimonial-shell{
padding:16px;
border-radius:28px;
}

.featured-testimonial-main,
.featured-testimonial-side-card,
.featured-testimonial-cta{
padding:22px;
border-radius:24px;
}

.featured-testimonial-main-top{
align-items:flex-start;
flex-direction:column;
margin-bottom:34px;
}

.featured-testimonial-quote{
font-size:38px;
}

.featured-testimonial-mark{
font-size:110px;
top:-46px;
}

.featured-testimonial-cta a{
width:100%;
}
}

This featured testimonial layout is useful when one quote is strong enough to become a major page section. The large quote creates emotional focus, the side cards add supporting proof, and the metric blocks connect the customer story to measurable business results.

19. Founder Quote Testimonial

Founder quote testimonials are useful when the review should feel strategic, personal, and leadership-focused. This type of testimonial section works well for startups, B2B websites, SaaS landing pages, agency websites, investor pages, product launch pages, and service businesses where a founder, CEO, or senior client quote can add authority.

The example below uses a founder-style quote section with a large leadership quote, company context, a signature-style author area, and supporting proof cards. It is different from a normal customer review because the layout feels more like a strategic endorsement from a decision-maker.

  • Founder-style testimonial section with leadership focus
  • Great for B2B, SaaS, startups, agencies, and service brands
  • Uses a large CEO quote with supporting company proof
  • Designed like an editorial endorsement instead of a review grid
  • Responsive HTML and CSS with no JavaScript required
Founder Endorsement
B2B SaaS Client
“

The strongest value was not just the design. It was how clearly the page started to communicate trust.

Jonathan Reed
Founder & CEO, AtlasFlow
5.0 ★★★★★

HTML

<section class="founder-quote-testimonial">

  <div class="founder-quote-shell">

    <article class="founder-quote-main">

      <div>
        <div class="founder-quote-top">
          <div class="founder-quote-kicker">Founder Endorsement</div>
          <div class="founder-quote-company">B2B SaaS Client</div>
        </div>

        <div class="founder-quote-mark">“</div>

        <p class="founder-quote-text">The strongest value was not just the design. It was how clearly the page started to <span>communicate trust.</span></p>
      </div>

      <div class="founder-quote-bottom">
        <div class="founder-signature">
          <div class="founder-signature-name">Jonathan Reed</div>
          <div class="founder-signature-role">Founder &amp; CEO, AtlasFlow</div>
        </div>

        <div class="founder-quote-rating">
          <strong>5.0</strong>
          <span>★★★★★</span>
        </div>
      </div>

    </article>

    <aside class="founder-quote-profile">

      <div class="founder-profile-card">
        <div class="founder-profile-visual"></div>
        <h3>Leadership feedback with strategic context.</h3>
        <p>Use this founder quote layout when a testimonial should feel like a high-level endorsement from a decision-maker.</p>
        <a class="founder-quote-button" href="#">Read full story</a>
      </div>

      <div class="founder-proof-grid">
        <div class="founder-proof-card">
          <strong>39%</strong>
          <span>More qualified demo requests after trust sections were improved.</span>
        </div>
        <div class="founder-proof-card">
          <strong>8wk</strong>
          <span>From strategy to launch for the updated website experience.</span>
        </div>
      </div>

    </aside>

  </div>

</section>

CSS

.founder-quote-testimonial{
width:min(100%,1120px);
}

.founder-quote-shell{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:24px;
padding:28px;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 100px rgba(15,23,42,.12);
overflow:hidden;
}

.founder-quote-shell::before{
content:"";
position:absolute;
left:-130px;
top:-140px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(15,23,42,.06);
pointer-events:none;
}

.founder-quote-shell::after{
content:"";
position:absolute;
right:-140px;
bottom:-150px;
width:350px;
height:350px;
border-radius:999px;
background:rgba(245,158,11,.13);
pointer-events:none;
}

.founder-quote-main,
.founder-quote-profile{
position:relative;
z-index:2;
}

.founder-quote-main{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:34px;
border-radius:34px;
background:#0f172a;
overflow:hidden;
}

.founder-quote-main::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(245,158,11,.18);
pointer-events:none;
}

.founder-quote-main::after{
content:"";
position:absolute;
left:-100px;
bottom:-120px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(59,130,246,.14);
pointer-events:none;
}

.founder-quote-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:48px;
}

.founder-quote-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#fde68a;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.founder-quote-company{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.founder-quote-mark{
position:relative;
z-index:2;
margin-bottom:18px;
color:#f59e0b;
font-size:96px;
line-height:.72;
font-weight:950;
letter-spacing:-.08em;
}

.founder-quote-text{
position:relative;
z-index:2;
max-width:760px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,64px);
line-height:1.03;
font-weight:950;
letter-spacing:-.07em;
}

.founder-quote-text span{
background:linear-gradient(90deg,#fbbf24,#60a5fa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.founder-quote-bottom{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) 160px;
gap:18px;
align-items:end;
margin-top:48px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.14);
}

.founder-signature{
display:grid;
gap:8px;
}

.founder-signature-name{
color:#ffffff;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
}

.founder-signature-role{
color:#cbd5e1;
font-size:14px;
line-height:1.45;
font-weight:700;
}

.founder-quote-rating{
display:grid;
place-items:center;
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
text-align:center;
}

.founder-quote-rating strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.founder-quote-rating span{
display:block;
color:#fbbf24;
font-size:13px;
letter-spacing:.03em;
}

.founder-quote-profile{
display:flex;
flex-direction:column;
gap:18px;
}

.founder-profile-card{
display:grid;
gap:20px;
padding:26px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 70px rgba(15,23,42,.10);
}

.founder-profile-visual{
position:relative;
min-height:210px;
border-radius:28px;
background:
radial-gradient(circle at 35% 18%,rgba(255,255,255,.86),transparent 26%),
linear-gradient(135deg,#111827,#f59e0b);
overflow:hidden;
}

.founder-profile-visual::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:112px;
height:112px;
border-radius:38px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
transform:translate(-50%,-50%) rotate(-8deg);
box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.founder-profile-visual::after{
content:"CEO";
position:absolute;
left:50%;
top:50%;
display:inline-flex;
align-items:center;
justify-content:center;
width:74px;
height:74px;
border-radius:26px;
background:#ffffff;
color:#0f172a;
font-size:18px;
font-weight:950;
letter-spacing:.03em;
transform:translate(-50%,-50%) rotate(-8deg);
}

.founder-profile-card h3{
margin:0;
color:#0f172a;
font-size:25px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.founder-profile-card p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.founder-proof-grid{
display:grid;
gap:14px;
}

.founder-proof-card{
padding:22px;
border-radius:28px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.founder-proof-card strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:30px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.founder-proof-card span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:800;
}

.founder-quote-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.founder-quote-button:hover{
background:#f59e0b;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(245,158,11,.24);
}

@media (max-width:980px){
.founder-quote-shell{
grid-template-columns:1fr;
}

.founder-quote-main{
min-height:auto;
}

.founder-quote-bottom{
grid-template-columns:1fr;
}

.founder-quote-company{
white-space:normal;
}
}

@media (max-width:640px){
.founder-quote-shell{
padding:18px;
border-radius:28px;
}

.founder-quote-main,
.founder-profile-card,
.founder-proof-card{
padding:22px;
border-radius:24px;
}

.founder-quote-top{
align-items:flex-start;
flex-direction:column;
margin-bottom:34px;
}

.founder-quote-text{
font-size:38px;
}

.founder-quote-mark{
font-size:76px;
}

.founder-profile-visual{
min-height:180px;
}

.founder-quote-button{
width:100%;
}
}

This founder quote testimonial section is best when the feedback should feel like a strategic endorsement rather than a normal customer review. The large quote, CEO-style profile card, rating, and proof metrics make the section suitable for B2B websites, SaaS brands, and high-value service pages.

20. Customer Story Cards

Customer story cards are useful when testimonials need more context than a short quote. Instead of showing only a sentence of praise, this layout presents each testimonial as a mini case study with a customer challenge, solution, outcome, quote, and result metric.

The example below uses story-based testimonial cards with structured sections for the problem, the result, and the customer quote. This makes it different from a standard review card because each card feels like a compact success story instead of a simple testimonial.

  • Story-based testimonial cards with case study structure
  • Includes challenge, solution, result, and customer quote
  • Great for SaaS, B2B, agencies, consultants, and service pages
  • More detailed than a normal testimonial grid
  • Responsive HTML and CSS with no JavaScript required
Customer Stories

Testimonials structured like mini case studies

More context than a quote.

Use customer story cards when each testimonial should explain the challenge, the solution, and the final outcome.

SaaS

FlowDesk

Challenge

Visitors understood the product, but the page lacked real trust signals near the signup CTA.

Solution

Customer quotes and result cards were added to the conversion section.

“The story format helped visitors understand not only that customers liked us, but why they trusted the product.”

MR
Maya Ross Growth Lead
+34%
Agency

North Studio

Challenge

The service page had strong visuals but did not explain the client experience clearly enough.

Solution

Each testimonial became a compact story with context, quote, and result.

“This format turned our testimonials into proof. The cards feel like small case studies instead of generic reviews.”

AH
Adam Hill Agency Founder
+52%
B2B

MetricBase

Challenge

The team needed stronger social proof before asking enterprise users to book a demo.

Solution

Customer story cards were placed between features and pricing.

“The layout gave us enough detail to make the testimonial believable without writing a full case study.”

LC
Lena Carter Product Lead
+29%

HTML

<section class="customer-story-cards">

  <div class="customer-story-header">
    <div>
      <div class="customer-story-kicker">Customer Stories</div>
      <h3 class="customer-story-title">Testimonials structured like <span>mini case studies</span></h3>
    </div>
    <div class="customer-story-intro-card">
      <strong>More context than a quote.</strong>
      <p>Use customer story cards when each testimonial should explain the challenge, the solution, and the final outcome.</p>
    </div>
  </div>

  <div class="customer-story-grid">

    <article class="customer-story-card">
      <div class="customer-story-card-top">
        <div class="customer-story-logo">01</div>
        <span class="customer-story-type">SaaS</span>
      </div>
      <h3 class="customer-story-company">FlowDesk</h3>

      <div class="customer-story-blocks">
        <div class="customer-story-block">
          <span>Challenge</span>
          <p>Visitors understood the product, but the page lacked real trust signals near the signup CTA.</p>
        </div>
        <div class="customer-story-block">
          <span>Solution</span>
          <p>Customer quotes and result cards were added to the conversion section.</p>
        </div>
      </div>

      <p class="customer-story-quote">“The story format helped visitors understand not only that customers liked us, but why they trusted the product.”</p>

      <div class="customer-story-footer">
        <div class="customer-story-author">
          <div class="customer-story-avatar">MR</div>
          <div>
            <strong>Maya Ross</strong>
            <span>Growth Lead</span>
          </div>
        </div>
        <div class="customer-story-result">+34%</div>
      </div>
    </article>

    <article class="customer-story-card featured">
      <div class="customer-story-card-top">
        <div class="customer-story-logo">02</div>
        <span class="customer-story-type">Agency</span>
      </div>
      <h3 class="customer-story-company">North Studio</h3>

      <div class="customer-story-blocks">
        <div class="customer-story-block">
          <span>Challenge</span>
          <p>The service page had strong visuals but did not explain the client experience clearly enough.</p>
        </div>
        <div class="customer-story-block">
          <span>Solution</span>
          <p>Each testimonial became a compact story with context, quote, and result.</p>
        </div>
      </div>

      <p class="customer-story-quote">“This format turned our testimonials into proof. The cards feel like small case studies instead of generic reviews.”</p>

      <div class="customer-story-footer">
        <div class="customer-story-author">
          <div class="customer-story-avatar">AH</div>
          <div>
            <strong>Adam Hill</strong>
            <span>Agency Founder</span>
          </div>
        </div>
        <div class="customer-story-result">+52%</div>
      </div>
    </article>

    <article class="customer-story-card">
      <div class="customer-story-card-top">
        <div class="customer-story-logo">03</div>
        <span class="customer-story-type">B2B</span>
      </div>
      <h3 class="customer-story-company">MetricBase</h3>

      <div class="customer-story-blocks">
        <div class="customer-story-block">
          <span>Challenge</span>
          <p>The team needed stronger social proof before asking enterprise users to book a demo.</p>
        </div>
        <div class="customer-story-block">
          <span>Solution</span>
          <p>Customer story cards were placed between features and pricing.</p>
        </div>
      </div>

      <p class="customer-story-quote">“The layout gave us enough detail to make the testimonial believable without writing a full case study.”</p>

      <div class="customer-story-footer">
        <div class="customer-story-author">
          <div class="customer-story-avatar">LC</div>
          <div>
            <strong>Lena Carter</strong>
            <span>Product Lead</span>
          </div>
        </div>
        <div class="customer-story-result">+29%</div>
      </div>
    </article>

  </div>

</section>

CSS

.customer-story-cards{
width:min(100%,1120px);
}

.customer-story-header{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.customer-story-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#4338ca;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.customer-story-title{
max-width:760px;
margin:0;
color:#0f172a;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.customer-story-title span{
background:linear-gradient(135deg,#4f46e5,#0f766e);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.customer-story-intro-card{
padding:20px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
}

.customer-story-intro-card strong{
display:block;
margin-bottom:7px;
color:#0f172a;
font-size:19px;
line-height:1.25;
font-weight:950;
}

.customer-story-intro-card p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.customer-story-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.customer-story-card{
position:relative;
display:flex;
flex-direction:column;
min-height:540px;
padding:22px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 70px rgba(15,23,42,.10);
overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.customer-story-card:hover{
transform:translateY(-5px);
box-shadow:0 30px 86px rgba(15,23,42,.14);
border-color:rgba(79,70,229,.24);
}

.customer-story-card::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 22% 0%,rgba(79,70,229,.10),transparent 34%),
linear-gradient(135deg,rgba(20,184,166,.06),transparent 44%);
pointer-events:none;
}

.customer-story-card.featured{
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.24),transparent 35%),
linear-gradient(135deg,#4f46e5,#0f766e);
border-color:rgba(255,255,255,.18);
}

.customer-story-card-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.customer-story-logo{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#0f172a;
font-size:15px;
font-weight:950;
}

.customer-story-card.featured .customer-story-logo{
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.22);
color:#ffffff;
}

.customer-story-type{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:12px;
font-weight:900;
line-height:1;
text-transform:uppercase;
letter-spacing:.05em;
}

.customer-story-card.featured .customer-story-type{
background:rgba(255,255,255,.16);
color:#ffffff;
}

.customer-story-company{
position:relative;
z-index:2;
margin:0 0 16px;
color:#0f172a;
font-size:24px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
}

.customer-story-card.featured .customer-story-company{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.customer-story-blocks{
position:relative;
z-index:2;
display:grid;
gap:12px;
margin-bottom:22px;
}

.customer-story-block{
padding:15px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.customer-story-card.featured .customer-story-block{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.16);
}

.customer-story-block span{
display:block;
margin-bottom:6px;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}

.customer-story-card.featured .customer-story-block span{
color:#dbeafe;
}

.customer-story-block p{
margin:0;
color:#334155;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.customer-story-card.featured .customer-story-block p{
color:#ffffff;
}

.customer-story-quote{
position:relative;
z-index:2;
margin:0 0 22px;
color:#334155;
font-size:15px;
line-height:1.7;
font-weight:700;
}

.customer-story-card.featured .customer-story-quote{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.customer-story-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:auto;
padding-top:18px;
border-top:1px solid rgba(15,23,42,.08);
}

.customer-story-card.featured .customer-story-footer{
border-top-color:rgba(255,255,255,.18);
}

.customer-story-author{
display:flex;
align-items:center;
gap:12px;
}

.customer-story-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:15px;
background:linear-gradient(135deg,#4f46e5,#0f766e);
color:#ffffff;
font-size:13px;
font-weight:950;
}

.customer-story-card.featured .customer-story-avatar{
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
}

.customer-story-author strong{
display:block;
margin-bottom:2px;
color:#0f172a;
font-size:14px;
font-weight:950;
}

.customer-story-author span{
display:block;
color:#64748b;
font-size:12px;
font-weight:700;
}

.customer-story-card.featured .customer-story-author strong,
.customer-story-card.featured .customer-story-author span{
color:#ffffff;
}

.customer-story-result{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 11px;
border-radius:999px;
background:#f0fdfa;
color:#0f766e;
font-size:13px;
font-weight:950;
white-space:nowrap;
}

.customer-story-card.featured .customer-story-result{
background:rgba(255,255,255,.16);
color:#ffffff;
}

@media (max-width:980px){
.customer-story-header{
grid-template-columns:1fr;
}

.customer-story-intro-card{
max-width:520px;
}

.customer-story-grid{
grid-template-columns:1fr;
max-width:620px;
margin:0 auto;
}

.customer-story-card{
min-height:auto;
}
}

@media (max-width:640px){
.customer-story-title{
font-size:34px;
}

.customer-story-card,
.customer-story-card.featured{
padding:20px;
border-radius:24px;
}

.customer-story-footer{
align-items:flex-start;
flex-direction:column;
}

.customer-story-result{
white-space:normal;
}
}

This customer story card layout is useful when a testimonial should explain more than customer satisfaction. By including the challenge, solution, quote, and result, each card becomes a compact case study that can support higher-trust service pages and B2B landing pages.

21. Testimonial with Trust Badges

Testimonials with trust badges are useful when reviews should be supported by extra credibility signals. This layout works well for pricing pages, checkout sections, service pages, SaaS landing pages, ecommerce pages, and lead generation websites where visitors may need reassurance before taking action.

The example below combines customer testimonials with trust badges, guarantee notes, security-style labels, rating summaries, and a CTA. It is different from a normal review section because the testimonial content is paired with conversion-focused reassurance elements.

  • Testimonials combined with trust badges and reassurance labels
  • Great near pricing tables, checkout areas, signup CTAs, and quote forms
  • Includes customer quotes, rating summary, badges, and guarantee text
  • Designed for conversion-focused social proof
  • Responsive HTML and CSS with no JavaScript required
Trust + Testimonials

Customer proof with the reassurance visitors need before they act

4.9 ★★★★★

Average rating from verified customer feedback.

✓
Verified customers

Reviews are shown with customer context and trust-supporting labels.

★
High satisfaction

Ratings and quotes help reduce doubt before visitors click the CTA.

★★★★★
Verified review

“The trust badges around the testimonial made the offer feel much safer before we asked visitors to sign up.”

PR
Paula Reed Conversion Manager
Start safely

“This section works perfectly near pricing because it answers trust questions before the CTA.”

Chris Morgan ★★★★★

“The badges make the testimonials feel more credible without making the page crowded.”

Ella Wright ★★★★★
30-day confidence guarantee

Add reassurance beside testimonials when visitors need one final reason to continue.

HTML

<section class="trust-badge-testimonials">

  <div class="trust-badge-shell">

    <div class="trust-badge-header">
      <div>
        <div class="trust-badge-kicker">Trust + Testimonials</div>
        <h3 class="trust-badge-title">Customer proof with the reassurance visitors need <span>before they act</span></h3>
      </div>

      <div class="trust-rating-panel">
        <strong>4.9</strong>
        <span>★★★★★</span>
        <p>Average rating from verified customer feedback.</p>
      </div>
    </div>

    <div class="trust-badge-layout">

      <div class="trust-badge-column">
        <div class="trust-badge-card">
          <div class="trust-badge-card-icon">✓</div>
          <strong>Verified customers</strong>
          <p>Reviews are shown with customer context and trust-supporting labels.</p>
        </div>
        <div class="trust-badge-card">
          <div class="trust-badge-card-icon">★</div>
          <strong>High satisfaction</strong>
          <p>Ratings and quotes help reduce doubt before visitors click the CTA.</p>
        </div>
      </div>

      <article class="trust-featured-testimonial">
        <div>
          <div class="trust-featured-top">
            <div class="trust-featured-stars">★★★★★</div>
            <span class="trust-featured-label">Verified review</span>
          </div>

          <p class="trust-featured-quote">“The trust badges around the testimonial made the offer feel <span>much safer</span> before we asked visitors to sign up.”</p>
        </div>

        <div class="trust-featured-footer">
          <div class="trust-featured-author">
            <div class="trust-featured-avatar">PR</div>
            <div>
              <strong>Paula Reed</strong>
              <span>Conversion Manager</span>
            </div>
          </div>
          <a class="trust-featured-cta" href="#">Start safely</a>
        </div>
      </article>

      <div class="trust-badge-column">
        <article class="trust-mini-review">
          <p>“This section works perfectly near pricing because it answers trust questions before the CTA.”</p>
          <div class="trust-mini-review-footer">
            <strong>Chris Morgan</strong>
            <span>★★★★★</span>
          </div>
        </article>

        <article class="trust-mini-review">
          <p>“The badges make the testimonials feel more credible without making the page crowded.”</p>
          <div class="trust-mini-review-footer">
            <strong>Ella Wright</strong>
            <span>★★★★★</span>
          </div>
        </article>

        <div class="trust-guarantee-box">
          <strong>30-day confidence guarantee</strong>
          <p>Add reassurance beside testimonials when visitors need one final reason to continue.</p>
        </div>
      </div>

    </div>

  </div>

</section>

CSS

.trust-badge-testimonials{
width:min(100%,1120px);
}

.trust-badge-shell{
position:relative;
padding:28px;
border-radius:42px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 100px rgba(0,0,0,.34);
overflow:hidden;
}

.trust-badge-shell::before{
content:"";
position:absolute;
right:-120px;
top:-120px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(34,197,94,.18);
pointer-events:none;
}

.trust-badge-shell::after{
content:"";
position:absolute;
left:-140px;
bottom:-150px;
width:340px;
height:340px;
border-radius:999px;
background:rgba(59,130,246,.16);
pointer-events:none;
}

.trust-badge-header{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:26px;
align-items:end;
margin-bottom:24px;
}

.trust-badge-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(74,222,128,.24);
color:#bbf7d0;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.trust-badge-title{
max-width:780px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.trust-badge-title span{
background:linear-gradient(90deg,#4ade80,#38bdf8,#fb923c);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.trust-rating-panel{
padding:20px;
border-radius:28px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}

.trust-rating-panel strong{
display:block;
margin-bottom:7px;
color:#ffffff;
font-size:40px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.trust-rating-panel span{
display:block;
color:#fbbf24;
font-size:15px;
letter-spacing:.03em;
}

.trust-rating-panel p{
margin:8px 0 0;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.trust-badge-layout{
position:relative;
z-index:2;
display:grid;
grid-template-columns:260px minmax(0,1fr) 260px;
gap:18px;
align-items:stretch;
}

.trust-badge-column{
display:grid;
gap:14px;
}

.trust-badge-card{
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 20px 60px rgba(0,0,0,.20);
}

.trust-badge-card-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
margin-bottom:14px;
border-radius:16px;
background:linear-gradient(135deg,#4ade80,#38bdf8);
color:#020617;
font-size:18px;
font-weight:950;
}

.trust-badge-card strong{
display:block;
margin-bottom:7px;
color:#ffffff;
font-size:16px;
line-height:1.25;
font-weight:950;
}

.trust-badge-card p{
margin:0;
color:#cbd5e1;
font-size:13px;
line-height:1.6;
font-weight:650;
}

.trust-featured-testimonial{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:500px;
padding:30px;
border-radius:34px;
background:#ffffff;
box-shadow:0 26px 90px rgba(0,0,0,.24);
overflow:hidden;
}

.trust-featured-testimonial::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:230px;
height:230px;
border-radius:999px;
background:rgba(34,197,94,.12);
pointer-events:none;
}

.trust-featured-testimonial::after{
content:"";
position:absolute;
left:-110px;
bottom:-120px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(59,130,246,.10);
pointer-events:none;
}

.trust-featured-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:44px;
}

.trust-featured-stars{
color:#f59e0b;
font-size:17px;
letter-spacing:.03em;
}

.trust-featured-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:#f0fdf4;
color:#15803d;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.trust-featured-quote{
position:relative;
z-index:2;
margin:0;
color:#0f172a;
font-size:clamp(28px,4vw,48px);
line-height:1.14;
font-weight:950;
letter-spacing:-.055em;
}

.trust-featured-quote span{
background:linear-gradient(135deg,#16a34a,#0284c7);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.trust-featured-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:36px;
padding-top:24px;
border-top:1px solid rgba(15,23,42,.08);
}

.trust-featured-author{
display:flex;
align-items:center;
gap:14px;
}

.trust-featured-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:19px;
background:linear-gradient(135deg,#16a34a,#0284c7);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.trust-featured-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.trust-featured-author span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.trust-featured-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 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;
}

.trust-mini-review{
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}

.trust-mini-review p{
margin:0 0 16px;
color:#e5e7eb;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.trust-mini-review-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.trust-mini-review-footer strong{
color:#ffffff;
font-size:14px;
font-weight:950;
}

.trust-mini-review-footer span{
color:#fbbf24;
font-size:13px;
letter-spacing:.03em;
}

.trust-guarantee-box{
padding:22px;
border-radius:28px;
background:linear-gradient(135deg,#4ade80,#38bdf8);
color:#020617;
box-shadow:0 24px 80px rgba(34,197,94,.18);
}

.trust-guarantee-box strong{
display:block;
margin-bottom:8px;
font-size:20px;
line-height:1.15;
font-weight:950;
letter-spacing:-.03em;
}

.trust-guarantee-box p{
margin:0;
font-size:13px;
line-height:1.55;
font-weight:800;
}

@media (max-width:1020px){
.trust-badge-header,
.trust-badge-layout{
grid-template-columns:1fr;
}

.trust-rating-panel{
max-width:380px;
}

.trust-featured-testimonial{
min-height:auto;
}
}

@media (max-width:640px){
.trust-badge-shell{
padding:18px;
border-radius:28px;
}

.trust-badge-title{
font-size:34px;
}

.trust-badge-card,
.trust-featured-testimonial,
.trust-mini-review,
.trust-guarantee-box{
padding:20px;
border-radius:24px;
}

.trust-featured-top,
.trust-featured-footer{
align-items:flex-start;
flex-direction:column;
}

.trust-featured-cta{
width:100%;
}
}

This testimonial with trust badges works best when social proof needs to reduce hesitation near an important conversion action. Customer quotes build emotional trust, while badges, rating summaries, guarantee notes, and reassurance cards help visitors feel safer before clicking a pricing, signup, checkout, or contact button.

22. Testimonial Timeline

Testimonial timelines are useful when customer feedback should show progress over time. Instead of placing all reviews into equal cards, this layout presents testimonials as a journey: before the product, during the experience, and after the result.

The example below uses a vertical timeline with customer quotes, result labels, date markers, and a final outcome card. It works well for SaaS onboarding pages, service businesses, agencies, coaching websites, B2B case studies, and product pages where the customer journey matters.

  • Timeline-style testimonial section with customer journey flow
  • Great for case studies, service pages, onboarding pages, and B2B websites
  • Shows how customer feedback changes from problem to result
  • Uses timeline markers, quote cards, and result labels
  • Responsive HTML and CSS with no JavaScript required
Customer Journey

Testimonials that show the path from problem to result

Use this timeline testimonial layout when feedback should explain a customer journey instead of showing isolated review cards.

★★★★★
Before

“Before using the service, our landing page looked professional, but visitors were not sure why they should trust us.”

LM
Laura Miles Marketing Director
01
The challenge Strong offer, weak trust signals, and low form engagement.
★★★★★
During

“Adding customer quotes near the main CTA helped the page explain the offer in a more believable way.”

CN
Chris Nolan Product Lead
02
The improvement Testimonials were placed beside product benefits and pricing blocks.
★★★★★
After

“The final page felt clearer, safer, and much more convincing. Visitors started reaching out with better-quality questions.”

OP
Olivia Parker Founder
03
The outcome More qualified leads and stronger trust before conversion.

One customer journey. Three trust-building moments.

A testimonial timeline helps visitors understand not just what customers say, but how the product or service helped over time.

46% More leads

HTML

<section class="testimonial-timeline">

  <div class="testimonial-timeline-header">
    <div class="testimonial-timeline-kicker">Customer Journey</div>
    <h3 class="testimonial-timeline-title">Testimonials that show the path from <span>problem to result</span></h3>
    <p class="testimonial-timeline-text">Use this timeline testimonial layout when feedback should explain a customer journey instead of showing isolated review cards.</p>
  </div>

  <div class="testimonial-timeline-layout">

    <div class="testimonial-timeline-item">
      <div class="testimonial-timeline-card">
        <div class="testimonial-timeline-card-top">
          <div class="testimonial-timeline-stars">★★★★★</div>
          <span class="testimonial-timeline-label">Before</span>
        </div>
        <p class="testimonial-timeline-quote">“Before using the service, our landing page looked professional, but visitors were not sure why they should trust us.”</p>
        <div class="testimonial-timeline-author">
          <div class="testimonial-timeline-avatar">LM</div>
          <div>
            <strong>Laura Miles</strong>
            <span>Marketing Director</span>
          </div>
        </div>
      </div>

      <div class="testimonial-timeline-dot"><span>01</span></div>

      <div class="testimonial-timeline-stage">
        <strong>The challenge</strong>
        <span>Strong offer, weak trust signals, and low form engagement.</span>
      </div>
    </div>

    <div class="testimonial-timeline-item">
      <div class="testimonial-timeline-card">
        <div class="testimonial-timeline-card-top">
          <div class="testimonial-timeline-stars">★★★★★</div>
          <span class="testimonial-timeline-label">During</span>
        </div>
        <p class="testimonial-timeline-quote">“Adding customer quotes near the main CTA helped the page explain the offer in a more believable way.”</p>
        <div class="testimonial-timeline-author">
          <div class="testimonial-timeline-avatar">CN</div>
          <div>
            <strong>Chris Nolan</strong>
            <span>Product Lead</span>
          </div>
        </div>
      </div>

      <div class="testimonial-timeline-dot"><span>02</span></div>

      <div class="testimonial-timeline-stage">
        <strong>The improvement</strong>
        <span>Testimonials were placed beside product benefits and pricing blocks.</span>
      </div>
    </div>

    <div class="testimonial-timeline-item">
      <div class="testimonial-timeline-card">
        <div class="testimonial-timeline-card-top">
          <div class="testimonial-timeline-stars">★★★★★</div>
          <span class="testimonial-timeline-label">After</span>
        </div>
        <p class="testimonial-timeline-quote">“The final page felt clearer, safer, and much more convincing. Visitors started reaching out with better-quality questions.”</p>
        <div class="testimonial-timeline-author">
          <div class="testimonial-timeline-avatar">OP</div>
          <div>
            <strong>Olivia Parker</strong>
            <span>Founder</span>
          </div>
        </div>
      </div>

      <div class="testimonial-timeline-dot"><span>03</span></div>

      <div class="testimonial-timeline-stage">
        <strong>The outcome</strong>
        <span>More qualified leads and stronger trust before conversion.</span>
      </div>
    </div>

    <div class="testimonial-timeline-result">
      <div>
        <h3>One customer journey. Three trust-building moments.</h3>
        <p>A testimonial timeline helps visitors understand not just what customers say, but how the product or service helped over time.</p>
      </div>
      <div class="testimonial-timeline-result-score">
        <div>
          <strong>46%</strong>
          <span>More leads</span>
        </div>
      </div>
    </div>

  </div>

</section>

CSS

.testimonial-timeline{
width:min(100%,1080px);
}

.testimonial-timeline-header{
max-width:780px;
margin:0 auto 38px;
text-align:center;
}

.testimonial-timeline-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.testimonial-timeline-title{
margin:0 0 14px;
color:#0f172a;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.testimonial-timeline-title span{
background:linear-gradient(135deg,#f97316,#4f46e5);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.testimonial-timeline-text{
max-width:650px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.testimonial-timeline-layout{
position:relative;
display:grid;
gap:22px;
}

.testimonial-timeline-layout::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:3px;
border-radius:999px;
background:linear-gradient(to bottom,#f97316,#4f46e5);
transform:translateX(-50%);
}

.testimonial-timeline-item{
position:relative;
display:grid;
grid-template-columns:1fr 72px 1fr;
gap:18px;
align-items:center;
}

.testimonial-timeline-item:nth-child(even) .testimonial-timeline-card{
grid-column:3;
}

.testimonial-timeline-item:nth-child(even) .testimonial-timeline-stage{
grid-column:1;
grid-row:1;
text-align:right;
}

.testimonial-timeline-dot{
position:relative;
z-index:3;
grid-column:2;
display:grid;
place-items:center;
width:72px;
height:72px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.12);
}

.testimonial-timeline-dot span{
display:grid;
place-items:center;
width:48px;
height:48px;
border-radius:999px;
background:linear-gradient(135deg,#f97316,#4f46e5);
color:#ffffff;
font-size:14px;
font-weight:950;
}

.testimonial-timeline-stage{
position:relative;
z-index:2;
}

.testimonial-timeline-stage strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
}

.testimonial-timeline-stage span{
display:block;
color:#64748b;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.testimonial-timeline-card{
position:relative;
z-index:2;
grid-column:1;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 70px rgba(15,23,42,.10);
overflow:hidden;
}

.testimonial-timeline-card::before{
content:"“";
position:absolute;
right:18px;
top:0;
color:rgba(249,115,22,.10);
font-size:98px;
line-height:1;
font-weight:950;
pointer-events:none;
}

.testimonial-timeline-card-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
}

.testimonial-timeline-stars{
color:#f59e0b;
font-size:14px;
letter-spacing:.03em;
}

.testimonial-timeline-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
color:#475569;
font-size:12px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}

.testimonial-timeline-quote{
position:relative;
z-index:2;
margin:0 0 22px;
color:#334155;
font-size:16px;
line-height:1.75;
font-weight:650;
}

.testimonial-timeline-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:12px;
padding-top:18px;
border-top:1px solid rgba(15,23,42,.08);
}

.testimonial-timeline-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#f97316,#4f46e5);
color:#ffffff;
font-size:13px;
font-weight:950;
}

.testimonial-timeline-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:14px;
line-height:1.2;
font-weight:950;
}

.testimonial-timeline-author span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:700;
}

.testimonial-timeline-result{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
margin-top:10px;
padding:26px;
border-radius:34px;
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.24),transparent 35%),
linear-gradient(135deg,#0f172a,#4f46e5);
box-shadow:0 26px 90px rgba(79,70,229,.24);
}

.testimonial-timeline-result h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:30px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.testimonial-timeline-result p{
margin:0;
color:#cbd5e1;
font-size:15px;
line-height:1.65;
font-weight:650;
}

.testimonial-timeline-result-score{
display:grid;
place-items:center;
min-width:130px;
min-height:130px;
border-radius:30px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);
text-align:center;
}

.testimonial-timeline-result-score strong{
display:block;
color:#ffffff;
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.testimonial-timeline-result-score span{
display:block;
margin-top:7px;
color:#fed7aa;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}

@media (max-width:860px){
.testimonial-timeline-layout::before{
left:36px;
}

.testimonial-timeline-item{
grid-template-columns:72px minmax(0,1fr);
align-items:start;
}

.testimonial-timeline-dot{
grid-column:1;
grid-row:1;
}

.testimonial-timeline-card,
.testimonial-timeline-item:nth-child(even) .testimonial-timeline-card{
grid-column:2;
}

.testimonial-timeline-stage,
.testimonial-timeline-item:nth-child(even) .testimonial-timeline-stage{
grid-column:2;
grid-row:auto;
text-align:left;
}

.testimonial-timeline-result{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.testimonial-timeline-header{
text-align:left;
}

.testimonial-timeline-title{
font-size:34px;
}

.testimonial-timeline-layout::before{
left:28px;
}

.testimonial-timeline-item{
grid-template-columns:56px minmax(0,1fr);
gap:12px;
}

.testimonial-timeline-dot{
width:56px;
height:56px;
}

.testimonial-timeline-dot span{
width:38px;
height:38px;
font-size:12px;
}

.testimonial-timeline-card,
.testimonial-timeline-result{
padding:20px;
border-radius:24px;
}

.testimonial-timeline-card-top{
align-items:flex-start;
flex-direction:column;
}
}

This testimonial timeline is useful when social proof should explain a transformation over time. The timeline structure helps visitors understand the customer problem, the improvement process, and the final result instead of reading unrelated quotes.

23. Before and After Testimonial

Before and after testimonials are powerful when a customer story is connected to a clear transformation. This layout is useful for agencies, consultants, SaaS products, coaching websites, fitness brands, service businesses, redesign projects, and landing pages where the result is more important than the review itself.

The example below uses a before-and-after comparison layout with two result panels, a central customer quote, metrics, and a customer profile. It is different from normal testimonial cards because the testimonial is presented as proof of transformation.

  • Before-and-after testimonial layout with transformation focus
  • Great for redesigns, SaaS improvements, agencies, coaching, and service pages
  • Includes before state, after state, quote, metrics, and customer profile
  • Designed around outcome and contrast instead of simple reviews
  • Responsive HTML and CSS with no JavaScript required
Before and After

A testimonial built around a clear customer transformation

Use this layout when the most important proof is the difference between where the customer started and where they ended up.

Before

Visitors liked the design, but did not take action.

The page looked polished, but the offer did not feel trustworthy enough near the signup and contact points.

  • Weak proof near CTA
  • Low form completion
  • Unclear customer value
After

Customer proof made the page feel safer and clearer.

Testimonials, outcome metrics, and customer context helped visitors understand the value before converting.

  • Stronger social proof
  • Higher-quality leads
  • Clearer buying confidence
★★★★★

“The redesign did not just look better. It helped visitors understand why they should trust us enough to act.”

RH
Rachel Hayes Founder, BrightOps
48% More leads
2.4x More CTA clicks
31% Lower bounce rate

HTML

<section class="before-after-testimonial">

  <div class="before-after-header">
    <div class="before-after-kicker">Before and After</div>
    <h3 class="before-after-title">A testimonial built around a clear <span>customer transformation</span></h3>
    <p class="before-after-text">Use this layout when the most important proof is the difference between where the customer started and where they ended up.</p>
  </div>

  <div class="before-after-shell">

    <div class="before-after-comparison">

      <div class="before-after-panel before">
        <div class="before-after-panel-label">Before</div>
        <h3>Visitors liked the design, but did not take action.</h3>
        <p>The page looked polished, but the offer did not feel trustworthy enough near the signup and contact points.</p>
        <ul class="before-after-panel-list">
          <li>Weak proof near CTA</li>
          <li>Low form completion</li>
          <li>Unclear customer value</li>
        </ul>
      </div>

      <div class="before-after-panel after">
        <div class="before-after-panel-label">After</div>
        <h3>Customer proof made the page feel safer and clearer.</h3>
        <p>Testimonials, outcome metrics, and customer context helped visitors understand the value before converting.</p>
        <ul class="before-after-panel-list">
          <li>Stronger social proof</li>
          <li>Higher-quality leads</li>
          <li>Clearer buying confidence</li>
        </ul>
      </div>

    </div>

    <div class="before-after-quote-card">

      <div class="before-after-quote-content">
        <div class="before-after-stars">★★★★★</div>
        <p class="before-after-quote">“The redesign did not just look better. It helped visitors understand why they should <span>trust us enough to act.</span>”</p>
      </div>

      <div class="before-after-profile">
        <div class="before-after-author">
          <div class="before-after-avatar">RH</div>
          <div>
            <strong>Rachel Hayes</strong>
            <span>Founder, BrightOps</span>
          </div>
        </div>

        <div class="before-after-metrics">
          <div class="before-after-metric">
            <strong>48%</strong>
            <span>More leads</span>
          </div>
          <div class="before-after-metric">
            <strong>2.4x</strong>
            <span>More CTA clicks</span>
          </div>
          <div class="before-after-metric">
            <strong>31%</strong>
            <span>Lower bounce rate</span>
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

CSS

.before-after-testimonial{
width:min(100%,1120px);
}

.before-after-header{
max-width:800px;
margin:0 auto 34px;
text-align:center;
}

.before-after-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(74,222,128,.24);
color:#bbf7d0;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.before-after-title{
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.before-after-title span{
background:linear-gradient(90deg,#f87171,#4ade80,#60a5fa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.before-after-text{
max-width:660px;
margin:0 auto;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.before-after-shell{
position:relative;
padding:24px;
border-radius:42px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 100px rgba(0,0,0,.34);
overflow:hidden;
}

.before-after-shell::before{
content:"";
position:absolute;
left:-120px;
top:-120px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(239,68,68,.14);
pointer-events:none;
}

.before-after-shell::after{
content:"";
position:absolute;
right:-130px;
bottom:-140px;
width:340px;
height:340px;
border-radius:999px;
background:rgba(34,197,94,.16);
pointer-events:none;
}

.before-after-comparison{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:18px;
}

.before-after-panel{
position:relative;
min-height:300px;
padding:24px;
border-radius:32px;
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.before-after-panel.before{
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.13),transparent 35%),
linear-gradient(135deg,#450a0a,#7f1d1d);
}

.before-after-panel.after{
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.13),transparent 35%),
linear-gradient(135deg,#052e16,#166534);
}

.before-after-panel-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:24px;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.before-after-panel h3{
margin:0 0 12px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:32px;
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
}

.before-after-panel p{
max-width:440px;
margin:0;
color:#e5e7eb;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.before-after-panel-list{
display:grid;
gap:10px;
margin-top:24px;
padding:0;
list-style:none;
}

.before-after-panel-list li{
display:flex;
align-items:center;
gap:10px;
margin:0;
color:#ffffff;
font-size:13px;
line-height:1.4;
font-weight:800;
}

.before-after-panel-list li::before{
content:"";
display:inline-flex;
width:9px;
height:9px;
border-radius:999px;
background:currentColor;
opacity:.82;
}

.before-after-quote-card{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:18px;
align-items:stretch;
padding:30px;
border-radius:34px;
background:#ffffff;
box-shadow:0 26px 90px rgba(0,0,0,.24);
overflow:hidden;
}

.before-after-quote-card::before{
content:"“";
position:absolute;
right:24px;
top:2px;
color:rgba(34,197,94,.10);
font-size:140px;
line-height:1;
font-weight:950;
pointer-events:none;
}

.before-after-quote-content{
position:relative;
z-index:2;
}

.before-after-stars{
margin-bottom:20px;
color:#f59e0b;
font-size:16px;
letter-spacing:.03em;
}

.before-after-quote{
margin:0;
color:#0f172a;
font-size:clamp(28px,4vw,48px);
line-height:1.14;
font-weight:950;
letter-spacing:-.055em;
}

.before-after-quote span{
background:linear-gradient(135deg,#dc2626,#16a34a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.before-after-profile{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
padding:22px;
border-radius:28px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.before-after-author{
display:flex;
align-items:center;
gap:13px;
}

.before-after-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#dc2626,#16a34a);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.before-after-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.before-after-author span{
display:block;
color:#64748b;
font-size:13px;
font-weight:700;
}

.before-after-metrics{
display:grid;
gap:10px;
}

.before-after-metric{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:13px;
border-radius:18px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
}

.before-after-metric strong{
color:#0f172a;
font-size:22px;
font-weight:950;
letter-spacing:-.04em;
}

.before-after-metric span{
color:#64748b;
font-size:12px;
font-weight:800;
text-align:right;
}

@media (max-width:940px){
.before-after-comparison,
.before-after-quote-card{
grid-template-columns:1fr;
}

.before-after-profile{
gap:24px;
}
}

@media (max-width:640px){
.before-after-header{
text-align:left;
}

.before-after-title{
font-size:34px;
}

.before-after-shell{
padding:16px;
border-radius:28px;
}

.before-after-panel,
.before-after-quote-card,
.before-after-profile{
padding:20px;
border-radius:24px;
}

.before-after-panel{
min-height:auto;
}

.before-after-panel h3{
font-size:28px;
}

.before-after-quote{
font-size:30px;
}
}

This before and after testimonial layout is best when the customer result is the main selling point. The visual contrast between the before state and after state makes the testimonial easier to understand, while the customer quote and metrics turn the transformation into stronger conversion-focused proof.

24. Service Business Testimonials

Service business testimonials are useful when trust depends on reliability, communication, quality of work, and customer confidence. This layout works well for local service companies, consultants, contractors, home services, repair businesses, agencies, and professional service websites.

The example below uses a service-focused testimonial layout with a customer quote, service checklist, result metrics, and review cards. It is different from app, SaaS, or ecommerce testimonials because it focuses on trust, process, and the feeling that the customer was taken care of.

  • Service business testimonial section for local and professional services
  • Includes customer quote, service checklist, result metrics, and reviews
  • Great for contractors, consultants, agencies, repair services, and local businesses
  • Focused on reliability, communication, and completed work
  • Responsive HTML and CSS with no JavaScript required
★★★★★

“From the first call to the final result, the whole process felt clear, professional, and easy to trust.”

HM
Helen Morris Home service customer
Verified service review
96% Customers recommend the service
24h Average response time
320+ Completed projects

“The team explained every step and delivered exactly what was promised.”

Robert King ★★★★★

“This review section feels right for service companies because it focuses on trust and experience.”

Amelia Grant ★★★★★

HTML

<section class="service-business-testimonials">

  <div class="service-business-shell">

    <aside class="service-business-sidebar">
      <div>
        <div class="service-business-kicker">Service Reviews</div>
        <h3 class="service-business-title">Trust signals for <span>real service decisions</span></h3>
        <p class="service-business-text">Use this layout when visitors need to trust your communication, quality, timeline, and customer experience before requesting a quote.</p>
      </div>

      <ul class="service-business-checklist">
        <li>Clear communication</li>
        <li>Reliable timeline</li>
        <li>Professional result</li>
        <li>Helpful support</li>
      </ul>

      <div class="service-business-rating-box">
        <strong>4.9</strong>
        <span>★★★★★</span>
        <p>Average rating from completed service projects.</p>
      </div>
    </aside>

    <div class="service-business-main">

      <article class="service-business-featured">
        <div class="service-business-stars">★★★★★</div>
        <p class="service-business-quote">“From the first call to the final result, the whole process felt <span>clear, professional, and easy to trust.</span>”</p>

        <div class="service-business-author-row">
          <div class="service-business-author">
            <div class="service-business-avatar">HM</div>
            <div>
              <strong>Helen Morris</strong>
              <span>Home service customer</span>
            </div>
          </div>
          <div class="service-business-badge">Verified service review</div>
        </div>
      </article>

      <div class="service-business-proof-grid">
        <div class="service-business-proof">
          <strong>96%</strong>
          <span>Customers recommend the service</span>
        </div>
        <div class="service-business-proof">
          <strong>24h</strong>
          <span>Average response time</span>
        </div>
        <div class="service-business-proof">
          <strong>320+</strong>
          <span>Completed projects</span>
        </div>
      </div>

      <div class="service-business-review-row">
        <article class="service-business-small-review">
          <p>“The team explained every step and delivered exactly what was promised.”</p>
          <div class="service-business-small-footer">
            <strong>Robert King</strong>
            <span>★★★★★</span>
          </div>
        </article>

        <article class="service-business-small-review">
          <p>“This review section feels right for service companies because it focuses on trust and experience.”</p>
          <div class="service-business-small-footer">
            <strong>Amelia Grant</strong>
            <span>★★★★★</span>
          </div>
        </article>
      </div>

    </div>

  </div>

</section>

CSS

.service-business-testimonials{
width:min(100%,1120px);
}

.service-business-shell{
position:relative;
display:grid;
grid-template-columns:360px minmax(0,1fr);
gap:22px;
padding:28px;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 100px rgba(15,23,42,.12);
overflow:hidden;
}

.service-business-shell::before{
content:"";
position:absolute;
left:-120px;
top:-130px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(14,165,233,.10);
pointer-events:none;
}

.service-business-shell::after{
content:"";
position:absolute;
right:-140px;
bottom:-150px;
width:340px;
height:340px;
border-radius:999px;
background:rgba(34,197,94,.10);
pointer-events:none;
}

.service-business-sidebar,
.service-business-main{
position:relative;
z-index:2;
}

.service-business-sidebar{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:26px;
padding:26px;
border-radius:34px;
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.16),transparent 35%),
linear-gradient(135deg,#0f172a,#075985);
color:#ffffff;
overflow:hidden;
}

.service-business-sidebar::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:210px;
height:210px;
border-radius:999px;
background:rgba(34,197,94,.20);
pointer-events:none;
}

.service-business-kicker{
position:relative;
z-index:2;
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#bae6fd;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.service-business-title{
position:relative;
z-index:2;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.service-business-title span{
background:linear-gradient(90deg,#38bdf8,#4ade80);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.service-business-text{
position:relative;
z-index:2;
margin:18px 0 0;
color:#cbd5e1;
font-size:15px;
line-height:1.75;
font-weight:650;
}

.service-business-checklist{
position:relative;
z-index:2;
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.service-business-checklist li{
display:flex;
align-items:center;
gap:10px;
margin:0;
color:#ffffff;
font-size:14px;
line-height:1.4;
font-weight:800;
}

.service-business-checklist li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:999px;
background:#4ade80;
color:#052e16;
font-size:12px;
font-weight:950;
flex:0 0 auto;
}

.service-business-rating-box{
position:relative;
z-index:2;
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}

.service-business-rating-box strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.service-business-rating-box span{
display:block;
color:#fbbf24;
font-size:15px;
letter-spacing:.03em;
}

.service-business-rating-box p{
margin:8px 0 0;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.service-business-main{
display:grid;
gap:18px;
}

.service-business-featured{
position:relative;
padding:30px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 70px rgba(15,23,42,.10);
overflow:hidden;
}

.service-business-featured::before{
content:"“";
position:absolute;
right:22px;
top:0;
color:rgba(14,165,233,.10);
font-size:130px;
line-height:1;
font-weight:950;
pointer-events:none;
}

.service-business-stars{
position:relative;
z-index:2;
margin-bottom:20px;
color:#f59e0b;
font-size:16px;
letter-spacing:.03em;
}

.service-business-quote{
position:relative;
z-index:2;
margin:0;
color:#0f172a;
font-size:clamp(27px,4vw,46px);
line-height:1.15;
font-weight:950;
letter-spacing:-.055em;
}

.service-business-quote span{
background:linear-gradient(135deg,#0284c7,#16a34a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.service-business-author-row{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:30px;
padding-top:22px;
border-top:1px solid rgba(15,23,42,.08);
}

.service-business-author{
display:flex;
align-items:center;
gap:13px;
}

.service-business-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#0284c7,#16a34a);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.service-business-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.service-business-author span{
display:block;
color:#64748b;
font-size:13px;
font-weight:700;
}

.service-business-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:#f0fdf4;
color:#15803d;
font-size:13px;
font-weight:950;
white-space:nowrap;
}

.service-business-proof-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.service-business-proof{
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.service-business-proof strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.service-business-proof span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:800;
}

.service-business-review-row{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.service-business-small-review{
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
}

.service-business-small-review p{
margin:0 0 16px;
color:#334155;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.service-business-small-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding-top:16px;
border-top:1px solid rgba(15,23,42,.08);
}

.service-business-small-footer strong{
color:#0f172a;
font-size:14px;
font-weight:950;
}

.service-business-small-footer span{
color:#f59e0b;
font-size:13px;
letter-spacing:.03em;
}

@media (max-width:980px){
.service-business-shell{
grid-template-columns:1fr;
}

.service-business-proof-grid,
.service-business-review-row{
grid-template-columns:1fr;
}

.service-business-author-row{
align-items:flex-start;
flex-direction:column;
}

.service-business-badge{
white-space:normal;
}
}

@media (max-width:640px){
.service-business-shell{
padding:18px;
border-radius:28px;
}

.service-business-sidebar,
.service-business-featured,
.service-business-small-review{
padding:22px;
border-radius:24px;
}

.service-business-title{
font-size:34px;
}

.service-business-quote{
font-size:30px;
}
}

This service business testimonial layout is best when trust depends on professionalism, response time, communication, and the quality of completed work. The checklist, rating box, customer quote, and proof metrics help visitors feel safer before requesting a quote or booking a service.

25. Minimal Quote Strip

Minimal quote strips are useful when you want to add social proof without building a large testimonial section. This style works well between landing page sections, above pricing tables, near CTAs, inside blog pages, on service pages, or anywhere a short customer quote can support the next action.

The example below uses a slim horizontal testimonial strip with a quote, author details, rating, and small trust metric. It is intentionally different from large card-based examples because it is compact, editorial, and easy to place between other website sections.

  • Compact testimonial strip for landing pages and content sections
  • Great between CTAs, pricing blocks, feature sections, and blog content
  • Uses one short quote, author details, rating, and metric
  • Clean minimal design with strong whitespace
  • Responsive HTML and CSS with no JavaScript required
Compact Social Proof

A short testimonial strip for sections that need quick trust.

“

The quote strip gave the page just enough proof before the next call-to-action.

EW
Emma Wilson Conversion Designer
★★★★★
37% More CTA clicks

Use a minimal quote strip when a full testimonial section would be too heavy, but the page still needs one clear trust signal before the next action.

HTML

<section class="minimal-quote-strip">

  <div class="minimal-quote-strip-header">
    <div class="minimal-quote-strip-kicker">Compact Social Proof</div>
    <h3 class="minimal-quote-strip-title">A short testimonial strip for sections that need quick trust.</h3>
  </div>

  <div class="minimal-quote-strip-box">

    <div class="minimal-quote-mark">“</div>

    <div class="minimal-quote-content">
      <p class="minimal-quote-text">The quote strip gave the page just enough proof before the next call-to-action.</p>

      <div class="minimal-quote-meta">
        <div class="minimal-quote-author">
          <div class="minimal-quote-avatar">EW</div>
          <div>
            <strong>Emma Wilson</strong>
            <span>Conversion Designer</span>
          </div>
        </div>
        <div class="minimal-quote-stars">★★★★★</div>
      </div>
    </div>

    <div class="minimal-quote-stat">
      <div>
        <strong>37%</strong>
        <span>More CTA clicks</span>
      </div>
    </div>

  </div>

  <p class="minimal-quote-strip-note">Use a minimal quote strip when a full testimonial section would be too heavy, but the page still needs one clear trust signal before the next action.</p>

</section>

CSS

.minimal-quote-strip{
width:min(100%,1060px);
}

.minimal-quote-strip-header{
max-width:720px;
margin:0 0 28px;
}

.minimal-quote-strip-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#f1f5f9;
color:#475569;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.minimal-quote-strip-title{
margin:0;
color:#0f172a;
font-size:clamp(32px,5vw,54px);
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
}

.minimal-quote-strip-box{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:24px;
align-items:center;
padding:28px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.10);
overflow:hidden;
}

.minimal-quote-strip-box::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:7px;
background:linear-gradient(to bottom,#0f172a,#64748b);
}

.minimal-quote-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:70px;
height:70px;
border-radius:24px;
background:#0f172a;
color:#ffffff;
font-size:46px;
line-height:1;
font-weight:950;
}

.minimal-quote-content{
min-width:0;
}

.minimal-quote-text{
margin:0;
color:#0f172a;
font-size:clamp(22px,3vw,34px);
line-height:1.25;
font-weight:900;
letter-spacing:-.04em;
}

.minimal-quote-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
margin-top:16px;
}

.minimal-quote-author{
display:flex;
align-items:center;
gap:10px;
}

.minimal-quote-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:14px;
background:#e2e8f0;
color:#0f172a;
font-size:12px;
font-weight:950;
}

.minimal-quote-author strong{
display:block;
color:#0f172a;
font-size:14px;
line-height:1.2;
font-weight:950;
}

.minimal-quote-author span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:700;
}

.minimal-quote-stars{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#fffbeb;
color:#f59e0b;
font-size:13px;
font-weight:900;
letter-spacing:.03em;
}

.minimal-quote-stat{
display:grid;
place-items:center;
min-width:150px;
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
text-align:center;
}

.minimal-quote-stat strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:30px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.minimal-quote-stat span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:800;
}

.minimal-quote-strip-note{
max-width:740px;
margin:20px 0 0;
color:#64748b;
font-size:15px;
line-height:1.75;
font-weight:600;
}

@media (max-width:820px){
.minimal-quote-strip-box{
grid-template-columns:1fr;
}

.minimal-quote-mark{
width:60px;
height:60px;
font-size:38px;
}

.minimal-quote-stat{
width:100%;
}
}

@media (max-width:640px){
.minimal-quote-strip-title{
font-size:34px;
}

.minimal-quote-strip-box{
padding:22px;
border-radius:24px;
}

.minimal-quote-text{
font-size:24px;
}
}

This minimal quote strip is best when you need a small social proof element that does not interrupt the page flow. It can sit between sections, support a CTA, or add quick customer credibility without taking up as much space as a full testimonial block.

26. Dark Mode Testimonials

Dark mode testimonials are useful for modern websites that already use dark UI, gradient sections, product dashboards, SaaS visuals, AI tools, developer products, apps, and futuristic landing pages. A dark testimonial section can make customer feedback feel premium, focused, and visually strong.

The example below uses a dark testimonial layout with glowing background shapes, high-contrast quote cards, customer avatars, rating labels, and a featured review panel. It is different from a simple dark card grid because the layout uses hierarchy, contrast, and depth to make one review stand out while supporting it with smaller quotes.

  • Dark mode testimonial section with premium visual depth
  • Great for SaaS, AI tools, apps, dashboards, and developer products
  • Includes featured quote, smaller review cards, ratings, and author details
  • Uses dark UI, gradients, glow effects, and strong typography
  • Responsive HTML and CSS with no JavaScript required
Dark UI Reviews

Premium social proof for modern dark websites

4.9 ★★★★★

Average customer rating from product and service feedback.

★★★★★
Featured Review

“The dark testimonial section made the page feel more premium, focused, and trustworthy without losing readability.”

AS
Anna Stone Product Design Lead
Used on 12 landing pages

“The contrast is strong, the quotes are readable, and the section fits perfectly into our dark SaaS design.”

David Park ★★★★★

“It feels much more intentional than placing light review cards on a dark background.”

Mia Carter ★★★★★
68% More visitors reached the pricing CTA after social proof was moved higher on the page.

HTML

<section class="dark-mode-testimonials">

  <div class="dark-mode-testimonials-header">
    <div>
      <div class="dark-mode-testimonials-kicker">Dark UI Reviews</div>
      <h3 class="dark-mode-testimonials-title">Premium social proof for <span>modern dark websites</span></h3>
    </div>

    <div class="dark-mode-testimonials-score">
      <strong>4.9</strong>
      <span>★★★★★</span>
      <p>Average customer rating from product and service feedback.</p>
    </div>
  </div>

  <div class="dark-mode-testimonials-grid">

    <article class="dark-mode-featured-card">
      <div>
        <div class="dark-mode-featured-top">
          <div class="dark-mode-stars">★★★★★</div>
          <span class="dark-mode-featured-label">Featured Review</span>
        </div>

        <p class="dark-mode-featured-quote">“The dark testimonial section made the page feel more <span>premium, focused, and trustworthy</span> without losing readability.”</p>
      </div>

      <div class="dark-mode-featured-footer">
        <div class="dark-mode-author">
          <div class="dark-mode-avatar">AS</div>
          <div>
            <strong>Anna Stone</strong>
            <span>Product Design Lead</span>
          </div>
        </div>
        <div class="dark-mode-result-pill">Used on 12 landing pages</div>
      </div>
    </article>

    <div class="dark-mode-side-list">

      <article class="dark-mode-mini-card">
        <p>“The contrast is strong, the quotes are readable, and the section fits perfectly into our dark SaaS design.”</p>
        <div class="dark-mode-mini-footer">
          <strong>David Park</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <article class="dark-mode-mini-card">
        <p>“It feels much more intentional than placing light review cards on a dark background.”</p>
        <div class="dark-mode-mini-footer">
          <strong>Mia Carter</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <div class="dark-mode-stats-card">
        <strong>68%</strong>
        <span>More visitors reached the pricing CTA after social proof was moved higher on the page.</span>
      </div>

    </div>

  </div>

</section>

CSS

.dark-mode-testimonials{
width:min(100%,1120px);
}

.dark-mode-testimonials-header{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:26px;
align-items:end;
margin-bottom:28px;
}

.dark-mode-testimonials-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(99,102,241,.16);
border:1px solid rgba(129,140,248,.24);
color:#c7d2fe;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.dark-mode-testimonials-title{
max-width:780px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.dark-mode-testimonials-title span{
background:linear-gradient(90deg,#818cf8,#38bdf8,#f472b6);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.dark-mode-testimonials-score{
padding:20px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.dark-mode-testimonials-score strong{
display:block;
margin-bottom:7px;
color:#ffffff;
font-size:40px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.dark-mode-testimonials-score span{
display:block;
color:#fbbf24;
font-size:15px;
letter-spacing:.03em;
}

.dark-mode-testimonials-score p{
margin:8px 0 0;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.dark-mode-testimonials-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:18px;
align-items:stretch;
}

.dark-mode-featured-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:32px;
border-radius:36px;
background:
radial-gradient(circle at 18% 0%,rgba(255,255,255,.16),transparent 36%),
linear-gradient(135deg,#111827,#312e81);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 100px rgba(0,0,0,.34);
overflow:hidden;
}

.dark-mode-featured-card::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:250px;
height:250px;
border-radius:999px;
background:rgba(56,189,248,.20);
pointer-events:none;
}

.dark-mode-featured-card::after{
content:"";
position:absolute;
left:-100px;
bottom:-120px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(236,72,153,.16);
pointer-events:none;
}

.dark-mode-featured-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:54px;
}

.dark-mode-stars{
color:#fbbf24;
font-size:16px;
letter-spacing:.03em;
}

.dark-mode-featured-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#dbeafe;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.dark-mode-featured-quote{
position:relative;
z-index:2;
max-width:760px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(30px,4vw,54px);
line-height:1.1;
font-weight:950;
letter-spacing:-.06em;
}

.dark-mode-featured-quote span{
background:linear-gradient(90deg,#93c5fd,#f9a8d4);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.dark-mode-featured-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:42px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.14);
}

.dark-mode-author{
display:flex;
align-items:center;
gap:14px;
}

.dark-mode-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
border-radius:20px;
background:linear-gradient(135deg,#818cf8,#38bdf8);
color:#020617;
font-size:16px;
font-weight:950;
}

.dark-mode-author strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:15px;
line-height:1.2;
font-weight:950;
}

.dark-mode-author span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.35;
font-weight:700;
}

.dark-mode-result-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.dark-mode-side-list{
display:grid;
gap:16px;
}

.dark-mode-mini-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
box-shadow:0 22px 70px rgba(0,0,0,.22);
overflow:hidden;
}

.dark-mode-mini-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 48%);
pointer-events:none;
}

.dark-mode-mini-card p{
position:relative;
z-index:2;
margin:0;
color:#e5e7eb;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.dark-mode-mini-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.12);
}

.dark-mode-mini-footer strong{
color:#ffffff;
font-size:14px;
font-weight:950;
}

.dark-mode-mini-footer span{
color:#fbbf24;
font-size:13px;
letter-spacing:.03em;
}

.dark-mode-stats-card{
display:grid;
gap:12px;
padding:24px;
border-radius:30px;
background:linear-gradient(135deg,#38bdf8,#818cf8);
color:#020617;
box-shadow:0 24px 80px rgba(56,189,248,.18);
}

.dark-mode-stats-card strong{
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.dark-mode-stats-card span{
font-size:13px;
line-height:1.45;
font-weight:850;
}

@media (max-width:980px){
.dark-mode-testimonials-header,
.dark-mode-testimonials-grid{
grid-template-columns:1fr;
}

.dark-mode-testimonials-score{
max-width:380px;
}

.dark-mode-featured-card{
min-height:auto;
}

.dark-mode-featured-footer{
align-items:flex-start;
flex-direction:column;
}

.dark-mode-result-pill{
white-space:normal;
}
}

@media (max-width:640px){
.dark-mode-testimonials-title{
font-size:34px;
}

.dark-mode-featured-card,
.dark-mode-mini-card,
.dark-mode-stats-card{
padding:22px;
border-radius:24px;
}

.dark-mode-featured-top{
align-items:flex-start;
flex-direction:column;
margin-bottom:36px;
}

.dark-mode-featured-quote{
font-size:32px;
}
}

This dark mode testimonial section works best when your page already uses dark backgrounds, product visuals, or modern UI sections. The featured testimonial creates a strong focal point, while the smaller review cards and metric block add supporting trust without making the layout repetitive.

27. Personal Brand Testimonials

Personal brand testimonials are useful for freelancers, consultants, coaches, creators, speakers, designers, developers, writers, and solo service providers. In this type of section, visitors are not only evaluating a product or company — they are deciding whether they trust a person.

The example below uses a personal-brand layout with a profile panel, personal quote, client testimonials, result highlights, and a soft editorial design. It is different from a company review grid because it puts the individual expert at the center of the trust story.

  • Personal brand testimonial layout for consultants, freelancers, and creators
  • Includes profile panel, client reviews, personal trust statement, and results
  • Great for portfolio websites, coaching pages, and solo service offers
  • Designed around human trust instead of product reviews
  • Responsive HTML and CSS with no JavaScript required
Personal Brand Proof

Client feedback that builds trust around one expert

★★★★★

“Working with a real expert made the whole project clearer. The advice was practical, direct, and easy to apply.”

MK
Mara Klein Founder
★★★★★

“The testimonial section feels personal because it shows trust in the person behind the service.”

JS
James Scott Startup Lead
120+ Client projects completed
5.0 Average client rating
8yr Professional experience

HTML

<section class="personal-brand-testimonials">

  <div class="personal-brand-shell">

    <aside class="personal-brand-profile">
      <div>
        <div class="personal-brand-photo"><span>LP</span></div>
      </div>

      <div>
        <h3>Trusted by clients who hire the person, not only the service.</h3>
        <p>This testimonial layout is made for personal brands where trust, expertise, and client relationships matter.</p>
      </div>

      <div class="personal-brand-profile-tags">
        <span>Consulting</span>
        <span>Strategy</span>
        <span>Design</span>
      </div>

      <div class="personal-brand-rating">
        <strong>5.0</strong>
        <span>★★★★★</span>
      </div>
    </aside>

    <div class="personal-brand-content">

      <div class="personal-brand-header">
        <div class="personal-brand-kicker">Personal Brand Proof</div>
        <h3 class="personal-brand-title">Client feedback that builds trust around <span>one expert</span></h3>
      </div>

      <div class="personal-brand-review-grid">

        <article class="personal-brand-review">
          <div class="personal-brand-review-stars">★★★★★</div>
          <p>“Working with a real expert made the whole project clearer. The advice was practical, direct, and easy to apply.”</p>
          <div class="personal-brand-review-footer">
            <div class="personal-brand-client">
              <div class="personal-brand-client-avatar">MK</div>
              <div>
                <strong>Mara Klein</strong>
                <span>Founder</span>
              </div>
            </div>
          </div>
        </article>

        <article class="personal-brand-review">
          <div class="personal-brand-review-stars">★★★★★</div>
          <p>“The testimonial section feels personal because it shows trust in the person behind the service.”</p>
          <div class="personal-brand-review-footer">
            <div class="personal-brand-client">
              <div class="personal-brand-client-avatar">JS</div>
              <div>
                <strong>James Scott</strong>
                <span>Startup Lead</span>
              </div>
            </div>
          </div>
        </article>

      </div>

      <div class="personal-brand-result">
        <div class="personal-brand-result-card">
          <strong>120+</strong>
          <span>Client projects completed</span>
        </div>
        <div class="personal-brand-result-card">
          <strong>5.0</strong>
          <span>Average client rating</span>
        </div>
        <div class="personal-brand-result-card">
          <strong>8yr</strong>
          <span>Professional experience</span>
        </div>
      </div>

    </div>

  </div>

</section>

CSS

.personal-brand-testimonials{
width:min(100%,1120px);
}

.personal-brand-shell{
position:relative;
display:grid;
grid-template-columns:330px minmax(0,1fr);
gap:22px;
padding:28px;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 100px rgba(15,23,42,.12);
overflow:hidden;
}

.personal-brand-shell::before{
content:"";
position:absolute;
left:-130px;
top:-140px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(236,72,153,.10);
pointer-events:none;
}

.personal-brand-shell::after{
content:"";
position:absolute;
right:-140px;
bottom:-150px;
width:350px;
height:350px;
border-radius:999px;
background:rgba(245,158,11,.11);
pointer-events:none;
}

.personal-brand-profile,
.personal-brand-content{
position:relative;
z-index:2;
}

.personal-brand-profile{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:26px;
padding:26px;
border-radius:34px;
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.18),transparent 35%),
linear-gradient(135deg,#831843,#9a3412);
color:#ffffff;
overflow:hidden;
}

.personal-brand-profile::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:210px;
height:210px;
border-radius:999px;
background:rgba(255,255,255,.14);
pointer-events:none;
}

.personal-brand-photo{
position:relative;
z-index:2;
display:grid;
place-items:center;
width:112px;
height:112px;
border-radius:36px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.personal-brand-photo span{
display:grid;
place-items:center;
width:78px;
height:78px;
border-radius:28px;
background:#ffffff;
color:#831843;
font-size:26px;
font-weight:950;
}

.personal-brand-profile h3{
position:relative;
z-index:2;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:34px;
line-height:1.04;
font-weight:950;
letter-spacing:-.05em;
}

.personal-brand-profile p{
position:relative;
z-index:2;
margin:0;
color:#fce7f3;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.personal-brand-profile-tags{
position:relative;
z-index:2;
display:flex;
flex-wrap:wrap;
gap:9px;
}

.personal-brand-profile-tags span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);
color:#ffffff;
font-size:12px;
font-weight:900;
line-height:1;
}

.personal-brand-rating{
position:relative;
z-index:2;
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);
}

.personal-brand-rating strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:38px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.personal-brand-rating span{
display:block;
color:#fbbf24;
font-size:15px;
letter-spacing:.03em;
}

.personal-brand-content{
display:grid;
gap:18px;
}

.personal-brand-header{
padding:30px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 70px rgba(15,23,42,.10);
}

.personal-brand-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fce7f3;
color:#be185d;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.personal-brand-title{
margin:0;
color:#0f172a;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
}

.personal-brand-title span{
background:linear-gradient(135deg,#db2777,#ea580c);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.personal-brand-review-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.personal-brand-review{
position:relative;
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
overflow:hidden;
}

.personal-brand-review::before{
content:"“";
position:absolute;
right:16px;
top:0;
color:rgba(219,39,119,.08);
font-size:90px;
line-height:1;
font-weight:950;
pointer-events:none;
}

.personal-brand-review-stars{
position:relative;
z-index:2;
margin-bottom:16px;
color:#f59e0b;
font-size:14px;
letter-spacing:.03em;
}

.personal-brand-review p{
position:relative;
z-index:2;
margin:0 0 18px;
color:#334155;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.personal-brand-review-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding-top:16px;
border-top:1px solid rgba(15,23,42,.08);
}

.personal-brand-client{
display:flex;
align-items:center;
gap:10px;
}

.personal-brand-client-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#db2777,#ea580c);
color:#ffffff;
font-size:12px;
font-weight:950;
}

.personal-brand-client strong{
display:block;
color:#0f172a;
font-size:13px;
font-weight:950;
}

.personal-brand-client span{
display:block;
color:#64748b;
font-size:12px;
font-weight:700;
}

.personal-brand-result{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.personal-brand-result-card{
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.personal-brand-result-card strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.personal-brand-result-card span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:800;
}

@media (max-width:980px){
.personal-brand-shell{
grid-template-columns:1fr;
}

.personal-brand-review-grid,
.personal-brand-result{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.personal-brand-shell{
padding:18px;
border-radius:28px;
}

.personal-brand-profile,
.personal-brand-header,
.personal-brand-review{
padding:22px;
border-radius:24px;
}

.personal-brand-title{
font-size:34px;
}

.personal-brand-profile h3{
font-size:30px;
}

.personal-brand-review-footer{
align-items:flex-start;
flex-direction:column;
}
}

This personal brand testimonial section works best when visitors are deciding whether to trust an individual expert. The profile panel, client quotes, ratings, and result cards help make the person behind the service feel credible, experienced, and easier to hire.

28. Creator Testimonials Section

Creator testimonial sections are useful for creator tools, online courses, communities, digital products, newsletters, memberships, templates, and personal brand websites. In this type of testimonial layout, the focus is not only on a product result, but also on how real creators use the offer to publish, grow, sell, or build faster.

The example below uses a creator-focused layout with a large community proof area, creator quote cards, growth metrics, and a featured testimonial. It is different from a normal business testimonial section because it feels more energetic, community-driven, and designed around creator outcomes.

  • Creator-focused testimonial section for digital products and communities
  • Includes creator quotes, growth metrics, rating labels, and audience proof
  • Great for online courses, creator tools, templates, and memberships
  • Uses a community-style layout instead of a corporate review grid
  • Responsive HTML and CSS with no JavaScript required
Creator Proof

Testimonials from creators building faster, smarter, and louder

Use this section when your product helps creators publish content, grow an audience, sell digital products, or build a stronger online presence.

★★★★★
Featured Creator

“The templates helped me launch faster, look more professional, and finally turn my ideas into something people could buy.”

KM
Kara Mitchell Digital creator
3x Faster launches
18k Audience reach

HTML

<section class="creator-testimonials">

  <div class="creator-testimonials-header">
    <div class="creator-testimonials-kicker">Creator Proof</div>
    <h3 class="creator-testimonials-title">Testimonials from creators building <span>faster, smarter, and louder</span></h3>
    <p class="creator-testimonials-text">Use this section when your product helps creators publish content, grow an audience, sell digital products, or build a stronger online presence.</p>
  </div>

  <div class="creator-testimonials-shell">

    <article class="creator-featured">
      <div>
        <div class="creator-featured-top">
          <div class="creator-stars">★★★★★</div>
          <span class="creator-label">Featured Creator</span>
        </div>

        <p class="creator-featured-quote">“The templates helped me launch faster, look more professional, and finally turn my ideas into <span>something people could buy.</span>”</p>
      </div>

      <div class="creator-featured-footer">
        <div class="creator-author">
          <div class="creator-avatar">KM</div>
          <div>
            <strong>Kara Mitchell</strong>
            <span>Digital creator</span>
          </div>
        </div>

        <div class="creator-metric">
          <div>
            <strong>3x</strong>
            <span>Faster launches</span>
          </div>
        </div>

        <div class="creator-metric">
          <div>
            <strong>18k</strong>
            <span>Audience reach</span>
          </div>
        </div>
      </div>
    </article>

    <aside class="creator-side">

      <div class="creator-community-card">
        <strong>9,800+</strong>
        <span>creators using the system to design, publish, and sell digital content faster.</span>
      </div>

      <article class="creator-mini-review">
        <p>“It feels built for creators who want professional results without spending weeks designing from scratch.”</p>
        <div class="creator-mini-footer">
          <strong>Leo Grant</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <article class="creator-mini-review">
        <p>“The testimonial layout makes the product feel community-driven and real.”</p>
        <div class="creator-mini-footer">
          <strong>Nina Ross</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <div class="creator-tags">
        <span>Creators</span>
        <span>Courses</span>
        <span>Templates</span>
        <span>Memberships</span>
        <span>Newsletters</span>
      </div>

    </aside>

  </div>

</section>

CSS

.creator-testimonials{
width:min(100%,1120px);
}

.creator-testimonials-header{
max-width:820px;
margin:0 auto 32px;
text-align:center;
}

.creator-testimonials-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(236,72,153,.16);
border:1px solid rgba(244,114,182,.24);
color:#fbcfe8;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.creator-testimonials-title{
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.creator-testimonials-title span{
background:linear-gradient(90deg,#f472b6,#fb923c,#60a5fa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.creator-testimonials-text{
max-width:680px;
margin:0 auto;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
font-weight:600;
}

.creator-testimonials-shell{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:20px;
padding:24px;
border-radius:42px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 100px rgba(0,0,0,.34);
overflow:hidden;
}

.creator-testimonials-shell::before{
content:"";
position:absolute;
left:-120px;
top:-120px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(236,72,153,.16);
pointer-events:none;
}

.creator-testimonials-shell::after{
content:"";
position:absolute;
right:-140px;
bottom:-150px;
width:340px;
height:340px;
border-radius:999px;
background:rgba(249,115,22,.14);
pointer-events:none;
}

.creator-featured,
.creator-side{
position:relative;
z-index:2;
}

.creator-featured{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:32px;
border-radius:36px;
background:#ffffff;
box-shadow:0 26px 90px rgba(0,0,0,.24);
overflow:hidden;
}

.creator-featured::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(236,72,153,.12);
pointer-events:none;
}

.creator-featured-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:42px;
}

.creator-stars{
color:#f59e0b;
font-size:16px;
letter-spacing:.03em;
}

.creator-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:#fdf2f8;
color:#be185d;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.creator-featured-quote{
position:relative;
z-index:2;
margin:0;
color:#0f172a;
font-size:clamp(30px,4vw,52px);
line-height:1.1;
font-weight:950;
letter-spacing:-.06em;
}

.creator-featured-quote span{
background:linear-gradient(135deg,#db2777,#f97316);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.creator-featured-footer{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) repeat(2,150px);
gap:16px;
align-items:stretch;
margin-top:42px;
padding-top:24px;
border-top:1px solid rgba(15,23,42,.08);
}

.creator-author{
display:flex;
align-items:center;
gap:14px;
}

.creator-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:19px;
background:linear-gradient(135deg,#db2777,#f97316);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.creator-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.creator-author span{
display:block;
color:#64748b;
font-size:13px;
font-weight:700;
}

.creator-metric{
display:grid;
place-items:center;
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
text-align:center;
}

.creator-metric strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.creator-metric span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:800;
}

.creator-side{
display:grid;
gap:16px;
}

.creator-community-card{
display:grid;
gap:14px;
padding:24px;
border-radius:30px;
background:linear-gradient(135deg,#f472b6,#fb923c);
color:#ffffff;
box-shadow:0 24px 80px rgba(236,72,153,.20);
}

.creator-community-card strong{
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.creator-community-card span{
font-size:13px;
line-height:1.45;
font-weight:850;
}

.creator-mini-review{
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.creator-mini-review p{
margin:0 0 16px;
color:#e5e7eb;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.creator-mini-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.14);
}

.creator-mini-footer strong{
color:#ffffff;
font-size:14px;
font-weight:950;
}

.creator-mini-footer span{
color:#fbbf24;
font-size:13px;
letter-spacing:.03em;
}

.creator-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
}

.creator-tags span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:12px;
font-weight:900;
}

@media (max-width:980px){
.creator-testimonials-shell{
grid-template-columns:1fr;
}

.creator-featured{
min-height:auto;
}

.creator-featured-footer{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.creator-testimonials-header{
text-align:left;
}

.creator-testimonials-title{
font-size:34px;
}

.creator-testimonials-shell{
padding:16px;
border-radius:28px;
}

.creator-featured,
.creator-community-card,
.creator-mini-review,
.creator-tags{
padding:22px;
border-radius:24px;
}

.creator-featured-top{
align-items:flex-start;
flex-direction:column;
margin-bottom:34px;
}

.creator-featured-quote{
font-size:32px;
}
}

This creator testimonial section is best when social proof should feel energetic, community-driven, and connected to publishing or selling outcomes. The featured quote, community metric, creator reviews, and topic tags make it suitable for online courses, digital products, creator tools, and membership websites.

29. Course Student Testimonials

Course student testimonials are useful for online courses, coaching programs, learning platforms, bootcamps, workshops, memberships, and educational landing pages. These testimonials should show more than praise — they should show student progress, confidence, learning outcomes, and practical results.

The example below uses a student-success layout with a course summary, featured student story, progress cards, completion stats, and student quotes. It is different from a generic testimonial grid because the whole section is structured around learning transformation.

  • Student testimonial section for online courses and coaching programs
  • Includes student progress, completion stats, quote cards, and learning outcomes
  • Great for course landing pages, bootcamps, memberships, and workshops
  • Focused on confidence, skills, and transformation
  • Responsive HTML and CSS with no JavaScript required
★★★★★

“The course gave me a clear path. I went from feeling stuck to building my first real project with confidence.”

SL
Sophia Lee Course student
Completed the program
6wk Average time to finish core modules
72% Students built a portfolio project
91% Reported stronger confidence

“The lessons were practical and the examples made every step easier to understand.”

Daniel Fox ★★★★★

“This testimonial layout feels right for course pages because it shows progress, not only praise.”

Maria Clark ★★★★★

HTML

<section class="course-student-testimonials">

  <div class="course-student-shell">

    <aside class="course-student-sidebar">
      <div>
        <div class="course-student-kicker">Student Results</div>
        <h3 class="course-student-title">Testimonials built around <span>learning progress</span></h3>
        <p class="course-student-text">Use this layout when course reviews should show confidence, skill growth, progress, and practical transformation.</p>
      </div>

      <div class="course-progress-card">
        <div class="course-progress-row">
          <div class="course-progress-row-top">
            <span>Course completion</span>
            <span>88%</span>
          </div>
          <div class="course-progress-track"><div class="course-progress-fill w88"></div></div>
        </div>

        <div class="course-progress-row">
          <div class="course-progress-row-top">
            <span>Skill confidence</span>
            <span>76%</span>
          </div>
          <div class="course-progress-track"><div class="course-progress-fill w76"></div></div>
        </div>

        <div class="course-progress-row">
          <div class="course-progress-row-top">
            <span>Would recommend</span>
            <span>94%</span>
          </div>
          <div class="course-progress-track"><div class="course-progress-fill w94"></div></div>
        </div>
      </div>

      <div class="course-student-stat">
        <div class="course-student-stat-card">
          <strong>4.9</strong>
          <span>Student rating</span>
        </div>
        <div class="course-student-stat-card">
          <strong>8k+</strong>
          <span>Students enrolled</span>
        </div>
      </div>
    </aside>

    <div class="course-student-main">

      <article class="course-student-featured">
        <div class="course-student-stars">★★★★★</div>
        <p class="course-student-quote">“The course gave me a clear path. I went from feeling stuck to building my first real project with <span>confidence.</span>”</p>

        <div class="course-student-author-row">
          <div class="course-student-author">
            <div class="course-student-avatar">SL</div>
            <div>
              <strong>Sophia Lee</strong>
              <span>Course student</span>
            </div>
          </div>
          <div class="course-student-badge">Completed the program</div>
        </div>
      </article>

      <div class="course-student-results">
        <div class="course-student-result">
          <strong>6wk</strong>
          <span>Average time to finish core modules</span>
        </div>
        <div class="course-student-result">
          <strong>72%</strong>
          <span>Students built a portfolio project</span>
        </div>
        <div class="course-student-result">
          <strong>91%</strong>
          <span>Reported stronger confidence</span>
        </div>
      </div>

      <div class="course-student-review-row">
        <article class="course-student-small-review">
          <p>“The lessons were practical and the examples made every step easier to understand.”</p>
          <div class="course-student-small-footer">
            <strong>Daniel Fox</strong>
            <span>★★★★★</span>
          </div>
        </article>

        <article class="course-student-small-review">
          <p>“This testimonial layout feels right for course pages because it shows progress, not only praise.”</p>
          <div class="course-student-small-footer">
            <strong>Maria Clark</strong>
            <span>★★★★★</span>
          </div>
        </article>
      </div>

    </div>

  </div>

</section>

CSS

.course-student-testimonials{
width:min(100%,1120px);
}

.course-student-shell{
position:relative;
display:grid;
grid-template-columns:340px minmax(0,1fr);
gap:22px;
padding:28px;
border-radius:42px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 100px rgba(15,23,42,.12);
overflow:hidden;
}

.course-student-shell::before{
content:"";
position:absolute;
left:-130px;
top:-140px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(99,102,241,.10);
pointer-events:none;
}

.course-student-shell::after{
content:"";
position:absolute;
right:-140px;
bottom:-150px;
width:350px;
height:350px;
border-radius:999px;
background:rgba(34,197,94,.10);
pointer-events:none;
}

.course-student-sidebar,
.course-student-main{
position:relative;
z-index:2;
}

.course-student-sidebar{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:26px;
padding:26px;
border-radius:34px;
background:
radial-gradient(circle at 20% 0%,rgba(255,255,255,.18),transparent 35%),
linear-gradient(135deg,#312e81,#166534);
color:#ffffff;
overflow:hidden;
}

.course-student-sidebar::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(255,255,255,.14);
pointer-events:none;
}

.course-student-kicker{
position:relative;
z-index:2;
display:inline-flex;
width:max-content;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#c7d2fe;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.course-student-title{
position:relative;
z-index:2;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.course-student-title span{
background:linear-gradient(90deg,#a5b4fc,#86efac);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.course-student-text{
position:relative;
z-index:2;
margin:18px 0 0;
color:#dbeafe;
font-size:15px;
line-height:1.75;
font-weight:650;
}

.course-progress-card{
position:relative;
z-index:2;
display:grid;
gap:14px;
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);
}

.course-progress-row{
display:grid;
gap:7px;
}

.course-progress-row-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
color:#ffffff;
font-size:13px;
font-weight:900;
}

.course-progress-track{
height:9px;
border-radius:999px;
background:rgba(255,255,255,.16);
overflow:hidden;
}

.course-progress-fill{
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#a5b4fc,#86efac);
}

.course-progress-fill.w88{
width:88%;
}

.course-progress-fill.w76{
width:76%;
}

.course-progress-fill.w94{
width:94%;
}

.course-student-stat{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.course-student-stat-card{
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}

.course-student-stat-card strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:30px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.course-student-stat-card span{
display:block;
color:#dbeafe;
font-size:12px;
line-height:1.4;
font-weight:800;
}

.course-student-main{
display:grid;
gap:18px;
}

.course-student-featured{
position:relative;
padding:30px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 70px rgba(15,23,42,.10);
overflow:hidden;
}

.course-student-featured::before{
content:"“";
position:absolute;
right:22px;
top:0;
color:rgba(99,102,241,.10);
font-size:130px;
line-height:1;
font-weight:950;
pointer-events:none;
}

.course-student-stars{
position:relative;
z-index:2;
margin-bottom:20px;
color:#f59e0b;
font-size:16px;
letter-spacing:.03em;
}

.course-student-quote{
position:relative;
z-index:2;
margin:0;
color:#0f172a;
font-size:clamp(27px,4vw,46px);
line-height:1.15;
font-weight:950;
letter-spacing:-.055em;
}

.course-student-quote span{
background:linear-gradient(135deg,#4f46e5,#16a34a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.course-student-author-row{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:30px;
padding-top:22px;
border-top:1px solid rgba(15,23,42,.08);
}

.course-student-author{
display:flex;
align-items:center;
gap:13px;
}

.course-student-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#4f46e5,#16a34a);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.course-student-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.course-student-author span{
display:block;
color:#64748b;
font-size:13px;
font-weight:700;
}

.course-student-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 13px;
border-radius:999px;
background:#f0fdf4;
color:#15803d;
font-size:13px;
font-weight:950;
white-space:nowrap;
}

.course-student-results{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.course-student-result{
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.course-student-result strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.course-student-result span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.45;
font-weight:800;
}

.course-student-review-row{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.course-student-small-review{
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 50px rgba(15,23,42,.08);
}

.course-student-small-review p{
margin:0 0 16px;
color:#334155;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.course-student-small-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding-top:16px;
border-top:1px solid rgba(15,23,42,.08);
}

.course-student-small-footer strong{
color:#0f172a;
font-size:14px;
font-weight:950;
}

.course-student-small-footer span{
color:#f59e0b;
font-size:13px;
letter-spacing:.03em;
}

@media (max-width:980px){
.course-student-shell{
grid-template-columns:1fr;
}

.course-student-results,
.course-student-review-row{
grid-template-columns:1fr;
}

.course-student-author-row{
align-items:flex-start;
flex-direction:column;
}

.course-student-badge{
white-space:normal;
}
}

@media (max-width:640px){
.course-student-shell{
padding:18px;
border-radius:28px;
}

.course-student-sidebar,
.course-student-featured,
.course-student-small-review{
padding:22px;
border-radius:24px;
}

.course-student-title{
font-size:34px;
}

.course-student-quote{
font-size:30px;
}

.course-student-stat{
grid-template-columns:1fr;
}
}

This course student testimonial layout is best when you need to show learning transformation, not just positive comments. The progress bars, completion stats, featured student quote, result cards, and smaller reviews make it useful for course sales pages, coaching programs, and online education websites.

30. Complete Responsive Testimonials Section

A complete responsive testimonials section combines the strongest parts of modern testimonial design into one full layout: a clear headline, rating summary, featured customer quote, supporting reviews, trust metrics, and a CTA. This type of section is useful when you want one polished social proof block that can work on homepages, landing pages, service pages, SaaS pages, product pages, and portfolio websites.

The example below uses a complete testimonial section with a featured review, smaller customer cards, rating summary, trust badges, result metrics, and a call-to-action area. It is designed as a final full-section example that brings together many testimonial UI patterns from this guide into one professional responsive layout.

  • Complete responsive testimonial section for modern websites
  • Includes featured testimonial, review cards, rating summary, metrics, and CTA
  • Great for SaaS, service businesses, agencies, ecommerce, portfolios, and landing pages
  • Combines social proof, trust signals, and conversion-focused layout
  • Responsive HTML and CSS with no JavaScript required
Complete Testimonials Section

A full social proof section for trust, clarity, and conversions

4.9 ★★★★★

Average rating from verified customer feedback and completed projects.

★★★★★
Featured Review

“This testimonial section gives the page everything it needs: a strong customer story, clear proof, real metrics, and trust before the CTA.”

RT
Rebecca Turner Marketing Director
54% More CTA clicks
2.8x More qualified leads

HTML

<section class="complete-testimonials-section">

  <div class="complete-testimonials-header">
    <div>
      <div class="complete-testimonials-kicker">Complete Testimonials Section</div>
      <h3 class="complete-testimonials-title">A full social proof section for <span>trust, clarity, and conversions</span></h3>
    </div>

    <div class="complete-testimonials-rating">
      <strong>4.9</strong>
      <span>★★★★★</span>
      <p>Average rating from verified customer feedback and completed projects.</p>
    </div>
  </div>

  <div class="complete-testimonials-shell">

    <div class="complete-testimonials-main">

      <article class="complete-testimonials-featured">
        <div>
          <div class="complete-testimonials-featured-top">
            <div class="complete-testimonials-stars">★★★★★</div>
            <span class="complete-testimonials-label">Featured Review</span>
          </div>

          <p class="complete-testimonials-quote">“This testimonial section gives the page everything it needs: a strong customer story, <span>clear proof, real metrics, and trust before the CTA.</span>”</p>
        </div>

        <div class="complete-testimonials-featured-footer">
          <div class="complete-testimonials-author">
            <div class="complete-testimonials-avatar">RT</div>
            <div>
              <strong>Rebecca Turner</strong>
              <span>Marketing Director</span>
            </div>
          </div>

          <div class="complete-testimonials-metric">
            <div>
              <strong>54%</strong>
              <span>More CTA clicks</span>
            </div>
          </div>

          <div class="complete-testimonials-metric">
            <div>
              <strong>2.8x</strong>
              <span>More qualified leads</span>
            </div>
          </div>
        </div>
      </article>

    </div>

    <aside class="complete-testimonials-side">

      <div class="complete-testimonials-trust-card">
        <strong>1,200+</strong>
        <span>happy customers, completed projects, product users, and service clients.</span>
      </div>

      <article class="complete-testimonials-mini-review">
        <p>“The layout feels complete without being messy. It gives visitors proof from multiple angles.”</p>
        <div class="complete-testimonials-mini-footer">
          <strong>Michael Grant</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <article class="complete-testimonials-mini-review">
        <p>“This is the kind of testimonial section that can sit near pricing, contact forms, or landing page CTAs.”</p>
        <div class="complete-testimonials-mini-footer">
          <strong>Olivia Reed</strong>
          <span>★★★★★</span>
        </div>
      </article>

      <div class="complete-testimonials-badges">
        <span>Verified reviews</span>
        <span>Fast support</span>
        <span>Real results</span>
        <span>Trusted by teams</span>
      </div>

      <div class="complete-testimonials-cta">
        <strong>Use testimonials where visitors make decisions.</strong>
        <p>Place a complete testimonial section before pricing, signup, booking, contact, checkout, or quote request areas.</p>
        <a href="#">Add social proof</a>
      </div>

    </aside>

  </div>

</section>

CSS

.complete-testimonials-section{
width:min(100%,1120px);
}

.complete-testimonials-header{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:26px;
align-items:end;
margin-bottom:28px;
}

.complete-testimonials-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(74,222,128,.24);
color:#bbf7d0;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.complete-testimonials-title{
max-width:820px;
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.complete-testimonials-title span{
background:linear-gradient(90deg,#4ade80,#38bdf8,#a78bfa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.complete-testimonials-rating{
padding:20px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.complete-testimonials-rating strong{
display:block;
margin-bottom:7px;
color:#ffffff;
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.complete-testimonials-rating span{
display:block;
color:#fbbf24;
font-size:15px;
letter-spacing:.03em;
}

.complete-testimonials-rating p{
margin:8px 0 0;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.complete-testimonials-shell{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:20px;
padding:24px;
border-radius:42px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 100px rgba(0,0,0,.34);
overflow:hidden;
}

.complete-testimonials-shell::before{
content:"";
position:absolute;
left:-120px;
top:-120px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(34,197,94,.16);
pointer-events:none;
}

.complete-testimonials-shell::after{
content:"";
position:absolute;
right:-140px;
bottom:-150px;
width:340px;
height:340px;
border-radius:999px;
background:rgba(59,130,246,.16);
pointer-events:none;
}

.complete-testimonials-main,
.complete-testimonials-side{
position:relative;
z-index:2;
}

.complete-testimonials-featured{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:540px;
padding:32px;
border-radius:36px;
background:#ffffff;
box-shadow:0 26px 90px rgba(0,0,0,.24);
overflow:hidden;
}

.complete-testimonials-featured::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(34,197,94,.12);
pointer-events:none;
}

.complete-testimonials-featured::after{
content:"";
position:absolute;
left:-110px;
bottom:-120px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(59,130,246,.10);
pointer-events:none;
}

.complete-testimonials-featured-top{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:42px;
}

.complete-testimonials-stars{
color:#f59e0b;
font-size:16px;
letter-spacing:.03em;
}

.complete-testimonials-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:#f0fdf4;
color:#15803d;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.complete-testimonials-quote{
position:relative;
z-index:2;
margin:0;
color:#0f172a;
font-size:clamp(30px,4vw,52px);
line-height:1.1;
font-weight:950;
letter-spacing:-.06em;
}

.complete-testimonials-quote span{
background:linear-gradient(135deg,#16a34a,#0284c7);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.complete-testimonials-featured-footer{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) repeat(2,150px);
gap:16px;
align-items:stretch;
margin-top:42px;
padding-top:24px;
border-top:1px solid rgba(15,23,42,.08);
}

.complete-testimonials-author{
display:flex;
align-items:center;
gap:14px;
}

.complete-testimonials-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:19px;
background:linear-gradient(135deg,#16a34a,#0284c7);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.complete-testimonials-author strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.complete-testimonials-author span{
display:block;
color:#64748b;
font-size:13px;
font-weight:700;
}

.complete-testimonials-metric{
display:grid;
place-items:center;
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
text-align:center;
}

.complete-testimonials-metric strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.complete-testimonials-metric span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:800;
}

.complete-testimonials-side{
display:grid;
gap:16px;
}

.complete-testimonials-trust-card{
display:grid;
gap:14px;
padding:24px;
border-radius:30px;
background:linear-gradient(135deg,#4ade80,#38bdf8);
color:#020617;
box-shadow:0 24px 80px rgba(34,197,94,.18);
}

.complete-testimonials-trust-card strong{
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.complete-testimonials-trust-card span{
font-size:13px;
line-height:1.45;
font-weight:850;
}

.complete-testimonials-mini-review{
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.complete-testimonials-mini-review p{
margin:0 0 16px;
color:#e5e7eb;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.complete-testimonials-mini-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.14);
}

.complete-testimonials-mini-footer strong{
color:#ffffff;
font-size:14px;
font-weight:950;
}

.complete-testimonials-mini-footer span{
color:#fbbf24;
font-size:13px;
letter-spacing:.03em;
}

.complete-testimonials-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
}

.complete-testimonials-badges span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
font-size:12px;
font-weight:900;
}

.complete-testimonials-cta{
display:grid;
gap:12px;
padding:24px;
border-radius:30px;
background:#ffffff;
box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.complete-testimonials-cta strong{
color:#0f172a;
font-size:20px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
}

.complete-testimonials-cta p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.complete-testimonials-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:44px;
padding:0 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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.complete-testimonials-cta a:hover{
background:#16a34a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(22,163,74,.24);
}

@media (max-width:980px){
.complete-testimonials-header,
.complete-testimonials-shell{
grid-template-columns:1fr;
}

.complete-testimonials-rating{
max-width:380px;
}

.complete-testimonials-featured{
min-height:auto;
}

.complete-testimonials-featured-footer{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.complete-testimonials-title{
font-size:34px;
}

.complete-testimonials-shell{
padding:16px;
border-radius:28px;
}

.complete-testimonials-featured,
.complete-testimonials-trust-card,
.complete-testimonials-mini-review,
.complete-testimonials-badges,
.complete-testimonials-cta{
padding:22px;
border-radius:24px;
}

.complete-testimonials-featured-top{
align-items:flex-start;
flex-direction:column;
margin-bottom:34px;
}

.complete-testimonials-quote{
font-size:32px;
}

.complete-testimonials-cta a{
width:100%;
}
}

This complete responsive testimonials section is best when one social proof block needs to do several jobs at once. The featured quote creates emotional trust, the rating summary adds quick credibility, the side reviews add variety, the badges answer trust concerns, and the CTA helps connect customer proof to the next conversion step.

Recommended hosting for WordPress projects

Build faster testimonial pages on better WordPress hosting

If you are building landing pages, portfolio websites, SaaS pages, or client websites with many CSS examples, fast hosting helps your layouts, images, code demos, and content sections load more smoothly.

Explore Kinsta Hosting
Kinsta managed WordPress hosting

CSS Testimonial Best Practices

A modern CSS testimonial section should do more than display nice-looking review cards. It should make customer feedback easy to scan, believable, responsive, and useful near the parts of a page where visitors make decisions.

The best testimonial sections combine strong content with clean UI structure. A short quote, clear author context, good spacing, readable typography, and relevant social proof can make a testimonial layout much more effective than a decorative block with generic praise.

01

Use Specific Customer Quotes

A good testimonial should explain what improved, what problem was solved, or why the customer trusted the product or service.

02

Add Author Context

Names, roles, company labels, customer types, or verified buyer badges make reviews feel more credible and easier to understand.

03

Keep the Layout Readable

Use strong contrast, enough line height, balanced spacing, and clean card structure so the quote is easy to read on every screen.

04

Match the Testimonial to the Page

Product pages need product reviews. Service pages need client trust. SaaS pages may need results, ratings, and case-study proof.

05

Place Proof Near Decisions

Testimonials are strongest near pricing tables, contact forms, signup CTAs, checkout blocks, product sections, and quote request forms.

06

Avoid Fake-Looking Design

Overused stock avatars, generic text, and unrealistic ratings can make testimonials feel less believable. Keep the section natural.

Testimonials also work best when they support the surrounding design. For example, a testimonial section below a modern website hero section can confirm the promise made in the hero. A testimonial block near modern CSS pricing tables can reduce hesitation before a user compares plans. Review cards beside modern CSS forms can make quote requests, signups, and contact forms feel safer.

Responsive Testimonial Design Tips

Responsive testimonial design matters because review sections often include several elements at once: quotes, avatars, stars, badges, metrics, logos, cards, and CTAs. If these elements are not planned for mobile, the section can become crowded and difficult to read.

For most modern websites, testimonial grids should stack cleanly on smaller screens. Large quote layouts should reduce font size, multi-column review sections should become single-column layouts, and buttons or badges should stay easy to tap.

How to Make Testimonials Responsive

Start with the testimonial content first, then design the layout around readability. On mobile, the quote should always remain the most important part of the section.

Stack Cards on Mobile Three-column testimonial grids should usually become one column on phones.
Reduce Large Quote Sizes Hero-style testimonial quotes need smaller mobile font sizes and tighter spacing.
Keep Author Rows Clear Avatar, name, role, rating, and badges should wrap naturally without overlapping.
Avoid Tiny Star Ratings Ratings should support the quote, but they should not become unreadable on small screens.
Use Flexible Grids CSS Grid and Flexbox make testimonial cards easier to stack, align, and reorder.
Test Long Quotes Some customer feedback is longer than expected. Make sure cards still look balanced.

If your testimonial section appears inside a larger page layout, keep the spacing consistent with the rest of the design. Testimonial cards should feel connected to nearby modern CSS layouts, CSS tabs, CSS accordions, and modern CSS navigation menus.

Common Testimonial Design Mistakes

Even a beautiful testimonial section can feel weak if the content is too generic, the layout is hard to read, or the social proof looks fake. Testimonials should make a page more believable, not just more decorated.

Here are the most common testimonial design mistakes to avoid when building modern CSS testimonial sections.

Using Generic Praise

Quotes like “Great service” or “Amazing product” do not explain value. Use testimonials that mention a result, experience, feature, or solved problem.

Making Cards Too Crowded

Too many icons, badges, long quotes, logos, and metrics can make the review harder to read. Keep each testimonial focused.

Ignoring Mobile Layout

Testimonials often break on phones when cards, avatars, and ratings are designed only for desktop. Always test small screens.

Using Weak Contrast

Customer quotes need readable text. Avoid light gray text on white backgrounds or low-contrast text on dark gradients.

Placing Proof Too Late

If testimonials appear only at the bottom of a long page, many visitors may never see them. Add social proof near decision points.

Repeating the Same Layout

Every testimonial section does not need to be a three-card grid. Use sliders, quote strips, timelines, story cards, or featured reviews when they fit better.

The goal is not to make testimonials louder. The goal is to make them more useful. A strong testimonial section should help visitors understand why other people trusted the offer, what result they received, and why the next action feels safer.

CSS Testimonials FAQ

Below are common questions about modern CSS testimonials, responsive testimonial cards, review grids, quote sections, social proof walls, and HTML CSS testimonial design.

What is a CSS testimonial section?

A CSS testimonial section is a website block built with HTML and CSS to display customer quotes, client reviews, star ratings, user feedback, social proof, or case study snippets. It can appear on homepages, landing pages, product pages, pricing pages, service pages, and checkout flows.

What should a good testimonial card include?

A good testimonial card usually includes a short customer quote, author name, role or customer type, optional avatar, rating, and a clean layout. For ecommerce, SaaS, or services, verified labels, results, or product details can make the review stronger.

Where should testimonials be placed on a website?

Testimonials are strongest near decision points. Place them near pricing tables, signup forms, contact forms, product details, quote request sections, checkout areas, or landing page CTAs where visitors may need reassurance.

Are testimonial sliders better than testimonial grids?

It depends on the page. Testimonial grids are easier to scan because multiple reviews are visible at once. Sliders can work when space is limited, but important social proof should not be hidden if visitors may never interact with the carousel.

How do I make testimonials responsive?

Use CSS Grid or Flexbox and adjust the layout with media queries. On desktop, testimonials can appear in multiple columns. On mobile, they should usually stack into one column with readable text, comfortable spacing, and clear author details.

Should testimonials include star ratings?

Star ratings are useful for ecommerce reviews, app reviews, service feedback, course reviews, and product ratings. For B2B case studies or high-end services, a strong quote with context and results may be more useful than stars.

Can I use these testimonial examples in WordPress?

Yes. These examples use HTML, CSS, and in some cases small JavaScript snippets. You can adapt them for WordPress Gutenberg HTML blocks, custom themes, Elementor HTML widgets, landing pages, or custom-coded templates.

What is the best testimonial layout for a landing page?

For most landing pages, a featured testimonial with supporting review cards works very well. It gives the page one strong customer story while still showing extra social proof from other users or clients.

Conclusion

Modern CSS testimonials are one of the most practical ways to add trust, credibility, and social proof to a website. A strong testimonial section can help visitors understand that other people have already used, trusted, bought, or recommended your product, service, course, app, or business.

In this guide, you saw 30 modern CSS testimonial examples, including testimonial cards, review grids, quote sections, testimonial sliders, SaaS testimonials, video testimonial layouts, ecommerce review cards, app reviews, social proof walls, masonry reviews, customer story cards, trust badge testimonials, timeline testimonials, before-and-after testimonials, service business testimonials, dark mode testimonials, personal brand testimonials, course student testimonials, and a complete responsive testimonials section.

Use these examples as starting points for your own website projects. You can customize the colors, spacing, typography, card structure, customer names, review text, ratings, badges, and responsive behavior to match your brand. The most important goal is always the same: make customer proof clear, believable, and helpful at the exact moment visitors need confidence.

]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-testimonials/feed/ 0 30 Modern CSS Pricing Tables for Websites – Responsive Pricing Section Examples https://veebilehed24.ee/en/blog/css-effects/modern-css-pricing-tables/ https://veebilehed24.ee/en/blog/css-effects/modern-css-pricing-tables/#respond Thu, 28 May 2026 08:39:04 +0000 https://veebilehed24.ee/?p=1402 Pricing tables are one of the most important conversion-focused sections on a modern website. A clear pricing section helps visitors compare plans, understand the value of each offer, and choose the option that fits their needs without confusion.

In this guide, you will find 30 modern CSS pricing tables for websites, including responsive pricing cards, SaaS pricing sections, monthly and yearly pricing toggles, comparison tables, agency pricing layouts, hosting pricing tables, mobile-first pricing sections, and complete HTML and CSS pricing table examples you can customize for your own projects.

View All 30 CSS Pricing Table Examples
On this page

Table of Contents

Kinsta hosting

What Is a CSS Pricing Table?

A CSS pricing table is a website section that presents pricing plans, package options, product tiers, or subscription levels in a clear visual layout. Most pricing tables include a plan name, price, billing period, feature list, and call-to-action button so visitors can quickly compare offers and choose the best option.

Modern CSS pricing tables are commonly used on SaaS websites, agency service pages, hosting websites, membership platforms, app landing pages, ecommerce service pages, and productized service websites. They can be built as traditional tables, responsive pricing cards, comparison grids, or complete pricing sections with headings, badges, toggles, and trust signals.

Why Pricing Tables Matter for Website Conversions

A pricing table is not just a design element. It is one of the key decision-making sections on a website. When the pricing section is easy to scan, users can understand the difference between plans faster and move toward the next step with more confidence.

  • They make plan comparison easier by placing prices and features side by side.
  • They highlight the recommended offer with visual emphasis, badges, or stronger CTA buttons.
  • They reduce pricing confusion by showing what is included in each plan.
  • They improve call-to-action visibility by placing buttons directly inside each pricing card.
  • They support responsive website design when pricing cards stack cleanly on mobile screens.

Pricing Tables vs Pricing Cards vs Comparison Tables

Pricing tables, pricing cards, and comparison tables are closely related, but they are not always the same thing. Choosing the right structure depends on how many plans you have, how many features need to be compared, and how much detail your visitors need before they click a button.

Pricing Tables

Best for showing several plans in one section, usually with prices, features, and CTA buttons aligned in a clear comparison layout.

Pricing Cards

Best for modern landing pages where each plan is presented as a separate card with strong visual hierarchy and a focused CTA.

Comparison Tables

Best for detailed feature comparisons where visitors need to compare many included and excluded features across different plans.

If you are designing pricing cards as part of a larger UI system, you may also like our guide to modern CSS cards. For full page structures, landing page sections, and responsive grids, see our collection of modern CSS layouts. If your pricing section depends heavily on call-to-action design, our modern CSS buttons guide is also useful.

What Should a Good Pricing Table Include?

A good pricing table should make the buying decision easier, not harder. The best pricing sections use simple wording, clear plan differences, visible prices, and strong call-to-action buttons. They also work well on mobile, where users often need to compare pricing cards one at a time.

  • Plan name so users understand the level or package type.
  • Price and billing period such as monthly, yearly, one-time, or custom pricing.
  • Short plan description that explains who the plan is for.
  • Feature list with the most important included items.
  • Recommended plan highlight when one plan should stand out.
  • Clear CTA button such as Start Free Trial, Choose Plan, Buy Now, or Contact Sales.
  • Trust signal such as money-back guarantee, secure checkout, no hidden fees, or cancel anytime.
  • Responsive layout that keeps the pricing table readable on desktop, tablet, and mobile screens.

The examples below show different ways to build modern CSS pricing tables, from simple HTML and CSS pricing cards to more advanced responsive pricing sections with toggles, badges, comparison layouts, icons, trust signals, and mobile-first structures.

30 Modern CSS Pricing Table Examples

Now let’s look at 30 modern CSS pricing table examples for real website projects. Each example has a different purpose and layout approach, so you can use them for SaaS websites, service pages, hosting offers, ecommerce packages, membership plans, agency pricing, app landing pages, product pricing, and complete responsive pricing sections.

1. Basic CSS Pricing Table

Basic CSS pricing tables are perfect when you need a clean and familiar way to compare three pricing plans. This layout works well for SaaS websites, service pages, digital products, membership plans, and simple website pricing sections.

The example below uses a classic three-column pricing table with plan names, prices, short descriptions, feature lists, and call-to-action buttons. It is simple, responsive, and easy to customize with your own colors, plans, and pricing content.

  • Great starting point for a modern HTML and CSS pricing table
  • Uses a clean three-column layout on desktop
  • Stacks into a single column on mobile screens
  • Includes plan names, prices, features, and CTA buttons
  • Works well for simple pricing pages and landing pages
Simple Pricing

Choose the right website plan

A clean pricing table makes it easier for visitors to compare options, understand the value, and choose the plan that fits their needs.

Starter

For small websites and personal projects that need a simple launch package.

$19 /mo
  • One website project
  • Basic design sections
  • Email support
  • Responsive layout
Choose Starter

Business

For growing companies that need stronger features and a more polished website.

$49 /mo
  • Up to five projects
  • Advanced page sections
  • Priority support
  • Conversion-focused UI
Choose Business

Premium

For teams that need more flexibility, custom layouts, and premium support.

$89 /mo
  • Unlimited projects
  • Custom design blocks
  • Dedicated support
  • Full responsive system
Choose Premium

HTML

<section class="basic-pricing-table">

  <div class="basic-pricing-table-header">
    <div class="basic-pricing-table-kicker">Simple Pricing</div>
    <h3 class="basic-pricing-table-title">Choose the right <span>website plan</span></h3>
    <p class="basic-pricing-table-text">A clean pricing table makes it easier for visitors to compare options, understand the value, and choose the plan that fits their needs.</p>
  </div>

  <div class="basic-pricing-table-grid">

    <article class="basic-pricing-table-card">
      <h4 class="basic-pricing-table-plan">Starter</h4>
      <p class="basic-pricing-table-desc">For small websites and personal projects that need a simple launch package.</p>
      <div class="basic-pricing-table-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <ul class="basic-pricing-table-features">
        <li>One website project</li>
        <li>Basic design sections</li>
        <li>Email support</li>
        <li>Responsive layout</li>
      </ul>
      <a class="basic-pricing-table-button" href="#">Choose Starter</a>
    </article>

    <article class="basic-pricing-table-card">
      <h4 class="basic-pricing-table-plan">Business</h4>
      <p class="basic-pricing-table-desc">For growing companies that need stronger features and a more polished website.</p>
      <div class="basic-pricing-table-price">
        <strong>$49</strong>
        <span>/mo</span>
      </div>
      <ul class="basic-pricing-table-features">
        <li>Up to five projects</li>
        <li>Advanced page sections</li>
        <li>Priority support</li>
        <li>Conversion-focused UI</li>
      </ul>
      <a class="basic-pricing-table-button" href="#">Choose Business</a>
    </article>

    <article class="basic-pricing-table-card">
      <h4 class="basic-pricing-table-plan">Premium</h4>
      <p class="basic-pricing-table-desc">For teams that need more flexibility, custom layouts, and premium support.</p>
      <div class="basic-pricing-table-price">
        <strong>$89</strong>
        <span>/mo</span>
      </div>
      <ul class="basic-pricing-table-features">
        <li>Unlimited projects</li>
        <li>Custom design blocks</li>
        <li>Dedicated support</li>
        <li>Full responsive system</li>
      </ul>
      <a class="basic-pricing-table-button" href="#">Choose Premium</a>
    </article>

  </div>

</section>

CSS

.basic-pricing-table{
width:min(100%,980px);
}

.basic-pricing-table-header{
max-width:680px;
margin:0 auto 32px;
text-align:center;
}

.basic-pricing-table-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#3730a3;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.basic-pricing-table-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.basic-pricing-table-title span{
background:linear-gradient(135deg,#2563eb,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.basic-pricing-table-text{
margin:0 auto;
max-width:620px;
color:#475569;
font-size:16px;
line-height:1.75;
}

.basic-pricing-table-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.basic-pricing-table-card{
display:flex;
flex-direction:column;
padding:26px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.10);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.basic-pricing-table-card:hover{
transform:translateY(-5px);
box-shadow:0 28px 70px rgba(15,23,42,.14);
border-color:rgba(37,99,235,.24);
}

.basic-pricing-table-plan{
margin:0 0 8px;
color:#0f172a;
font-size:22px;
line-height:1.2;
font-weight:950;
}

.basic-pricing-table-desc{
margin:0 0 22px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.basic-pricing-table-price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:20px;
color:#0f172a;
}

.basic-pricing-table-price strong{
font-size:46px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.basic-pricing-table-price span{
padding-bottom:4px;
color:#64748b;
font-size:14px;
font-weight:800;
}

.basic-pricing-table-features{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.basic-pricing-table-features li{
position:relative;
margin:0;
padding-left:28px;
color:#334155;
font-size:15px;
line-height:1.5;
font-weight:700;
}

.basic-pricing-table-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
}

.basic-pricing-table-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
margin-top:auto;
min-height:48px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.basic-pricing-table-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.25);
}

@media (max-width:860px){
.basic-pricing-table-grid{
grid-template-columns:1fr;
max-width:520px;
margin:0 auto;
}
}

@media (max-width:640px){
.basic-pricing-table-header{
text-align:left;
}

.basic-pricing-table-title{
font-size:34px;
}

.basic-pricing-table-card{
padding:22px;
border-radius:24px;
}

.basic-pricing-table-price strong{
font-size:40px;
}
}

This basic CSS pricing table is a strong foundation for simple pricing pages. You can use it as a starting point and then adjust the plan names, prices, feature lists, and button styles to match your website or product.

2. Responsive Pricing Cards

Responsive pricing cards are a modern alternative to a strict table layout. Instead of feeling like a spreadsheet, each pricing plan becomes a separate card with its own visual hierarchy, feature list, and call-to-action area.

This example uses a flexible card grid with top badges, short descriptions, feature groups, and bottom CTA zones. It is designed to look polished on desktop while staying easy to read on tablets and mobile screens.

  • Uses responsive CSS Grid for modern pricing cards
  • Each card has a clear top, middle, and bottom section
  • Works well for SaaS, services, memberships, and digital products
  • Includes a highlighted middle card without relying only on color
  • Mobile layout keeps every pricing card easy to scan
Responsive Cards

Pricing cards built for every screen size

Use this structure when each plan needs its own card, clear CTA area, and readable mobile layout.

Launch 01

Basic

A focused plan for simple websites, small launches, and early-stage projects.

$29 /month
  • Responsive pricing card layout
  • Core website sections
  • Basic support included
  • Clean HTML and CSS structure
Start Basic

Best for simple projects

Popular 02

Growth

A stronger plan for businesses that need better conversion sections and more flexibility.

$79 /month
  • Advanced responsive pricing UI
  • Conversion-focused sections
  • Priority support included
  • Reusable design components
Start Growth

Recommended for most websites

Scale 03

Advanced

A flexible plan for teams, larger websites, and more complex landing page systems.

$149 /month
  • Complete pricing section system
  • Custom layouts and components
  • Dedicated design support
  • Scalable responsive structure
Start Advanced

Best for scaling teams

HTML

<section class="responsive-pricing-cards">

  <div class="responsive-pricing-cards-header">
    <div>
      <div class="responsive-pricing-cards-kicker">Responsive Cards</div>
      <h3 class="responsive-pricing-cards-title">Pricing cards built for <span>every screen size</span></h3>
    </div>
    <p class="responsive-pricing-cards-note">Use this structure when each plan needs its own card, clear CTA area, and readable mobile layout.</p>
  </div>

  <div class="responsive-pricing-cards-grid">

    <article class="responsive-pricing-card">
      <div class="responsive-pricing-card-badge">
        <span>Launch</span>
        <strong>01</strong>
      </div>
      <h3>Basic</h3>
      <p class="responsive-pricing-card-desc">A focused plan for simple websites, small launches, and early-stage projects.</p>
      <div class="responsive-pricing-card-price">
        <strong>$29</strong>
        <span>/month</span>
      </div>
      <ul class="responsive-pricing-card-list">
        <li>Responsive pricing card layout</li>
        <li>Core website sections</li>
        <li>Basic support included</li>
        <li>Clean HTML and CSS structure</li>
      </ul>
      <div class="responsive-pricing-card-footer">
        <a class="responsive-pricing-card-button" href="#">Start Basic</a>
        <p class="responsive-pricing-card-small">Best for simple projects</p>
      </div>
    </article>

    <article class="responsive-pricing-card is-featured">
      <div class="responsive-pricing-card-badge">
        <span>Popular</span>
        <strong>02</strong>
      </div>
      <h3>Growth</h3>
      <p class="responsive-pricing-card-desc">A stronger plan for businesses that need better conversion sections and more flexibility.</p>
      <div class="responsive-pricing-card-price">
        <strong>$79</strong>
        <span>/month</span>
      </div>
      <ul class="responsive-pricing-card-list">
        <li>Advanced responsive pricing UI</li>
        <li>Conversion-focused sections</li>
        <li>Priority support included</li>
        <li>Reusable design components</li>
      </ul>
      <div class="responsive-pricing-card-footer">
        <a class="responsive-pricing-card-button" href="#">Start Growth</a>
        <p class="responsive-pricing-card-small">Recommended for most websites</p>
      </div>
    </article>

    <article class="responsive-pricing-card">
      <div class="responsive-pricing-card-badge">
        <span>Scale</span>
        <strong>03</strong>
      </div>
      <h3>Advanced</h3>
      <p class="responsive-pricing-card-desc">A flexible plan for teams, larger websites, and more complex landing page systems.</p>
      <div class="responsive-pricing-card-price">
        <strong>$149</strong>
        <span>/month</span>
      </div>
      <ul class="responsive-pricing-card-list">
        <li>Complete pricing section system</li>
        <li>Custom layouts and components</li>
        <li>Dedicated design support</li>
        <li>Scalable responsive structure</li>
      </ul>
      <div class="responsive-pricing-card-footer">
        <a class="responsive-pricing-card-button" href="#">Start Advanced</a>
        <p class="responsive-pricing-card-small">Best for scaling teams</p>
      </div>
    </article>

  </div>

</section>

CSS

.responsive-pricing-cards{
width:min(100%,1060px);
}

.responsive-pricing-cards-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.responsive-pricing-cards-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(56,189,248,.14);
border:1px solid rgba(125,211,252,.22);
color:#bae6fd;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}

.responsive-pricing-cards-title{
margin:0;
max-width:650px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.responsive-pricing-cards-title span{
background:linear-gradient(90deg,#38bdf8,#a78bfa,#34d399);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.responsive-pricing-cards-note{
max-width:300px;
margin:0;
padding:16px 18px;
border-radius:22px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.20);
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.responsive-pricing-cards-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.responsive-pricing-card{
position:relative;
display:flex;
flex-direction:column;
min-height:100%;
padding:22px;
border-radius:30px;
background:rgba(15,23,42,.78);
border:1px solid rgba(148,163,184,.24);
box-shadow:0 24px 70px rgba(0,0,0,.28);
overflow:hidden;
transition:transform .22s ease,border-color .22s ease,background .22s ease;
}

.responsive-pricing-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 42%);
opacity:.75;
pointer-events:none;
}

.responsive-pricing-card:hover{
transform:translateY(-6px);
border-color:rgba(56,189,248,.52);
background:rgba(15,23,42,.92);
}

.responsive-pricing-card.is-featured{
border-color:rgba(56,189,248,.72);
background:
linear-gradient(135deg,rgba(14,165,233,.20),rgba(124,58,237,.18)),
rgba(15,23,42,.92);
transform:translateY(-10px);
}

.responsive-pricing-card-badge{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:22px;
}

.responsive-pricing-card-badge span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.18);
color:#dbeafe;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.responsive-pricing-card-badge strong{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:999px;
background:rgba(56,189,248,.14);
color:#7dd3fc;
font-size:16px;
font-weight:950;
}

.responsive-pricing-card h3{
position:relative;
z-index:2;
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:25px;
line-height:1.18;
font-weight:950;
}

.responsive-pricing-card-desc{
position:relative;
z-index:2;
min-height:72px;
margin:0 0 22px;
color:#cbd5e1;
font-size:14px;
line-height:1.65;
}

.responsive-pricing-card-price{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:22px;
color:#ffffff;
}

.responsive-pricing-card-price strong{
font-size:48px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.responsive-pricing-card-price span{
padding-bottom:5px;
color:#94a3b8;
font-size:14px;
font-weight:800;
}

.responsive-pricing-card-list{
position:relative;
z-index:2;
display:grid;
gap:12px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.responsive-pricing-card-list li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#e2e8f0;
font-size:14px;
line-height:1.5;
font-weight:700;
}

.responsive-pricing-card-list li::before{
content:"";
flex:0 0 auto;
width:9px;
height:9px;
margin-top:6px;
border-radius:999px;
background:linear-gradient(135deg,#38bdf8,#34d399);
box-shadow:0 0 0 4px rgba(56,189,248,.10);
}

.responsive-pricing-card-footer{
position:relative;
z-index:2;
display:grid;
gap:10px;
margin-top:auto;
padding-top:20px;
border-top:1px solid rgba(148,163,184,.18);
}

.responsive-pricing-card-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
border-radius:999px;
background:#ffffff;
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease;
}

.responsive-pricing-card-button:hover{
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
transform:translateY(-2px);
box-shadow:0 18px 40px rgba(255,255,255,.16);
}

.responsive-pricing-card.is-featured .responsive-pricing-card-button{
background:linear-gradient(135deg,#38bdf8,#34d399);
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
}

.responsive-pricing-card-small{
margin:0;
color:#94a3b8;
font-size:12px;
line-height:1.5;
text-align:center;
font-weight:700;
}

@media (max-width:920px){
.responsive-pricing-cards-header{
grid-template-columns:1fr;
}

.responsive-pricing-cards-note{
max-width:100%;
}

.responsive-pricing-cards-grid{
grid-template-columns:1fr;
max-width:540px;
margin:0 auto;
}

.responsive-pricing-card.is-featured{
transform:none;
}
}

@media (max-width:640px){
.responsive-pricing-cards-title{
font-size:34px;
}

.responsive-pricing-card{
padding:20px;
border-radius:24px;
}

.responsive-pricing-card-desc{
min-height:auto;
}

.responsive-pricing-card-price strong{
font-size:40px;
}
}

This responsive pricing cards example is useful when you want a more modern and flexible pricing section than a traditional table. The card-based structure gives each plan enough space while still keeping the whole pricing section easy to compare.

3. SaaS Pricing Table

SaaS pricing tables usually need to do more than show prices. They must explain subscription tiers, guide visitors toward the best plan, and make the upgrade path clear for different business sizes.

This example uses a SaaS-style pricing section with a horizontal value summary, three subscription plans, usage-based limits, and a highlighted growth plan. It is designed for software products, AI tools, dashboards, online platforms, and subscription-based web apps.

  • Designed for SaaS products, dashboards, AI tools, and subscription platforms
  • Includes usage limits such as users, projects, storage, and automation
  • Uses a highlighted middle plan for the recommended subscription
  • Includes a short value summary above the pricing cards
  • Responsive layout works on desktop, tablet, and mobile screens
SaaS Pricing

Scale your product with flexible plans

This SaaS pricing table helps users compare subscriptions by price, usage limits, included features, and the best plan for growing teams.

14 days Free trial included with every paid plan
No setup Start instantly without onboarding fees
Cancel Change or cancel your plan anytime

Starter

For solo founders and small teams testing a new product workflow.

$19 /mo
3 Users
10GB Storage
  • Basic analytics dashboard
  • Three connected projects
  • Email support
  • Core automation tools
Start Trial
Popular

Growth

For growing SaaS teams that need more automation and better reporting.

$59 /mo
15 Users
100GB Storage
  • Advanced analytics dashboard
  • Unlimited active projects
  • Priority support
  • Automation workflows
Start Growth

Scale

For larger teams that need custom permissions, support, and higher limits.

$129 /mo
50 Users
1TB Storage
  • Custom team permissions
  • Advanced integrations
  • Dedicated support
  • Enterprise-ready workflows
Contact Sales

HTML

<section class="saas-pricing-table">

  <div class="saas-pricing-table-hero">

    <div class="saas-pricing-table-copy">
      <div class="saas-pricing-table-kicker">SaaS Pricing</div>
      <h3 class="saas-pricing-table-title">Scale your product with <span>flexible plans</span></h3>
      <p class="saas-pricing-table-text">This SaaS pricing table helps users compare subscriptions by price, usage limits, included features, and the best plan for growing teams.</p>
    </div>

    <div class="saas-pricing-table-summary">
      <div class="saas-pricing-table-summary-item">
        <strong>14 days</strong>
        <span>Free trial included with every paid plan</span>
      </div>
      <div class="saas-pricing-table-summary-item">
        <strong>No setup</strong>
        <span>Start instantly without onboarding fees</span>
      </div>
      <div class="saas-pricing-table-summary-item">
        <strong>Cancel</strong>
        <span>Change or cancel your plan anytime</span>
      </div>
    </div>

  </div>

  <div class="saas-pricing-table-grid">

    <article class="saas-pricing-plan">
      <h4 class="saas-pricing-plan-name">Starter</h4>
      <p class="saas-pricing-plan-desc">For solo founders and small teams testing a new product workflow.</p>
      <div class="saas-pricing-plan-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <div class="saas-pricing-plan-limits">
        <div class="saas-pricing-plan-limit">
          <strong>3</strong>
          <span>Users</span>
        </div>
        <div class="saas-pricing-plan-limit">
          <strong>10GB</strong>
          <span>Storage</span>
        </div>
      </div>
      <ul class="saas-pricing-plan-features">
        <li>Basic analytics dashboard</li>
        <li>Three connected projects</li>
        <li>Email support</li>
        <li>Core automation tools</li>
      </ul>
      <a class="saas-pricing-plan-button" href="#">Start Trial</a>
    </article>

    <article class="saas-pricing-plan is-recommended">
      <div class="saas-pricing-plan-ribbon">Popular</div>
      <h4 class="saas-pricing-plan-name">Growth</h4>
      <p class="saas-pricing-plan-desc">For growing SaaS teams that need more automation and better reporting.</p>
      <div class="saas-pricing-plan-price">
        <strong>$59</strong>
        <span>/mo</span>
      </div>
      <div class="saas-pricing-plan-limits">
        <div class="saas-pricing-plan-limit">
          <strong>15</strong>
          <span>Users</span>
        </div>
        <div class="saas-pricing-plan-limit">
          <strong>100GB</strong>
          <span>Storage</span>
        </div>
      </div>
      <ul class="saas-pricing-plan-features">
        <li>Advanced analytics dashboard</li>
        <li>Unlimited active projects</li>
        <li>Priority support</li>
        <li>Automation workflows</li>
      </ul>
      <a class="saas-pricing-plan-button" href="#">Start Growth</a>
    </article>

    <article class="saas-pricing-plan">
      <h4 class="saas-pricing-plan-name">Scale</h4>
      <p class="saas-pricing-plan-desc">For larger teams that need custom permissions, support, and higher limits.</p>
      <div class="saas-pricing-plan-price">
        <strong>$129</strong>
        <span>/mo</span>
      </div>
      <div class="saas-pricing-plan-limits">
        <div class="saas-pricing-plan-limit">
          <strong>50</strong>
          <span>Users</span>
        </div>
        <div class="saas-pricing-plan-limit">
          <strong>1TB</strong>
          <span>Storage</span>
        </div>
      </div>
      <ul class="saas-pricing-plan-features">
        <li>Custom team permissions</li>
        <li>Advanced integrations</li>
        <li>Dedicated support</li>
        <li>Enterprise-ready workflows</li>
      </ul>
      <a class="saas-pricing-plan-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.saas-pricing-table{
width:min(100%,1080px);
}

.saas-pricing-table-hero{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:24px;
align-items:stretch;
margin-bottom:22px;
}

.saas-pricing-table-copy{
padding:30px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 48px rgba(15,23,42,.08);
}

.saas-pricing-table-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#3730a3;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.saas-pricing-table-title{
margin:0 0 14px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.saas-pricing-table-title span{
background:linear-gradient(135deg,#4f46e5,#0891b2);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.saas-pricing-table-text{
max-width:650px;
margin:0;
color:#475569;
font-size:16px;
line-height:1.75;
}

.saas-pricing-table-summary{
display:grid;
gap:12px;
padding:18px;
border-radius:30px;
background:#0f172a;
box-shadow:0 22px 60px rgba(15,23,42,.22);
}

.saas-pricing-table-summary-item{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.saas-pricing-table-summary-item strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:24px;
line-height:1;
font-weight:950;
}

.saas-pricing-table-summary-item span{
display:block;
color:#cbd5e1;
font-size:13px;
font-weight:800;
line-height:1.5;
}

.saas-pricing-table-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.saas-pricing-plan{
position:relative;
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.09);
overflow:hidden;
}

.saas-pricing-plan.is-recommended{
border-color:rgba(79,70,229,.34);
box-shadow:0 28px 80px rgba(79,70,229,.18);
}

.saas-pricing-plan-ribbon{
position:absolute;
top:18px;
right:18px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#4f46e5;
color:#ffffff;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.saas-pricing-plan-name{
margin:0 0 8px;
padding-right:92px;
color:#0f172a;
font-size:22px;
line-height:1.2;
font-weight:950;
}

.saas-pricing-plan-desc{
min-height:66px;
margin:0 0 20px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.saas-pricing-plan-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:18px;
color:#0f172a;
}

.saas-pricing-plan-price strong{
font-size:46px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.saas-pricing-plan-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.saas-pricing-plan-limits{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.saas-pricing-plan-limit{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.saas-pricing-plan-limit strong{
display:block;
margin-bottom:3px;
color:#111827;
font-size:16px;
line-height:1;
font-weight:950;
}

.saas-pricing-plan-limit span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.4;
font-weight:800;
}

.saas-pricing-plan-features{
display:grid;
gap:11px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.saas-pricing-plan-features li{
position:relative;
margin:0;
padding-left:26px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.saas-pricing-plan-features li::before{
content:"";
position:absolute;
left:0;
top:7px;
width:10px;
height:10px;
border-radius:999px;
background:#4f46e5;
box-shadow:0 0 0 4px rgba(79,70,229,.12);
}

.saas-pricing-plan-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.saas-pricing-plan-button:hover{
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(79,70,229,.25);
}

.saas-pricing-plan.is-recommended .saas-pricing-plan-button{
background:linear-gradient(135deg,#4f46e5,#0891b2);
box-shadow:0 16px 34px rgba(79,70,229,.20);
}

@media (max-width:960px){
.saas-pricing-table-hero{
grid-template-columns:1fr;
}

.saas-pricing-table-summary{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.saas-pricing-table-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.saas-pricing-table-copy{
padding:22px;
border-radius:24px;
}

.saas-pricing-table-title{
font-size:34px;
}

.saas-pricing-table-summary{
grid-template-columns:1fr;
}

.saas-pricing-plan{
padding:20px;
border-radius:24px;
}

.saas-pricing-plan-desc{
min-height:auto;
}

.saas-pricing-plan-limits{
grid-template-columns:1fr;
}
}

This SaaS pricing table example is useful when your pricing plans include usage limits, product tiers, and subscription-based features. The layout gives users more context before they compare the individual plans.

4. Featured Plan Pricing Table

Featured plan pricing tables are useful when one plan should receive more attention than the others. This is common on SaaS websites, hosting pages, membership websites, and service-based pricing sections where the middle plan is often the best fit for most customers.

This example does not rely only on color to highlight the recommended plan. It uses a larger center card, a top label, stronger CTA placement, extra trust text, and a different layout rhythm so the featured plan feels intentionally more important.

  • Designed to guide users toward one recommended pricing plan
  • Uses scale, badge placement, CTA contrast, and content hierarchy
  • Works well for SaaS, hosting, subscriptions, and service packages
  • Middle plan receives stronger emphasis without making other plans unclear
  • Responsive layout removes the desktop offset on smaller screens
Featured Plan

Highlight the plan most users should choose

Use this pricing table when one plan is the best fit for most visitors and needs stronger visual emphasis than the other offers.

Basic

Starter

For smaller projects that need a clean launch package and essential features.

$24 /mo

Simple setup for new websites.

  • One active website
  • Basic responsive sections
  • Email support
  • Standard updates
Choose Starter
Most Popular Save 20%

Professional

For growing businesses that need better design, stronger conversion sections, and priority support.

$64 /mo

Best value for most websites.

  • Up to ten active pages
  • Conversion-focused sections
  • Priority support
  • Advanced responsive UI
Choose Professional
Advanced

Enterprise

For larger projects that need custom sections, more flexibility, and dedicated support.

$119 /mo

Built for teams and scaling brands.

  • Unlimited page sections
  • Custom pricing components
  • Dedicated support
  • Advanced design system
Contact Sales
✓ No hidden fees. Upgrade, downgrade, or cancel your plan anytime.

HTML

<section class="featured-plan-pricing">

  <div class="featured-plan-pricing-header">
    <div class="featured-plan-pricing-kicker">Featured Plan</div>
    <h3 class="featured-plan-pricing-title">Highlight the plan most users <span>should choose</span></h3>
    <p class="featured-plan-pricing-text">Use this pricing table when one plan is the best fit for most visitors and needs stronger visual emphasis than the other offers.</p>
  </div>

  <div class="featured-plan-pricing-grid">

    <article class="featured-plan-card">
      <div class="featured-plan-topline">
        <span class="featured-plan-label">Basic</span>
      </div>
      <h4 class="featured-plan-name">Starter</h4>
      <p class="featured-plan-desc">For smaller projects that need a clean launch package and essential features.</p>
      <div class="featured-plan-price">
        <strong>$24</strong>
        <span>/mo</span>
      </div>
      <p class="featured-plan-subnote">Simple setup for new websites.</p>
      <ul class="featured-plan-features">
        <li>One active website</li>
        <li>Basic responsive sections</li>
        <li>Email support</li>
        <li>Standard updates</li>
      </ul>
      <a class="featured-plan-button" href="#">Choose Starter</a>
    </article>

    <article class="featured-plan-card is-main">
      <div class="featured-plan-topline">
        <span class="featured-plan-label">Most Popular</span>
        <span class="featured-plan-save">Save 20%</span>
      </div>
      <h4 class="featured-plan-name">Professional</h4>
      <p class="featured-plan-desc">For growing businesses that need better design, stronger conversion sections, and priority support.</p>
      <div class="featured-plan-price">
        <strong>$64</strong>
        <span>/mo</span>
      </div>
      <p class="featured-plan-subnote">Best value for most websites.</p>
      <ul class="featured-plan-features">
        <li>Up to ten active pages</li>
        <li>Conversion-focused sections</li>
        <li>Priority support</li>
        <li>Advanced responsive UI</li>
      </ul>
      <a class="featured-plan-button" href="#">Choose Professional</a>
    </article>

    <article class="featured-plan-card">
      <div class="featured-plan-topline">
        <span class="featured-plan-label">Advanced</span>
      </div>
      <h4 class="featured-plan-name">Enterprise</h4>
      <p class="featured-plan-desc">For larger projects that need custom sections, more flexibility, and dedicated support.</p>
      <div class="featured-plan-price">
        <strong>$119</strong>
        <span>/mo</span>
      </div>
      <p class="featured-plan-subnote">Built for teams and scaling brands.</p>
      <ul class="featured-plan-features">
        <li>Unlimited page sections</li>
        <li>Custom pricing components</li>
        <li>Dedicated support</li>
        <li>Advanced design system</li>
      </ul>
      <a class="featured-plan-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="featured-plan-trust">
    <span>✓</span>
    No hidden fees. Upgrade, downgrade, or cancel your plan anytime.
  </div>

</section>

CSS

.featured-plan-pricing{
width:min(100%,1040px);
}

.featured-plan-pricing-header{
max-width:720px;
margin:0 auto 34px;
text-align:center;
}

.featured-plan-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.featured-plan-pricing-title{
margin:0 0 12px;
color:#111827;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.featured-plan-pricing-title span{
color:#ea580c;
}

.featured-plan-pricing-text{
max-width:650px;
margin:0 auto;
color:#57534e;
font-size:16px;
line-height:1.75;
}

.featured-plan-pricing-grid{
display:grid;
grid-template-columns:.92fr 1.16fr .92fr;
gap:18px;
align-items:center;
}

.featured-plan-card{
position:relative;
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(120,53,15,.10);
}

.featured-plan-card.is-main{
padding:30px;
border:2px solid rgba(249,115,22,.54);
box-shadow:0 30px 90px rgba(249,115,22,.22);
}

.featured-plan-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.featured-plan-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.featured-plan-card.is-main .featured-plan-label{
background:linear-gradient(135deg,#f97316,#f43f5e);
color:#ffffff;
}

.featured-plan-save{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#ecfdf5;
color:#047857;
font-size:12px;
font-weight:950;
}

.featured-plan-name{
margin:0 0 8px;
color:#111827;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.featured-plan-desc{
min-height:70px;
margin:0 0 22px;
color:#57534e;
font-size:14px;
line-height:1.65;
}

.featured-plan-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:8px;
color:#111827;
}

.featured-plan-price strong{
font-size:50px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.featured-plan-card.is-main .featured-plan-price strong{
font-size:60px;
}

.featured-plan-price span{
padding-bottom:6px;
color:#78716c;
font-size:14px;
font-weight:850;
}

.featured-plan-subnote{
margin:0 0 24px;
color:#9a3412;
font-size:13px;
font-weight:850;
line-height:1.5;
}

.featured-plan-features{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.featured-plan-features li{
position:relative;
margin:0;
padding-left:28px;
color:#292524;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.featured-plan-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#ffedd5;
color:#ea580c;
font-size:12px;
font-weight:950;
}

.featured-plan-card.is-main .featured-plan-features li::before{
background:#ea580c;
color:#ffffff;
}

.featured-plan-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#292524;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.featured-plan-button:hover{
background:#ea580c;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(249,115,22,.22);
}

.featured-plan-card.is-main .featured-plan-button{
min-height:54px;
background:linear-gradient(135deg,#f97316,#f43f5e);
box-shadow:0 16px 36px rgba(249,115,22,.24);
}

.featured-plan-trust{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:26px;
padding:14px 18px;
border-radius:999px;
background:rgba(255,255,255,.76);
border:1px solid rgba(249,115,22,.18);
color:#57534e;
font-size:14px;
line-height:1.4;
font-weight:850;
text-align:center;
}

.featured-plan-trust span{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:999px;
background:#ecfdf5;
color:#047857;
font-size:13px;
font-weight:950;
}

@media (max-width:940px){
.featured-plan-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.featured-plan-card.is-main{
padding:24px;
}
}

@media (max-width:640px){
.featured-plan-pricing-header{
text-align:left;
}

.featured-plan-pricing-title{
font-size:34px;
}

.featured-plan-card{
padding:20px;
border-radius:24px;
}

.featured-plan-card.is-main{
padding:20px;
}

.featured-plan-desc{
min-height:auto;
}

.featured-plan-card.is-main .featured-plan-price strong,
.featured-plan-price strong{
font-size:42px;
}

.featured-plan-trust{
align-items:flex-start;
border-radius:22px;
}
}

This featured plan pricing table is useful when you want to guide visitors toward the best-value plan without hiding the other options. The layout uses size, spacing, a badge, stronger CTA styling, and trust text to make the recommended plan stand out.

5. Dark Mode Pricing Table

Dark mode pricing tables work especially well for SaaS products, AI tools, developer platforms, hosting websites, dashboards, and modern landing pages. A dark pricing section can make prices, CTA buttons, badges, and plan differences feel more premium and focused.

This example uses a dark interface with a wide top intro, three pricing plans, glowing feature accents, and a bottom trust row. The structure is different from a basic pricing table because the design feels more like a premium product section than a simple card grid.

  • Perfect for SaaS, AI tools, developer products, and hosting websites
  • Uses a premium dark UI with soft glowing background accents
  • Includes a separate trust row below the pricing cards
  • Highlights the main plan with border, badge, and stronger CTA button
  • Responsive layout stacks cleanly on smaller screens
Dark Pricing UI

Premium plans for a modern product

A dark mode pricing table can make your offer feel focused, polished, and high-value while keeping plan comparison simple.

All plans include responsive components, secure hosting-ready layouts, and clean HTML/CSS structure for fast customization.
S
Start

Solo

For individual creators and small projects that need a modern pricing section.

$18 /mo
  • One active project
  • Basic pricing components
  • Email support
  • Responsive card layout
Choose Solo
P
Best Value

Professional

For growing websites that need stronger conversion sections and better design flexibility.

$58 /mo
  • Unlimited landing sections
  • Advanced pricing layouts
  • Priority support
  • Conversion-focused CTA areas
Start Professional
T
Team

Studio

For teams that need scalable layouts, reusable UI systems, and premium support.

$128 /mo
  • Team-ready design system
  • Custom pricing sections
  • Dedicated support
  • Advanced responsive layouts
Contact Sales
Secure checkout Protected payment experience for every plan.
Cancel anytime Flexible billing without long-term lock-in.
Fast setup Launch your pricing page faster with reusable CSS.

HTML

<section class="dark-mode-pricing">

  <div class="dark-mode-pricing-top">
    <div>
      <div class="dark-mode-pricing-kicker">Dark Pricing UI</div>
      <h3 class="dark-mode-pricing-title">Premium plans for a <span>modern product</span></h3>
      <p class="dark-mode-pricing-text">A dark mode pricing table can make your offer feel focused, polished, and high-value while keeping plan comparison simple.</p>
    </div>
    <div class="dark-mode-pricing-side-note">All plans include responsive components, secure hosting-ready layouts, and clean HTML/CSS structure for fast customization.</div>
  </div>

  <div class="dark-mode-pricing-grid">

    <article class="dark-mode-pricing-card">
      <div class="dark-mode-pricing-card-head">
        <div class="dark-mode-pricing-plan-icon">S</div>
        <span class="dark-mode-pricing-badge">Start</span>
      </div>
      <h3>Solo</h3>
      <p class="dark-mode-pricing-desc">For individual creators and small projects that need a modern pricing section.</p>
      <div class="dark-mode-pricing-price">
        <strong>$18</strong>
        <span>/mo</span>
      </div>
      <ul class="dark-mode-pricing-features">
        <li>One active project</li>
        <li>Basic pricing components</li>
        <li>Email support</li>
        <li>Responsive card layout</li>
      </ul>
      <a class="dark-mode-pricing-button" href="#">Choose Solo</a>
    </article>

    <article class="dark-mode-pricing-card is-featured">
      <div class="dark-mode-pricing-card-head">
        <div class="dark-mode-pricing-plan-icon">P</div>
        <span class="dark-mode-pricing-badge">Best Value</span>
      </div>
      <h3>Professional</h3>
      <p class="dark-mode-pricing-desc">For growing websites that need stronger conversion sections and better design flexibility.</p>
      <div class="dark-mode-pricing-price">
        <strong>$58</strong>
        <span>/mo</span>
      </div>
      <ul class="dark-mode-pricing-features">
        <li>Unlimited landing sections</li>
        <li>Advanced pricing layouts</li>
        <li>Priority support</li>
        <li>Conversion-focused CTA areas</li>
      </ul>
      <a class="dark-mode-pricing-button" href="#">Start Professional</a>
    </article>

    <article class="dark-mode-pricing-card">
      <div class="dark-mode-pricing-card-head">
        <div class="dark-mode-pricing-plan-icon">T</div>
        <span class="dark-mode-pricing-badge">Team</span>
      </div>
      <h3>Studio</h3>
      <p class="dark-mode-pricing-desc">For teams that need scalable layouts, reusable UI systems, and premium support.</p>
      <div class="dark-mode-pricing-price">
        <strong>$128</strong>
        <span>/mo</span>
      </div>
      <ul class="dark-mode-pricing-features">
        <li>Team-ready design system</li>
        <li>Custom pricing sections</li>
        <li>Dedicated support</li>
        <li>Advanced responsive layouts</li>
      </ul>
      <a class="dark-mode-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="dark-mode-pricing-trust">
    <div class="dark-mode-pricing-trust-item">
      <strong>Secure checkout</strong>
      Protected payment experience for every plan.
    </div>
    <div class="dark-mode-pricing-trust-item">
      <strong>Cancel anytime</strong>
      Flexible billing without long-term lock-in.
    </div>
    <div class="dark-mode-pricing-trust-item">
      <strong>Fast setup</strong>
      Launch your pricing page faster with reusable CSS.
    </div>
  </div>

</section>

CSS

.dark-mode-pricing{
width:min(100%,1080px);
}

.dark-mode-pricing-top{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:24px;
align-items:end;
margin-bottom:26px;
}

.dark-mode-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(129,140,248,.14);
border:1px solid rgba(165,180,252,.22);
color:#c7d2fe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.dark-mode-pricing-title{
margin:0 0 14px;
max-width:720px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.dark-mode-pricing-title span{
background:linear-gradient(90deg,#60a5fa,#c084fc,#22d3ee);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.dark-mode-pricing-text{
max-width:650px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.dark-mode-pricing-side-note{
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.22);
color:#dbeafe;
font-size:14px;
line-height:1.65;
font-weight:750;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.dark-mode-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.dark-mode-pricing-card{
position:relative;
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:rgba(15,23,42,.78);
border:1px solid rgba(148,163,184,.22);
box-shadow:0 24px 80px rgba(0,0,0,.28);
overflow:hidden;
}

.dark-mode-pricing-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 42%);
opacity:.7;
pointer-events:none;
}

.dark-mode-pricing-card.is-featured{
border-color:rgba(96,165,250,.72);
background:
linear-gradient(135deg,rgba(37,99,235,.22),rgba(124,58,237,.18)),
rgba(15,23,42,.94);
box-shadow:0 30px 90px rgba(37,99,235,.20);
}

.dark-mode-pricing-card-head{
position:relative;
z-index:2;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:22px;
}

.dark-mode-pricing-plan-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:16px;
background:rgba(96,165,250,.14);
border:1px solid rgba(147,197,253,.20);
color:#93c5fd;
font-size:20px;
font-weight:950;
}

.dark-mode-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.dark-mode-pricing-card.is-featured .dark-mode-pricing-badge{
background:linear-gradient(135deg,#60a5fa,#a78bfa);
color:#020617;
}

.dark-mode-pricing-card h3{
position:relative;
z-index:2;
margin:0 0 9px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.dark-mode-pricing-desc{
position:relative;
z-index:2;
min-height:70px;
margin:0 0 22px;
color:#cbd5e1;
font-size:14px;
line-height:1.65;
}

.dark-mode-pricing-price{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:22px;
color:#ffffff;
}

.dark-mode-pricing-price strong{
font-size:50px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.dark-mode-pricing-price span{
padding-bottom:5px;
color:#94a3b8;
font-size:14px;
font-weight:850;
}

.dark-mode-pricing-features{
position:relative;
z-index:2;
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.dark-mode-pricing-features li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#e2e8f0;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.dark-mode-pricing-features li::before{
content:"";
flex:0 0 auto;
width:18px;
height:18px;
margin-top:1px;
border-radius:999px;
background:
radial-gradient(circle at center,#ffffff 0 2px,transparent 3px),
linear-gradient(135deg,#60a5fa,#a78bfa);
box-shadow:0 0 0 4px rgba(96,165,250,.10);
}

.dark-mode-pricing-button{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin-top:auto;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.dark-mode-pricing-button:hover{
background:rgba(255,255,255,.16);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(0,0,0,.28);
}

.dark-mode-pricing-card.is-featured .dark-mode-pricing-button{
background:linear-gradient(135deg,#60a5fa,#a78bfa);
border-color:transparent;
color:#020617 !important;
-webkit-text-fill-color:#020617 !important;
}

.dark-mode-pricing-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:18px;
}

.dark-mode-pricing-trust-item{
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.06);
border:1px solid rgba(148,163,184,.18);
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:800;
}

.dark-mode-pricing-trust-item strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:15px;
font-weight:950;
}

@media (max-width:960px){
.dark-mode-pricing-top{
grid-template-columns:1fr;
}

.dark-mode-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.dark-mode-pricing-trust{
grid-template-columns:1fr;
max-width:560px;
margin-left:auto;
margin-right:auto;
}
}

@media (max-width:640px){
.dark-mode-pricing-title{
font-size:34px;
}

.dark-mode-pricing-card{
padding:20px;
border-radius:24px;
}

.dark-mode-pricing-desc{
min-height:auto;
}

.dark-mode-pricing-price strong{
font-size:42px;
}
}

This dark mode pricing table is a strong choice for modern digital products where the pricing section should feel premium. The layout combines strong contrast, glowing accents, clear CTA buttons, and trust signals without making the comparison harder to read.

6. Gradient Pricing Cards

Gradient pricing cards are useful when you want a pricing section to feel more energetic, visual, and brand-driven. Instead of using only plain white cards, each plan has a gradient header area that separates the plan identity from the feature list.

This example uses a split card structure: a gradient top section for the plan name and price, and a clean white lower section for features and the CTA. This makes the pricing cards easy to scan while still creating a more memorable visual design.

  • Uses gradient card headers instead of plain pricing cards
  • Separates price, plan identity, features, and CTA into clear zones
  • Works well for creative services, SaaS plans, and app landing pages
  • Each pricing card has a unique visual identity without changing the layout logic
  • Responsive grid stacks into readable cards on mobile screens
Gradient Cards

Make each plan feel distinct and memorable

Gradient headers help separate plan identity from feature details while keeping the pricing cards easy to compare.

Creative 01

Launch

For creators and small brands that need a polished first pricing page.

$25 /mo
  • Responsive pricing section
  • Three editable pricing cards
  • Clean CSS structure
  • Basic CTA styling
Choose Launch
Business 02

Growth

For businesses that want a stronger pricing section with clearer conversion focus.

$75 /mo
  • Advanced feature layout
  • Highlighted CTA button
  • Trust-focused copy blocks
  • Mobile-friendly structure
Choose Growth
Premium 03

Scale

For teams that need more visual impact and a scalable pricing card system.

$135 /mo
  • Reusable card components
  • Premium gradient styling
  • Custom pricing content
  • Priority design support
Choose Scale

HTML

<section class="gradient-pricing-cards">

  <div class="gradient-pricing-cards-header">
    <div>
      <div class="gradient-pricing-cards-kicker">Gradient Cards</div>
      <h3 class="gradient-pricing-cards-title">Make each plan feel <span>distinct and memorable</span></h3>
    </div>
    <p class="gradient-pricing-cards-note">Gradient headers help separate plan identity from feature details while keeping the pricing cards easy to compare.</p>
  </div>

  <div class="gradient-pricing-cards-grid">

    <article class="gradient-pricing-card is-pink">
      <div class="gradient-pricing-card-top">
        <div>
          <div class="gradient-pricing-card-label">
            <span>Creative</span>
            <strong>01</strong>
          </div>
          <h3>Launch</h3>
          <p class="gradient-pricing-card-desc">For creators and small brands that need a polished first pricing page.</p>
        </div>
        <div class="gradient-pricing-card-price">
          <strong>$25</strong>
          <span>/mo</span>
        </div>
      </div>
      <div class="gradient-pricing-card-bottom">
        <ul class="gradient-pricing-card-features">
          <li>Responsive pricing section</li>
          <li>Three editable pricing cards</li>
          <li>Clean CSS structure</li>
          <li>Basic CTA styling</li>
        </ul>
        <a class="gradient-pricing-card-button" href="#">Choose Launch</a>
      </div>
    </article>

    <article class="gradient-pricing-card is-blue">
      <div class="gradient-pricing-card-top">
        <div>
          <div class="gradient-pricing-card-label">
            <span>Business</span>
            <strong>02</strong>
          </div>
          <h3>Growth</h3>
          <p class="gradient-pricing-card-desc">For businesses that want a stronger pricing section with clearer conversion focus.</p>
        </div>
        <div class="gradient-pricing-card-price">
          <strong>$75</strong>
          <span>/mo</span>
        </div>
      </div>
      <div class="gradient-pricing-card-bottom">
        <ul class="gradient-pricing-card-features">
          <li>Advanced feature layout</li>
          <li>Highlighted CTA button</li>
          <li>Trust-focused copy blocks</li>
          <li>Mobile-friendly structure</li>
        </ul>
        <a class="gradient-pricing-card-button" href="#">Choose Growth</a>
      </div>
    </article>

    <article class="gradient-pricing-card is-purple">
      <div class="gradient-pricing-card-top">
        <div>
          <div class="gradient-pricing-card-label">
            <span>Premium</span>
            <strong>03</strong>
          </div>
          <h3>Scale</h3>
          <p class="gradient-pricing-card-desc">For teams that need more visual impact and a scalable pricing card system.</p>
        </div>
        <div class="gradient-pricing-card-price">
          <strong>$135</strong>
          <span>/mo</span>
        </div>
      </div>
      <div class="gradient-pricing-card-bottom">
        <ul class="gradient-pricing-card-features">
          <li>Reusable card components</li>
          <li>Premium gradient styling</li>
          <li>Custom pricing content</li>
          <li>Priority design support</li>
        </ul>
        <a class="gradient-pricing-card-button" href="#">Choose Scale</a>
      </div>
    </article>

  </div>

</section>

CSS

.gradient-pricing-cards{
width:min(100%,1060px);
}

.gradient-pricing-cards-header{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.gradient-pricing-cards-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fce7f3;
color:#be185d;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.gradient-pricing-cards-title{
max-width:720px;
margin:0;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.gradient-pricing-cards-title span{
background:linear-gradient(135deg,#ec4899,#7c3aed,#0ea5e9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.gradient-pricing-cards-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.gradient-pricing-cards-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.gradient-pricing-card{
display:flex;
flex-direction:column;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.10);
overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease;
}

.gradient-pricing-card:hover{
transform:translateY(-6px);
box-shadow:0 30px 80px rgba(15,23,42,.14);
}

.gradient-pricing-card-top{
position:relative;
padding:26px;
min-height:230px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
}

.gradient-pricing-card-top::before{
content:"";
position:absolute;
inset:auto -40px -70px auto;
width:160px;
height:160px;
border-radius:999px;
background:rgba(255,255,255,.16);
pointer-events:none;
}

.gradient-pricing-card.is-pink .gradient-pricing-card-top{
background:linear-gradient(135deg,#ec4899,#f97316);
}

.gradient-pricing-card.is-blue .gradient-pricing-card-top{
background:linear-gradient(135deg,#2563eb,#06b6d4);
}

.gradient-pricing-card.is-purple .gradient-pricing-card-top{
background:linear-gradient(135deg,#7c3aed,#db2777);
}

.gradient-pricing-card-label{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:26px;
}

.gradient-pricing-card-label span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
color:#ffffff;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.gradient-pricing-card-label strong{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:999px;
background:rgba(255,255,255,.18);
color:#ffffff;
font-size:15px;
font-weight:950;
}

.gradient-pricing-card h3{
position:relative;
z-index:2;
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:26px;
line-height:1.15;
font-weight:950;
}

.gradient-pricing-card-desc{
position:relative;
z-index:2;
margin:0;
color:rgba(255,255,255,.86);
font-size:14px;
line-height:1.6;
font-weight:650;
}

.gradient-pricing-card-price{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:7px;
margin-top:24px;
color:#ffffff;
}

.gradient-pricing-card-price strong{
font-size:52px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.gradient-pricing-card-price span{
padding-bottom:5px;
color:rgba(255,255,255,.78);
font-size:14px;
font-weight:850;
}

.gradient-pricing-card-bottom{
display:flex;
flex-direction:column;
flex:1;
padding:24px;
}

.gradient-pricing-card-features{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.gradient-pricing-card-features li{
position:relative;
margin:0;
padding-left:28px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.gradient-pricing-card-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#f1f5f9;
color:#2563eb;
font-size:12px;
font-weight:950;
}

.gradient-pricing-card-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease;
}

.gradient-pricing-card.is-pink .gradient-pricing-card-button{
background:linear-gradient(135deg,#ec4899,#f97316);
box-shadow:0 16px 34px rgba(236,72,153,.20);
}

.gradient-pricing-card.is-blue .gradient-pricing-card-button{
background:linear-gradient(135deg,#2563eb,#06b6d4);
box-shadow:0 16px 34px rgba(37,99,235,.20);
}

.gradient-pricing-card.is-purple .gradient-pricing-card-button{
background:linear-gradient(135deg,#7c3aed,#db2777);
box-shadow:0 16px 34px rgba(124,58,237,.20);
}

.gradient-pricing-card-button:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 20px 42px rgba(15,23,42,.18);
}

@media (max-width:920px){
.gradient-pricing-cards-header{
grid-template-columns:1fr;
}

.gradient-pricing-cards-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.gradient-pricing-cards-title{
font-size:34px;
}

.gradient-pricing-card{
border-radius:24px;
}

.gradient-pricing-card-top,
.gradient-pricing-card-bottom{
padding:22px;
}

.gradient-pricing-card-top{
min-height:210px;
}

.gradient-pricing-card-price strong{
font-size:42px;
}
}

This gradient pricing cards example is useful when your pricing section needs more visual energy without losing clarity. The split-card structure keeps the plan identity and price visually strong while keeping the features and CTA easy to read.

7. Glassmorphism Pricing Table

Glassmorphism pricing tables are useful when you want a pricing section that feels modern, soft, and layered. Instead of using standard solid cards, this design uses translucent panels, blurred backgrounds, subtle borders, and floating depth.

This example uses a split pricing layout: the left side explains the offer and includes trust points, while the right side displays stacked pricing plans inside glass-style panels. This makes the design feel different from a normal three-column pricing card layout.

  • Uses a split glassmorphism layout instead of a standard card grid
  • Left panel explains the offer and builds trust before the pricing choices
  • Right panel uses stacked pricing rows with translucent glass effects
  • Featured plan is highlighted with position, glow, and stronger CTA styling
  • Responsive layout stacks naturally on mobile without losing readability
Glass Pricing

Transparent pricing with a premium feel

Use this glassmorphism pricing table when you want a modern pricing section with depth, trust, and a softer visual style.

✓
No hidden fees Every plan shows the main price and included features clearly.
✓
Cancel anytime Flexible billing makes the pricing section feel safer to click.

Starter Glass

Small teams

A simple plan for small websites, portfolio projects, and early-stage landing pages.

3 pages Email support Basic UI
$19 per month
Choose

Growth Glass

Recommended

The best choice for modern websites that need better conversion sections and more flexible pricing UI.

12 pages Priority support Advanced UI
$59 per month
Start now

Scale Glass

Custom

A flexible plan for larger websites, product pages, and custom pricing section requirements.

Unlimited pages Custom support Design system
$129 per month
Contact

HTML

<section class="glass-pricing">

  <div class="glass-pricing-shell">

    <div class="glass-pricing-intro">
      <div>
        <div class="glass-pricing-kicker">Glass Pricing</div>
        <h3 class="glass-pricing-title">Transparent pricing with a <span>premium feel</span></h3>
        <p class="glass-pricing-text">Use this glassmorphism pricing table when you want a modern pricing section with depth, trust, and a softer visual style.</p>
      </div>

      <div class="glass-pricing-proof">
        <div class="glass-pricing-proof-item">
          <span class="glass-pricing-proof-icon">✓</span>
          <div>
            <strong>No hidden fees</strong>
            <span>Every plan shows the main price and included features clearly.</span>
          </div>
        </div>

        <div class="glass-pricing-proof-item">
          <span class="glass-pricing-proof-icon">✓</span>
          <div>
            <strong>Cancel anytime</strong>
            <span>Flexible billing makes the pricing section feel safer to click.</span>
          </div>
        </div>
      </div>
    </div>

    <div class="glass-pricing-list">

      <article class="glass-pricing-row">
        <div class="glass-pricing-row-main">
          <div class="glass-pricing-row-top">
            <h3>Starter Glass</h3>
            <span class="glass-pricing-tag">Small teams</span>
          </div>
          <p>A simple plan for small websites, portfolio projects, and early-stage landing pages.</p>
          <div class="glass-pricing-meta">
            <span>3 pages</span>
            <span>Email support</span>
            <span>Basic UI</span>
          </div>
        </div>
        <div class="glass-pricing-row-side">
          <div class="glass-pricing-price">
            <strong>$19</strong>
            <span>per month</span>
          </div>
          <a class="glass-pricing-button" href="#">Choose</a>
        </div>
      </article>

      <article class="glass-pricing-row is-featured">
        <div class="glass-pricing-row-main">
          <div class="glass-pricing-row-top">
            <h3>Growth Glass</h3>
            <span class="glass-pricing-tag">Recommended</span>
          </div>
          <p>The best choice for modern websites that need better conversion sections and more flexible pricing UI.</p>
          <div class="glass-pricing-meta">
            <span>12 pages</span>
            <span>Priority support</span>
            <span>Advanced UI</span>
          </div>
        </div>
        <div class="glass-pricing-row-side">
          <div class="glass-pricing-price">
            <strong>$59</strong>
            <span>per month</span>
          </div>
          <a class="glass-pricing-button" href="#">Start now</a>
        </div>
      </article>

      <article class="glass-pricing-row">
        <div class="glass-pricing-row-main">
          <div class="glass-pricing-row-top">
            <h3>Scale Glass</h3>
            <span class="glass-pricing-tag">Custom</span>
          </div>
          <p>A flexible plan for larger websites, product pages, and custom pricing section requirements.</p>
          <div class="glass-pricing-meta">
            <span>Unlimited pages</span>
            <span>Custom support</span>
            <span>Design system</span>
          </div>
        </div>
        <div class="glass-pricing-row-side">
          <div class="glass-pricing-price">
            <strong>$129</strong>
            <span>per month</span>
          </div>
          <a class="glass-pricing-button" href="#">Contact</a>
        </div>
      </article>

    </div>

  </div>

</section>

CSS

.glass-pricing{
width:min(100%,1060px);
position:relative;
}

.glass-pricing-shell{
display:grid;
grid-template-columns:.95fr 1.25fr;
gap:22px;
padding:22px;
border-radius:36px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
box-shadow:
0 34px 100px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter:blur(22px);
}

.glass-pricing-intro{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:520px;
padding:28px;
border-radius:28px;
background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.14);
}

.glass-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(125,211,252,.14);
border:1px solid rgba(125,211,252,.24);
color:#bae6fd;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.glass-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.glass-pricing-title span{
background:linear-gradient(90deg,#7dd3fc,#c4b5fd,#86efac);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.glass-pricing-text{
margin:0;
color:#dbeafe;
font-size:16px;
line-height:1.75;
}

.glass-pricing-proof{
display:grid;
gap:12px;
margin-top:30px;
}

.glass-pricing-proof-item{
display:flex;
gap:12px;
align-items:flex-start;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.glass-pricing-proof-icon{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:30px;
height:30px;
border-radius:999px;
background:rgba(34,197,94,.14);
color:#86efac;
font-size:14px;
font-weight:950;
}

.glass-pricing-proof-item strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:14px;
font-weight:950;
}

.glass-pricing-proof-item span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.45;
font-weight:700;
}

.glass-pricing-list{
display:grid;
gap:14px;
align-content:center;
}

.glass-pricing-row{
position:relative;
display:grid;
grid-template-columns:1fr auto;
gap:18px;
align-items:center;
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
transition:transform .22s ease,border-color .22s ease,background .22s ease;
}

.glass-pricing-row:hover{
transform:translateX(4px);
background:rgba(255,255,255,.14);
border-color:rgba(125,211,252,.34);
}

.glass-pricing-row.is-featured{
padding:24px;
background:
linear-gradient(135deg,rgba(14,165,233,.24),rgba(168,85,247,.18)),
rgba(255,255,255,.12);
border-color:rgba(125,211,252,.48);
box-shadow:
0 24px 70px rgba(14,165,233,.18),
inset 0 1px 0 rgba(255,255,255,.12);
}

.glass-pricing-row-main{
min-width:0;
}

.glass-pricing-row-top{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin-bottom:10px;
}

.glass-pricing-row h3{
margin:0;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.2;
font-weight:950;
}

.glass-pricing-tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.12);
color:#dbeafe;
font-size:11px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.glass-pricing-row.is-featured .glass-pricing-tag{
background:#ffffff;
color:#0f172a;
}

.glass-pricing-row p{
margin:0;
max-width:440px;
color:#cbd5e1;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.glass-pricing-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}

.glass-pricing-meta span{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
background:rgba(15,23,42,.28);
color:#e0f2fe;
font-size:12px;
font-weight:800;
}

.glass-pricing-row-side{
display:grid;
justify-items:end;
gap:12px;
min-width:150px;
}

.glass-pricing-price{
text-align:right;
color:#ffffff;
}

.glass-pricing-price strong{
display:block;
font-size:38px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.glass-pricing-price span{
display:block;
margin-top:6px;
color:#cbd5e1;
font-size:13px;
font-weight:850;
}

.glass-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.14);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:13px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}

.glass-pricing-button:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
background:rgba(255,255,255,.18);
transform:translateY(-2px);
}

.glass-pricing-row.is-featured .glass-pricing-button{
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
border-color:#ffffff;
}

@media (max-width:940px){
.glass-pricing-shell{
grid-template-columns:1fr;
}

.glass-pricing-intro{
min-height:auto;
}

.glass-pricing-row{
grid-template-columns:1fr;
}

.glass-pricing-row-side{
justify-items:start;
min-width:0;
}

.glass-pricing-price{
text-align:left;
}
}

@media (max-width:640px){
.glass-pricing-shell{
padding:14px;
border-radius:28px;
}

.glass-pricing-intro{
padding:22px;
border-radius:22px;
}

.glass-pricing-title{
font-size:34px;
}

.glass-pricing-row,
.glass-pricing-row.is-featured{
padding:18px;
border-radius:22px;
}

.glass-pricing-price strong{
font-size:34px;
}
}

This glassmorphism pricing table is useful when you want a pricing section that feels more layered than a standard card grid. The split structure makes the offer explanation, trust points, and pricing choices feel connected inside one premium interface.

8. Minimal Pricing Table

Minimal pricing tables are useful when clarity matters more than decoration. This type of pricing layout works well for consultants, agencies, freelancers, productized services, and simple SaaS offers where users need to compare plans quickly.

This example avoids large pricing cards completely. Instead, it uses a clean horizontal pricing list where each plan appears as a structured row. The result feels closer to a premium service menu or editorial comparison layout than a typical pricing card section.

  • Uses horizontal pricing rows instead of traditional pricing cards
  • Best for clean websites, service menus, consultants, and agencies
  • Creates a minimalist pricing section with strong typography and spacing
  • Each row includes plan details, key features, price, and CTA button
  • Mobile layout stacks each row into a compact readable pricing block

Minimal Pricing

Simple plans, clear details, no visual noise.

A minimal pricing table works best when visitors need to compare practical service packages without heavy decoration or complex card layouts.

Essential

For simple websites and early-stage service pages.

  • Landing page
  • Responsive CSS
  • Basic sections
$300 one-time
Select

Business

For growing brands that need a stronger conversion-focused website.

  • Multi-page layout
  • Pricing section
  • CTA system
  • SEO structure
$900 one-time
Select

Custom

For larger websites, special UI components, and custom integrations.

  • Custom design
  • Advanced layouts
  • Priority support
Quote project-based
Contact

HTML

<section class="minimal-pricing-table">

  <div class="minimal-pricing-table-header">
    <div>
      <p class="minimal-pricing-table-kicker">Minimal Pricing</p>
      <h3 class="minimal-pricing-table-title">Simple plans, clear details, no visual noise.</h3>
    </div>
    <p class="minimal-pricing-table-note">A minimal pricing table works best when visitors need to compare practical service packages without heavy decoration or complex card layouts.</p>
  </div>

  <div class="minimal-pricing-rows">

    <article class="minimal-pricing-row">
      <div class="minimal-pricing-plan">
        <h3>Essential</h3>
        <p>For simple websites and early-stage service pages.</p>
      </div>
      <ul class="minimal-pricing-features">
        <li>Landing page</li>
        <li>Responsive CSS</li>
        <li>Basic sections</li>
      </ul>
      <div class="minimal-pricing-price">
        <strong>$300</strong>
        <span>one-time</span>
      </div>
      <a class="minimal-pricing-button" href="#">Select</a>
    </article>

    <article class="minimal-pricing-row is-highlighted">
      <div class="minimal-pricing-plan">
        <h3>Business</h3>
        <p>For growing brands that need a stronger conversion-focused website.</p>
      </div>
      <ul class="minimal-pricing-features">
        <li>Multi-page layout</li>
        <li>Pricing section</li>
        <li>CTA system</li>
        <li>SEO structure</li>
      </ul>
      <div class="minimal-pricing-price">
        <strong>$900</strong>
        <span>one-time</span>
      </div>
      <a class="minimal-pricing-button" href="#">Select</a>
    </article>

    <article class="minimal-pricing-row">
      <div class="minimal-pricing-plan">
        <h3>Custom</h3>
        <p>For larger websites, special UI components, and custom integrations.</p>
      </div>
      <ul class="minimal-pricing-features">
        <li>Custom design</li>
        <li>Advanced layouts</li>
        <li>Priority support</li>
      </ul>
      <div class="minimal-pricing-price">
        <strong>Quote</strong>
        <span>project-based</span>
      </div>
      <a class="minimal-pricing-button" href="#">Contact</a>
    </article>

  </div>

</section>

CSS

.minimal-pricing-table{
width:min(100%,1060px);
padding:34px;
border-radius:0;
background:#ffffff;
border:1px solid rgba(28,25,23,.10);
box-shadow:0 24px 70px rgba(28,25,23,.08);
}

.minimal-pricing-table-header{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:34px;
align-items:end;
padding-bottom:30px;
border-bottom:1px solid rgba(28,25,23,.14);
}

.minimal-pricing-table-kicker{
margin:0 0 12px;
color:#78716c;
font-size:12px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
}

.minimal-pricing-table-title{
margin:0;
max-width:650px;
color:#1c1917;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
}

.minimal-pricing-table-note{
margin:0;
color:#57534e;
font-size:15px;
line-height:1.7;
font-weight:650;
}

.minimal-pricing-rows{
display:grid;
}

.minimal-pricing-row{
display:grid;
grid-template-columns:1.05fr 1.25fr 170px 150px;
gap:22px;
align-items:center;
padding:28px 0;
border-bottom:1px solid rgba(28,25,23,.12);
}

.minimal-pricing-row:last-child{
border-bottom:0;
padding-bottom:0;
}

.minimal-pricing-plan{
min-width:0;
}

.minimal-pricing-plan h3{
margin:0 0 8px;
color:#1c1917;
font-size:24px;
line-height:1.18;
font-weight:950;
letter-spacing:-.025em;
}

.minimal-pricing-plan p{
margin:0;
max-width:260px;
color:#78716c;
font-size:14px;
line-height:1.55;
font-weight:650;
}

.minimal-pricing-features{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0;
padding:0;
list-style:none;
}

.minimal-pricing-features li{
display:inline-flex;
align-items:center;
margin:0;
padding:8px 10px;
border-radius:999px;
background:#f5f5f4;
color:#44403c;
font-size:12px;
line-height:1;
font-weight:850;
}

.minimal-pricing-price{
text-align:right;
color:#1c1917;
}

.minimal-pricing-price strong{
display:block;
font-size:36px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.minimal-pricing-price span{
display:block;
margin-top:5px;
color:#78716c;
font-size:13px;
font-weight:800;
}

.minimal-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 18px;
border-radius:0;
background:#1c1917;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:900;
line-height:1;
text-decoration:none !important;
transition:background .22s ease,transform .22s ease;
}

.minimal-pricing-button:hover{
background:#57534e;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
}

.minimal-pricing-row.is-highlighted{
position:relative;
}

.minimal-pricing-row.is-highlighted::before{
content:"Recommended";
position:absolute;
top:18px;
left:0;
transform:translateY(-50%);
padding:6px 9px;
background:#1c1917;
color:#ffffff;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.minimal-pricing-row.is-highlighted .minimal-pricing-plan h3{
padding-top:10px;
}

@media (max-width:960px){
.minimal-pricing-table-header{
grid-template-columns:1fr;
gap:16px;
}

.minimal-pricing-row{
grid-template-columns:1fr;
gap:16px;
align-items:start;
}

.minimal-pricing-plan p{
max-width:100%;
}

.minimal-pricing-price{
text-align:left;
}

.minimal-pricing-button{
width:max-content;
}
}

@media (max-width:640px){
.minimal-pricing-table{
padding:24px;
}

.minimal-pricing-table-title{
font-size:34px;
}

.minimal-pricing-row{
padding:26px 0;
}

.minimal-pricing-button{
width:100%;
}

.minimal-pricing-row.is-highlighted::before{
position:static;
display:inline-flex;
width:max-content;
margin-bottom:12px;
transform:none;
}
}

This minimal pricing table is useful when you want pricing to feel direct, editorial, and professional. The horizontal row structure is especially helpful for service pricing, consultant packages, and simple offers where a heavy card design would feel unnecessary.

9. Pricing Table with Monthly/Yearly Toggle

Pricing tables with monthly and yearly toggles are common on SaaS websites, subscription platforms, AI tools, hosting pages, and membership websites. They let visitors compare short-term and long-term billing without leaving the pricing section.

This example uses a centered pricing switch, dynamic prices, annual savings labels, and a balanced three-plan layout. Unlike a static pricing table, the JavaScript updates the visible price and billing period when users switch between monthly and yearly billing.

  • Includes a monthly/yearly pricing toggle
  • Uses JavaScript to update prices and billing labels
  • Shows annual savings badges for yearly plans
  • Useful for SaaS, memberships, hosting, and subscription products
  • Responsive layout keeps the toggle and pricing cards clear on mobile
Billing Toggle

Switch between monthly and yearly pricing

A pricing toggle helps visitors compare subscription plans and see how much they can save with annual billing.

Billing:
Save up to 20%

Starter

For simple projects, personal sites, and early product ideas.

$19 /mo

  • One project workspace
  • Basic pricing UI components
  • Email support
  • Responsive layout
Start Starter

Growth

Popular

For growing websites that need more sections, better UX, and stronger conversion elements.

$59 /mo

  • Unlimited website sections
  • Advanced pricing layouts
  • Priority support
  • CTA-focused components
Start Growth

Scale

For teams, larger websites, advanced landing pages, and custom UI systems.

$129 /mo

  • Custom pricing sections
  • Reusable design system
  • Dedicated support
  • Advanced responsive UI
Contact Sales

HTML

<section class="toggle-pricing" data-billing="monthly">

  <div class="toggle-pricing-header">
    <div class="toggle-pricing-kicker">Billing Toggle</div>
    <h3 class="toggle-pricing-title">Switch between <span>monthly and yearly</span> pricing</h3>
    <p class="toggle-pricing-text">A pricing toggle helps visitors compare subscription plans and see how much they can save with annual billing.</p>
  </div>

  <div class="toggle-pricing-switch-wrap">
    <span class="toggle-pricing-switch-label">Billing:</span>
    <div class="toggle-pricing-switch" role="group" aria-label="Billing period">
      <button class="toggle-pricing-monthly" type="button">Monthly</button>
      <button class="toggle-pricing-yearly" type="button">Yearly</button>
    </div>
    <span class="toggle-pricing-save">Save up to 20%</span>
  </div>

  <div class="toggle-pricing-grid">

    <article class="toggle-pricing-card">
      <div class="toggle-pricing-card-top">
        <h3>Starter</h3>
      </div>
      <p class="toggle-pricing-card-desc">For simple projects, personal sites, and early product ideas.</p>
      <div class="toggle-pricing-price">
        <strong data-monthly="19" data-yearly="15">$19</strong>
        <span data-period>/mo</span>
      </div>
      <p class="toggle-pricing-year-note" data-note></p>
      <ul class="toggle-pricing-features">
        <li>One project workspace</li>
        <li>Basic pricing UI components</li>
        <li>Email support</li>
        <li>Responsive layout</li>
      </ul>
      <a class="toggle-pricing-button" href="#">Start Starter</a>
    </article>

    <article class="toggle-pricing-card is-featured">
      <div class="toggle-pricing-card-top">
        <h3>Growth</h3>
        <span class="toggle-pricing-badge">Popular</span>
      </div>
      <p class="toggle-pricing-card-desc">For growing websites that need more sections, better UX, and stronger conversion elements.</p>
      <div class="toggle-pricing-price">
        <strong data-monthly="59" data-yearly="47">$59</strong>
        <span data-period>/mo</span>
      </div>
      <p class="toggle-pricing-year-note" data-note></p>
      <ul class="toggle-pricing-features">
        <li>Unlimited website sections</li>
        <li>Advanced pricing layouts</li>
        <li>Priority support</li>
        <li>CTA-focused components</li>
      </ul>
      <a class="toggle-pricing-button" href="#">Start Growth</a>
    </article>

    <article class="toggle-pricing-card">
      <div class="toggle-pricing-card-top">
        <h3>Scale</h3>
      </div>
      <p class="toggle-pricing-card-desc">For teams, larger websites, advanced landing pages, and custom UI systems.</p>
      <div class="toggle-pricing-price">
        <strong data-monthly="129" data-yearly="103">$129</strong>
        <span data-period>/mo</span>
      </div>
      <p class="toggle-pricing-year-note" data-note></p>
      <ul class="toggle-pricing-features">
        <li>Custom pricing sections</li>
        <li>Reusable design system</li>
        <li>Dedicated support</li>
        <li>Advanced responsive UI</li>
      </ul>
      <a class="toggle-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.toggle-pricing{
width:min(100%,1060px);
}

.toggle-pricing-header{
max-width:720px;
margin:0 auto 24px;
text-align:center;
}

.toggle-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.toggle-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.toggle-pricing-title span{
background:linear-gradient(135deg,#2563eb,#10b981);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.toggle-pricing-text{
max-width:620px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
}

.toggle-pricing-switch-wrap{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin:0 0 28px;
}

.toggle-pricing-switch-label{
color:#334155;
font-size:14px;
font-weight:900;
}

.toggle-pricing-switch{
position:relative;
display:inline-grid;
grid-template-columns:1fr 1fr;
width:260px;
padding:6px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 38px rgba(15,23,42,.10);
}

.toggle-pricing-switch::before{
content:"";
position:absolute;
top:6px;
left:6px;
width:calc(50% - 6px);
height:calc(100% - 12px);
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#10b981);
box-shadow:0 10px 24px rgba(37,99,235,.22);
transition:transform .24s ease;
}

.toggle-pricing.is-yearly .toggle-pricing-switch::before{
transform:translateX(100%);
}

.toggle-pricing-switch button{
position:relative;
z-index:2;
cursor:pointer;
border:0;
background:transparent;
min-height:42px;
border-radius:999px;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1;
}

.toggle-pricing:not(.is-yearly) .toggle-pricing-monthly,
.toggle-pricing.is-yearly .toggle-pricing-yearly{
color:#ffffff;
}

.toggle-pricing-save{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
white-space:nowrap;
}

.toggle-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.toggle-pricing-card{
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.09);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.toggle-pricing-card:hover{
transform:translateY(-5px);
box-shadow:0 28px 70px rgba(15,23,42,.13);
border-color:rgba(37,99,235,.22);
}

.toggle-pricing-card.is-featured{
border:2px solid rgba(37,99,235,.45);
box-shadow:0 28px 80px rgba(37,99,235,.16);
}

.toggle-pricing-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.toggle-pricing-card h3{
margin:0;
color:#0f172a;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.toggle-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.toggle-pricing-card-desc{
min-height:68px;
margin:0 0 22px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.toggle-pricing-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:8px;
color:#0f172a;
}

.toggle-pricing-price strong{
font-size:52px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.toggle-pricing-price span{
padding-bottom:6px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.toggle-pricing-year-note{
min-height:20px;
margin:0 0 22px;
color:#15803d;
font-size:13px;
font-weight:900;
line-height:1.45;
}

.toggle-pricing-features{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.toggle-pricing-features li{
position:relative;
margin:0;
padding-left:28px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.toggle-pricing-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#dbeafe;
color:#2563eb;
font-size:12px;
font-weight:950;
}

.toggle-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.toggle-pricing-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 36px rgba(37,99,235,.24);
}

.toggle-pricing-card.is-featured .toggle-pricing-button{
background:linear-gradient(135deg,#2563eb,#10b981);
box-shadow:0 16px 36px rgba(37,99,235,.22);
}

@media (max-width:920px){
.toggle-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.toggle-pricing-header{
text-align:left;
}

.toggle-pricing-title{
font-size:34px;
}

.toggle-pricing-switch-wrap{
flex-direction:column;
align-items:stretch;
}

.toggle-pricing-switch{
width:100%;
}

.toggle-pricing-save{
width:100%;
}

.toggle-pricing-card{
padding:20px;
border-radius:24px;
}

.toggle-pricing-card-desc{
min-height:auto;
}

.toggle-pricing-price strong{
font-size:42px;
}
}

JavaScript

document.querySelectorAll(".toggle-pricing").forEach(function(section){
const monthlyButton=section.querySelector(".toggle-pricing-monthly");
const yearlyButton=section.querySelector(".toggle-pricing-yearly");
const priceItems=section.querySelectorAll("[data-monthly]");
const periods=section.querySelectorAll("[data-period]");
const notes=section.querySelectorAll("[data-note]");

function setBilling(type){
const isYearly=type==="yearly";
section.classList.toggle("is-yearly",isYearly);
section.setAttribute("data-billing",type);

priceItems.forEach(function(price){
const value=isYearly ? price.getAttribute("data-yearly") : price.getAttribute("data-monthly");
price.textContent="$"+value;
});

periods.forEach(function(period){
period.textContent=isYearly ? "/mo billed yearly" : "/mo";
});

notes.forEach(function(note){
note.textContent=isYearly ? "Annual billing discount applied." : "";
});
}

monthlyButton.addEventListener("click",function(){
setBilling("monthly");
});

yearlyButton.addEventListener("click",function(){
setBilling("yearly");
});
});

This pricing table with a monthly and yearly toggle is useful for subscription-based websites where annual billing should feel like a clear upgrade. The interactive switch makes the pricing section more practical than a static table.

10. Annual Discount Pricing Table

Annual discount pricing tables are useful when you want to push visitors toward yearly billing without hiding the monthly option. This type of pricing section should make the savings feel obvious, but still keep the plan comparison simple.

This example uses a different layout from a normal card grid. A large discount panel sits on the left, while the right side presents annual plan options as compact comparison blocks. This creates a stronger promotional section for yearly subscriptions.

  • Promotes annual billing with a large savings panel
  • Uses compact plan blocks instead of equal pricing cards
  • Good for SaaS, memberships, hosting, and subscription products
  • Separates promotional copy from the actual plan comparison
  • Responsive layout stacks the discount offer above the plans on mobile
Annual Deal

Save more with yearly billing

Use this layout when you want annual billing to feel like a strong offer, not just a small note below the price.

2 months Free when customers choose an annual plan instead of monthly billing.

Simple annual pricing can improve commitment while keeping the comparison easy to understand.

Starter Annual

Save $38

For small projects that need a simple responsive pricing section and basic support.

1 project Basic UI Email support
$228 $190 per year
Choose

Growth Annual

Best annual value

For growing websites that need conversion-focused sections, priority support, and flexible pricing UI.

Unlimited sections Priority support Advanced UI
$708 $590 per year
Choose

Scale Annual

Save $258

For larger teams that need a reusable design system, custom pricing sections, and dedicated support.

Custom UI Design system Dedicated support
$1548 $1290 per year
Contact

HTML

<section class="annual-discount-pricing">

  <div class="annual-discount-offer">
    <div class="annual-discount-offer-content">
      <div class="annual-discount-kicker">Annual Deal</div>
      <h3 class="annual-discount-title">Save more with <span>yearly billing</span></h3>
      <p class="annual-discount-text">Use this layout when you want annual billing to feel like a strong offer, not just a small note below the price.</p>
    </div>

    <div class="annual-discount-offer-bottom">
      <div class="annual-discount-number">
        <strong>2 months</strong>
        <span>Free when customers choose an annual plan instead of monthly billing.</span>
      </div>
      <p class="annual-discount-note">Simple annual pricing can improve commitment while keeping the comparison easy to understand.</p>
    </div>
  </div>

  <div class="annual-discount-plans">

    <article class="annual-discount-plan">
      <div class="annual-discount-plan-main">
        <div class="annual-discount-plan-top">
          <h3>Starter Annual</h3>
          <span class="annual-discount-plan-badge">Save $38</span>
        </div>
        <p>For small projects that need a simple responsive pricing section and basic support.</p>
        <div class="annual-discount-features">
          <span>1 project</span>
          <span>Basic UI</span>
          <span>Email support</span>
        </div>
      </div>
      <div class="annual-discount-side">
        <div class="annual-discount-price">
          <del>$228</del>
          <strong>$190</strong>
          <span>per year</span>
        </div>
        <a class="annual-discount-button" href="#">Choose</a>
      </div>
    </article>

    <article class="annual-discount-plan is-featured">
      <div class="annual-discount-plan-main">
        <div class="annual-discount-plan-top">
          <h3>Growth Annual</h3>
          <span class="annual-discount-plan-badge">Best annual value</span>
        </div>
        <p>For growing websites that need conversion-focused sections, priority support, and flexible pricing UI.</p>
        <div class="annual-discount-features">
          <span>Unlimited sections</span>
          <span>Priority support</span>
          <span>Advanced UI</span>
        </div>
      </div>
      <div class="annual-discount-side">
        <div class="annual-discount-price">
          <del>$708</del>
          <strong>$590</strong>
          <span>per year</span>
        </div>
        <a class="annual-discount-button" href="#">Choose</a>
      </div>
    </article>

    <article class="annual-discount-plan">
      <div class="annual-discount-plan-main">
        <div class="annual-discount-plan-top">
          <h3>Scale Annual</h3>
          <span class="annual-discount-plan-badge">Save $258</span>
        </div>
        <p>For larger teams that need a reusable design system, custom pricing sections, and dedicated support.</p>
        <div class="annual-discount-features">
          <span>Custom UI</span>
          <span>Design system</span>
          <span>Dedicated support</span>
        </div>
      </div>
      <div class="annual-discount-side">
        <div class="annual-discount-price">
          <del>$1548</del>
          <strong>$1290</strong>
          <span>per year</span>
        </div>
        <a class="annual-discount-button" href="#">Contact</a>
      </div>
    </article>

  </div>

</section>

CSS

.annual-discount-pricing{
width:min(100%,1080px);
display:grid;
grid-template-columns:380px minmax(0,1fr);
gap:20px;
align-items:stretch;
}

.annual-discount-offer{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:30px;
border-radius:34px;
background:#111827;
color:#ffffff;
overflow:hidden;
box-shadow:0 28px 80px rgba(17,24,39,.24);
}

.annual-discount-offer::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(234,179,8,.26);
}

.annual-discount-offer::after{
content:"";
position:absolute;
left:-80px;
bottom:-80px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(249,115,22,.20);
}

.annual-discount-offer-content,
.annual-discount-offer-bottom{
position:relative;
z-index:2;
}

.annual-discount-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(234,179,8,.16);
border:1px solid rgba(253,224,71,.22);
color:#fde68a;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.annual-discount-title{
margin:0 0 18px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(38px,5vw,68px);
line-height:.94;
font-weight:950;
letter-spacing:-.075em;
}

.annual-discount-title span{
display:block;
color:#facc15;
-webkit-text-fill-color:#facc15;
}

.annual-discount-text{
margin:0;
color:#e5e7eb;
font-size:16px;
line-height:1.75;
}

.annual-discount-number{
display:grid;
gap:8px;
margin-top:34px;
padding:22px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.annual-discount-number strong{
color:#ffffff;
font-size:58px;
line-height:.9;
font-weight:950;
letter-spacing:-.065em;
}

.annual-discount-number span{
color:#fde68a;
font-size:14px;
line-height:1.5;
font-weight:850;
}

.annual-discount-note{
margin:18px 0 0;
color:#d1d5db;
font-size:13px;
line-height:1.5;
font-weight:750;
}

.annual-discount-plans{
display:grid;
gap:14px;
align-content:stretch;
}

.annual-discount-plan{
display:grid;
grid-template-columns:1fr auto;
gap:18px;
align-items:center;
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.annual-discount-plan.is-featured{
border-color:rgba(234,179,8,.54);
box-shadow:0 26px 74px rgba(234,179,8,.16);
}

.annual-discount-plan-main{
min-width:0;
}

.annual-discount-plan-top{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:9px;
}

.annual-discount-plan h3{
margin:0;
color:#111827;
font-size:23px;
line-height:1.18;
font-weight:950;
}

.annual-discount-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#fef3c7;
color:#92400e;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.annual-discount-plan p{
margin:0;
max-width:460px;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.annual-discount-features{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}

.annual-discount-features span{
display:inline-flex;
align-items:center;
padding:7px 9px;
border-radius:999px;
background:#f8fafc;
color:#475569;
font-size:12px;
line-height:1;
font-weight:850;
}

.annual-discount-side{
display:grid;
justify-items:end;
gap:12px;
min-width:160px;
}

.annual-discount-price{
text-align:right;
color:#111827;
}

.annual-discount-price del{
display:block;
margin-bottom:5px;
color:#94a3b8;
font-size:15px;
font-weight:850;
}

.annual-discount-price strong{
display:block;
font-size:38px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.annual-discount-price span{
display:block;
margin-top:5px;
color:#64748b;
font-size:13px;
font-weight:850;
}

.annual-discount-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.annual-discount-button:hover{
background:#ca8a04;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(202,138,4,.20);
}

.annual-discount-plan.is-featured .annual-discount-button{
background:linear-gradient(135deg,#eab308,#f97316);
}

@media (max-width:960px){
.annual-discount-pricing{
grid-template-columns:1fr;
max-width:680px;
}

.annual-discount-offer{
min-height:auto;
}

.annual-discount-plan{
grid-template-columns:1fr;
}

.annual-discount-side{
justify-items:start;
min-width:0;
}

.annual-discount-price{
text-align:left;
}
}

@media (max-width:640px){
.annual-discount-offer{
padding:24px;
border-radius:28px;
}

.annual-discount-title{
font-size:42px;
}

.annual-discount-number strong{
font-size:44px;
}

.annual-discount-plan{
padding:18px;
border-radius:22px;
}

.annual-discount-button{
width:100%;
}
}

This annual discount pricing table is useful when yearly billing is a major part of your offer. The large discount panel makes the annual deal feel important, while the compact plan blocks keep the actual comparison easy to scan.

11. Agency Pricing Table

Agency pricing tables need to communicate more than a monthly price. A web design agency, marketing studio, branding company, or development team often needs to explain the scope of each package, what is included, and who each plan is best for.

This example uses a proposal-style pricing layout instead of a normal three-card grid. The left side introduces the agency offer, while the right side presents three service packages as stacked project blocks with scope, timeline, deliverables, and CTA buttons.

  • Designed for web design agencies, freelancers, studios, and service businesses
  • Uses stacked proposal-style pricing blocks instead of equal pricing cards
  • Includes project scope, timeline, deliverables, and starting price
  • Works well for one-time service packages instead of monthly subscriptions
  • Responsive layout keeps each agency package easy to read on mobile

Launch Website

Starter

A focused website package for small businesses that need a clean online presence and a professional first impression.

Pages Up to 3 pages
Timeline 1–2 weeks
Includes Responsive layout
Starts at $900
Request Quote

Growth Website

Popular

A stronger package for growing brands that need service pages, conversion sections, pricing blocks, and better SEO structure.

Pages Up to 8 pages
Timeline 3–4 weeks
Includes SEO structure
Starts at $2,400
Request Quote

Custom Platform

Advanced

A custom project package for larger websites, ecommerce sections, dashboards, integrations, and more advanced UI components.

Pages Custom scope
Timeline Custom plan
Includes Advanced UI
Starts at $5,000
Contact Sales

HTML

<section class="agency-pricing">

  <aside class="agency-pricing-intro">
    <div class="agency-pricing-intro-content">
      <div class="agency-pricing-kicker">Agency Pricing</div>
      <h3 class="agency-pricing-title">Website packages built like a <span>proposal</span></h3>
      <p class="agency-pricing-text">Use this layout when your pricing needs to explain project scope, deliverables, and value instead of only showing a monthly number.</p>

      <ul class="agency-pricing-benefits">
        <li>Clear package scope for service-based websites</li>
        <li>Useful for agencies, freelancers, and studios</li>
        <li>Better for one-time project pricing than subscriptions</li>
      </ul>
    </div>
  </aside>

  <div class="agency-pricing-packages">

    <article class="agency-pricing-package">
      <div class="agency-pricing-package-main">
        <div class="agency-pricing-package-head">
          <h3>Launch Website</h3>
          <span class="agency-pricing-package-badge">Starter</span>
        </div>
        <p>A focused website package for small businesses that need a clean online presence and a professional first impression.</p>
        <div class="agency-pricing-scope">
          <div class="agency-pricing-scope-item">
            <strong>Pages</strong>
            <span>Up to 3 pages</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Timeline</strong>
            <span>1–2 weeks</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Includes</strong>
            <span>Responsive layout</span>
          </div>
        </div>
      </div>
      <div class="agency-pricing-package-side">
        <div class="agency-pricing-price">
          <span>Starts at</span>
          <strong>$900</strong>
        </div>
        <a class="agency-pricing-button" href="#">Request Quote</a>
      </div>
    </article>

    <article class="agency-pricing-package is-featured">
      <div class="agency-pricing-package-main">
        <div class="agency-pricing-package-head">
          <h3>Growth Website</h3>
          <span class="agency-pricing-package-badge">Popular</span>
        </div>
        <p>A stronger package for growing brands that need service pages, conversion sections, pricing blocks, and better SEO structure.</p>
        <div class="agency-pricing-scope">
          <div class="agency-pricing-scope-item">
            <strong>Pages</strong>
            <span>Up to 8 pages</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Timeline</strong>
            <span>3–4 weeks</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Includes</strong>
            <span>SEO structure</span>
          </div>
        </div>
      </div>
      <div class="agency-pricing-package-side">
        <div class="agency-pricing-price">
          <span>Starts at</span>
          <strong>$2,400</strong>
        </div>
        <a class="agency-pricing-button" href="#">Request Quote</a>
      </div>
    </article>

    <article class="agency-pricing-package">
      <div class="agency-pricing-package-main">
        <div class="agency-pricing-package-head">
          <h3>Custom Platform</h3>
          <span class="agency-pricing-package-badge">Advanced</span>
        </div>
        <p>A custom project package for larger websites, ecommerce sections, dashboards, integrations, and more advanced UI components.</p>
        <div class="agency-pricing-scope">
          <div class="agency-pricing-scope-item">
            <strong>Pages</strong>
            <span>Custom scope</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Timeline</strong>
            <span>Custom plan</span>
          </div>
          <div class="agency-pricing-scope-item">
            <strong>Includes</strong>
            <span>Advanced UI</span>
          </div>
        </div>
      </div>
      <div class="agency-pricing-package-side">
        <div class="agency-pricing-price">
          <span>Starts at</span>
          <strong>$5,000</strong>
        </div>
        <a class="agency-pricing-button" href="#">Contact Sales</a>
      </div>
    </article>

  </div>

</section>

CSS

.agency-pricing{
width:min(100%,1080px);
display:grid;
grid-template-columns:360px minmax(0,1fr);
gap:22px;
align-items:start;
}

.agency-pricing-intro{
position:sticky;
top:0;
padding:30px;
border-radius:34px;
background:#0f172a;
color:#ffffff;
box-shadow:0 28px 80px rgba(15,23,42,.22);
overflow:hidden;
}

.agency-pricing-intro::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(99,102,241,.28);
}

.agency-pricing-intro::after{
content:"";
position:absolute;
left:-80px;
bottom:-80px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(14,165,233,.16);
}

.agency-pricing-intro-content{
position:relative;
z-index:2;
}

.agency-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#c7d2fe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.agency-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.agency-pricing-title span{
color:#a5b4fc;
-webkit-text-fill-color:#a5b4fc;
}

.agency-pricing-text{
margin:0 0 26px;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.agency-pricing-benefits{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.agency-pricing-benefits li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#e2e8f0;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.agency-pricing-benefits li::before{
content:"";
flex:0 0 auto;
width:8px;
height:8px;
margin-top:7px;
border-radius:999px;
background:#a5b4fc;
box-shadow:0 0 0 4px rgba(165,180,252,.12);
}

.agency-pricing-packages{
display:grid;
gap:14px;
}

.agency-pricing-package{
display:grid;
grid-template-columns:minmax(0,1fr) 190px;
gap:20px;
align-items:stretch;
padding:22px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.agency-pricing-package.is-featured{
border-color:rgba(99,102,241,.40);
box-shadow:0 28px 80px rgba(99,102,241,.14);
}

.agency-pricing-package-main{
min-width:0;
}

.agency-pricing-package-head{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:12px;
}

.agency-pricing-package h3{
margin:0;
color:#0f172a;
font-size:24px;
line-height:1.18;
font-weight:950;
letter-spacing:-.025em;
}

.agency-pricing-package-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.agency-pricing-package p{
margin:0 0 16px;
max-width:520px;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}

.agency-pricing-scope{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.agency-pricing-scope-item{
padding:12px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.agency-pricing-scope-item strong{
display:block;
margin-bottom:4px;
color:#0f172a;
font-size:13px;
font-weight:950;
}

.agency-pricing-scope-item span{
display:block;
color:#64748b;
font-size:12px;
line-height:1.35;
font-weight:750;
}

.agency-pricing-package-side{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:16px;
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.agency-pricing-price{
color:#0f172a;
}

.agency-pricing-price span{
display:block;
margin-bottom:6px;
color:#64748b;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.agency-pricing-price strong{
display:block;
font-size:34px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.agency-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.agency-pricing-button:hover{
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(79,70,229,.20);
}

.agency-pricing-package.is-featured .agency-pricing-button{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
}

@media (max-width:980px){
.agency-pricing{
grid-template-columns:1fr;
max-width:720px;
}

.agency-pricing-intro{
position:relative;
}
}

@media (max-width:720px){
.agency-pricing-package{
grid-template-columns:1fr;
}

.agency-pricing-scope{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.agency-pricing-intro{
padding:24px;
border-radius:28px;
}

.agency-pricing-title{
font-size:34px;
}

.agency-pricing-package{
padding:18px;
border-radius:24px;
}

.agency-pricing-package-side{
padding:16px;
border-radius:20px;
}
}

This agency pricing table is useful when your pricing is based on service packages rather than simple subscriptions. The proposal-style structure helps explain scope, timeline, and value before asking visitors to request a quote.

12. Hosting Pricing Table

Hosting pricing tables need to show technical differences clearly. Visitors often compare storage, bandwidth, websites, visits, backups, support level, and performance resources before choosing a plan.

This example uses a hosting-focused comparison layout instead of normal pricing cards. Each hosting plan is displayed as a compact server row with resource columns, a price block, and a CTA button. This makes the layout feel more technical and comparison-friendly.

  • Designed for web hosting, managed WordPress hosting, VPS, and cloud plans
  • Uses resource columns instead of long feature lists
  • Good for comparing storage, bandwidth, websites, backups, and support
  • Featured hosting plan uses a stronger row highlight
  • Mobile layout turns each plan into a stacked resource card
Hosting Pricing

Compare hosting plans by real resources

Hosting pricing works best when technical limits are easy to scan. This layout compares resources before the user clicks a plan.

Plan Sites Storage Visits Backups Price

Start Host

For simple business websites and small WordPress projects.

Sites 1
Storage 10GB
Visits 25K
Backups Daily
$15 /month
Choose

Business Host Popular

For growing websites that need better performance and more resources.

Sites 5
Storage 50GB
Visits 150K
Backups Daily
$49 /month
Choose

Scale Host

For high-traffic websites, ecommerce stores, and advanced projects.

Sites 20
Storage 200GB
Visits 1M
Backups Hourly
$149 /month
Contact
Free SSL CDN ready Staging included Expert support

HTML

<section class="hosting-pricing">

  <div class="hosting-pricing-header">
    <div>
      <div class="hosting-pricing-kicker">Hosting Pricing</div>
      <h3 class="hosting-pricing-title">Compare hosting plans by <span>real resources</span></h3>
    </div>
    <p class="hosting-pricing-note">Hosting pricing works best when technical limits are easy to scan. This layout compares resources before the user clicks a plan.</p>
  </div>

  <div class="hosting-pricing-table">

    <div class="hosting-pricing-labels">
      <span>Plan</span>
      <span>Sites</span>
      <span>Storage</span>
      <span>Visits</span>
      <span>Backups</span>
      <span>Price</span>
      <span></span>
    </div>

    <article class="hosting-pricing-row">
      <div class="hosting-plan-name">
        <h3>Start Host</h3>
        <p>For simple business websites and small WordPress projects.</p>
      </div>
      <div class="hosting-resource">
        <span>Sites</span>
        <strong>1</strong>
      </div>
      <div class="hosting-resource">
        <span>Storage</span>
        <strong>10GB</strong>
      </div>
      <div class="hosting-resource">
        <span>Visits</span>
        <strong>25K</strong>
      </div>
      <div class="hosting-resource">
        <span>Backups</span>
        <strong>Daily</strong>
      </div>
      <div class="hosting-price">
        <strong>$15</strong>
        <span>/month</span>
      </div>
      <a class="hosting-button" href="#">Choose</a>
    </article>

    <article class="hosting-pricing-row is-featured">
      <div class="hosting-plan-name">
        <h3>Business Host <span class="hosting-plan-badge">Popular</span></h3>
        <p>For growing websites that need better performance and more resources.</p>
      </div>
      <div class="hosting-resource">
        <span>Sites</span>
        <strong>5</strong>
      </div>
      <div class="hosting-resource">
        <span>Storage</span>
        <strong>50GB</strong>
      </div>
      <div class="hosting-resource">
        <span>Visits</span>
        <strong>150K</strong>
      </div>
      <div class="hosting-resource">
        <span>Backups</span>
        <strong>Daily</strong>
      </div>
      <div class="hosting-price">
        <strong>$49</strong>
        <span>/month</span>
      </div>
      <a class="hosting-button" href="#">Choose</a>
    </article>

    <article class="hosting-pricing-row">
      <div class="hosting-plan-name">
        <h3>Scale Host</h3>
        <p>For high-traffic websites, ecommerce stores, and advanced projects.</p>
      </div>
      <div class="hosting-resource">
        <span>Sites</span>
        <strong>20</strong>
      </div>
      <div class="hosting-resource">
        <span>Storage</span>
        <strong>200GB</strong>
      </div>
      <div class="hosting-resource">
        <span>Visits</span>
        <strong>1M</strong>
      </div>
      <div class="hosting-resource">
        <span>Backups</span>
        <strong>Hourly</strong>
      </div>
      <div class="hosting-price">
        <strong>$149</strong>
        <span>/month</span>
      </div>
      <a class="hosting-button" href="#">Contact</a>
    </article>

  </div>

  <div class="hosting-pricing-footer">
    <span>Free SSL</span>
    <span>CDN ready</span>
    <span>Staging included</span>
    <span>Expert support</span>
  </div>

</section>

CSS

.hosting-pricing{
width:min(100%,1100px);
}

.hosting-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.hosting-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#cffafe;
color:#0e7490;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.hosting-pricing-title{
margin:0;
max-width:720px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.hosting-pricing-title span{
background:linear-gradient(135deg,#06b6d4,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hosting-pricing-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.hosting-pricing-table{
padding:14px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.hosting-pricing-labels,
.hosting-pricing-row{
display:grid;
grid-template-columns:1.35fr repeat(4,.72fr) 150px 132px;
gap:10px;
align-items:center;
}

.hosting-pricing-labels{
padding:10px 14px 14px;
color:#64748b;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.hosting-pricing-labels span:first-child{
padding-left:6px;
}

.hosting-pricing-row{
position:relative;
padding:16px 14px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
margin-bottom:10px;
}

.hosting-pricing-row:last-child{
margin-bottom:0;
}

.hosting-pricing-row.is-featured{
background:
linear-gradient(135deg,rgba(6,182,212,.12),rgba(37,99,235,.10)),
#ffffff;
border-color:rgba(6,182,212,.42);
box-shadow:0 18px 50px rgba(6,182,212,.14);
}

.hosting-plan-name{
min-width:0;
}

.hosting-plan-name h3{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin:0 0 5px;
color:#0f172a;
font-size:20px;
line-height:1.2;
font-weight:950;
}

.hosting-plan-name p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:700;
}

.hosting-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 8px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:10px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.hosting-resource{
padding:10px;
border-radius:16px;
background:#ffffff;
border:1px solid rgba(15,23,42,.06);
text-align:center;
}

.hosting-resource strong{
display:block;
margin-bottom:4px;
color:#0f172a;
font-size:15px;
line-height:1;
font-weight:950;
}

.hosting-resource span{
display:none;
color:#64748b;
font-size:11px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.hosting-price{
text-align:right;
color:#0f172a;
}

.hosting-price strong{
display:block;
font-size:30px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.hosting-price span{
display:block;
margin-top:4px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.hosting-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.hosting-button:hover{
background:#0891b2;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(8,145,178,.20);
}

.hosting-pricing-row.is-featured .hosting-button{
background:linear-gradient(135deg,#06b6d4,#2563eb);
}

.hosting-pricing-footer{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:18px;
}

.hosting-pricing-footer span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:#cffafe;
color:#0e7490;
font-size:12px;
font-weight:900;
}

@media (max-width:980px){
.hosting-pricing-header{
grid-template-columns:1fr;
}

.hosting-pricing-labels{
display:none;
}

.hosting-pricing-row{
grid-template-columns:1fr;
gap:12px;
padding:18px;
}

.hosting-resource{
display:flex;
align-items:center;
justify-content:space-between;
text-align:left;
}

.hosting-resource span{
display:block;
}

.hosting-price{
text-align:left;
}

.hosting-button{
width:100%;
}
}

@media (max-width:640px){
.hosting-pricing-title{
font-size:34px;
}

.hosting-pricing-table{
padding:10px;
border-radius:26px;
}

.hosting-pricing-row{
border-radius:20px;
}

.hosting-pricing-footer{
justify-content:flex-start;
}
}

This hosting pricing table is useful when users need to compare technical resources quickly. Instead of forcing hosting features into long card lists, the row-based layout makes storage, visits, websites, backups, and price easier to scan.

13. eCommerce Pricing Table

eCommerce pricing tables need to explain what sellers get at each level. Instead of only showing a price, an online store pricing section should compare product limits, checkout features, sales channels, support, and transaction details.

This example uses an ecommerce-style pricing layout with a store summary panel at the top and three pricing plans below it. Each plan highlights product capacity, sales tools, and checkout features, making it useful for ecommerce platforms, online store builders, marketplace tools, and digital commerce services.

  • Designed for ecommerce platforms, online store builders, and marketplace tools
  • Includes product limits, sales channels, checkout tools, and support levels
  • Uses a store dashboard-style summary above the pricing plans
  • Pricing cards feel more ecommerce-specific than generic subscription cards
  • Responsive layout stacks the dashboard and plans cleanly on mobile screens
eCommerce Pricing

Launch, manage, and grow your online store

Use this pricing table for ecommerce platforms where sellers need to compare product limits, sales tools, and checkout features.

0% Platform transaction fee on annual plans
24/7 Store monitoring and checkout protection
Fast Responsive storefront pricing UI
🛒
Start

Shop Starter

For small stores, creators, and first-time sellers launching a simple catalog.

$29 /mo
100 Products
1 Channel
  • Basic product catalog
  • Secure checkout page
  • Email support
Start Store
📦
Popular

Shop Growth

For growing ecommerce brands that need more products, better checkout tools, and sales channels.

$79 /mo
2,500 Products
4 Channels
  • Advanced product filtering
  • Abandoned cart tools
  • Priority support
Grow Store
🏬
Scale

Shop Enterprise

For larger stores, marketplace-style catalogs, and teams that need custom ecommerce workflows.

$199 /mo
50K Products
All Channels
  • Custom checkout logic
  • Marketplace integrations
  • Dedicated support
Contact Sales

HTML

<section class="ecommerce-pricing">

  <div class="ecommerce-pricing-dashboard">

    <div class="ecommerce-pricing-hero">
      <div class="ecommerce-pricing-hero-content">
        <div class="ecommerce-pricing-kicker">eCommerce Pricing</div>
        <h3 class="ecommerce-pricing-title">Launch, manage, and grow your <span>online store</span></h3>
        <p class="ecommerce-pricing-text">Use this pricing table for ecommerce platforms where sellers need to compare product limits, sales tools, and checkout features.</p>
      </div>
    </div>

    <div class="ecommerce-pricing-stats">
      <div class="ecommerce-pricing-stat">
        <strong>0%</strong>
        <span>Platform transaction fee on annual plans</span>
      </div>
      <div class="ecommerce-pricing-stat">
        <strong>24/7</strong>
        <span>Store monitoring and checkout protection</span>
      </div>
      <div class="ecommerce-pricing-stat">
        <strong>Fast</strong>
        <span>Responsive storefront pricing UI</span>
      </div>
    </div>

  </div>

  <div class="ecommerce-pricing-grid">

    <article class="ecommerce-pricing-plan">
      <div class="ecommerce-pricing-plan-top">
        <div class="ecommerce-pricing-plan-icon">🛒</div>
        <span class="ecommerce-pricing-plan-badge">Start</span>
      </div>
      <h3>Shop Starter</h3>
      <p class="ecommerce-pricing-plan-desc">For small stores, creators, and first-time sellers launching a simple catalog.</p>
      <div class="ecommerce-pricing-price">
        <strong>$29</strong>
        <span>/mo</span>
      </div>
      <div class="ecommerce-pricing-metrics">
        <div class="ecommerce-pricing-metric">
          <strong>100</strong>
          <span>Products</span>
        </div>
        <div class="ecommerce-pricing-metric">
          <strong>1</strong>
          <span>Channel</span>
        </div>
      </div>
      <ul class="ecommerce-pricing-tools">
        <li>Basic product catalog</li>
        <li>Secure checkout page</li>
        <li>Email support</li>
      </ul>
      <a class="ecommerce-pricing-button" href="#">Start Store</a>
    </article>

    <article class="ecommerce-pricing-plan is-featured">
      <div class="ecommerce-pricing-plan-top">
        <div class="ecommerce-pricing-plan-icon">📦</div>
        <span class="ecommerce-pricing-plan-badge">Popular</span>
      </div>
      <h3>Shop Growth</h3>
      <p class="ecommerce-pricing-plan-desc">For growing ecommerce brands that need more products, better checkout tools, and sales channels.</p>
      <div class="ecommerce-pricing-price">
        <strong>$79</strong>
        <span>/mo</span>
      </div>
      <div class="ecommerce-pricing-metrics">
        <div class="ecommerce-pricing-metric">
          <strong>2,500</strong>
          <span>Products</span>
        </div>
        <div class="ecommerce-pricing-metric">
          <strong>4</strong>
          <span>Channels</span>
        </div>
      </div>
      <ul class="ecommerce-pricing-tools">
        <li>Advanced product filtering</li>
        <li>Abandoned cart tools</li>
        <li>Priority support</li>
      </ul>
      <a class="ecommerce-pricing-button" href="#">Grow Store</a>
    </article>

    <article class="ecommerce-pricing-plan">
      <div class="ecommerce-pricing-plan-top">
        <div class="ecommerce-pricing-plan-icon">🏬</div>
        <span class="ecommerce-pricing-plan-badge">Scale</span>
      </div>
      <h3>Shop Enterprise</h3>
      <p class="ecommerce-pricing-plan-desc">For larger stores, marketplace-style catalogs, and teams that need custom ecommerce workflows.</p>
      <div class="ecommerce-pricing-price">
        <strong>$199</strong>
        <span>/mo</span>
      </div>
      <div class="ecommerce-pricing-metrics">
        <div class="ecommerce-pricing-metric">
          <strong>50K</strong>
          <span>Products</span>
        </div>
        <div class="ecommerce-pricing-metric">
          <strong>All</strong>
          <span>Channels</span>
        </div>
      </div>
      <ul class="ecommerce-pricing-tools">
        <li>Custom checkout logic</li>
        <li>Marketplace integrations</li>
        <li>Dedicated support</li>
      </ul>
      <a class="ecommerce-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.ecommerce-pricing{
width:min(100%,1080px);
}

.ecommerce-pricing-dashboard{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:18px;
margin-bottom:18px;
}

.ecommerce-pricing-hero{
padding:30px;
border-radius:34px;
background:#052e16;
color:#ffffff;
box-shadow:0 28px 80px rgba(5,46,22,.20);
overflow:hidden;
position:relative;
}

.ecommerce-pricing-hero::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(34,197,94,.22);
}

.ecommerce-pricing-hero-content{
position:relative;
z-index:2;
}

.ecommerce-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(187,247,208,.14);
border:1px solid rgba(187,247,208,.22);
color:#bbf7d0;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.ecommerce-pricing-title{
max-width:700px;
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.ecommerce-pricing-title span{
color:#86efac;
-webkit-text-fill-color:#86efac;
}

.ecommerce-pricing-text{
max-width:650px;
margin:0;
color:#dcfce7;
font-size:16px;
line-height:1.75;
}

.ecommerce-pricing-stats{
display:grid;
gap:12px;
}

.ecommerce-pricing-stat{
padding:18px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 46px rgba(15,23,42,.08);
}

.ecommerce-pricing-stat strong{
display:block;
margin-bottom:5px;
color:#052e16;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
}

.ecommerce-pricing-stat span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:800;
}

.ecommerce-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.ecommerce-pricing-plan{
display:flex;
flex-direction:column;
padding:22px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.09);
}

.ecommerce-pricing-plan.is-featured{
border-color:rgba(34,197,94,.42);
box-shadow:0 30px 80px rgba(34,197,94,.16);
}

.ecommerce-pricing-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}

.ecommerce-pricing-plan-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:18px;
background:#dcfce7;
color:#15803d;
font-size:22px;
font-weight:950;
}

.ecommerce-pricing-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.ecommerce-pricing-plan.is-featured .ecommerce-pricing-plan-badge{
background:#052e16;
color:#ffffff;
}

.ecommerce-pricing-plan h3{
margin:0 0 8px;
color:#052e16;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.ecommerce-pricing-plan-desc{
min-height:68px;
margin:0 0 20px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.ecommerce-pricing-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:20px;
color:#052e16;
}

.ecommerce-pricing-price strong{
font-size:48px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.ecommerce-pricing-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.ecommerce-pricing-metrics{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.ecommerce-pricing-metric{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.ecommerce-pricing-metric strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
line-height:1;
font-weight:950;
}

.ecommerce-pricing-metric span{
display:block;
color:#64748b;
font-size:11px;
line-height:1.35;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.ecommerce-pricing-tools{
display:grid;
gap:10px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.ecommerce-pricing-tools li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.ecommerce-pricing-tools li::before{
content:"";
flex:0 0 auto;
width:9px;
height:9px;
margin-top:6px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.ecommerce-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#052e16;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.ecommerce-pricing-button:hover{
background:#16a34a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(22,163,74,.22);
}

.ecommerce-pricing-plan.is-featured .ecommerce-pricing-button{
background:linear-gradient(135deg,#16a34a,#14b8a6);
}

@media (max-width:960px){
.ecommerce-pricing-dashboard{
grid-template-columns:1fr;
}

.ecommerce-pricing-stats{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.ecommerce-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:700px){
.ecommerce-pricing-stats{
grid-template-columns:1fr;
}

.ecommerce-pricing-metrics{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.ecommerce-pricing-hero{
padding:24px;
border-radius:28px;
}

.ecommerce-pricing-title{
font-size:34px;
}

.ecommerce-pricing-plan{
padding:20px;
border-radius:24px;
}

.ecommerce-pricing-plan-desc{
min-height:auto;
}

.ecommerce-pricing-price strong{
font-size:40px;
}
}

This ecommerce pricing table is useful when pricing depends on store capacity, product limits, and sales tools. The dashboard-style top area makes the offer feel specific to online stores instead of using a generic pricing card layout.

14. App Pricing Table

App pricing tables often need a more product-led layout than standard pricing cards. App landing pages usually sell a workflow, a device experience, or a set of premium features rather than a simple list of website services.

This example uses an app-style pricing section with a phone mockup panel on the left and feature-based pricing tiers on the right. The plans are arranged as compact upgrade modules, making the layout feel closer to a mobile app product page than a traditional pricing table.

  • Designed for mobile apps, SaaS apps, productivity tools, and app landing pages
  • Uses a phone mockup panel to make the pricing section feel product-led
  • Pricing tiers are displayed as upgrade modules instead of equal cards
  • Includes feature highlights, plan prices, and clear upgrade buttons
  • Responsive layout stacks the app preview and pricing modules on mobile
A

AppFlow Pro

A mobile-first pricing layout for apps, tools, and digital products.

4.9 User rating
50K Active users
Sync across devices Premium templates Smart reminders
App Pricing

Upgrade your app experience with flexible tiers

Use this app pricing table when the product experience matters as much as the plan comparison. The phone preview helps connect pricing to the app itself.

Free

For users who want to test the basic app workflow before upgrading.

1 device Basic sync Community support
$0 forever
Start

Pro

For active users who need premium tools, more storage, and faster workflows.

5 devices Smart sync Premium tools
$12 /month
Upgrade

Team

For small teams that need shared workspaces, permissions, and admin controls.

Team seats Admin tools Priority support
$39 /month
Contact

HTML

<section class="app-pricing">

  <div class="app-pricing-device-wrap">
    <div class="app-pricing-phone">
      <div class="app-pricing-phone-screen">
        <div class="app-pricing-phone-bar"></div>
        <div class="app-pricing-app-icon">A</div>
        <h3 class="app-pricing-phone-title">AppFlow Pro</h3>
        <p class="app-pricing-phone-text">A mobile-first pricing layout for apps, tools, and digital products.</p>

        <div class="app-pricing-phone-stats">
          <div class="app-pricing-phone-stat">
            <strong>4.9</strong>
            <span>User rating</span>
          </div>
          <div class="app-pricing-phone-stat">
            <strong>50K</strong>
            <span>Active users</span>
          </div>
        </div>

        <div class="app-pricing-phone-list">
          <span>Sync across devices</span>
          <span>Premium templates</span>
          <span>Smart reminders</span>
        </div>
      </div>
    </div>
  </div>

  <div class="app-pricing-content">
    <div class="app-pricing-kicker">App Pricing</div>
    <h3 class="app-pricing-title">Upgrade your app experience with <span>flexible tiers</span></h3>
    <p class="app-pricing-text">Use this app pricing table when the product experience matters as much as the plan comparison. The phone preview helps connect pricing to the app itself.</p>

    <div class="app-pricing-modules">

      <article class="app-pricing-module">
        <div>
          <h3>Free</h3>
          <p>For users who want to test the basic app workflow before upgrading.</p>
          <div class="app-pricing-module-features">
            <span>1 device</span>
            <span>Basic sync</span>
            <span>Community support</span>
          </div>
        </div>
        <div class="app-pricing-module-side">
          <div class="app-pricing-module-price">
            <strong>$0</strong>
            <span>forever</span>
          </div>
          <a class="app-pricing-button" href="#">Start</a>
        </div>
      </article>

      <article class="app-pricing-module is-featured">
        <div>
          <h3>Pro</h3>
          <p>For active users who need premium tools, more storage, and faster workflows.</p>
          <div class="app-pricing-module-features">
            <span>5 devices</span>
            <span>Smart sync</span>
            <span>Premium tools</span>
          </div>
        </div>
        <div class="app-pricing-module-side">
          <div class="app-pricing-module-price">
            <strong>$12</strong>
            <span>/month</span>
          </div>
          <a class="app-pricing-button" href="#">Upgrade</a>
        </div>
      </article>

      <article class="app-pricing-module">
        <div>
          <h3>Team</h3>
          <p>For small teams that need shared workspaces, permissions, and admin controls.</p>
          <div class="app-pricing-module-features">
            <span>Team seats</span>
            <span>Admin tools</span>
            <span>Priority support</span>
          </div>
        </div>
        <div class="app-pricing-module-side">
          <div class="app-pricing-module-price">
            <strong>$39</strong>
            <span>/month</span>
          </div>
          <a class="app-pricing-button" href="#">Contact</a>
        </div>
      </article>

    </div>
  </div>

</section>

CSS

.app-pricing{
width:min(100%,1080px);
display:grid;
grid-template-columns:390px minmax(0,1fr);
gap:24px;
align-items:center;
}

.app-pricing-device-wrap{
display:grid;
place-items:center;
padding:26px;
border-radius:38px;
background:#111827;
box-shadow:0 34px 90px rgba(17,24,39,.24);
overflow:hidden;
position:relative;
}

.app-pricing-device-wrap::before{
content:"";
position:absolute;
width:280px;
height:280px;
border-radius:999px;
right:-120px;
top:-100px;
background:rgba(168,85,247,.34);
}

.app-pricing-device-wrap::after{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:999px;
left:-120px;
bottom:-120px;
background:rgba(236,72,153,.22);
}

.app-pricing-phone{
position:relative;
z-index:2;
width:240px;
min-height:500px;
padding:14px;
border-radius:38px;
background:#020617;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 28px 80px rgba(0,0,0,.36);
}

.app-pricing-phone-screen{
min-height:472px;
padding:18px;
border-radius:28px;
background:
linear-gradient(180deg,#1e1b4b,#111827 55%,#020617);
overflow:hidden;
}

.app-pricing-phone-bar{
width:72px;
height:6px;
margin:0 auto 22px;
border-radius:999px;
background:rgba(255,255,255,.28);
}

.app-pricing-app-icon{
display:grid;
place-items:center;
width:58px;
height:58px;
margin-bottom:18px;
border-radius:20px;
background:linear-gradient(135deg,#8b5cf6,#ec4899);
color:#ffffff;
font-size:24px;
font-weight:950;
box-shadow:0 14px 34px rgba(236,72,153,.24);
}

.app-pricing-phone-title{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:26px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.app-pricing-phone-text{
margin:0 0 22px;
color:#cbd5e1;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.app-pricing-phone-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:18px;
}

.app-pricing-phone-stat{
padding:12px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.app-pricing-phone-stat strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:20px;
line-height:1;
font-weight:950;
}

.app-pricing-phone-stat span{
display:block;
color:#c4b5fd;
font-size:11px;
line-height:1.3;
font-weight:850;
}

.app-pricing-phone-list{
display:grid;
gap:9px;
}

.app-pricing-phone-list span{
display:flex;
align-items:center;
gap:8px;
padding:10px;
border-radius:14px;
background:rgba(255,255,255,.07);
color:#e5e7eb;
font-size:12px;
font-weight:800;
}

.app-pricing-phone-list span::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:#ec4899;
}

.app-pricing-content{
min-width:0;
}

.app-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.app-pricing-title{
margin:0 0 14px;
max-width:700px;
color:#111827;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.app-pricing-title span{
background:linear-gradient(135deg,#7c3aed,#ec4899);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.app-pricing-text{
max-width:620px;
margin:0 0 24px;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.app-pricing-modules{
display:grid;
gap:12px;
}

.app-pricing-module{
display:grid;
grid-template-columns:minmax(0,1fr) 150px;
gap:18px;
align-items:center;
padding:18px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 18px 48px rgba(15,23,42,.08);
}

.app-pricing-module.is-featured{
border-color:rgba(124,58,237,.40);
box-shadow:0 24px 68px rgba(124,58,237,.16);
}

.app-pricing-module h3{
margin:0 0 6px;
color:#111827;
font-size:21px;
line-height:1.18;
font-weight:950;
}

.app-pricing-module p{
margin:0 0 12px;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.app-pricing-module-features{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.app-pricing-module-features span{
display:inline-flex;
align-items:center;
padding:7px 9px;
border-radius:999px;
background:#f5f3ff;
color:#6d28d9;
font-size:12px;
font-weight:850;
}

.app-pricing-module-side{
display:grid;
justify-items:end;
gap:10px;
}

.app-pricing-module-price{
text-align:right;
color:#111827;
}

.app-pricing-module-price strong{
display:block;
font-size:34px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.app-pricing-module-price span{
display:block;
margin-top:4px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.app-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.app-pricing-button:hover{
background:#7c3aed;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(124,58,237,.22);
}

.app-pricing-module.is-featured .app-pricing-button{
background:linear-gradient(135deg,#7c3aed,#ec4899);
}

@media (max-width:980px){
.app-pricing{
grid-template-columns:1fr;
max-width:720px;
}

.app-pricing-device-wrap{
order:2;
}

.app-pricing-content{
order:1;
}
}

@media (max-width:700px){
.app-pricing-module{
grid-template-columns:1fr;
}

.app-pricing-module-side{
justify-items:start;
}

.app-pricing-module-price{
text-align:left;
}
}

@media (max-width:640px){
.app-pricing-title{
font-size:34px;
}

.app-pricing-device-wrap{
padding:18px;
border-radius:30px;
}

.app-pricing-phone{
width:100%;
max-width:250px;
min-height:auto;
}

.app-pricing-phone-screen{
min-height:430px;
}

.app-pricing-module{
padding:16px;
border-radius:22px;
}

.app-pricing-button{
width:100%;
}
}

This app pricing table is useful when you want pricing to feel connected to the actual product experience. The phone mockup makes the section more visual, while the upgrade modules keep the plan comparison clear and compact.

15. Membership Pricing Table

Membership pricing tables are useful for communities, course platforms, content libraries, clubs, premium newsletters, and subscription websites. They should make access levels, member benefits, and upgrade value easy to understand.

This example uses a membership pass layout instead of a normal pricing card grid. Each tier feels like an access card with a member level, benefit highlights, community access details, and a strong join button.

  • Designed for memberships, communities, clubs, courses, and premium content sites
  • Uses access pass style cards instead of generic pricing boxes
  • Includes member levels, access benefits, community perks, and CTA buttons
  • Highlights the Pro member tier as the best upgrade option
  • Responsive layout stacks membership passes cleanly on mobile
Membership Pricing

Choose your member access level

Use this layout when pricing is based on access, community features, premium content, or recurring membership benefits.

Member M1

Basic Access

For new members who want access to the core community and selected resources.

$9 /mo
Access level

Community posts, starter resources, and monthly member updates.

  • Member-only discussions
  • Basic resource library
  • Monthly newsletter
Join Basic
Pro Member M2

Pro Access

For active members who want premium content, workshops, and better support.

$29 /mo
Access level

Premium lessons, live workshops, templates, and private community areas.

  • Premium content library
  • Live monthly workshops
  • Downloadable templates
Join Pro
VIP M3

VIP Access

For members who want direct support, private sessions, and complete access.

$79 /mo
Access level

Everything in Pro, plus private calls, VIP support, and early access.

  • Private support sessions
  • Early access to releases
  • Complete content archive
Join VIP

HTML

<section class="membership-pricing">

  <div class="membership-pricing-header">
    <div>
      <div class="membership-pricing-kicker">Membership Pricing</div>
      <h3 class="membership-pricing-title">Choose your <span>member access</span> level</h3>
    </div>
    <p class="membership-pricing-note">Use this layout when pricing is based on access, community features, premium content, or recurring membership benefits.</p>
  </div>

  <div class="membership-pricing-passes">

    <article class="membership-pass is-basic">
      <div class="membership-pass-level">
        <span>Member</span>
        <strong>M1</strong>
      </div>
      <h3>Basic Access</h3>
      <p class="membership-pass-desc">For new members who want access to the core community and selected resources.</p>
      <div class="membership-pass-price">
        <strong>$9</strong>
        <span>/mo</span>
      </div>
      <div class="membership-pass-access">
        <strong>Access level</strong>
        <p>Community posts, starter resources, and monthly member updates.</p>
      </div>
      <ul class="membership-pass-benefits">
        <li>Member-only discussions</li>
        <li>Basic resource library</li>
        <li>Monthly newsletter</li>
      </ul>
      <a class="membership-pass-button" href="#">Join Basic</a>
    </article>

    <article class="membership-pass is-pro">
      <div class="membership-pass-level">
        <span>Pro Member</span>
        <strong>M2</strong>
      </div>
      <h3>Pro Access</h3>
      <p class="membership-pass-desc">For active members who want premium content, workshops, and better support.</p>
      <div class="membership-pass-price">
        <strong>$29</strong>
        <span>/mo</span>
      </div>
      <div class="membership-pass-access">
        <strong>Access level</strong>
        <p>Premium lessons, live workshops, templates, and private community areas.</p>
      </div>
      <ul class="membership-pass-benefits">
        <li>Premium content library</li>
        <li>Live monthly workshops</li>
        <li>Downloadable templates</li>
      </ul>
      <a class="membership-pass-button" href="#">Join Pro</a>
    </article>

    <article class="membership-pass is-vip">
      <div class="membership-pass-level">
        <span>VIP</span>
        <strong>M3</strong>
      </div>
      <h3>VIP Access</h3>
      <p class="membership-pass-desc">For members who want direct support, private sessions, and complete access.</p>
      <div class="membership-pass-price">
        <strong>$79</strong>
        <span>/mo</span>
      </div>
      <div class="membership-pass-access">
        <strong>Access level</strong>
        <p>Everything in Pro, plus private calls, VIP support, and early access.</p>
      </div>
      <ul class="membership-pass-benefits">
        <li>Private support sessions</li>
        <li>Early access to releases</li>
        <li>Complete content archive</li>
      </ul>
      <a class="membership-pass-button" href="#">Join VIP</a>
    </article>

  </div>

</section>

CSS

.membership-pricing{
width:min(100%,1080px);
}

.membership-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.membership-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fce7f3;
color:#be185d;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.membership-pricing-title{
margin:0;
max-width:720px;
color:#111827;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.membership-pricing-title span{
background:linear-gradient(135deg,#db2777,#f97316);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.membership-pricing-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.membership-pricing-passes{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.membership-pass{
position:relative;
display:flex;
flex-direction:column;
min-height:540px;
padding:24px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.10);
overflow:hidden;
}

.membership-pass::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:10px;
background:#e5e7eb;
}

.membership-pass.is-basic::before{
background:linear-gradient(90deg,#f9a8d4,#fb7185);
}

.membership-pass.is-pro::before{
background:linear-gradient(90deg,#db2777,#f97316);
}

.membership-pass.is-vip::before{
background:linear-gradient(90deg,#111827,#db2777);
}

.membership-pass.is-pro{
transform:translateY(-10px);
border-color:rgba(219,39,119,.38);
box-shadow:0 34px 90px rgba(219,39,119,.18);
}

.membership-pass-level{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:24px;
}

.membership-pass-level span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:999px;
background:#fdf2f8;
color:#be185d;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.membership-pass-level strong{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:999px;
background:#111827;
color:#ffffff;
font-size:15px;
font-weight:950;
}

.membership-pass h3{
margin:0 0 8px;
color:#111827;
font-size:26px;
line-height:1.15;
font-weight:950;
letter-spacing:-.03em;
}

.membership-pass-desc{
min-height:70px;
margin:0 0 22px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.membership-pass-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:22px;
color:#111827;
}

.membership-pass-price strong{
font-size:52px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.membership-pass-price span{
padding-bottom:6px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.membership-pass-access{
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
margin-bottom:22px;
}

.membership-pass-access strong{
display:block;
margin-bottom:8px;
color:#111827;
font-size:14px;
font-weight:950;
}

.membership-pass-access p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:700;
}

.membership-pass-benefits{
display:grid;
gap:11px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.membership-pass-benefits li{
position:relative;
margin:0;
padding-left:28px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.membership-pass-benefits li::before{
content:"★";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#fce7f3;
color:#db2777;
font-size:10px;
font-weight:950;
}

.membership-pass-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin-top:auto;
border-radius:18px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.membership-pass-button:hover{
background:#db2777;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(219,39,119,.22);
}

.membership-pass.is-pro .membership-pass-button{
background:linear-gradient(135deg,#db2777,#f97316);
box-shadow:0 16px 34px rgba(219,39,119,.22);
}

@media (max-width:960px){
.membership-pricing-header{
grid-template-columns:1fr;
}

.membership-pricing-passes{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.membership-pass,
.membership-pass.is-pro{
min-height:auto;
transform:none;
}
}

@media (max-width:640px){
.membership-pricing-title{
font-size:34px;
}

.membership-pass{
padding:20px;
border-radius:26px;
}

.membership-pass-desc{
min-height:auto;
}

.membership-pass-price strong{
font-size:42px;
}
}

This membership pricing table is useful when the main value is access rather than a product package. The pass-style layout makes each tier feel like a membership level, which works well for communities, course websites, premium content platforms, and paid clubs.

16. Pricing Comparison Table

Pricing comparison tables are best when users need to compare many features across multiple plans. They are especially useful for SaaS products, hosting plans, software tools, memberships, and platforms where the details matter before purchase.

This example uses a true comparison matrix instead of pricing cards. The plan names and prices appear across the top, while the feature categories are listed down the left side. On smaller screens, the table becomes horizontally scrollable to preserve readability.

  • Uses a real feature comparison matrix instead of card-based pricing
  • Best for SaaS, software, hosting, and feature-rich product pricing
  • Compares plan limits, support, automation, integrations, and security
  • Includes highlighted recommended plan column
  • Uses horizontal scrolling on small screens to avoid breaking the table
Comparison Table

Compare every plan feature by feature

Use a pricing comparison table when visitors need more detail than a simple pricing card can show.

Plan comparison Choose the best fit by comparing limits, tools, support, and security.

Starter

$19 /mo
Popular

Growth

$59 /mo

Scale

$129 /mo
Projects
3
Unlimited
Unlimited
Team members
1
10
50
Automation
–
✓
✓
Priority support
–
✓
✓
Advanced security
–
–
✓
Choose plan
Start
Choose
Contact

HTML

<section class="comparison-pricing">

  <div class="comparison-pricing-header">
    <div class="comparison-pricing-kicker">Comparison Table</div>
    <h3 class="comparison-pricing-title">Compare every plan <span>feature by feature</span></h3>
    <p class="comparison-pricing-text">Use a pricing comparison table when visitors need more detail than a simple pricing card can show.</p>
  </div>

  <div class="comparison-pricing-scroll">

    <div class="comparison-pricing-table">

      <div class="comparison-pricing-row comparison-pricing-head">
        <div class="comparison-pricing-cell comparison-pricing-feature-head">
          <strong>Plan comparison</strong>
          <span>Choose the best fit by comparing limits, tools, support, and security.</span>
        </div>

        <div class="comparison-pricing-cell comparison-pricing-plan-head">
          <div>
            <h3>Starter</h3>
            <div class="comparison-pricing-price">
              <strong>$19</strong>
              <span>/mo</span>
            </div>
          </div>
        </div>

        <div class="comparison-pricing-cell comparison-pricing-plan-head is-featured">
          <span class="comparison-pricing-plan-badge">Popular</span>
          <div>
            <h3>Growth</h3>
            <div class="comparison-pricing-price">
              <strong>$59</strong>
              <span>/mo</span>
            </div>
          </div>
        </div>

        <div class="comparison-pricing-cell comparison-pricing-plan-head">
          <div>
            <h3>Scale</h3>
            <div class="comparison-pricing-price">
              <strong>$129</strong>
              <span>/mo</span>
            </div>
          </div>
        </div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Projects</div>
        <div class="comparison-pricing-cell comparison-pricing-value">3</div>
        <div class="comparison-pricing-cell comparison-pricing-value">Unlimited</div>
        <div class="comparison-pricing-cell comparison-pricing-value">Unlimited</div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Team members</div>
        <div class="comparison-pricing-cell comparison-pricing-value">1</div>
        <div class="comparison-pricing-cell comparison-pricing-value">10</div>
        <div class="comparison-pricing-cell comparison-pricing-value">50</div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Automation</div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-minus">–</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Priority support</div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-minus">–</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
      </div>

      <div class="comparison-pricing-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Advanced security</div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-minus">–</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-minus">–</span></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><span class="comparison-pricing-check">✓</span></div>
      </div>

      <div class="comparison-pricing-row comparison-pricing-cta-row">
        <div class="comparison-pricing-cell comparison-pricing-feature">Choose plan</div>
        <div class="comparison-pricing-cell comparison-pricing-value"><a class="comparison-pricing-button" href="#">Start</a></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><a class="comparison-pricing-button is-featured" href="#">Choose</a></div>
        <div class="comparison-pricing-cell comparison-pricing-value"><a class="comparison-pricing-button" href="#">Contact</a></div>
      </div>

    </div>

  </div>

</section>

CSS

.comparison-pricing{
width:min(100%,1100px);
}

.comparison-pricing-header{
max-width:760px;
margin:0 auto 28px;
text-align:center;
}

.comparison-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.comparison-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.comparison-pricing-title span{
background:linear-gradient(135deg,#2563eb,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.comparison-pricing-text{
max-width:660px;
margin:0 auto;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.comparison-pricing-scroll{
overflow-x:auto;
padding-bottom:8px;
scrollbar-gutter:stable;
}

.comparison-pricing-scroll::-webkit-scrollbar{
height:10px;
}

.comparison-pricing-scroll::-webkit-scrollbar-track{
background:rgba(15,23,42,.08);
border-radius:999px;
}

.comparison-pricing-scroll::-webkit-scrollbar-thumb{
background:rgba(37,99,235,.35);
border-radius:999px;
}

.comparison-pricing-table{
min-width:880px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 24px 70px rgba(15,23,42,.10);
overflow:hidden;
}

.comparison-pricing-row{
display:grid;
grid-template-columns:1.2fr repeat(3,1fr);
}

.comparison-pricing-cell{
padding:18px;
border-right:1px solid rgba(15,23,42,.08);
border-bottom:1px solid rgba(15,23,42,.08);
}

.comparison-pricing-cell:last-child{
border-right:0;
}

.comparison-pricing-row:last-child .comparison-pricing-cell{
border-bottom:0;
}

.comparison-pricing-head{
background:#0f172a;
}

.comparison-pricing-head .comparison-pricing-cell{
border-color:rgba(255,255,255,.10);
color:#ffffff;
}

.comparison-pricing-feature-head{
display:flex;
flex-direction:column;
justify-content:flex-end;
min-height:150px;
}

.comparison-pricing-feature-head strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.comparison-pricing-feature-head span{
display:block;
color:#cbd5e1;
font-size:13px;
line-height:1.5;
font-weight:750;
}

.comparison-pricing-plan-head{
position:relative;
min-height:150px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:16px;
}

.comparison-pricing-plan-head.is-featured{
background:
linear-gradient(135deg,rgba(37,99,235,.28),rgba(124,58,237,.24)),
rgba(255,255,255,.04);
}

.comparison-pricing-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
padding:6px 9px;
border-radius:999px;
background:#ffffff;
color:#1d4ed8;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.comparison-pricing-plan-head h3{
margin:0 0 8px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.comparison-pricing-price{
display:flex;
align-items:flex-end;
gap:5px;
color:#ffffff;
}

.comparison-pricing-price strong{
font-size:38px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.comparison-pricing-price span{
padding-bottom:4px;
color:#cbd5e1;
font-size:13px;
font-weight:800;
}

.comparison-pricing-feature{
background:#f8fafc;
color:#0f172a;
font-size:14px;
font-weight:950;
}

.comparison-pricing-value{
color:#334155;
font-size:14px;
line-height:1.45;
font-weight:750;
text-align:center;
}

.comparison-pricing-check,
.comparison-pricing-minus{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:999px;
font-size:13px;
font-weight:950;
}

.comparison-pricing-check{
background:#dcfce7;
color:#15803d;
}

.comparison-pricing-minus{
background:#f1f5f9;
color:#94a3b8;
}

.comparison-pricing-cta-row{
background:#ffffff;
}

.comparison-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.comparison-pricing-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.comparison-pricing-button.is-featured{
background:linear-gradient(135deg,#2563eb,#7c3aed);
}

@media (max-width:640px){
.comparison-pricing-header{
text-align:left;
}

.comparison-pricing-title{
font-size:34px;
}

.comparison-pricing-table{
min-width:820px;
}

.comparison-pricing-cell{
padding:16px;
}
}

This pricing comparison table is useful when your visitors need to compare detailed plan differences before choosing. Unlike card-based pricing sections, the matrix layout is better for technical products, SaaS features, hosting resources, and feature-rich subscriptions.

17. Compact Pricing Table

Compact pricing tables are useful when you do not have enough space for a full pricing section. They work well in sidebars, checkout upsells, modal windows, account pages, dashboard panels, and smaller landing page sections.

This example uses a narrow pricing widget instead of a wide multi-card layout. The plans are displayed as compact selectable rows with short plan details, small feature pills, prices, and a single focused CTA area at the bottom.

  • Designed for sidebars, dashboards, modals, and compact website sections
  • Uses stacked selectable pricing rows instead of large cards
  • Keeps pricing, benefits, and CTA inside a small focused widget
  • Highlights the recommended plan with a selected state
  • Works well on mobile because the layout is already narrow and stacked
Compact Pricing

Pick a plan quickly

A compact pricing table works well when the pricing UI needs to fit inside a small area without losing clarity.

Lite

For small tasks, simple sites, and quick experiments.

1 project Email support
$12 /mo

Plus

Best

For growing websites that need more sections and better flexibility.

10 projects Priority Advanced UI
$39 /mo

Max

For teams, larger websites, and complete custom layouts.

Unlimited Team tools
$89 /mo
Selected plan Plus — $39/mo
Continue with Plus

Change or cancel your plan anytime. No hidden fees.

HTML

<section class="compact-pricing">

  <div class="compact-pricing-header">
    <div class="compact-pricing-kicker">Compact Pricing</div>
    <h3 class="compact-pricing-title">Pick a plan quickly</h3>
    <p class="compact-pricing-text">A compact pricing table works well when the pricing UI needs to fit inside a small area without losing clarity.</p>
  </div>

  <div class="compact-pricing-options">

    <article class="compact-pricing-option">
      <div class="compact-pricing-option-main">
        <div class="compact-pricing-option-top">
          <h3>Lite</h3>
        </div>
        <p>For small tasks, simple sites, and quick experiments.</p>
        <div class="compact-pricing-pills">
          <span>1 project</span>
          <span>Email support</span>
        </div>
      </div>
      <div class="compact-pricing-price">
        <strong>$12</strong>
        <span>/mo</span>
      </div>
    </article>

    <article class="compact-pricing-option is-selected">
      <div class="compact-pricing-option-main">
        <div class="compact-pricing-option-top">
          <h3>Plus</h3>
          <span class="compact-pricing-badge">Best</span>
        </div>
        <p>For growing websites that need more sections and better flexibility.</p>
        <div class="compact-pricing-pills">
          <span>10 projects</span>
          <span>Priority</span>
          <span>Advanced UI</span>
        </div>
      </div>
      <div class="compact-pricing-price">
        <strong>$39</strong>
        <span>/mo</span>
      </div>
    </article>

    <article class="compact-pricing-option">
      <div class="compact-pricing-option-main">
        <div class="compact-pricing-option-top">
          <h3>Max</h3>
        </div>
        <p>For teams, larger websites, and complete custom layouts.</p>
        <div class="compact-pricing-pills">
          <span>Unlimited</span>
          <span>Team tools</span>
        </div>
      </div>
      <div class="compact-pricing-price">
        <strong>$89</strong>
        <span>/mo</span>
      </div>
    </article>

  </div>

  <div class="compact-pricing-footer">
    <div class="compact-pricing-footer-row">
      <span>Selected plan</span>
      <strong>Plus — $39/mo</strong>
    </div>
    <a class="compact-pricing-button" href="#">Continue with Plus</a>
    <p class="compact-pricing-note">Change or cancel your plan anytime. No hidden fees.</p>
  </div>

</section>

CSS

.compact-pricing{
width:min(100%,440px);
padding:18px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 30px 90px rgba(15,23,42,.14);
}

.compact-pricing-header{
padding:10px 8px 18px;
text-align:left;
}

.compact-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:7px 10px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:12px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.compact-pricing-title{
margin:0 0 8px;
color:#0f172a;
font-size:30px;
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
}

.compact-pricing-text{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.compact-pricing-options{
display:grid;
gap:10px;
}

.compact-pricing-option{
position:relative;
display:grid;
grid-template-columns:1fr auto;
gap:12px;
align-items:center;
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.07);
transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}

.compact-pricing-option:hover{
transform:translateY(-2px);
background:#ffffff;
border-color:rgba(37,99,235,.22);
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.compact-pricing-option.is-selected{
background:#eff6ff;
border-color:rgba(37,99,235,.42);
box-shadow:0 18px 46px rgba(37,99,235,.13);
}

.compact-pricing-option.is-selected::before{
content:"";
position:absolute;
left:12px;
top:50%;
width:8px;
height:38px;
border-radius:999px;
background:#2563eb;
transform:translateY(-50%);
}

.compact-pricing-option-main{
min-width:0;
padding-left:10px;
}

.compact-pricing-option-top{
display:flex;
align-items:center;
gap:8px;
margin-bottom:7px;
}

.compact-pricing-option h3{
margin:0;
color:#0f172a;
font-size:18px;
line-height:1.18;
font-weight:950;
}

.compact-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 8px;
border-radius:999px;
background:#ffffff;
color:#1d4ed8;
font-size:10px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.compact-pricing-option p{
margin:0 0 10px;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:650;
}

.compact-pricing-pills{
display:flex;
flex-wrap:wrap;
gap:6px;
}

.compact-pricing-pills span{
display:inline-flex;
align-items:center;
padding:6px 8px;
border-radius:999px;
background:#ffffff;
color:#334155;
font-size:11px;
line-height:1;
font-weight:850;
}

.compact-pricing-price{
text-align:right;
color:#0f172a;
}

.compact-pricing-price strong{
display:block;
font-size:28px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.compact-pricing-price span{
display:block;
margin-top:4px;
color:#64748b;
font-size:11px;
font-weight:850;
}

.compact-pricing-footer{
display:grid;
gap:12px;
margin-top:14px;
padding:16px;
border-radius:24px;
background:#0f172a;
color:#ffffff;
}

.compact-pricing-footer-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.compact-pricing-footer-row span{
color:#cbd5e1;
font-size:13px;
font-weight:750;
}

.compact-pricing-footer-row strong{
color:#ffffff;
font-size:18px;
font-weight:950;
}

.compact-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#06b6d4);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease;
}

.compact-pricing-button:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.24);
}

.compact-pricing-note{
margin:0;
color:#94a3b8;
font-size:12px;
line-height:1.5;
font-weight:700;
text-align:center;
}

@media (max-width:640px){
.compact-pricing{
padding:14px;
border-radius:26px;
}

.compact-pricing-option{
grid-template-columns:1fr;
}

.compact-pricing-price{
text-align:left;
padding-left:10px;
}

.compact-pricing-footer-row{
align-items:flex-start;
flex-direction:column;
gap:4px;
}
}

This compact pricing table is useful when a full pricing section would take too much space. The narrow widget structure makes it ideal for dashboards, sidebars, account pages, checkout upsells, and small landing page blocks.

18. Wide Pricing Section

Wide pricing sections are useful when pricing is one of the main parts of a landing page. Instead of placing pricing cards in a small isolated block, this layout creates a full-width pricing area with context, benefits, plan comparison, and trust elements.

This example uses a wide landing page layout with a large left-side value proposition and three pricing plans on the right. The section feels more like a complete conversion block than a basic pricing table.

  • Uses a wide landing page pricing section instead of a small card grid
  • Combines value proposition, pricing plans, trust badges, and CTA buttons
  • Works well for SaaS homepages, product pages, and service landing pages
  • Featured plan is integrated inside a larger conversion-focused section
  • Responsive layout stacks the value content above pricing plans on smaller screens
Wide Pricing Section

Pricing that supports the full landing page story

Use a wide pricing section when you want to combine your value proposition, plan comparison, benefits, and conversion buttons in one strong block.

✓
Built for conversions

Plans are supported by trust points and clear value messaging.

✓
Responsive by design

The full section stacks cleanly on smaller screens.

Start 01

Starter

For simple projects and first landing pages that need a clean pricing section.

$19 /mo
  • One website project
  • Basic pricing components
  • Email support
Start
Popular 02

Growth

For growing websites that need stronger conversion sections and advanced pricing layouts.

$59 /mo
  • Unlimited pricing sections
  • Advanced responsive layouts
  • Priority support
Choose Growth
Scale 03

Premium

For teams that need custom pricing UI, landing page systems, and premium support.

$129 /mo
  • Custom section system
  • Team-ready UI blocks
  • Dedicated support
Contact
No setup fees Cancel anytime Secure checkout Fast implementation

HTML

<section class="wide-pricing-section">

  <div class="wide-pricing-layout">

    <div class="wide-pricing-copy">
      <div class="wide-pricing-copy-main">
        <div class="wide-pricing-kicker">Wide Pricing Section</div>
        <h3 class="wide-pricing-title">Pricing that supports the full <span>landing page story</span></h3>
        <p class="wide-pricing-text">Use a wide pricing section when you want to combine your value proposition, plan comparison, benefits, and conversion buttons in one strong block.</p>
      </div>

      <div class="wide-pricing-proof">
        <div class="wide-pricing-proof-item">
          <span>✓</span>
          <div>
            <strong>Built for conversions</strong>
            <p>Plans are supported by trust points and clear value messaging.</p>
          </div>
        </div>
        <div class="wide-pricing-proof-item">
          <span>✓</span>
          <div>
            <strong>Responsive by design</strong>
            <p>The full section stacks cleanly on smaller screens.</p>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="wide-pricing-plans">

        <article class="wide-pricing-card">
          <div class="wide-pricing-plan-label">
            <span>Start</span>
            <strong>01</strong>
          </div>
          <h3>Starter</h3>
          <p class="wide-pricing-card-desc">For simple projects and first landing pages that need a clean pricing section.</p>
          <div class="wide-pricing-price">
            <strong>$19</strong>
            <span>/mo</span>
          </div>
          <ul class="wide-pricing-list">
            <li>One website project</li>
            <li>Basic pricing components</li>
            <li>Email support</li>
          </ul>
          <a class="wide-pricing-button" href="#">Start</a>
        </article>

        <article class="wide-pricing-card is-featured">
          <div class="wide-pricing-plan-label">
            <span>Popular</span>
            <strong>02</strong>
          </div>
          <h3>Growth</h3>
          <p class="wide-pricing-card-desc">For growing websites that need stronger conversion sections and advanced pricing layouts.</p>
          <div class="wide-pricing-price">
            <strong>$59</strong>
            <span>/mo</span>
          </div>
          <ul class="wide-pricing-list">
            <li>Unlimited pricing sections</li>
            <li>Advanced responsive layouts</li>
            <li>Priority support</li>
          </ul>
          <a class="wide-pricing-button" href="#">Choose Growth</a>
        </article>

        <article class="wide-pricing-card">
          <div class="wide-pricing-plan-label">
            <span>Scale</span>
            <strong>03</strong>
          </div>
          <h3>Premium</h3>
          <p class="wide-pricing-card-desc">For teams that need custom pricing UI, landing page systems, and premium support.</p>
          <div class="wide-pricing-price">
            <strong>$129</strong>
            <span>/mo</span>
          </div>
          <ul class="wide-pricing-list">
            <li>Custom section system</li>
            <li>Team-ready UI blocks</li>
            <li>Dedicated support</li>
          </ul>
          <a class="wide-pricing-button" href="#">Contact</a>
        </article>

      </div>

      <div class="wide-pricing-bottom">
        <span>No setup fees</span>
        <span>Cancel anytime</span>
        <span>Secure checkout</span>
        <span>Fast implementation</span>
      </div>
    </div>

  </div>

</section>

CSS

.wide-pricing-section{
width:min(100%,1160px);
padding:24px;
border-radius:40px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(0,0,0,.32);
backdrop-filter:blur(18px);
}

.wide-pricing-layout{
display:grid;
grid-template-columns:.9fr 1.45fr;
gap:24px;
align-items:stretch;
}

.wide-pricing-copy{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:32px;
padding:32px;
border-radius:32px;
background:
linear-gradient(135deg,rgba(37,99,235,.22),rgba(124,58,237,.14)),
rgba(15,23,42,.72);
border:1px solid rgba(255,255,255,.12);
overflow:hidden;
position:relative;
}

.wide-pricing-copy::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(96,165,250,.20);
}

.wide-pricing-copy-main{
position:relative;
z-index:2;
}

.wide-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.wide-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,64px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
}

.wide-pricing-title span{
background:linear-gradient(90deg,#60a5fa,#c084fc,#34d399);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.wide-pricing-text{
margin:0;
color:#dbeafe;
font-size:16px;
line-height:1.75;
}

.wide-pricing-proof{
position:relative;
z-index:2;
display:grid;
gap:12px;
}

.wide-pricing-proof-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.wide-pricing-proof-item span{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:28px;
height:28px;
border-radius:999px;
background:rgba(52,211,153,.14);
color:#86efac;
font-size:13px;
font-weight:950;
}

.wide-pricing-proof-item strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:14px;
font-weight:950;
}

.wide-pricing-proof-item p{
margin:0;
color:#cbd5e1;
font-size:13px;
line-height:1.45;
font-weight:700;
}

.wide-pricing-plans{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
align-items:stretch;
}

.wide-pricing-card{
display:flex;
flex-direction:column;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 22px 70px rgba(0,0,0,.16);
}

.wide-pricing-card.is-featured{
background:
linear-gradient(180deg,#ffffff,#eff6ff);
border-color:rgba(96,165,250,.54);
box-shadow:0 30px 90px rgba(37,99,235,.22);
transform:translateY(-12px);
}

.wide-pricing-plan-label{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:18px;
}

.wide-pricing-plan-label span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.wide-pricing-plan-label strong{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:13px;
font-weight:950;
}

.wide-pricing-card h3{
margin:0 0 8px;
color:#0f172a;
font-size:23px;
line-height:1.15;
font-weight:950;
}

.wide-pricing-card-desc{
min-height:72px;
margin:0 0 20px;
color:#64748b;
font-size:13px;
line-height:1.6;
font-weight:650;
}

.wide-pricing-price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:20px;
color:#0f172a;
}

.wide-pricing-price strong{
font-size:44px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.wide-pricing-price span{
padding-bottom:5px;
color:#64748b;
font-size:13px;
font-weight:850;
}

.wide-pricing-list{
display:grid;
gap:11px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.wide-pricing-list li{
display:flex;
gap:9px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.wide-pricing-list li::before{
content:"";
flex:0 0 auto;
width:8px;
height:8px;
margin-top:6px;
border-radius:999px;
background:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.wide-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
margin-top:auto;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.wide-pricing-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.wide-pricing-card.is-featured .wide-pricing-button{
background:linear-gradient(135deg,#2563eb,#7c3aed);
}

.wide-pricing-bottom{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:18px;
}

.wide-pricing-bottom span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:850;
}

@media (max-width:1050px){
.wide-pricing-layout{
grid-template-columns:1fr;
}

.wide-pricing-plans{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.wide-pricing-card.is-featured{
transform:none;
}
}

@media (max-width:640px){
.wide-pricing-section{
padding:14px;
border-radius:30px;
}

.wide-pricing-copy{
padding:24px;
border-radius:24px;
}

.wide-pricing-title{
font-size:38px;
}

.wide-pricing-card{
padding:18px;
border-radius:22px;
}

.wide-pricing-card-desc{
min-height:auto;
}

.wide-pricing-bottom{
justify-content:flex-start;
}
}

This wide pricing section is useful when pricing needs to support the full landing page story. The layout combines plan comparison, value messaging, trust signals, and CTA buttons inside one large conversion-focused section.

19. Two Column Pricing Table

Two column pricing tables are useful when you only need to compare two clear choices. This works especially well for Personal vs Business plans, Basic vs Pro offers, one-time vs subscription pricing, or simple service packages where too many options would create friction.

This example uses a direct side-by-side pricing layout with a strong “best for” section in each column. Instead of showing three or four plans, it keeps the decision simple and helps visitors quickly choose between two different use cases.

  • Designed for simple two-plan pricing comparisons
  • Works well for Personal vs Business, Basic vs Pro, or Starter vs Premium offers
  • Uses large two-column cards with different value positioning
  • Includes “best for” labels, feature blocks, pricing, and CTA buttons
  • Mobile layout stacks both plans into a clean single-column decision flow
Two Column Pricing

Make the decision simple and direct

Use this pricing table when users only need to choose between two clear options instead of comparing many plans.

Personal

Creator

For individual creators, freelancers, and small personal projects that need a clean pricing solution.

Best for Personal websites, small portfolios, landing pages, and solo projects.
$19 /month
  • One active project
  • Basic pricing section
  • Email support
  • Responsive CSS
Choose Creator
Business Recommended

Professional

For businesses that need stronger conversion sections, more flexibility, and better support.

Best for Business websites, service pages, SaaS landing pages, and conversion-focused offers.
$59 /month
  • Unlimited sections
  • Advanced pricing UI
  • Priority support
  • CTA-focused layout
Choose Professional

HTML

<section class="two-column-pricing">

  <div class="two-column-pricing-header">
    <div class="two-column-pricing-kicker">Two Column Pricing</div>
    <h3 class="two-column-pricing-title">Make the decision <span>simple and direct</span></h3>
    <p class="two-column-pricing-text">Use this pricing table when users only need to choose between two clear options instead of comparing many plans.</p>
  </div>

  <div class="two-column-pricing-grid">

    <article class="two-column-plan">
      <div class="two-column-plan-inner">
        <div class="two-column-plan-top">
          <span class="two-column-plan-label">Personal</span>
        </div>

        <h3>Creator</h3>
        <p class="two-column-plan-desc">For individual creators, freelancers, and small personal projects that need a clean pricing solution.</p>

        <div class="two-column-best">
          <strong>Best for</strong>
          <span>Personal websites, small portfolios, landing pages, and solo projects.</span>
        </div>

        <div class="two-column-price">
          <strong>$19</strong>
          <span>/month</span>
        </div>

        <ul class="two-column-features">
          <li>One active project</li>
          <li>Basic pricing section</li>
          <li>Email support</li>
          <li>Responsive CSS</li>
        </ul>

        <a class="two-column-button" href="#">Choose Creator</a>
      </div>
    </article>

    <article class="two-column-plan is-pro">
      <div class="two-column-plan-inner">
        <div class="two-column-plan-top">
          <span class="two-column-plan-label">Business</span>
          <span class="two-column-plan-badge">Recommended</span>
        </div>

        <h3>Professional</h3>
        <p class="two-column-plan-desc">For businesses that need stronger conversion sections, more flexibility, and better support.</p>

        <div class="two-column-best">
          <strong>Best for</strong>
          <span>Business websites, service pages, SaaS landing pages, and conversion-focused offers.</span>
        </div>

        <div class="two-column-price">
          <strong>$59</strong>
          <span>/month</span>
        </div>

        <ul class="two-column-features">
          <li>Unlimited sections</li>
          <li>Advanced pricing UI</li>
          <li>Priority support</li>
          <li>CTA-focused layout</li>
        </ul>

        <a class="two-column-button" href="#">Choose Professional</a>
      </div>
    </article>

  </div>

</section>

CSS

.two-column-pricing{
width:min(100%,1040px);
}

.two-column-pricing-header{
max-width:760px;
margin:0 auto 30px;
text-align:center;
}

.two-column-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.two-column-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.two-column-pricing-title span{
background:linear-gradient(135deg,#2563eb,#111827);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.two-column-pricing-text{
max-width:640px;
margin:0 auto;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.two-column-pricing-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
align-items:stretch;
}

.two-column-plan{
display:flex;
flex-direction:column;
padding:28px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 24px 70px rgba(15,23,42,.10);
position:relative;
overflow:hidden;
}

.two-column-plan.is-pro{
background:#0f172a;
border-color:rgba(37,99,235,.34);
box-shadow:0 34px 90px rgba(15,23,42,.26);
}

.two-column-plan.is-pro::before{
content:"";
position:absolute;
right:-90px;
top:-90px;
width:250px;
height:250px;
border-radius:999px;
background:rgba(37,99,235,.26);
}

.two-column-plan-inner{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
height:100%;
}

.two-column-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
margin-bottom:24px;
}

.two-column-plan-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:#f1f5f9;
color:#334155;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.two-column-plan.is-pro .two-column-plan-label{
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
}

.two-column-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 11px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
white-space:nowrap;
}

.two-column-plan h3{
margin:0 0 10px;
color:#0f172a;
font-size:32px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
}

.two-column-plan.is-pro h3{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.two-column-plan-desc{
min-height:82px;
margin:0 0 24px;
color:#64748b;
font-size:15px;
line-height:1.7;
}

.two-column-plan.is-pro .two-column-plan-desc{
color:#cbd5e1;
}

.two-column-best{
display:grid;
gap:8px;
margin-bottom:24px;
padding:18px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.two-column-plan.is-pro .two-column-best{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.12);
}

.two-column-best strong{
color:#0f172a;
font-size:14px;
font-weight:950;
}

.two-column-plan.is-pro .two-column-best strong{
color:#ffffff;
}

.two-column-best span{
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.two-column-plan.is-pro .two-column-best span{
color:#cbd5e1;
}

.two-column-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:24px;
color:#0f172a;
}

.two-column-plan.is-pro .two-column-price{
color:#ffffff;
}

.two-column-price strong{
font-size:58px;
line-height:.9;
font-weight:950;
letter-spacing:-.065em;
}

.two-column-price span{
padding-bottom:7px;
color:#64748b;
font-size:15px;
font-weight:850;
}

.two-column-plan.is-pro .two-column-price span{
color:#cbd5e1;
}

.two-column-features{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:0 0 28px;
padding:0;
list-style:none;
}

.two-column-features li{
display:flex;
gap:9px;
align-items:flex-start;
margin:0;
padding:12px;
border-radius:16px;
background:#f8fafc;
color:#334155;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.two-column-plan.is-pro .two-column-features li{
background:rgba(255,255,255,.08);
color:#e2e8f0;
}

.two-column-features li::before{
content:"✓";
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background:#dbeafe;
color:#2563eb;
font-size:11px;
font-weight:950;
}

.two-column-plan.is-pro .two-column-features li::before{
background:#2563eb;
color:#ffffff;
}

.two-column-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.two-column-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.two-column-plan.is-pro .two-column-button{
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
}

.two-column-plan.is-pro .two-column-button:hover{
background:#dbeafe;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
}

@media (max-width:860px){
.two-column-pricing-grid{
grid-template-columns:1fr;
max-width:580px;
margin:0 auto;
}

.two-column-plan-desc{
min-height:auto;
}
}

@media (max-width:640px){
.two-column-pricing-header{
text-align:left;
}

.two-column-pricing-title{
font-size:34px;
}

.two-column-plan{
padding:22px;
border-radius:26px;
}

.two-column-features{
grid-template-columns:1fr;
}

.two-column-price strong{
font-size:44px;
}

.two-column-plan-top{
flex-direction:column;
align-items:flex-start;
}
}

This two column pricing table is useful when you want to reduce decision fatigue. Instead of showing too many options, the layout presents two clear paths and makes the difference between personal and business pricing easy to understand.

20. Four Column Pricing Table

Four column pricing tables are useful when a website needs to show a broader range of plans. They work well for SaaS tools, hosting companies, agencies, memberships, productized services, and platforms that need clear upgrade paths from free or basic plans to enterprise-level offers.

This example uses a four-plan pricing grid with compact cards, clear plan hierarchy, a highlighted recommended plan, and a responsive structure that stacks cleanly on smaller screens. The layout is built to handle more plans without feeling too crowded.

  • Designed for websites that need four pricing plans
  • Works well for free, starter, professional, and enterprise pricing structures
  • Uses compact card spacing so four columns fit on desktop
  • Includes a featured plan without making the other plans disappear
  • Responsive layout changes from four columns to two columns and then one column
Four Plans

Show a complete upgrade path with four pricing tiers

Use this layout when your product needs more than three plans but still has to stay readable and responsive.

F
Free

Free

For users who want to test the basics before choosing a paid plan.

$0 /mo
  • One project
  • Basic components
  • Community support
Start Free
S
Starter

Starter

For small websites that need a clean and responsive pricing section.

$19 /mo
  • Three projects
  • Responsive pricing UI
  • Email support
Choose Starter
P
Popular

Pro

For growing websites that need advanced sections and better conversion tools.

$59 /mo
  • Unlimited sections
  • Advanced pricing cards
  • Priority support
Choose Pro
E
Enterprise

Scale

For teams that need custom pricing systems and dedicated support.

$149 /mo
  • Custom UI system
  • Team-ready sections
  • Dedicated support
Contact Sales
Free trial available No setup fees Cancel anytime Secure checkout

HTML

<section class="four-column-pricing">

  <div class="four-column-pricing-header">
    <div>
      <div class="four-column-pricing-kicker">Four Plans</div>
      <h3 class="four-column-pricing-title">Show a complete upgrade path with <span>four pricing tiers</span></h3>
    </div>
    <p class="four-column-pricing-note">Use this layout when your product needs more than three plans but still has to stay readable and responsive.</p>
  </div>

  <div class="four-column-grid">

    <article class="four-column-card">
      <div class="four-column-card-top">
        <div class="four-column-icon">F</div>
        <span class="four-column-badge">Free</span>
      </div>
      <h3>Free</h3>
      <p class="four-column-desc">For users who want to test the basics before choosing a paid plan.</p>
      <div class="four-column-price">
        <strong>$0</strong>
        <span>/mo</span>
      </div>
      <ul class="four-column-features">
        <li>One project</li>
        <li>Basic components</li>
        <li>Community support</li>
      </ul>
      <a class="four-column-button" href="#">Start Free</a>
    </article>

    <article class="four-column-card">
      <div class="four-column-card-top">
        <div class="four-column-icon">S</div>
        <span class="four-column-badge">Starter</span>
      </div>
      <h3>Starter</h3>
      <p class="four-column-desc">For small websites that need a clean and responsive pricing section.</p>
      <div class="four-column-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <ul class="four-column-features">
        <li>Three projects</li>
        <li>Responsive pricing UI</li>
        <li>Email support</li>
      </ul>
      <a class="four-column-button" href="#">Choose Starter</a>
    </article>

    <article class="four-column-card is-featured">
      <div class="four-column-card-top">
        <div class="four-column-icon">P</div>
        <span class="four-column-badge">Popular</span>
      </div>
      <h3>Pro</h3>
      <p class="four-column-desc">For growing websites that need advanced sections and better conversion tools.</p>
      <div class="four-column-price">
        <strong>$59</strong>
        <span>/mo</span>
      </div>
      <ul class="four-column-features">
        <li>Unlimited sections</li>
        <li>Advanced pricing cards</li>
        <li>Priority support</li>
      </ul>
      <a class="four-column-button" href="#">Choose Pro</a>
    </article>

    <article class="four-column-card">
      <div class="four-column-card-top">
        <div class="four-column-icon">E</div>
        <span class="four-column-badge">Enterprise</span>
      </div>
      <h3>Scale</h3>
      <p class="four-column-desc">For teams that need custom pricing systems and dedicated support.</p>
      <div class="four-column-price">
        <strong>$149</strong>
        <span>/mo</span>
      </div>
      <ul class="four-column-features">
        <li>Custom UI system</li>
        <li>Team-ready sections</li>
        <li>Dedicated support</li>
      </ul>
      <a class="four-column-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="four-column-footer">
    <span>Free trial available</span>
    <span>No setup fees</span>
    <span>Cancel anytime</span>
    <span>Secure checkout</span>
  </div>

</section>

CSS

.four-column-pricing{
width:min(100%,1160px);
}

.four-column-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.four-column-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.four-column-pricing-title{
margin:0;
max-width:760px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.four-column-pricing-title span{
background:linear-gradient(135deg,#7c3aed,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.four-column-pricing-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.four-column-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
align-items:stretch;
}

.four-column-card{
position:relative;
display:flex;
flex-direction:column;
padding:18px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
overflow:hidden;
}

.four-column-card.is-featured{
border-color:rgba(124,58,237,.44);
box-shadow:0 30px 80px rgba(124,58,237,.16);
}

.four-column-card.is-featured::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:8px;
background:linear-gradient(90deg,#7c3aed,#2563eb);
}

.four-column-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
margin-bottom:18px;
}

.four-column-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:16px;
background:#f5f3ff;
color:#7c3aed;
font-size:17px;
font-weight:950;
}

.four-column-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 8px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:10px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
}

.four-column-card.is-featured .four-column-badge{
background:#0f172a;
color:#ffffff;
}

.four-column-card h3{
margin:0 0 7px;
color:#0f172a;
font-size:21px;
line-height:1.15;
font-weight:950;
}

.four-column-desc{
min-height:66px;
margin:0 0 18px;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.four-column-price{
display:flex;
align-items:flex-end;
gap:5px;
margin-bottom:18px;
color:#0f172a;
}

.four-column-price strong{
font-size:40px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.four-column-price span{
padding-bottom:5px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.four-column-features{
display:grid;
gap:10px;
margin:0 0 22px;
padding:0;
list-style:none;
}

.four-column-features li{
position:relative;
margin:0;
padding-left:24px;
color:#334155;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.four-column-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
border-radius:999px;
background:#ede9fe;
color:#7c3aed;
font-size:10px;
font-weight:950;
}

.four-column-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
margin-top:auto;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.four-column-button:hover{
background:#7c3aed;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(124,58,237,.22);
}

.four-column-card.is-featured .four-column-button{
background:linear-gradient(135deg,#7c3aed,#2563eb);
}

.four-column-footer{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:18px;
}

.four-column-footer span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#64748b;
font-size:12px;
font-weight:850;
}

@media (max-width:1080px){
.four-column-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:760px){
.four-column-pricing-header{
grid-template-columns:1fr;
}

.four-column-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.four-column-pricing-title{
font-size:34px;
}

.four-column-card{
padding:18px;
border-radius:24px;
}

.four-column-desc{
min-height:auto;
}

.four-column-footer{
justify-content:flex-start;
}
}

This four column pricing table is useful when a product has a wider upgrade path. The responsive grid keeps four plans readable on desktop, then adapts to two columns and finally one column on smaller screens.

21. Pricing Table with Icons

Pricing tables with icons are useful when each plan needs a stronger visual identity. Icons help users quickly understand whether a plan is for beginners, growing teams, advanced users, or enterprise customers.

This example uses large icon blocks, short plan positioning, compact plan metrics, and separate CTA areas. The layout is more visual than a standard pricing card and works well for SaaS tools, creative services, app subscriptions, and productized service plans.

  • Uses large icon areas to make each pricing plan easier to identify
  • Good for SaaS, creative services, apps, and feature-based pricing
  • Includes plan positioning, metrics, features, and CTA buttons
  • Featured plan uses icon color, border, and badge emphasis
  • Responsive layout turns the icon pricing cards into stacked mobile blocks
Icon Pricing

Give every pricing plan a clear visual identity

Use icons when each plan represents a different user type, feature level, or product experience.

⚡
Launch Fast setup

Starter

For small projects that need a simple pricing section and a fast launch.

$19 /mo
3 Projects
Basic Support
  • Responsive pricing cards
  • Basic feature sections
  • Email support
Choose Starter
✦
Popular Best value

Growth

For growing websites that need better conversion sections and more flexibility.

$59 /mo
20 Projects
Priority Support
  • Advanced pricing layouts
  • Conversion-focused UI
  • Priority support
Choose Growth
◆
Scale Custom UI

Enterprise

For teams that need custom pricing systems, support, and reusable UI components.

$149 /mo
∞ Projects
Team Support
  • Custom pricing sections
  • Team-ready components
  • Dedicated support
Contact Sales

HTML

<section class="icon-pricing">

  <div class="icon-pricing-header">
    <div>
      <div class="icon-pricing-kicker">Icon Pricing</div>
      <h3 class="icon-pricing-title">Give every pricing plan a <span>clear visual identity</span></h3>
    </div>
    <p class="icon-pricing-note">Use icons when each plan represents a different user type, feature level, or product experience.</p>
  </div>

  <div class="icon-pricing-grid">

    <article class="icon-pricing-card is-blue">
      <div class="icon-pricing-visual">
        <div class="icon-pricing-icon">⚡</div>
        <div class="icon-pricing-visual-bottom">
          <span>Launch</span>
          <strong>Fast setup</strong>
        </div>
      </div>
      <h3>Starter</h3>
      <p class="icon-pricing-desc">For small projects that need a simple pricing section and a fast launch.</p>
      <div class="icon-pricing-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <div class="icon-pricing-metrics">
        <div class="icon-pricing-metric">
          <strong>3</strong>
          <span>Projects</span>
        </div>
        <div class="icon-pricing-metric">
          <strong>Basic</strong>
          <span>Support</span>
        </div>
      </div>
      <ul class="icon-pricing-features">
        <li>Responsive pricing cards</li>
        <li>Basic feature sections</li>
        <li>Email support</li>
      </ul>
      <a class="icon-pricing-button" href="#">Choose Starter</a>
    </article>

    <article class="icon-pricing-card is-purple is-featured">
      <div class="icon-pricing-visual">
        <div class="icon-pricing-icon">✦</div>
        <div class="icon-pricing-visual-bottom">
          <span>Popular</span>
          <strong>Best value</strong>
        </div>
      </div>
      <h3>Growth</h3>
      <p class="icon-pricing-desc">For growing websites that need better conversion sections and more flexibility.</p>
      <div class="icon-pricing-price">
        <strong>$59</strong>
        <span>/mo</span>
      </div>
      <div class="icon-pricing-metrics">
        <div class="icon-pricing-metric">
          <strong>20</strong>
          <span>Projects</span>
        </div>
        <div class="icon-pricing-metric">
          <strong>Priority</strong>
          <span>Support</span>
        </div>
      </div>
      <ul class="icon-pricing-features">
        <li>Advanced pricing layouts</li>
        <li>Conversion-focused UI</li>
        <li>Priority support</li>
      </ul>
      <a class="icon-pricing-button" href="#">Choose Growth</a>
    </article>

    <article class="icon-pricing-card is-dark">
      <div class="icon-pricing-visual">
        <div class="icon-pricing-icon">◆</div>
        <div class="icon-pricing-visual-bottom">
          <span>Scale</span>
          <strong>Custom UI</strong>
        </div>
      </div>
      <h3>Enterprise</h3>
      <p class="icon-pricing-desc">For teams that need custom pricing systems, support, and reusable UI components.</p>
      <div class="icon-pricing-price">
        <strong>$149</strong>
        <span>/mo</span>
      </div>
      <div class="icon-pricing-metrics">
        <div class="icon-pricing-metric">
          <strong>∞</strong>
          <span>Projects</span>
        </div>
        <div class="icon-pricing-metric">
          <strong>Team</strong>
          <span>Support</span>
        </div>
      </div>
      <ul class="icon-pricing-features">
        <li>Custom pricing sections</li>
        <li>Team-ready components</li>
        <li>Dedicated support</li>
      </ul>
      <a class="icon-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.icon-pricing{
width:min(100%,1080px);
}

.icon-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:24px;
align-items:end;
margin-bottom:30px;
}

.icon-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.icon-pricing-title{
margin:0;
max-width:760px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.icon-pricing-title span{
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.icon-pricing-note{
margin:0;
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 36px rgba(15,23,42,.08);
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:750;
}

.icon-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.icon-pricing-card{
display:flex;
flex-direction:column;
padding:18px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.09);
overflow:hidden;
}

.icon-pricing-card.is-featured{
border-color:rgba(14,165,233,.46);
box-shadow:0 32px 90px rgba(14,165,233,.16);
}

.icon-pricing-visual{
position:relative;
min-height:180px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:22px;
border-radius:26px;
background:#f8fafc;
overflow:hidden;
margin-bottom:20px;
}

.icon-pricing-card.is-blue .icon-pricing-visual{
background:linear-gradient(135deg,#e0f2fe,#f8fafc);
}

.icon-pricing-card.is-purple .icon-pricing-visual{
background:linear-gradient(135deg,#ede9fe,#f8fafc);
}

.icon-pricing-card.is-dark .icon-pricing-visual{
background:#0f172a;
}

.icon-pricing-visual::after{
content:"";
position:absolute;
right:-48px;
bottom:-48px;
width:140px;
height:140px;
border-radius:999px;
background:rgba(14,165,233,.14);
}

.icon-pricing-card.is-purple .icon-pricing-visual::after{
background:rgba(139,92,246,.16);
}

.icon-pricing-card.is-dark .icon-pricing-visual::after{
background:rgba(255,255,255,.10);
}

.icon-pricing-icon{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:62px;
height:62px;
border-radius:22px;
background:#0ea5e9;
color:#ffffff;
font-size:28px;
font-weight:950;
box-shadow:0 18px 42px rgba(14,165,233,.26);
}

.icon-pricing-card.is-purple .icon-pricing-icon{
background:#8b5cf6;
box-shadow:0 18px 42px rgba(139,92,246,.26);
}

.icon-pricing-card.is-dark .icon-pricing-icon{
background:#ffffff;
color:#0f172a;
box-shadow:0 18px 42px rgba(255,255,255,.16);
}

.icon-pricing-visual-bottom{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
}

.icon-pricing-visual-bottom span{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.78);
color:#0369a1;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.icon-pricing-card.is-dark .icon-pricing-visual-bottom span{
background:rgba(255,255,255,.12);
color:#e0f2fe;
}

.icon-pricing-visual-bottom strong{
color:#0f172a;
font-size:13px;
font-weight:950;
}

.icon-pricing-card.is-dark .icon-pricing-visual-bottom strong{
color:#ffffff;
}

.icon-pricing-card h3{
margin:0 0 8px;
color:#0f172a;
font-size:25px;
line-height:1.15;
font-weight:950;
}

.icon-pricing-desc{
min-height:70px;
margin:0 0 20px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.icon-pricing-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:18px;
color:#0f172a;
}

.icon-pricing-price strong{
font-size:48px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.icon-pricing-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.icon-pricing-metrics{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.icon-pricing-metric{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.icon-pricing-metric strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.icon-pricing-metric span{
display:block;
color:#64748b;
font-size:11px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.icon-pricing-features{
display:grid;
gap:10px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.icon-pricing-features li{
position:relative;
margin:0;
padding-left:25px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.icon-pricing-features li::before{
content:"";
position:absolute;
left:0;
top:7px;
width:9px;
height:9px;
border-radius:999px;
background:#0ea5e9;
box-shadow:0 0 0 4px rgba(14,165,233,.10);
}

.icon-pricing-card.is-purple .icon-pricing-features li::before{
background:#8b5cf6;
box-shadow:0 0 0 4px rgba(139,92,246,.10);
}

.icon-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.icon-pricing-button:hover{
background:#0ea5e9;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(14,165,233,.22);
}

.icon-pricing-card.is-featured .icon-pricing-button{
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
}

@media (max-width:960px){
.icon-pricing-header{
grid-template-columns:1fr;
}

.icon-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.icon-pricing-title{
font-size:34px;
}

.icon-pricing-card{
padding:16px;
border-radius:26px;
}

.icon-pricing-visual{
min-height:160px;
border-radius:22px;
}

.icon-pricing-desc{
min-height:auto;
}

.icon-pricing-metrics{
grid-template-columns:1fr;
}
}

This pricing table with icons is useful when your plans should feel more visual and easier to identify. The icon panels make each pricing tier more memorable while still keeping the price, metrics, and CTA button easy to scan.

22. Pricing Table with Feature Checkmarks

Pricing tables with feature checkmarks are useful when users need to understand exactly what is included in each plan. Checkmarks, muted unavailable items, and grouped features make the pricing decision easier to scan.

This example uses a checklist-focused pricing layout. Instead of giving every feature the same visual weight, included features use clear checkmarks while unavailable features are muted. This makes the pricing table useful for SaaS plans, memberships, service packages, and feature-limited products.

  • Uses clear included and unavailable feature states
  • Good for SaaS, memberships, service packages, and software pricing
  • Highlights plan differences with checkmarks and muted unavailable items
  • Includes a compact plan summary before the feature checklist
  • Responsive layout keeps each checklist card readable on mobile
Feature Checkmarks

Show exactly what every plan includes

Use checkmarks and muted unavailable items when users need to compare features quickly before choosing a plan.

Basic

For simple websites and first projects.

Start
$15 /mo
3 Projects
Basic Support

Included features

  • Responsive pricing layout
  • Basic CTA buttons
  • Email support
  • Advanced analytics
  • Custom integrations
Choose Basic

Growth

For conversion-focused websites.

Popular
$49 /mo
20 Projects
Priority Support

Included features

  • Responsive pricing layout
  • Advanced CTA buttons
  • Priority support
  • Advanced analytics
  • Custom integrations
Choose Growth

Scale

For teams and advanced projects.

Team
$129 /mo
∞ Projects
Custom Support

Included features

  • Responsive pricing layout
  • Advanced CTA buttons
  • Priority support
  • Advanced analytics
  • Custom integrations
Contact Sales

HTML

<section class="checkmark-pricing">

  <div class="checkmark-pricing-header">
    <div class="checkmark-pricing-kicker">Feature Checkmarks</div>
    <h3 class="checkmark-pricing-title">Show exactly what every plan <span>includes</span></h3>
    <p class="checkmark-pricing-text">Use checkmarks and muted unavailable items when users need to compare features quickly before choosing a plan.</p>
  </div>

  <div class="checkmark-pricing-grid">

    <article class="checkmark-pricing-card">
      <div class="checkmark-plan-top">
        <div class="checkmark-plan-name">
          <h3>Basic</h3>
          <p>For simple websites and first projects.</p>
        </div>
        <span class="checkmark-plan-badge">Start</span>
      </div>
      <div class="checkmark-price">
        <strong>$15</strong>
        <span>/mo</span>
      </div>
      <div class="checkmark-summary">
        <div class="checkmark-summary-item">
          <strong>3</strong>
          <span>Projects</span>
        </div>
        <div class="checkmark-summary-item">
          <strong>Basic</strong>
          <span>Support</span>
        </div>
      </div>
      <div class="checkmark-feature-group">
        <p class="checkmark-feature-title">Included features</p>
        <ul class="checkmark-feature-list">
          <li>Responsive pricing layout</li>
          <li>Basic CTA buttons</li>
          <li>Email support</li>
          <li class="is-muted">Advanced analytics</li>
          <li class="is-muted">Custom integrations</li>
        </ul>
      </div>
      <a class="checkmark-button" href="#">Choose Basic</a>
    </article>

    <article class="checkmark-pricing-card is-featured">
      <div class="checkmark-plan-top">
        <div class="checkmark-plan-name">
          <h3>Growth</h3>
          <p>For conversion-focused websites.</p>
        </div>
        <span class="checkmark-plan-badge">Popular</span>
      </div>
      <div class="checkmark-price">
        <strong>$49</strong>
        <span>/mo</span>
      </div>
      <div class="checkmark-summary">
        <div class="checkmark-summary-item">
          <strong>20</strong>
          <span>Projects</span>
        </div>
        <div class="checkmark-summary-item">
          <strong>Priority</strong>
          <span>Support</span>
        </div>
      </div>
      <div class="checkmark-feature-group">
        <p class="checkmark-feature-title">Included features</p>
        <ul class="checkmark-feature-list">
          <li>Responsive pricing layout</li>
          <li>Advanced CTA buttons</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
          <li class="is-muted">Custom integrations</li>
        </ul>
      </div>
      <a class="checkmark-button" href="#">Choose Growth</a>
    </article>

    <article class="checkmark-pricing-card">
      <div class="checkmark-plan-top">
        <div class="checkmark-plan-name">
          <h3>Scale</h3>
          <p>For teams and advanced projects.</p>
        </div>
        <span class="checkmark-plan-badge">Team</span>
      </div>
      <div class="checkmark-price">
        <strong>$129</strong>
        <span>/mo</span>
      </div>
      <div class="checkmark-summary">
        <div class="checkmark-summary-item">
          <strong>∞</strong>
          <span>Projects</span>
        </div>
        <div class="checkmark-summary-item">
          <strong>Custom</strong>
          <span>Support</span>
        </div>
      </div>
      <div class="checkmark-feature-group">
        <p class="checkmark-feature-title">Included features</p>
        <ul class="checkmark-feature-list">
          <li>Responsive pricing layout</li>
          <li>Advanced CTA buttons</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
          <li>Custom integrations</li>
        </ul>
      </div>
      <a class="checkmark-button" href="#">Contact Sales</a>
    </article>

  </div>

</section>

CSS

.checkmark-pricing{
width:min(100%,1100px);
}

.checkmark-pricing-header{
max-width:760px;
margin:0 auto 30px;
text-align:center;
}

.checkmark-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.checkmark-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.checkmark-pricing-title span{
background:linear-gradient(135deg,#16a34a,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.checkmark-pricing-text{
max-width:660px;
margin:0 auto;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.checkmark-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:start;
}

.checkmark-pricing-card{
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.09);
}

.checkmark-pricing-card.is-featured{
border-color:rgba(34,197,94,.46);
box-shadow:0 30px 80px rgba(34,197,94,.16);
}

.checkmark-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.checkmark-plan-name h3{
margin:0 0 7px;
color:#0f172a;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.checkmark-plan-name p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:700;
}

.checkmark-plan-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
}

.checkmark-pricing-card.is-featured .checkmark-plan-badge{
background:#16a34a;
color:#ffffff;
}

.checkmark-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:20px;
color:#0f172a;
}

.checkmark-price strong{
font-size:48px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.checkmark-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.checkmark-summary{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.checkmark-summary-item{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.checkmark-summary-item strong{
display:block;
margin-bottom:3px;
color:#0f172a;
font-size:15px;
font-weight:950;
}

.checkmark-summary-item span{
display:block;
color:#64748b;
font-size:11px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.checkmark-feature-group{
padding-top:18px;
border-top:1px solid rgba(15,23,42,.08);
margin-bottom:22px;
}

.checkmark-feature-title{
margin:0 0 12px;
color:#0f172a;
font-size:13px;
font-weight:950;
letter-spacing:.07em;
text-transform:uppercase;
}

.checkmark-feature-list{
display:grid;
gap:11px;
margin:0;
padding:0;
list-style:none;
}

.checkmark-feature-list li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.checkmark-feature-list li::before{
content:"✓";
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
}

.checkmark-feature-list li.is-muted{
color:#94a3b8;
text-decoration:line-through;
text-decoration-thickness:1px;
}

.checkmark-feature-list li.is-muted::before{
content:"–";
background:#f1f5f9;
color:#94a3b8;
}

.checkmark-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.checkmark-button:hover{
background:#16a34a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(22,163,74,.22);
}

.checkmark-pricing-card.is-featured .checkmark-button{
background:linear-gradient(135deg,#16a34a,#2563eb);
}

@media (max-width:960px){
.checkmark-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.checkmark-pricing-header{
text-align:left;
}

.checkmark-pricing-title{
font-size:34px;
}

.checkmark-pricing-card{
padding:20px;
border-radius:24px;
}

.checkmark-summary{
grid-template-columns:1fr;
}

.checkmark-plan-top{
flex-direction:column;
align-items:flex-start;
}
}

This pricing table with feature checkmarks is useful when plan differences need to be very clear. The included and unavailable states help users compare plans faster without reading long paragraphs.

23. CTA-Focused Pricing Table

CTA-focused pricing tables are designed to guide visitors toward action. Instead of treating the button as a small element at the bottom of each card, this layout makes the call-to-action area one of the strongest parts of the pricing section.

This example uses a conversion-focused pricing layout with a large CTA panel, plan cards, reassurance text, and a strong final decision area. It works well for landing pages, SaaS products, digital services, and subscription offers where the pricing section needs to push users toward signup.

  • Designed for pricing sections where the CTA must be highly visible
  • Uses a large conversion panel next to compact pricing plans
  • Includes reassurance copy, trust points, and action-focused buttons
  • Works well for SaaS, service landing pages, and digital products
  • Responsive layout stacks the CTA panel above the pricing plans on mobile
CTA Focused Pricing

Choose faster and start today

This pricing section is built around action. The main CTA panel explains the value, reduces hesitation, and pushes visitors toward the next step.

Ready to launch your pricing section?

Start with the recommended plan and upgrade later when your website grows.

Start with Growth
  • No setup fees
  • Cancel anytime
  • Secure checkout

Starter

For small landing pages and simple pricing blocks.

1 project Email support Basic UI
$19 /month
Choose

Growth

Recommended

For websites that need better conversion sections and stronger pricing UI.

Unlimited sections Priority support CTA blocks
$59 /month
Choose

Scale

For teams that need custom pricing components and premium support.

Custom UI Team tools Dedicated support
$129 /month
Contact

HTML

<section class="cta-pricing">

  <div class="cta-pricing-panel">
    <div class="cta-pricing-panel-content">
      <div class="cta-pricing-kicker">CTA Focused Pricing</div>
      <h3 class="cta-pricing-title">Choose faster and <span>start today</span></h3>
      <p class="cta-pricing-text">This pricing section is built around action. The main CTA panel explains the value, reduces hesitation, and pushes visitors toward the next step.</p>

      <div class="cta-pricing-action-box">
        <strong>Ready to launch your pricing section?</strong>
        <p>Start with the recommended plan and upgrade later when your website grows.</p>
        <a class="cta-pricing-main-button" href="#">Start with Growth</a>
      </div>
    </div>

    <div class="cta-pricing-panel-bottom">
      <ul class="cta-pricing-trust">
        <li>No setup fees</li>
        <li>Cancel anytime</li>
        <li>Secure checkout</li>
      </ul>
    </div>
  </div>

  <div class="cta-pricing-plans">

    <article class="cta-pricing-plan">
      <div class="cta-pricing-plan-main">
        <div class="cta-pricing-plan-top">
          <h3>Starter</h3>
        </div>
        <p>For small landing pages and simple pricing blocks.</p>
        <div class="cta-pricing-plan-features">
          <span>1 project</span>
          <span>Email support</span>
          <span>Basic UI</span>
        </div>
      </div>
      <div class="cta-pricing-side">
        <div class="cta-pricing-price">
          <strong>$19</strong>
          <span>/month</span>
        </div>
        <a class="cta-pricing-button" href="#">Choose</a>
      </div>
    </article>

    <article class="cta-pricing-plan is-featured">
      <div class="cta-pricing-plan-main">
        <div class="cta-pricing-plan-top">
          <h3>Growth</h3>
          <span class="cta-pricing-badge">Recommended</span>
        </div>
        <p>For websites that need better conversion sections and stronger pricing UI.</p>
        <div class="cta-pricing-plan-features">
          <span>Unlimited sections</span>
          <span>Priority support</span>
          <span>CTA blocks</span>
        </div>
      </div>
      <div class="cta-pricing-side">
        <div class="cta-pricing-price">
          <strong>$59</strong>
          <span>/month</span>
        </div>
        <a class="cta-pricing-button" href="#">Choose</a>
      </div>
    </article>

    <article class="cta-pricing-plan">
      <div class="cta-pricing-plan-main">
        <div class="cta-pricing-plan-top">
          <h3>Scale</h3>
        </div>
        <p>For teams that need custom pricing components and premium support.</p>
        <div class="cta-pricing-plan-features">
          <span>Custom UI</span>
          <span>Team tools</span>
          <span>Dedicated support</span>
        </div>
      </div>
      <div class="cta-pricing-side">
        <div class="cta-pricing-price">
          <strong>$129</strong>
          <span>/month</span>
        </div>
        <a class="cta-pricing-button" href="#">Contact</a>
      </div>
    </article>

  </div>

</section>

CSS

.cta-pricing{
width:min(100%,1080px);
display:grid;
grid-template-columns:390px minmax(0,1fr);
gap:20px;
align-items:stretch;
}

.cta-pricing-panel{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:30px;
border-radius:36px;
background:#111827;
color:#ffffff;
overflow:hidden;
box-shadow:0 32px 90px rgba(17,24,39,.26);
}

.cta-pricing-panel::before{
content:"";
position:absolute;
right:-110px;
top:-110px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(249,115,22,.28);
}

.cta-pricing-panel::after{
content:"";
position:absolute;
left:-110px;
bottom:-120px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(239,68,68,.20);
}

.cta-pricing-panel-content,
.cta-pricing-panel-bottom{
position:relative;
z-index:2;
}

.cta-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#fed7aa;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.cta-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,62px);
line-height:.98;
font-weight:950;
letter-spacing:-.07em;
}

.cta-pricing-title span{
color:#fb923c;
-webkit-text-fill-color:#fb923c;
}

.cta-pricing-text{
margin:0;
color:#e5e7eb;
font-size:16px;
line-height:1.75;
}

.cta-pricing-action-box{
display:grid;
gap:12px;
margin-top:34px;
padding:20px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.cta-pricing-action-box strong{
color:#ffffff;
font-size:20px;
line-height:1.2;
font-weight:950;
}

.cta-pricing-action-box p{
margin:0;
color:#d1d5db;
font-size:13px;
line-height:1.55;
font-weight:700;
}

.cta-pricing-main-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border-radius:999px;
background:linear-gradient(135deg,#f97316,#ef4444);
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
box-shadow:0 16px 38px rgba(249,115,22,.24);
transition:transform .22s ease,box-shadow .22s ease;
}

.cta-pricing-main-button:hover{
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 22px 48px rgba(249,115,22,.30);
}

.cta-pricing-trust{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.cta-pricing-trust li{
display:flex;
gap:10px;
align-items:center;
margin:0;
color:#e5e7eb;
font-size:13px;
font-weight:800;
}

.cta-pricing-trust li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:20px;
height:20px;
border-radius:999px;
background:rgba(34,197,94,.16);
color:#86efac;
font-size:12px;
font-weight:950;
}

.cta-pricing-plans{
display:grid;
gap:14px;
align-content:stretch;
}

.cta-pricing-plan{
display:grid;
grid-template-columns:minmax(0,1fr) 150px;
gap:18px;
align-items:center;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.cta-pricing-plan.is-featured{
border-color:rgba(249,115,22,.46);
box-shadow:0 28px 80px rgba(249,115,22,.16);
}

.cta-pricing-plan-main{
min-width:0;
}

.cta-pricing-plan-top{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.cta-pricing-plan h3{
margin:0;
color:#111827;
font-size:23px;
line-height:1.18;
font-weight:950;
}

.cta-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.cta-pricing-plan p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.cta-pricing-plan-features{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}

.cta-pricing-plan-features span{
display:inline-flex;
align-items:center;
padding:7px 9px;
border-radius:999px;
background:#f8fafc;
color:#475569;
font-size:12px;
line-height:1;
font-weight:850;
}

.cta-pricing-side{
display:grid;
justify-items:end;
gap:12px;
}

.cta-pricing-price{
text-align:right;
color:#111827;
}

.cta-pricing-price strong{
display:block;
font-size:36px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.cta-pricing-price span{
display:block;
margin-top:5px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.cta-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 15px;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.cta-pricing-button:hover{
background:#f97316;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(249,115,22,.22);
}

.cta-pricing-plan.is-featured .cta-pricing-button{
background:linear-gradient(135deg,#f97316,#ef4444);
}

@media (max-width:960px){
.cta-pricing{
grid-template-columns:1fr;
max-width:680px;
}

.cta-pricing-panel{
min-height:auto;
}
}

@media (max-width:700px){
.cta-pricing-plan{
grid-template-columns:1fr;
}

.cta-pricing-side{
justify-items:start;
}

.cta-pricing-price{
text-align:left;
}
}

@media (max-width:640px){
.cta-pricing-panel{
padding:24px;
border-radius:28px;
}

.cta-pricing-title{
font-size:38px;
}

.cta-pricing-plan{
padding:18px;
border-radius:22px;
}

.cta-pricing-button{
width:100%;
}
}

This CTA-focused pricing table is useful when the goal is not only to compare plans, but also to push users toward a specific action. The large CTA panel helps reduce hesitation and makes the pricing section feel more conversion-driven.

24. Startup Pricing Table

Startup pricing tables should feel simple, scalable, and growth-oriented. Early-stage companies often need pricing that explains the path from launch to growth to scale without overwhelming visitors with too many technical details.

This example uses a startup journey layout. The pricing plans are arranged as stages of growth, with a timeline-style connector, stage numbers, startup-friendly labels, and clear upgrade logic. This makes the section feel different from a standard pricing card grid.

  • Designed for startups, SaaS products, MVP tools, and early-stage platforms
  • Uses a growth-stage journey layout instead of plain pricing cards
  • Shows launch, grow, and scale as a clear upgrade path
  • Includes stage numbers, milestone labels, pricing, and key benefits
  • Responsive layout stacks the startup journey cards on mobile
Startup Pricing

Pricing that grows with your startup journey

Use this layout when your pricing should explain a clear path from launch to growth to scale.

01 Launch

MVP

For early products, test launches, and simple landing pages.

$19 /mo
Best milestone Validate your idea with a clean pricing section and basic conversion flow.
  • One project workspace
  • Basic pricing components
  • Email support
Start MVP
02 Grow

Traction

For startups that need more sections, better conversion tools, and stronger plan comparison.

$59 /mo
Best milestone Turn early traffic into signups with clearer pricing and stronger CTA design.
  • Unlimited pricing sections
  • Advanced conversion blocks
  • Priority support
Choose Traction
03 Scale

Scaleup

For teams that need a reusable UI system, custom pricing flows, and dedicated support.

$149 /mo
Best milestone Build a scalable pricing experience for multiple products, pages, or markets.
  • Custom pricing system
  • Team-ready components
  • Dedicated support
Contact Sales
Built for MVPs Upgrade anytime Startup-friendly plans Responsive CSS

HTML

<section class="startup-pricing">

  <div class="startup-pricing-header">
    <div class="startup-pricing-kicker">Startup Pricing</div>
    <h3 class="startup-pricing-title">Pricing that grows with your <span>startup journey</span></h3>
    <p class="startup-pricing-text">Use this layout when your pricing should explain a clear path from launch to growth to scale.</p>
  </div>

  <div class="startup-pricing-journey">

    <article class="startup-pricing-step">
      <div class="startup-step-marker">
        <span class="startup-step-number">01</span>
        <span class="startup-step-label">Launch</span>
      </div>
      <h3>MVP</h3>
      <p class="startup-step-desc">For early products, test launches, and simple landing pages.</p>
      <div class="startup-step-price">
        <strong>$19</strong>
        <span>/mo</span>
      </div>
      <div class="startup-milestone">
        <strong>Best milestone</strong>
        <span>Validate your idea with a clean pricing section and basic conversion flow.</span>
      </div>
      <ul class="startup-step-list">
        <li>One project workspace</li>
        <li>Basic pricing components</li>
        <li>Email support</li>
      </ul>
      <a class="startup-step-button" href="#">Start MVP</a>
    </article>

    <article class="startup-pricing-step is-featured">
      <div class="startup-step-marker">
        <span class="startup-step-number">02</span>
        <span class="startup-step-label">Grow</span>
      </div>
      <h3>Traction</h3>
      <p class="startup-step-desc">For startups that need more sections, better conversion tools, and stronger plan comparison.</p>
      <div class="startup-step-price">
        <strong>$59</strong>
        <span>/mo</span>
      </div>
      <div class="startup-milestone">
        <strong>Best milestone</strong>
        <span>Turn early traffic into signups with clearer pricing and stronger CTA design.</span>
      </div>
      <ul class="startup-step-list">
        <li>Unlimited pricing sections</li>
        <li>Advanced conversion blocks</li>
        <li>Priority support</li>
      </ul>
      <a class="startup-step-button" href="#">Choose Traction</a>
    </article>

    <article class="startup-pricing-step">
      <div class="startup-step-marker">
        <span class="startup-step-number">03</span>
        <span class="startup-step-label">Scale</span>
      </div>
      <h3>Scaleup</h3>
      <p class="startup-step-desc">For teams that need a reusable UI system, custom pricing flows, and dedicated support.</p>
      <div class="startup-step-price">
        <strong>$149</strong>
        <span>/mo</span>
      </div>
      <div class="startup-milestone">
        <strong>Best milestone</strong>
        <span>Build a scalable pricing experience for multiple products, pages, or markets.</span>
      </div>
      <ul class="startup-step-list">
        <li>Custom pricing system</li>
        <li>Team-ready components</li>
        <li>Dedicated support</li>
      </ul>
      <a class="startup-step-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="startup-pricing-footer">
    <span>Built for MVPs</span>
    <span>Upgrade anytime</span>
    <span>Startup-friendly plans</span>
    <span>Responsive CSS</span>
  </div>

</section>

CSS

.startup-pricing{
width:min(100%,1080px);
}

.startup-pricing-header{
max-width:760px;
margin:0 auto 34px;
text-align:center;
}

.startup-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#4338ca;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.startup-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.startup-pricing-title span{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.startup-pricing-text{
max-width:660px;
margin:0 auto;
color:#64748b;
font-size:16px;
line-height:1.75;
}

.startup-pricing-journey{
position:relative;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.startup-pricing-journey::before{
content:"";
position:absolute;
left:12%;
right:12%;
top:52px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#4f46e5,#0ea5e9);
opacity:.28;
}

.startup-pricing-step{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
padding:22px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 22px 60px rgba(15,23,42,.09);
}

.startup-pricing-step.is-featured{
border-color:rgba(79,70,229,.42);
box-shadow:0 32px 88px rgba(79,70,229,.16);
transform:translateY(-10px);
}

.startup-step-marker{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:22px;
}

.startup-step-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:62px;
height:62px;
border-radius:22px;
background:#0f172a;
color:#ffffff;
font-size:20px;
font-weight:950;
box-shadow:0 16px 38px rgba(15,23,42,.18);
}

.startup-pricing-step.is-featured .startup-step-number{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
}

.startup-step-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.startup-pricing-step.is-featured .startup-step-label{
background:#e0e7ff;
color:#4338ca;
}

.startup-pricing-step h3{
margin:0 0 8px;
color:#0f172a;
font-size:25px;
line-height:1.15;
font-weight:950;
}

.startup-step-desc{
min-height:72px;
margin:0 0 22px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.startup-step-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:20px;
color:#0f172a;
}

.startup-step-price strong{
font-size:50px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.startup-step-price span{
padding-bottom:5px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.startup-milestone{
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
margin-bottom:22px;
}

.startup-milestone strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:14px;
font-weight:950;
}

.startup-milestone span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.startup-step-list{
display:grid;
gap:10px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.startup-step-list li{
position:relative;
margin:0;
padding-left:26px;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.startup-step-list li::before{
content:"";
position:absolute;
left:0;
top:7px;
width:9px;
height:9px;
border-radius:999px;
background:#4f46e5;
box-shadow:0 0 0 4px rgba(79,70,229,.10);
}

.startup-step-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.startup-step-button:hover{
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(79,70,229,.22);
}

.startup-pricing-step.is-featured .startup-step-button{
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
}

.startup-pricing-footer{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:22px;
}

.startup-pricing-footer span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
color:#64748b;
font-size:12px;
font-weight:850;
}

@media (max-width:960px){
.startup-pricing-journey{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.startup-pricing-journey::before{
display:none;
}

.startup-pricing-step.is-featured{
transform:none;
}
}

@media (max-width:640px){
.startup-pricing-header{
text-align:left;
}

.startup-pricing-title{
font-size:34px;
}

.startup-pricing-step{
padding:20px;
border-radius:26px;
}

.startup-step-desc{
min-height:auto;
}

.startup-step-price strong{
font-size:42px;
}

.startup-pricing-footer{
justify-content:flex-start;
}
}

This startup pricing table is useful when pricing needs to explain growth stages instead of only comparing features. The journey layout makes the upgrade path feel natural for startups moving from MVP to traction to scale.

25. Enterprise / Contact Sales Pricing Table

Enterprise pricing tables are different from standard pricing cards because large customers usually need custom contracts, security reviews, onboarding, account management, service-level agreements, and flexible usage limits. Instead of forcing a fixed price, this layout focuses on value, trust, and contacting sales.

This example uses a split enterprise pricing section with a large “Contact Sales” panel, security and support details, and smaller comparison cards for self-service plans. It works well for B2B SaaS websites, enterprise platforms, API products, hosting services, and software companies that sell to larger teams.

  • Designed for enterprise SaaS, B2B platforms, API products, and larger teams
  • Uses a custom quote panel instead of a normal monthly price card
  • Highlights SLA, security, onboarding, support, and account management
  • Includes smaller self-service plans for comparison
  • Responsive layout stacks the enterprise offer above plan cards on mobile
Enterprise Pricing

Custom pricing for serious teams

Use this layout when your largest customers need custom contracts, onboarding, security reviews, support agreements, and flexible usage limits.

Enterprise plan
Custom quote

Built around your team size, usage, security needs, integrations, and support requirements.

Contact Sales
99.9% SLA Custom uptime and support commitments.
Security SSO, roles, audit logs, and reviews.
Onboarding Dedicated launch and migration support.

Starter

For smaller teams that want self-service pricing and simple setup.

5 seats Email support Basic limits
$49 /month Start

Business

For growing teams that need more usage, priority support, and advanced controls.

25 seats Priority support Advanced roles
$199 /month Choose

Enterprise includes

  • Dedicated account manager
  • Custom usage limits and billing terms
  • Security review and compliance support
  • SSO, audit logs, and advanced permissions
  • Priority onboarding and migration assistance

HTML

<section class="enterprise-pricing">

  <div class="enterprise-pricing-main">
    <div class="enterprise-pricing-main-content">
      <div class="enterprise-pricing-kicker">Enterprise Pricing</div>
      <h3 class="enterprise-pricing-title">Custom pricing for <span>serious teams</span></h3>
      <p class="enterprise-pricing-text">Use this layout when your largest customers need custom contracts, onboarding, security reviews, support agreements, and flexible usage limits.</p>

      <div class="enterprise-pricing-quote">
        <span class="enterprise-pricing-quote-label">Enterprise plan</span>
        <div class="enterprise-pricing-quote-price">Custom quote</div>
        <p>Built around your team size, usage, security needs, integrations, and support requirements.</p>
        <a class="enterprise-pricing-button" href="#">Contact Sales</a>
      </div>
    </div>

    <div class="enterprise-pricing-main-bottom">
      <div class="enterprise-pricing-trust">
        <div class="enterprise-pricing-trust-item">
          <strong>99.9% SLA</strong>
          <span>Custom uptime and support commitments.</span>
        </div>
        <div class="enterprise-pricing-trust-item">
          <strong>Security</strong>
          <span>SSO, roles, audit logs, and reviews.</span>
        </div>
        <div class="enterprise-pricing-trust-item">
          <strong>Onboarding</strong>
          <span>Dedicated launch and migration support.</span>
        </div>
      </div>
    </div>
  </div>

  <div class="enterprise-pricing-side">

    <article class="enterprise-pricing-plan">
      <div>
        <h3>Starter</h3>
        <p>For smaller teams that want self-service pricing and simple setup.</p>
        <div class="enterprise-pricing-plan-tags">
          <span>5 seats</span>
          <span>Email support</span>
          <span>Basic limits</span>
        </div>
      </div>
      <div class="enterprise-pricing-side-price">
        <strong>$49</strong>
        <span>/month</span>
        <a class="enterprise-pricing-side-button" href="#">Start</a>
      </div>
    </article>

    <article class="enterprise-pricing-plan is-featured">
      <div>
        <h3>Business</h3>
        <p>For growing teams that need more usage, priority support, and advanced controls.</p>
        <div class="enterprise-pricing-plan-tags">
          <span>25 seats</span>
          <span>Priority support</span>
          <span>Advanced roles</span>
        </div>
      </div>
      <div class="enterprise-pricing-side-price">
        <strong>$199</strong>
        <span>/month</span>
        <a class="enterprise-pricing-side-button" href="#">Choose</a>
      </div>
    </article>

    <div class="enterprise-pricing-checklist">
      <h3>Enterprise includes</h3>
      <ul>
        <li>Dedicated account manager</li>
        <li>Custom usage limits and billing terms</li>
        <li>Security review and compliance support</li>
        <li>SSO, audit logs, and advanced permissions</li>
        <li>Priority onboarding and migration assistance</li>
      </ul>
    </div>

  </div>

</section>

CSS

.enterprise-pricing{
width:min(100%,1100px);
display:grid;
grid-template-columns:1.05fr .95fr;
gap:22px;
align-items:stretch;
}

.enterprise-pricing-main{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:560px;
padding:32px;
border-radius:38px;
background:#0f172a;
color:#ffffff;
overflow:hidden;
box-shadow:0 34px 90px rgba(15,23,42,.28);
}

.enterprise-pricing-main::before{
content:"";
position:absolute;
right:-110px;
top:-110px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(37,99,235,.28);
}

.enterprise-pricing-main::after{
content:"";
position:absolute;
left:-120px;
bottom:-130px;
width:300px;
height:300px;
border-radius:999px;
background:rgba(14,165,233,.14);
}

.enterprise-pricing-main-content,
.enterprise-pricing-main-bottom{
position:relative;
z-index:2;
}

.enterprise-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.enterprise-pricing-title{
margin:0 0 16px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,64px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
}

.enterprise-pricing-title span{
background:linear-gradient(90deg,#60a5fa,#22d3ee);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.enterprise-pricing-text{
max-width:620px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.enterprise-pricing-quote{
display:grid;
gap:14px;
margin-top:34px;
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.enterprise-pricing-quote-label{
color:#93c5fd;
font-size:12px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.enterprise-pricing-quote-price{
color:#ffffff;
font-size:48px;
line-height:.95;
font-weight:950;
letter-spacing:-.06em;
}

.enterprise-pricing-quote p{
margin:0;
color:#dbeafe;
font-size:14px;
line-height:1.55;
font-weight:700;
}

.enterprise-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border-radius:999px;
background:#ffffff;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.enterprise-pricing-button:hover{
background:#dbeafe;
color:#0f172a !important;
-webkit-text-fill-color:#0f172a !important;
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(255,255,255,.16);
}

.enterprise-pricing-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:28px;
}

.enterprise-pricing-trust-item{
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.enterprise-pricing-trust-item strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:14px;
font-weight:950;
}

.enterprise-pricing-trust-item span{
display:block;
color:#cbd5e1;
font-size:12px;
line-height:1.45;
font-weight:700;
}

.enterprise-pricing-side{
display:grid;
gap:14px;
}

.enterprise-pricing-plan{
display:grid;
grid-template-columns:minmax(0,1fr) 132px;
gap:18px;
align-items:center;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.enterprise-pricing-plan.is-featured{
border-color:rgba(37,99,235,.42);
box-shadow:0 28px 80px rgba(37,99,235,.14);
}

.enterprise-pricing-plan h3{
margin:0 0 7px;
color:#0f172a;
font-size:22px;
line-height:1.18;
font-weight:950;
}

.enterprise-pricing-plan p{
margin:0 0 12px;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.enterprise-pricing-plan-tags{
display:flex;
flex-wrap:wrap;
gap:7px;
}

.enterprise-pricing-plan-tags span{
display:inline-flex;
align-items:center;
padding:7px 9px;
border-radius:999px;
background:#f8fafc;
color:#475569;
font-size:12px;
line-height:1;
font-weight:850;
}

.enterprise-pricing-side-price{
text-align:right;
color:#0f172a;
}

.enterprise-pricing-side-price strong{
display:block;
font-size:32px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.enterprise-pricing-side-price span{
display:block;
margin-top:5px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.enterprise-pricing-side-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:40px;
margin-top:12px;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:12px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,background .22s ease;
}

.enterprise-pricing-side-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
}

.enterprise-pricing-checklist{
padding:22px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.enterprise-pricing-checklist h3{
margin:0 0 14px;
color:#0f172a;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.enterprise-pricing-checklist ul{
display:grid;
gap:11px;
margin:0;
padding:0;
list-style:none;
}

.enterprise-pricing-checklist li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.enterprise-pricing-checklist li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:20px;
height:20px;
border-radius:999px;
background:#dbeafe;
color:#2563eb;
font-size:12px;
font-weight:950;
}

@media (max-width:980px){
.enterprise-pricing{
grid-template-columns:1fr;
max-width:720px;
}

.enterprise-pricing-main{
min-height:auto;
}
}

@media (max-width:720px){
.enterprise-pricing-plan{
grid-template-columns:1fr;
}

.enterprise-pricing-side-price{
text-align:left;
}

.enterprise-pricing-trust{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.enterprise-pricing-main{
padding:24px;
border-radius:28px;
}

.enterprise-pricing-title{
font-size:38px;
}

.enterprise-pricing-quote-price{
font-size:38px;
}

.enterprise-pricing-plan,
.enterprise-pricing-checklist{
padding:18px;
border-radius:22px;
}
}

This enterprise pricing table is useful when a fixed public price is not enough. The layout gives enterprise buyers the information they expect: custom quote, support level, SLA, onboarding, security, and a clear contact sales CTA.

26. Product Pricing Table

Product pricing tables are useful when you sell a digital product, plugin, template pack, design kit, software license, or downloadable product. Instead of comparing monthly subscriptions, this layout compares purchase options such as single license, bundle, and lifetime deal.

This example uses a product-focused pricing layout with a product preview panel, license cards, update/support information, and a purchase-focused CTA. It works well for WordPress plugins, UI kits, SaaS templates, design systems, digital downloads, and software products.

  • Designed for plugins, templates, UI kits, software licenses, and digital products
  • Compares product purchase options instead of monthly SaaS plans
  • Includes license limits, updates, support period, and lifetime deal option
  • Uses a product preview panel to make the offer feel more tangible
  • Responsive layout stacks product information above purchase options on mobile

Single License

Starter

For one website, one product launch, or a small personal project.

1 site License use
1 year Updates
Email Support
$49 one-time
Buy License

Creator Bundle

Best value

For creators, developers, and agencies building several landing pages or product websites.

10 sites License use
1 year Updates
Priority Support
$149 $99 one-time
Buy Bundle

Lifetime Deal

Lifetime

For teams and agencies that want unlimited project flexibility and long-term value.

Unlimited License use
Lifetime Updates
VIP Support
$399 $249 one-time
Get Lifetime

30-day product guarantee

Add a short guarantee block below your product pricing table to reduce purchase hesitation. This is especially useful for templates, plugins, digital downloads, and software products.

HTML

<section class="product-pricing">

  <aside class="product-pricing-showcase">
    <div class="product-pricing-showcase-inner">
      <div class="product-pricing-kicker">Product Pricing</div>
      <h3 class="product-pricing-title">Buy the full <span>UI product kit</span></h3>
      <p class="product-pricing-text">Use this pricing layout for plugins, templates, digital downloads, design kits, and software license pages.</p>

      <div class="product-pricing-preview-card">
        <div class="product-pricing-preview-window">
          <div class="product-pricing-window-top">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="product-pricing-window-body">
            <div class="product-pricing-window-line"></div>
            <div class="product-pricing-window-line is-short"></div>
            <div class="product-pricing-window-grid">
              <div class="product-pricing-window-box"></div>
              <div class="product-pricing-window-box"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="product-pricing-meta">
        <div class="product-pricing-meta-item">
          <strong>120+</strong>
          <span>Ready UI sections</span>
        </div>
        <div class="product-pricing-meta-item">
          <strong>1 year</strong>
          <span>Updates included</span>
        </div>
      </div>
    </div>
  </aside>

  <div class="product-pricing-options">

    <article class="product-pricing-option">
      <div class="product-pricing-option-main">
        <div class="product-pricing-option-top">
          <h3>Single License</h3>
          <span class="product-pricing-badge">Starter</span>
        </div>
        <p>For one website, one product launch, or a small personal project.</p>
        <div class="product-pricing-license">
          <div class="product-pricing-license-item">
            <strong>1 site</strong>
            <span>License use</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>1 year</strong>
            <span>Updates</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>Email</strong>
            <span>Support</span>
          </div>
        </div>
      </div>
      <div class="product-pricing-side">
        <div class="product-pricing-price">
          <strong>$49</strong>
          <span>one-time</span>
        </div>
        <a class="product-pricing-button" href="#">Buy License</a>
      </div>
    </article>

    <article class="product-pricing-option is-featured">
      <div class="product-pricing-option-main">
        <div class="product-pricing-option-top">
          <h3>Creator Bundle</h3>
          <span class="product-pricing-badge">Best value</span>
        </div>
        <p>For creators, developers, and agencies building several landing pages or product websites.</p>
        <div class="product-pricing-license">
          <div class="product-pricing-license-item">
            <strong>10 sites</strong>
            <span>License use</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>1 year</strong>
            <span>Updates</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>Priority</strong>
            <span>Support</span>
          </div>
        </div>
      </div>
      <div class="product-pricing-side">
        <div class="product-pricing-price">
          <del>$149</del>
          <strong>$99</strong>
          <span>one-time</span>
        </div>
        <a class="product-pricing-button" href="#">Buy Bundle</a>
      </div>
    </article>

    <article class="product-pricing-option">
      <div class="product-pricing-option-main">
        <div class="product-pricing-option-top">
          <h3>Lifetime Deal</h3>
          <span class="product-pricing-badge">Lifetime</span>
        </div>
        <p>For teams and agencies that want unlimited project flexibility and long-term value.</p>
        <div class="product-pricing-license">
          <div class="product-pricing-license-item">
            <strong>Unlimited</strong>
            <span>License use</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>Lifetime</strong>
            <span>Updates</span>
          </div>
          <div class="product-pricing-license-item">
            <strong>VIP</strong>
            <span>Support</span>
          </div>
        </div>
      </div>
      <div class="product-pricing-side">
        <div class="product-pricing-price">
          <del>$399</del>
          <strong>$249</strong>
          <span>one-time</span>
        </div>
        <a class="product-pricing-button" href="#">Get Lifetime</a>
      </div>
    </article>

    <div class="product-pricing-guarantee">
      <h3>30-day product guarantee</h3>
      <p>Add a short guarantee block below your product pricing table to reduce purchase hesitation. This is especially useful for templates, plugins, digital downloads, and software products.</p>
    </div>

  </div>

</section>

CSS

.product-pricing{
width:min(100%,1100px);
display:grid;
grid-template-columns:380px minmax(0,1fr);
gap:22px;
align-items:start;
}

.product-pricing-showcase{
position:sticky;
top:0;
padding:26px;
border-radius:36px;
background:#111827;
color:#ffffff;
box-shadow:0 34px 90px rgba(17,24,39,.24);
overflow:hidden;
}

.product-pricing-showcase::before{
content:"";
position:absolute;
right:-100px;
top:-100px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(234,179,8,.26);
}

.product-pricing-showcase::after{
content:"";
position:absolute;
left:-100px;
bottom:-110px;
width:260px;
height:260px;
border-radius:999px;
background:rgba(249,115,22,.18);
}

.product-pricing-showcase-inner{
position:relative;
z-index:2;
}

.product-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#fde68a;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.product-pricing-title{
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.product-pricing-title span{
color:#facc15;
-webkit-text-fill-color:#facc15;
}

.product-pricing-text{
margin:0 0 24px;
color:#e5e7eb;
font-size:15px;
line-height:1.75;
}

.product-pricing-preview-card{
padding:18px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
margin-bottom:18px;
}

.product-pricing-preview-window{
border-radius:22px;
background:#ffffff;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.24);
}

.product-pricing-window-top{
display:flex;
gap:6px;
align-items:center;
height:34px;
padding:0 12px;
background:#f8fafc;
border-bottom:1px solid rgba(15,23,42,.08);
}

.product-pricing-window-top span{
width:9px;
height:9px;
border-radius:999px;
background:#cbd5e1;
}

.product-pricing-window-body{
padding:18px;
}

.product-pricing-window-line{
height:10px;
border-radius:999px;
background:#e2e8f0;
margin-bottom:10px;
}

.product-pricing-window-line.is-short{
width:64%;
}

.product-pricing-window-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:16px;
}

.product-pricing-window-box{
height:70px;
border-radius:18px;
background:linear-gradient(135deg,#fef3c7,#fff7ed);
border:1px solid rgba(234,179,8,.16);
}

.product-pricing-meta{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.product-pricing-meta-item{
padding:13px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.product-pricing-meta-item strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:18px;
font-weight:950;
}

.product-pricing-meta-item span{
display:block;
color:#fde68a;
font-size:12px;
line-height:1.4;
font-weight:800;
}

.product-pricing-options{
display:grid;
gap:14px;
}

.product-pricing-option{
display:grid;
grid-template-columns:minmax(0,1fr) 170px;
gap:18px;
align-items:stretch;
padding:22px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.product-pricing-option.is-featured{
border-color:rgba(234,179,8,.55);
box-shadow:0 30px 80px rgba(234,179,8,.16);
}

.product-pricing-option-main{
min-width:0;
}

.product-pricing-option-top{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.product-pricing-option h3{
margin:0;
color:#111827;
font-size:24px;
line-height:1.18;
font-weight:950;
}

.product-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border-radius:999px;
background:#fef3c7;
color:#92400e;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.product-pricing-option p{
margin:0 0 14px;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.product-pricing-license{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.product-pricing-license-item{
padding:11px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.product-pricing-license-item strong{
display:block;
margin-bottom:4px;
color:#111827;
font-size:13px;
font-weight:950;
}

.product-pricing-license-item span{
display:block;
color:#64748b;
font-size:11px;
line-height:1.35;
font-weight:800;
}

.product-pricing-side{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:14px;
padding:18px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.product-pricing-price{
color:#111827;
text-align:right;
}

.product-pricing-price del{
display:block;
margin-bottom:5px;
color:#94a3b8;
font-size:14px;
font-weight:850;
}

.product-pricing-price strong{
display:block;
font-size:38px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.product-pricing-price span{
display:block;
margin-top:5px;
color:#64748b;
font-size:12px;
font-weight:850;
}

.product-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
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;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.product-pricing-button:hover{
background:#ca8a04;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(202,138,4,.22);
}

.product-pricing-option.is-featured .product-pricing-button{
background:linear-gradient(135deg,#eab308,#f97316);
}

.product-pricing-guarantee{
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.product-pricing-guarantee h3{
margin:0 0 8px;
color:#111827;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.product-pricing-guarantee p{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.65;
font-weight:650;
}

@media (max-width:980px){
.product-pricing{
grid-template-columns:1fr;
max-width:720px;
}

.product-pricing-showcase{
position:relative;
}
}

@media (max-width:740px){
.product-pricing-option{
grid-template-columns:1fr;
}

.product-pricing-price{
text-align:left;
}

.product-pricing-license{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.product-pricing-showcase{
padding:22px;
border-radius:28px;
}

.product-pricing-title{
font-size:34px;
}

.product-pricing-option,
.product-pricing-guarantee{
padding:18px;
border-radius:22px;
}

.product-pricing-meta{
grid-template-columns:1fr;
}
}

This product pricing table is useful when you sell a specific digital product instead of a recurring SaaS subscription. The layout compares licenses, update periods, support levels, and bundle options in a way that feels natural for plugins, templates, UI kits, and software products.

27. Pricing Table with Trust Badges

Pricing tables with trust badges are useful when visitors need reassurance before they choose a plan. Security badges, guarantees, payment notes, review scores, and support promises can make a pricing section feel safer and more credible.

This example places trust elements directly inside the pricing layout instead of hiding them below the section. The plans are supported by a trust badge bar, guarantee card, customer rating, and secure checkout message, which makes the pricing table stronger for SaaS products, digital services, ecommerce tools, and software offers.

  • Combines pricing cards with trust badges and reassurance elements
  • Useful for SaaS, software, ecommerce, hosting, and service websites
  • Includes guarantee, secure checkout, rating, and support badges
  • Helps reduce hesitation near the pricing decision
  • Responsive layout stacks pricing cards and trust blocks cleanly on mobile
Trust Badges

Pricing that feels safe to choose

★★★★★
Rated 4.9 by customers Use social proof near pricing to reduce hesitation and build confidence.
✓
30-day guarantee Risk-free purchase
🔒
Secure checkout Encrypted payment
💬
Fast support Help when needed
↺
Cancel anytime No hidden lock-in
Start

Basic

For smaller websites that need a clean and trusted pricing section.

$19 /mo
  • Basic pricing UI
  • Email support
  • Secure checkout note
Choose Basic
Popular

Growth

For conversion-focused websites that need stronger trust and support signals.

$59 /mo
  • Advanced pricing UI
  • Priority support
  • Trust badge system
Choose Growth
Scale

Premium

For teams that need a complete pricing section with support and reassurance.

$129 /mo
  • Custom pricing layout
  • Dedicated support
  • Advanced trust blocks
Contact Sales

HTML

<section class="trust-pricing">

  <div class="trust-pricing-header">
    <div>
      <div class="trust-pricing-kicker">Trust Badges</div>
      <h3 class="trust-pricing-title">Pricing that feels <span>safe to choose</span></h3>
    </div>
    <div class="trust-pricing-rating">
      <div class="trust-pricing-stars">★★★★★</div>
      <strong>Rated 4.9 by customers</strong>
      <span>Use social proof near pricing to reduce hesitation and build confidence.</span>
    </div>
  </div>

  <div class="trust-pricing-badges">
    <div class="trust-pricing-badge">
      <span class="trust-pricing-badge-icon">✓</span>
      <div>
        <strong>30-day guarantee</strong>
        <span>Risk-free purchase</span>
      </div>
    </div>
    <div class="trust-pricing-badge">
      <span class="trust-pricing-badge-icon">🔒</span>
      <div>
        <strong>Secure checkout</strong>
        <span>Encrypted payment</span>
      </div>
    </div>
    <div class="trust-pricing-badge">
      <span class="trust-pricing-badge-icon">💬</span>
      <div>
        <strong>Fast support</strong>
        <span>Help when needed</span>
      </div>
    </div>
    <div class="trust-pricing-badge">
      <span class="trust-pricing-badge-icon">↺</span>
      <div>
        <strong>Cancel anytime</strong>
        <span>No hidden lock-in</span>
      </div>
    </div>
  </div>

  <div class="trust-pricing-layout">

    <div class="trust-pricing-cards">

      <article class="trust-pricing-card">
        <div class="trust-pricing-card-top">
          <span class="trust-pricing-plan-label">Start</span>
        </div>
        <h3>Basic</h3>
        <p>For smaller websites that need a clean and trusted pricing section.</p>
        <div class="trust-pricing-price">
          <strong>$19</strong>
          <span>/mo</span>
        </div>
        <ul class="trust-pricing-features">
          <li>Basic pricing UI</li>
          <li>Email support</li>
          <li>Secure checkout note</li>
        </ul>
        <a class="trust-pricing-button" href="#">Choose Basic</a>
      </article>

      <article class="trust-pricing-card is-featured">
        <div class="trust-pricing-card-top">
          <span class="trust-pricing-plan-label">Popular</span>
        </div>
        <h3>Growth</h3>
        <p>For conversion-focused websites that need stronger trust and support signals.</p>
        <div class="trust-pricing-price">
          <strong>$59</strong>
          <span>/mo</span>
        </div>
        <ul class="trust-pricing-features">
          <li>Advanced pricing UI</li>
          <li>Priority support</li>
          <li>Trust badge system</li>
        </ul>
        <a class="trust-pricing-button" href="#">Choose Growth</a>
      </article>

      <article class="trust-pricing-card">
        <div class="trust-pricing-card-top">
          <span class="trust-pricing-plan-label">Scale</span>
        </div>
        <h3>Premium</h3>
        <p>For teams that need a complete pricing section with support and reassurance.</p>
        <div class="trust-pricing-price">
          <strong>$129</strong>
          <span>/mo</span>
        </div>
        <ul class="trust-pricing-features">
          <li>Custom pricing layout</li>
          <li>Dedicated support</li>
          <li>Advanced trust blocks</li>
        </ul>
        <a class="trust-pricing-button" href="#">Contact Sales</a>
      </article>

    </div>

    <aside class="trust-pricing-sidebar">
      <div class="trust-pricing-guarantee">
        <h3>Money-back guarantee</h3>
        <p>Adding a guarantee beside your pricing table helps visitors feel safer before they click the purchase button.</p>
        <div class="trust-pricing-secure">
          <span>🔒</span>
          Secure checkout included
        </div>
      </div>

      <div class="trust-pricing-support">
        <h3>Need help choosing?</h3>
        <p>Trust-focused pricing sections can also include a short support block so users know they can ask questions before buying.</p>
      </div>
    </aside>

  </div>

</section>

CSS

.trust-pricing{
width:min(100%,1100px);
}

.trust-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:24px;
align-items:end;
margin-bottom:24px;
}

.trust-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.trust-pricing-title{
margin:0;
max-width:760px;
color:#052e16;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.trust-pricing-title span{
background:linear-gradient(135deg,#16a34a,#0891b2);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.trust-pricing-rating{
padding:18px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 40px rgba(15,23,42,.08);
}

.trust-pricing-stars{
margin-bottom:8px;
color:#f59e0b;
font-size:20px;
letter-spacing:.05em;
}

.trust-pricing-rating strong{
display:block;
margin-bottom:4px;
color:#052e16;
font-size:16px;
font-weight:950;
}

.trust-pricing-rating span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.trust-pricing-badges{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:18px;
}

.trust-pricing-badge{
display:flex;
gap:10px;
align-items:center;
padding:14px;
border-radius:20px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.trust-pricing-badge-icon{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:14px;
background:#dcfce7;
color:#15803d;
font-size:16px;
font-weight:950;
}

.trust-pricing-badge strong{
display:block;
margin-bottom:2px;
color:#052e16;
font-size:13px;
line-height:1.2;
font-weight:950;
}

.trust-pricing-badge span{
display:block;
color:#64748b;
font-size:11px;
line-height:1.25;
font-weight:750;
}

.trust-pricing-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 310px;
gap:18px;
align-items:stretch;
}

.trust-pricing-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
align-items:stretch;
}

.trust-pricing-card{
display:flex;
flex-direction:column;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.trust-pricing-card.is-featured{
border-color:rgba(34,197,94,.48);
box-shadow:0 30px 80px rgba(34,197,94,.16);
}

.trust-pricing-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
margin-bottom:18px;
}

.trust-pricing-plan-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.trust-pricing-card.is-featured .trust-pricing-plan-label{
background:#052e16;
color:#ffffff;
}

.trust-pricing-card h3{
margin:0 0 8px;
color:#052e16;
font-size:24px;
line-height:1.15;
font-weight:950;
}

.trust-pricing-card p{
min-height:66px;
margin:0 0 20px;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:650;
}

.trust-pricing-price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:20px;
color:#052e16;
}

.trust-pricing-price strong{
font-size:44px;
line-height:.9;
font-weight:950;
letter-spacing:-.055em;
}

.trust-pricing-price span{
padding-bottom:5px;
color:#64748b;
font-size:13px;
font-weight:850;
}

.trust-pricing-features{
display:grid;
gap:10px;
margin:0 0 22px;
padding:0;
list-style:none;
}

.trust-pricing-features li{
position:relative;
margin:0;
padding-left:25px;
color:#334155;
font-size:13px;
line-height:1.45;
font-weight:750;
}

.trust-pricing-features li::before{
content:"✓";
position:absolute;
left:0;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:17px;
height:17px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:10px;
font-weight:950;
}

.trust-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
margin-top:auto;
border-radius:999px;
background:#052e16;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.trust-pricing-button:hover{
background:#16a34a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(22,163,74,.22);
}

.trust-pricing-card.is-featured .trust-pricing-button{
background:linear-gradient(135deg,#16a34a,#0891b2);
}

.trust-pricing-sidebar{
display:flex;
flex-direction:column;
gap:14px;
}

.trust-pricing-guarantee,
.trust-pricing-support{
padding:22px;
border-radius:28px;
background:#052e16;
color:#ffffff;
box-shadow:0 24px 70px rgba(5,46,22,.20);
overflow:hidden;
position:relative;
}

.trust-pricing-support{
background:#ffffff;
color:#052e16;
border:1px solid rgba(15,23,42,.09);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.trust-pricing-guarantee h3,
.trust-pricing-support h3{
margin:0 0 10px;
font-size:22px;
line-height:1.15;
font-weight:950;
}

.trust-pricing-guarantee p,
.trust-pricing-support p{
margin:0;
font-size:14px;
line-height:1.65;
font-weight:700;
}

.trust-pricing-guarantee p{
color:#dcfce7;
}

.trust-pricing-support p{
color:#64748b;
}

.trust-pricing-secure{
display:flex;
align-items:center;
gap:10px;
margin-top:18px;
padding:13px;
border-radius:18px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:13px;
font-weight:850;
}

.trust-pricing-secure span{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:999px;
background:rgba(134,239,172,.16);
color:#86efac;
font-size:13px;
font-weight:950;
}

@media (max-width:1040px){
.trust-pricing-header,
.trust-pricing-layout{
grid-template-columns:1fr;
}

.trust-pricing-badges{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.trust-pricing-sidebar{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:820px){
.trust-pricing-cards{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.trust-pricing-sidebar{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}
}

@media (max-width:640px){
.trust-pricing-title{
font-size:34px;
}

.trust-pricing-badges{
grid-template-columns:1fr;
}

.trust-pricing-card,
.trust-pricing-guarantee,
.trust-pricing-support{
padding:18px;
border-radius:22px;
}

.trust-pricing-card p{
min-height:auto;
}
}

This pricing table with trust badges is useful when the pricing decision needs extra reassurance. By placing badges, ratings, guarantee text, and support information close to the plans, the section can reduce hesitation and make the CTA feel safer.

28. Mobile-First Pricing Table

Mobile-first pricing tables are designed for small screens first. Instead of starting with a large desktop grid and trying to shrink it, this layout begins as a clean stacked mobile pricing flow and then expands into a wider layout on larger screens.

This example uses compact stacked plan cards, sticky-style plan summaries, large touch-friendly buttons, and short feature rows. It works well for landing pages where most traffic comes from mobile devices and the pricing table must be easy to read without pinching or horizontal scrolling.

  • Built with a mobile-first stacked layout
  • Uses large touch-friendly buttons and compact plan summaries
  • Avoids horizontal scrolling and cramped feature comparison tables
  • Expands into a two-column desktop layout on wider screens
  • Best for SaaS, apps, services, and mobile-heavy landing pages
Mobile First

Pricing built for small screens first

This layout starts as a clean mobile pricing flow, then expands on larger screens without losing readability.

Annual billing Save 20%
No horizontal scrolling Each plan is readable as a stacked mobile card with touch-friendly buttons.

Starter

For small websites and first landing pages.

$15 /mo
Projects 3
Support Email
Best for Small sites
Choose Starter

Growth

For growing sites that need stronger pricing and CTA sections.

$49 /mo
Projects 20
Support Priority
Best for SaaS pages
CTA blocks Included
Choose Growth

Scale

For teams that need custom pricing sections.

$129 /mo
Projects Unlimited
Support Dedicated
Best for Teams
Contact Sales

HTML

<section class="mobile-first-pricing">

  <div class="mobile-first-shell">
    <div class="mobile-first-screen">

      <div class="mobile-first-layout">

        <div class="mobile-first-header">
          <div class="mobile-first-kicker">Mobile First</div>
          <h3 class="mobile-first-title">Pricing built for <span>small screens first</span></h3>
          <p class="mobile-first-text">This layout starts as a clean mobile pricing flow, then expands on larger screens without losing readability.</p>

          <div class="mobile-first-toggle-note">
            <strong>Annual billing</strong>
            <span>Save 20%</span>
          </div>

          <div class="mobile-first-bottom">
            <strong>No horizontal scrolling</strong>
            <span>Each plan is readable as a stacked mobile card with touch-friendly buttons.</span>
          </div>
        </div>

        <div class="mobile-first-plans">

          <article class="mobile-first-plan">
            <div class="mobile-first-plan-summary">
              <div>
                <h3>Starter</h3>
                <p>For small websites and first landing pages.</p>
              </div>
              <div class="mobile-first-price">
                <strong>$15</strong>
                <span>/mo</span>
              </div>
            </div>

            <div class="mobile-first-feature-rows">
              <div class="mobile-first-feature-row">
                <span>Projects</span>
                <strong>3</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Support</span>
                <strong>Email</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Best for</span>
                <strong>Small sites</strong>
              </div>
            </div>

            <a class="mobile-first-button" href="#">Choose Starter</a>
          </article>

          <article class="mobile-first-plan is-featured">
            <div class="mobile-first-plan-summary">
              <div>
                <h3>Growth</h3>
                <p>For growing sites that need stronger pricing and CTA sections.</p>
              </div>
              <div class="mobile-first-price">
                <strong>$49</strong>
                <span>/mo</span>
              </div>
            </div>

            <div class="mobile-first-feature-rows">
              <div class="mobile-first-feature-row">
                <span>Projects</span>
                <strong>20</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Support</span>
                <strong>Priority</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Best for</span>
                <strong>SaaS pages</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>CTA blocks</span>
                <strong>Included</strong>
              </div>
            </div>

            <a class="mobile-first-button" href="#">Choose Growth</a>
          </article>

          <article class="mobile-first-plan">
            <div class="mobile-first-plan-summary">
              <div>
                <h3>Scale</h3>
                <p>For teams that need custom pricing sections.</p>
              </div>
              <div class="mobile-first-price">
                <strong>$129</strong>
                <span>/mo</span>
              </div>
            </div>

            <div class="mobile-first-feature-rows">
              <div class="mobile-first-feature-row">
                <span>Projects</span>
                <strong>Unlimited</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Support</span>
                <strong>Dedicated</strong>
              </div>
              <div class="mobile-first-feature-row">
                <span>Best for</span>
                <strong>Teams</strong>
              </div>
            </div>

            <a class="mobile-first-button" href="#">Contact Sales</a>
          </article>

        </div>

      </div>

    </div>
  </div>

</section>

CSS

.mobile-first-pricing{
width:min(100%,980px);
}

.mobile-first-shell{
max-width:430px;
margin:0 auto;
padding:14px;
border-radius:34px;
background:#111827;
box-shadow:0 34px 90px rgba(17,24,39,.24);
}

.mobile-first-screen{
padding:18px;
border-radius:26px;
background:#ffffff;
}

.mobile-first-header{
margin-bottom:18px;
}

.mobile-first-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:7px 10px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:12px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.mobile-first-title{
margin:0 0 8px;
color:#111827;
font-size:32px;
line-height:1.05;
font-weight:950;
letter-spacing:-.055em;
}

.mobile-first-title span{
background:linear-gradient(135deg,#4f46e5,#ec4899);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.mobile-first-text{
margin:0;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:650;
}

.mobile-first-toggle-note{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:16px 0;
padding:12px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.mobile-first-toggle-note strong{
color:#111827;
font-size:13px;
font-weight:950;
}

.mobile-first-toggle-note span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 8px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:11px;
font-weight:950;
white-space:nowrap;
}

.mobile-first-plans{
display:grid;
gap:12px;
}

.mobile-first-plan{
padding:16px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.07);
}

.mobile-first-plan.is-featured{
background:linear-gradient(135deg,#eef2ff,#fdf2f8);
border-color:rgba(79,70,229,.36);
box-shadow:0 18px 46px rgba(79,70,229,.12);
}

.mobile-first-plan-summary{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
align-items:start;
margin-bottom:14px;
}

.mobile-first-plan h3{
margin:0 0 5px;
color:#111827;
font-size:21px;
line-height:1.15;
font-weight:950;
}

.mobile-first-plan p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.45;
font-weight:650;
}

.mobile-first-price{
text-align:right;
color:#111827;
}

.mobile-first-price strong{
display:block;
font-size:32px;
line-height:.95;
font-weight:950;
letter-spacing:-.055em;
}

.mobile-first-price span{
display:block;
margin-top:3px;
color:#64748b;
font-size:11px;
font-weight:850;
}

.mobile-first-feature-rows{
display:grid;
gap:8px;
margin-bottom:14px;
}

.mobile-first-feature-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px;
border-radius:15px;
background:#ffffff;
border:1px solid rgba(15,23,42,.05);
}

.mobile-first-feature-row span{
color:#64748b;
font-size:12px;
font-weight:850;
}

.mobile-first-feature-row strong{
color:#111827;
font-size:12px;
font-weight:950;
text-align:right;
}

.mobile-first-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:48px;
border-radius:999px;
background:#111827;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:14px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.mobile-first-button:hover{
background:#4f46e5;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(79,70,229,.22);
}

.mobile-first-plan.is-featured .mobile-first-button{
background:linear-gradient(135deg,#4f46e5,#ec4899);
}

.mobile-first-bottom{
display:grid;
gap:8px;
margin-top:14px;
padding:14px;
border-radius:20px;
background:#111827;
color:#ffffff;
}

.mobile-first-bottom strong{
font-size:14px;
font-weight:950;
}

.mobile-first-bottom span{
color:#cbd5e1;
font-size:12px;
line-height:1.45;
font-weight:700;
}

@media (min-width:820px){
.mobile-first-shell{
max-width:980px;
padding:18px;
}

.mobile-first-screen{
padding:24px;
}

.mobile-first-layout{
display:grid;
grid-template-columns:320px minmax(0,1fr);
gap:22px;
align-items:start;
}

.mobile-first-header{
position:sticky;
top:0;
margin-bottom:0;
padding:22px;
border-radius:26px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.mobile-first-title{
font-size:46px;
}

.mobile-first-plans{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.mobile-first-plan.is-featured{
grid-row:span 2;
}
}

@media (max-width:640px){
.mobile-first-shell{
width:100%;
border-radius:28px;
}

.mobile-first-screen{
padding:14px;
border-radius:22px;
}

.mobile-first-title{
font-size:30px;
}

.mobile-first-plan-summary{
grid-template-columns:1fr;
}

.mobile-first-price{
text-align:left;
}

.mobile-first-toggle-note{
flex-direction:column;
align-items:flex-start;
}
}

This mobile-first pricing table is useful when most visitors view the website on phones. The stacked structure avoids cramped desktop-style columns and makes every plan, price, feature row, and CTA button easy to tap.

29. Accessible Pricing Table

Accessible pricing tables are designed so users can understand, compare, and choose plans with a keyboard, screen reader, or touch device. A good accessible pricing section uses semantic HTML, readable contrast, clear button labels, visible focus states, and simple plan structures.

This example uses semantic cards, descriptive headings, accessible button labels, strong contrast, and visible keyboard focus styles. It avoids hiding important pricing details behind color alone, which makes the table easier to use for more visitors.

  • Uses semantic pricing cards with clear headings and readable hierarchy
  • Includes visible focus states for keyboard navigation
  • Uses descriptive aria-label text on pricing CTA buttons
  • Avoids relying only on color to show the recommended plan
  • Responsive layout keeps the accessible pricing cards readable on mobile
Accessible Pricing

Choose a plan with clear accessible pricing

This pricing table uses readable contrast, semantic card structure, descriptive buttons, and strong keyboard focus states.

Basic

For simple websites that need a clean pricing section and readable plan details.

Start
$19 /month

Best for personal websites and small landing pages.

  • Responsive pricing cards
  • Basic support by email
  • Readable feature list
Choose Basic

Growth

For growing websites that need stronger conversion sections and priority support.

Recommended
$59 /month

Best for SaaS, service, and conversion-focused websites.

  • Advanced pricing layouts
  • Priority support access
  • Conversion-focused CTA sections
Choose Growth

Scale

For teams that need custom pricing systems, advanced sections, and dedicated help.

Team
$129 /month

Best for larger websites, teams, and custom UI systems.

  • Custom pricing section system
  • Dedicated implementation support
  • Advanced responsive components
Contact Sales

Tip: accessible pricing tables should not rely only on color. Use text labels, clear headings, visible focus states, and descriptive button labels so more users can understand the plan differences.

HTML

<section class="accessible-pricing" aria-labelledby="accessible-pricing-title">

  <div class="accessible-pricing-header">
    <div class="accessible-pricing-kicker">Accessible Pricing</div>
    <h3 class="accessible-pricing-title" id="accessible-pricing-title">Choose a plan with <span>clear accessible pricing</span></h3>
    <p class="accessible-pricing-text">This pricing table uses readable contrast, semantic card structure, descriptive buttons, and strong keyboard focus states.</p>
  </div>

  <div class="accessible-pricing-grid">

    <article class="accessible-plan" aria-labelledby="accessible-basic-title">
      <div class="accessible-plan-top">
        <div>
          <h3 id="accessible-basic-title">Basic</h3>
          <p class="accessible-plan-desc">For simple websites that need a clean pricing section and readable plan details.</p>
        </div>
        <span class="accessible-plan-label">Start</span>
      </div>

      <div class="accessible-price">
        <strong>$19</strong>
        <span>/month</span>
      </div>
      <p class="accessible-price-note">Best for personal websites and small landing pages.</p>

      <ul class="accessible-feature-list">
        <li>Responsive pricing cards</li>
        <li>Basic support by email</li>
        <li>Readable feature list</li>
      </ul>

      <a class="accessible-plan-button" href="#" aria-label="Choose the Basic pricing plan for 19 dollars per month">Choose Basic</a>
    </article>

    <article class="accessible-plan is-recommended" aria-labelledby="accessible-growth-title">
      <div class="accessible-plan-top">
        <div>
          <h3 id="accessible-growth-title">Growth</h3>
          <p class="accessible-plan-desc">For growing websites that need stronger conversion sections and priority support.</p>
        </div>
        <span class="accessible-plan-label">Recommended</span>
      </div>

      <div class="accessible-price">
        <strong>$59</strong>
        <span>/month</span>
      </div>
      <p class="accessible-price-note">Best for SaaS, service, and conversion-focused websites.</p>

      <ul class="accessible-feature-list">
        <li>Advanced pricing layouts</li>
        <li>Priority support access</li>
        <li>Conversion-focused CTA sections</li>
      </ul>

      <a class="accessible-plan-button" href="#" aria-label="Choose the recommended Growth pricing plan for 59 dollars per month">Choose Growth</a>
    </article>

    <article class="accessible-plan" aria-labelledby="accessible-scale-title">
      <div class="accessible-plan-top">
        <div>
          <h3 id="accessible-scale-title">Scale</h3>
          <p class="accessible-plan-desc">For teams that need custom pricing systems, advanced sections, and dedicated help.</p>
        </div>
        <span class="accessible-plan-label">Team</span>
      </div>

      <div class="accessible-price">
        <strong>$129</strong>
        <span>/month</span>
      </div>
      <p class="accessible-price-note">Best for larger websites, teams, and custom UI systems.</p>

      <ul class="accessible-feature-list">
        <li>Custom pricing section system</li>
        <li>Dedicated implementation support</li>
        <li>Advanced responsive components</li>
      </ul>

      <a class="accessible-plan-button" href="#" aria-label="Contact sales about the Scale pricing plan">Contact Sales</a>
    </article>

  </div>

  <p class="accessible-note">Tip: accessible pricing tables should not rely only on color. Use text labels, clear headings, visible focus states, and descriptive button labels so more users can understand the plan differences.</p>

</section>

CSS

.accessible-pricing{
width:min(100%,1080px);
}

.accessible-pricing-header{
max-width:760px;
margin:0 auto 30px;
text-align:center;
}

.accessible-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.accessible-pricing-title{
margin:0 0 12px;
color:#0f172a;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.accessible-pricing-title span{
background:linear-gradient(135deg,#2563eb,#0f172a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.accessible-pricing-text{
max-width:660px;
margin:0 auto;
color:#475569;
font-size:16px;
line-height:1.75;
}

.accessible-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.accessible-plan{
display:flex;
flex-direction:column;
padding:24px;
border-radius:30px;
background:#ffffff;
border:2px solid rgba(15,23,42,.12);
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.accessible-plan.is-recommended{
border-color:#2563eb;
box-shadow:0 30px 80px rgba(37,99,235,.15);
}

.accessible-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}

.accessible-plan h3{
margin:0 0 8px;
color:#0f172a;
font-size:25px;
line-height:1.15;
font-weight:950;
}

.accessible-plan-desc{
min-height:72px;
margin:0 0 20px;
color:#475569;
font-size:14px;
line-height:1.6;
}

.accessible-plan-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f1f5f9;
color:#334155;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
}

.accessible-plan.is-recommended .accessible-plan-label{
background:#2563eb;
color:#ffffff;
}

.accessible-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:10px;
color:#0f172a;
}

.accessible-price strong{
font-size:50px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.accessible-price span{
padding-bottom:5px;
color:#475569;
font-size:14px;
font-weight:850;
}

.accessible-price-note{
margin:0 0 22px;
color:#475569;
font-size:13px;
line-height:1.5;
font-weight:700;
}

.accessible-feature-list{
display:grid;
gap:12px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.accessible-feature-list li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#1e293b;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.accessible-feature-list li::before{
content:"Included";
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
min-width:58px;
height:22px;
padding:0 8px;
border-radius:999px;
background:#dcfce7;
color:#166534;
font-size:10px;
font-weight:950;
letter-spacing:.03em;
text-transform:uppercase;
}

.accessible-plan-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
border:3px solid transparent;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.accessible-plan-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.accessible-plan-button:focus,
.accessible-plan-button:focus-visible{
outline:4px solid #facc15;
outline-offset:4px;
border-color:#0f172a;
}

.accessible-plan.is-recommended .accessible-plan-button{
background:#2563eb;
}

.accessible-note{
max-width:760px;
margin:24px auto 0;
padding:16px 18px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
color:#475569;
font-size:14px;
line-height:1.65;
font-weight:700;
text-align:center;
box-shadow:0 14px 36px rgba(15,23,42,.07);
}

@media (max-width:960px){
.accessible-pricing-grid{
grid-template-columns:1fr;
max-width:560px;
margin:0 auto;
}

.accessible-plan-desc{
min-height:auto;
}
}

@media (max-width:640px){
.accessible-pricing-header{
text-align:left;
}

.accessible-pricing-title{
font-size:34px;
}

.accessible-plan{
padding:20px;
border-radius:24px;
}

.accessible-plan-top{
flex-direction:column;
align-items:flex-start;
}

.accessible-price strong{
font-size:42px;
}

.accessible-feature-list li{
flex-direction:column;
gap:6px;
}

.accessible-note{
text-align:left;
}
}

This accessible pricing table is useful when usability matters as much as appearance. The structure gives users clear headings, readable contrast, text-based recommendation labels, visible keyboard focus styles, and descriptive CTA labels.

30. Complete Responsive Pricing Section

A complete responsive pricing section combines the most important pricing UI elements into one polished layout. It should explain the offer, compare plans, support the recommended choice, answer hesitation points, and work smoothly across desktop, tablet, and mobile screens.

This final example includes a pricing header, billing toggle, three responsive pricing cards, trust notes, plan details, and a mobile-friendly layout. It is designed as a complete pricing section that can be adapted for SaaS websites, service businesses, digital products, memberships, and landing pages.

  • Complete responsive pricing section with header, toggle, plans, and trust notes
  • Includes JavaScript for monthly and yearly price switching
  • Highlights the recommended plan without hiding the other options
  • Works for SaaS, services, digital products, memberships, and landing pages
  • Responsive layout stacks cleanly on mobile and keeps CTA buttons easy to tap
Complete Pricing Section

A full responsive pricing section for modern websites

This complete pricing section includes billing toggle, plan cards, feature details, trust notes, clear CTA buttons, and responsive behavior.

Billing period
Yearly billing shows discounted monthly equivalent pricing.

Starter

For simple projects, personal sites, and early landing pages.

Start
$19 /mo

3 Projects
Email Support
  • Responsive pricing cards
  • Basic CTA sections
  • Simple plan comparison
Choose Starter

Growth

For growing websites that need better conversion sections and stronger pricing UI.

Recommended
$59 /mo

20 Projects
Priority Support
  • Advanced pricing layouts
  • Conversion-focused CTA blocks
  • Trust and comparison elements
Choose Growth

Scale

For teams that need custom pricing sections, systems, and support.

Team
$129 /mo

∞ Projects
Dedicated Support
  • Custom pricing section system
  • Team-ready responsive UI
  • Dedicated implementation support
Contact Sales
No setup fees Cancel anytime Secure checkout Responsive CSS

HTML

<section class="complete-pricing" data-billing="monthly">

  <div class="complete-pricing-header">
    <div>
      <div class="complete-pricing-kicker">Complete Pricing Section</div>
      <h3 class="complete-pricing-title">A full responsive <span>pricing section</span> for modern websites</h3>
      <p class="complete-pricing-text">This complete pricing section includes billing toggle, plan cards, feature details, trust notes, clear CTA buttons, and responsive behavior.</p>
    </div>

    <div class="complete-pricing-control">
      <span class="complete-pricing-control-label">Billing period</span>
      <div class="complete-pricing-switch" role="group" aria-label="Choose billing period">
        <button class="complete-pricing-monthly" type="button">Monthly</button>
        <button class="complete-pricing-yearly" type="button">Yearly</button>
      </div>
      <span class="complete-pricing-save">Yearly billing shows discounted monthly equivalent pricing.</span>
    </div>
  </div>

  <div class="complete-pricing-grid">

    <article class="complete-pricing-card">
      <div class="complete-pricing-card-top">
        <div>
          <h3>Starter</h3>
          <p class="complete-pricing-card-desc">For simple projects, personal sites, and early landing pages.</p>
        </div>
        <span class="complete-pricing-badge">Start</span>
      </div>

      <div class="complete-price">
        <strong data-monthly="19" data-yearly="15">$19</strong>
        <span data-period>/mo</span>
      </div>
      <p class="complete-price-note" data-note></p>

      <div class="complete-pricing-details">
        <div class="complete-pricing-detail">
          <strong>3</strong>
          <span>Projects</span>
        </div>
        <div class="complete-pricing-detail">
          <strong>Email</strong>
          <span>Support</span>
        </div>
      </div>

      <ul class="complete-pricing-features">
        <li>Responsive pricing cards</li>
        <li>Basic CTA sections</li>
        <li>Simple plan comparison</li>
      </ul>

      <a class="complete-pricing-button" href="#">Choose Starter</a>
    </article>

    <article class="complete-pricing-card is-featured">
      <div class="complete-pricing-card-top">
        <div>
          <h3>Growth</h3>
          <p class="complete-pricing-card-desc">For growing websites that need better conversion sections and stronger pricing UI.</p>
        </div>
        <span class="complete-pricing-badge">Recommended</span>
      </div>

      <div class="complete-price">
        <strong data-monthly="59" data-yearly="47">$59</strong>
        <span data-period>/mo</span>
      </div>
      <p class="complete-price-note" data-note></p>

      <div class="complete-pricing-details">
        <div class="complete-pricing-detail">
          <strong>20</strong>
          <span>Projects</span>
        </div>
        <div class="complete-pricing-detail">
          <strong>Priority</strong>
          <span>Support</span>
        </div>
      </div>

      <ul class="complete-pricing-features">
        <li>Advanced pricing layouts</li>
        <li>Conversion-focused CTA blocks</li>
        <li>Trust and comparison elements</li>
      </ul>

      <a class="complete-pricing-button" href="#">Choose Growth</a>
    </article>

    <article class="complete-pricing-card">
      <div class="complete-pricing-card-top">
        <div>
          <h3>Scale</h3>
          <p class="complete-pricing-card-desc">For teams that need custom pricing sections, systems, and support.</p>
        </div>
        <span class="complete-pricing-badge">Team</span>
      </div>

      <div class="complete-price">
        <strong data-monthly="129" data-yearly="103">$129</strong>
        <span data-period>/mo</span>
      </div>
      <p class="complete-price-note" data-note></p>

      <div class="complete-pricing-details">
        <div class="complete-pricing-detail">
          <strong>∞</strong>
          <span>Projects</span>
        </div>
        <div class="complete-pricing-detail">
          <strong>Dedicated</strong>
          <span>Support</span>
        </div>
      </div>

      <ul class="complete-pricing-features">
        <li>Custom pricing section system</li>
        <li>Team-ready responsive UI</li>
        <li>Dedicated implementation support</li>
      </ul>

      <a class="complete-pricing-button" href="#">Contact Sales</a>
    </article>

  </div>

  <div class="complete-pricing-trust">
    <span>No setup fees</span>
    <span>Cancel anytime</span>
    <span>Secure checkout</span>
    <span>Responsive CSS</span>
  </div>

</section>

CSS

.complete-pricing{
width:min(100%,1160px);
}

.complete-pricing-header{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.complete-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bfdbfe;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}

.complete-pricing-title{
max-width:760px;
margin:0 0 14px;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:clamp(36px,5vw,64px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
}

.complete-pricing-title span{
background:linear-gradient(90deg,#60a5fa,#22d3ee,#c084fc);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.complete-pricing-text{
max-width:660px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.complete-pricing-control{
padding:18px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.complete-pricing-control-label{
display:block;
margin-bottom:12px;
color:#e5e7eb;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.complete-pricing-switch{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
padding:6px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
}

.complete-pricing-switch::before{
content:"";
position:absolute;
top:6px;
left:6px;
width:calc(50% - 6px);
height:calc(100% - 12px);
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#06b6d4);
transition:transform .24s ease;
}

.complete-pricing.is-yearly .complete-pricing-switch::before{
transform:translateX(100%);
}

.complete-pricing-switch button{
position:relative;
z-index:2;
min-height:42px;
border:0;
background:transparent;
cursor:pointer;
border-radius:999px;
color:#cbd5e1;
font-size:13px;
font-weight:950;
}

.complete-pricing:not(.is-yearly) .complete-pricing-monthly,
.complete-pricing.is-yearly .complete-pricing-yearly{
color:#ffffff;
}

.complete-pricing-save{
display:block;
margin-top:12px;
color:#86efac;
font-size:12px;
font-weight:850;
line-height:1.45;
}

.complete-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
align-items:stretch;
}

.complete-pricing-card{
display:flex;
flex-direction:column;
padding:22px;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.complete-pricing-card.is-featured{
background:linear-gradient(180deg,#ffffff,#eff6ff);
border-color:rgba(96,165,250,.60);
box-shadow:0 34px 100px rgba(37,99,235,.24);
transform:translateY(-12px);
}

.complete-pricing-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.complete-pricing-card h3{
margin:0 0 8px;
color:#0f172a;
font-size:25px;
line-height:1.15;
font-weight:950;
}

.complete-pricing-card-desc{
min-height:72px;
margin:0 0 20px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.complete-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:11px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
}

.complete-pricing-card.is-featured .complete-pricing-badge{
background:#0f172a;
color:#ffffff;
}

.complete-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:8px;
color:#0f172a;
}

.complete-price strong{
font-size:52px;
line-height:.9;
font-weight:950;
letter-spacing:-.06em;
}

.complete-price span{
padding-bottom:6px;
color:#64748b;
font-size:14px;
font-weight:850;
}

.complete-price-note{
min-height:20px;
margin:0 0 22px;
color:#15803d;
font-size:13px;
line-height:1.45;
font-weight:850;
}

.complete-pricing-details{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:22px;
}

.complete-pricing-detail{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.06);
}

.complete-pricing-detail strong{
display:block;
margin-bottom:4px;
color:#0f172a;
font-size:14px;
font-weight:950;
}

.complete-pricing-detail span{
display:block;
color:#64748b;
font-size:11px;
line-height:1.35;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}

.complete-pricing-features{
display:grid;
gap:11px;
margin:0 0 26px;
padding:0;
list-style:none;
}

.complete-pricing-features li{
display:flex;
gap:10px;
align-items:flex-start;
margin:0;
color:#334155;
font-size:14px;
line-height:1.5;
font-weight:750;
}

.complete-pricing-features li::before{
content:"✓";
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:19px;
height:19px;
border-radius:999px;
background:#dbeafe;
color:#2563eb;
font-size:11px;
font-weight:950;
}

.complete-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:50px;
margin-top:auto;
border-radius:999px;
background:#0f172a;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
font-size:15px;
font-weight:950;
line-height:1;
text-decoration:none !important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.complete-pricing-button:hover{
background:#2563eb;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.complete-pricing-card.is-featured .complete-pricing-button{
background:linear-gradient(135deg,#2563eb,#06b6d4);
}

.complete-pricing-trust{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-top:18px;
}

.complete-pricing-trust span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:850;
text-align:center;
}

@media (max-width:1020px){
.complete-pricing-header{
grid-template-columns:1fr;
}

.complete-pricing-grid{
grid-template-columns:1fr;
max-width:580px;
margin:0 auto;
}

.complete-pricing-card.is-featured{
transform:none;
}

.complete-pricing-trust{
grid-template-columns:repeat(2,minmax(0,1fr));
max-width:580px;
margin-left:auto;
margin-right:auto;
}
}

@media (max-width:640px){
.complete-pricing-title{
font-size:38px;
}

.complete-pricing-card{
padding:20px;
border-radius:26px;
}

.complete-pricing-card-top{
flex-direction:column;
align-items:flex-start;
}

.complete-pricing-card-desc{
min-height:auto;
}

.complete-pricing-details{
grid-template-columns:1fr;
}

.complete-pricing-trust{
grid-template-columns:1fr;
}

.complete-price strong{
font-size:42px;
}
}

JavaScript

document.querySelectorAll(".complete-pricing").forEach(function(section){
const monthlyButton=section.querySelector(".complete-pricing-monthly");
const yearlyButton=section.querySelector(".complete-pricing-yearly");
const priceItems=section.querySelectorAll("[data-monthly]");
const periods=section.querySelectorAll("[data-period]");
const notes=section.querySelectorAll("[data-note]");

function setBilling(type){
const isYearly=type==="yearly";
section.classList.toggle("is-yearly",isYearly);
section.setAttribute("data-billing",type);

priceItems.forEach(function(price){
const value=isYearly ? price.getAttribute("data-yearly") : price.getAttribute("data-monthly");
price.textContent="$"+value;
});

periods.forEach(function(period){
period.textContent=isYearly ? "/mo billed yearly" : "/mo";
});

notes.forEach(function(note){
note.textContent=isYearly ? "Annual discount applied." : "";
});
}

monthlyButton.addEventListener("click",function(){
setBilling("monthly");
});

yearlyButton.addEventListener("click",function(){
setBilling("yearly");
});
});

This complete responsive pricing section is useful as a final polished pricing block for a modern website. It combines a billing toggle, plan hierarchy, responsive pricing cards, feature details, trust notes, and strong CTA buttons in one complete layout.

Recommended hosting for WordPress websites

Build faster WordPress websites with managed hosting

If you are creating modern CSS pricing tables, responsive pricing sections, landing pages, and code-heavy blog content, fast hosting can make a real difference for performance, user experience, and SEO.

Visit Kinsta
Kinsta managed WordPress hosting

CSS Pricing Table Best Practices

A modern CSS pricing table should do more than look attractive. It should help users understand the difference between plans, compare value quickly, and choose the next step with confidence. Whether you are building a simple HTML CSS pricing table, a SaaS pricing table, a responsive pricing card grid, or a complete pricing section for a landing page, the same core rules apply.

The best pricing sections are clear, focused, and conversion-friendly. They avoid visual clutter, explain who each plan is for, and make the recommended option easy to notice without making the other options feel hidden or unimportant.

01

Make Plan Differences Easy to Scan

Users should understand the main difference between plans within a few seconds. Use short descriptions, clear feature lists, and consistent pricing card structure.

02

Highlight One Recommended Plan

A featured plan can guide users toward the best value option. Use a badge, stronger border, CTA button, or layout emphasis, not just a different color.

03

Keep Pricing Text Simple

A pricing table is not the place for long paragraphs. Use simple plan names, direct pricing labels, short benefits, and clear action buttons.

04

Use Strong CTA Buttons

Each pricing plan should have a clear call-to-action. Use button text like Start Free Trial, Choose Plan, Buy Now, Get Started, or Contact Sales.

05

Add Trust Signals Near the Price

Trust signals reduce hesitation. Add short notes like secure checkout, cancel anytime, no setup fees, free trial, money-back guarantee, or priority support.

06

Design for Mobile Early

Pricing tables often break on mobile when they are designed only for desktop. Make sure cards stack cleanly, buttons stay easy to tap, and text remains readable.

If you want your pricing section to feel more polished, combine these pricing table best practices with strong supporting UI. For example, you can pair a pricing table with a strong hero section, a testimonial block, a FAQ accordion, or a comparison section. You can also improve the visual hierarchy with reusable patterns from our guides to modern CSS cards, modern CSS buttons, and modern CSS layouts.

Responsive Pricing Table Tips

A responsive pricing table must remain easy to compare on desktop, tablet, and mobile screens. This is especially important for SaaS pricing pages, hosting plans, app landing pages, service packages, and ecommerce pricing sections where users may compare options before making a purchase decision.

For most modern websites, pricing cards are easier to make responsive than large traditional tables. A three-column desktop grid can become a single-column mobile layout, while a detailed comparison table may need horizontal scrolling or a simplified mobile version.

How to Make Pricing Tables Responsive

Start with readable content, then choose a layout that adapts naturally. On mobile, users should not need to zoom, pinch, or fight with tiny comparison columns.

Use CSS Grid Use grid-template-columns and media queries to move from three or four columns to one column.
Stack Pricing Cards On mobile, one pricing card per row is usually easier to read than squeezed columns.
Keep Buttons Large CTA buttons should remain easy to tap on phones. Use enough padding and full-width buttons when needed.
Avoid Tiny Feature Text Pricing details lose value when users cannot read them. Keep mobile typography clear and consistent.
Use Scroll Only When Needed Horizontal scrolling can work for comparison matrices, but avoid it for simple pricing card layouts.
Test Featured Plans If a highlighted card is raised on desktop, remove the transform on mobile to prevent awkward spacing.

When your pricing section is part of a full landing page, it should also connect visually with the surrounding sections. For example, a pricing table after a modern website hero section should feel like part of the same page, not a random pasted component. The same applies to forms, navigation, FAQs, and tabs that appear around the pricing area.

Common Pricing Table Design Mistakes

Even a beautiful pricing table can fail if the structure is confusing. Many pricing sections look modern at first glance but create friction because the plan differences are unclear, the CTA buttons are weak, or the mobile layout is hard to read.

Here are the most common pricing table mistakes to avoid when building HTML and CSS pricing tables for modern websites.

Too Many Plans

Showing five, six, or seven pricing plans can overwhelm users. If you need many options, consider grouping plans, using tabs, or adding a comparison table below the main pricing cards.

Unclear Recommended Plan

If all plans look equally important, users may hesitate. Highlight the plan that fits most visitors with a badge, stronger border, better CTA, or short “best for” label.

Weak CTA Button Text

Generic button text like “Submit” is not ideal for pricing sections. Use action-focused text such as Choose Plan, Start Free Trial, Buy Now, or Contact Sales.

Too Much Feature Detail

Long feature lists can make pricing cards difficult to scan. Keep the main cards focused, then add a detailed feature comparison table below if needed.

Poor Mobile Layout

A pricing table that looks good on desktop can become unusable on mobile. Test your pricing cards, buttons, badges, and feature rows at small screen widths.

No Trust Signals

Pricing is a high-intent section. Add reassurance near the decision point, such as secure checkout, cancel anytime, free trial, guarantee, support, or no hidden fees.

A good pricing section should remove doubt, not create it. When users can quickly see who each plan is for, what it costs, what is included, and what button to click next, your pricing table becomes a stronger conversion element.

CSS Pricing Tables FAQ

Below are common questions about modern CSS pricing tables, responsive pricing cards, SaaS pricing sections, and HTML CSS pricing table design.

What is the best layout for a CSS pricing table?

The best layout depends on your offer. A three-card pricing grid works well for most SaaS websites and service pages. A comparison matrix is better when users need to compare many features. A two-column pricing table is useful when you only have two clear options.

Should a pricing table use cards or a real table?

Pricing cards are usually better for modern landing pages because they are easier to make responsive and visually engaging. A real table is better when you need detailed feature-by-feature comparison across several plans.

How many pricing plans should I show?

Most websites work well with three pricing plans: a starter option, a recommended middle option, and a higher-value plan. Two plans can work for simple offers, while four plans can work if each tier has a clear purpose.

How do I make a pricing table responsive?

Use CSS Grid or Flexbox, then change the layout with media queries. On desktop, pricing cards can appear in columns. On mobile, they should usually stack into one column with full-width CTA buttons and readable feature lists.

What should every pricing card include?

Each pricing card should include a plan name, short description, price, billing period, key features, CTA button, and a short trust signal if possible. The recommended plan should also have a clear badge or visual highlight.

Are pricing toggles good for SEO and usability?

Pricing toggles can be useful when users need to switch between monthly and yearly pricing. For usability, make sure the selected state is clear. For SEO and accessibility, important pricing information should remain understandable and not depend only on JavaScript.

Should I add FAQs below a pricing table?

Yes. A FAQ section below pricing can answer objections about billing, cancellation, refunds, support, plan limits, and upgrades. This can make the pricing section stronger and help users make a decision with less hesitation.

Can I use these pricing table examples in WordPress?

Yes. These examples use HTML, CSS, and in some cases small JavaScript snippets. You can adapt them for WordPress posts, landing pages, custom themes, Gutenberg HTML blocks, Elementor HTML widgets, or custom-coded templates.

Conclusion

Modern CSS pricing tables are an important part of high-converting website design. A strong pricing section can help users compare plans, understand the value of each option, and choose the right package without confusion.

In this guide, you saw 30 modern CSS pricing table examples, including basic HTML CSS pricing tables, responsive pricing cards, SaaS pricing tables, featured plan layouts, dark mode pricing sections, gradient pricing cards, glassmorphism pricing tables, pricing comparison tables, mobile-first pricing layouts, accessible pricing tables, and a complete responsive pricing section with a billing toggle.

Use these examples as starting points for your own website projects. You can customize the colors, plan names, prices, feature lists, badges, CTA buttons, and responsive behavior to match your brand, product, service, or landing page. The most important goal is always the same: make the pricing decision clear, trustworthy, and easy to act on.

Continue learning

Related CSS Guides

Build a stronger website UI by combining pricing tables with modern cards, buttons, layouts, forms, hero sections, accordions, tabs, and navigation patterns.

Modern CSS Cards Useful for card-based pricing plans, feature cards, product cards, and reusable UI sections. Modern CSS Buttons Improve pricing CTAs with better button styles, hover effects, gradients, and action-focused design. Modern CSS Layouts Learn responsive grids, landing page sections, bento layouts, dashboards, and full page structures. Modern CSS Forms Pair your pricing section with signup forms, lead forms, checkout forms, and quote request forms. Modern Website Hero Sections Create a stronger landing page flow before users reach your pricing section. Modern CSS Accordions Add pricing FAQs, billing questions, product details, and feature explanations below your plans. Modern CSS Tabs Use tabs for monthly/yearly pricing, product categories, comparison views, and plan groups. Modern CSS Navigation Menus Build better website headers, dropdowns, mobile menus, and landing page navigation.
]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-pricing-tables/feed/ 0 30 Modern CSS Tabs for Websites – Responsive Tab UI, Product Tabs & Content Sections https://veebilehed24.ee/en/blog/css-effects/modern-css-tabs/ https://veebilehed24.ee/en/blog/css-effects/modern-css-tabs/#respond Tue, 26 May 2026 08:04:48 +0000 https://veebilehed24.ee/?p=1374 30 Modern CSS Tabs for Websites – Responsive Tab UI, Product Tabs & Content Sections

Tabs are one of the most useful UI patterns for organizing related content without making a page feel too long or overloaded. A well-designed tab section can help users switch between product details, pricing options, dashboard panels, documentation sections, feature comparisons, FAQs, and other grouped content without leaving the current page.

In this guide, you will find 30 modern CSS tabs examples for websites, including responsive tab UI layouts, CSS-only tabs, product tabs, dashboard tabs, animated tabs, vertical tabs, mobile-friendly tabs, and accessible JavaScript tab examples. Each example includes a live preview and visible HTML and CSS code so you can copy, customize, and use the layout in your own projects.

Jump to CSS Tab Examples
On this page

Table of Contents

Kinsta hosting

What Are CSS Tabs?

CSS tabs are interface sections that divide related content into separate panels. Instead of showing every detail at once, a tab layout lets users choose which section they want to view. This makes tabs useful for pages where several pieces of information belong together but do not need to be visible at the same time.

A typical tab interface has two main parts: a row or column of tab buttons and a content area that changes when a different tab is selected. For example, a product page may use tabs for description, specifications, shipping, and reviews. A dashboard may use tabs for overview, analytics, settings, and billing.

Tabs are not only a visual design element. They also help create a clearer content structure when they are used correctly. The best tab sections group closely related information, keep the active state obvious, and work well on both desktop and mobile screens.

Why Use Tabs in Modern Website Design?

Tabs are useful when a page needs to present several related sections without forcing users to scroll through a long block of content. They are especially helpful for modern websites, SaaS landing pages, ecommerce stores, documentation pages, dashboards, pricing sections, and settings interfaces.

  • They reduce visual clutter by showing one content panel at a time.
  • They improve scanning because users can quickly see the available content categories.
  • They keep related content together without sending users to another page.
  • They work well in UI-heavy layouts such as dashboards, product pages, and feature sections.
  • They can improve mobile usability when the tab layout becomes scrollable, stacked, or accordion-like on smaller screens.

For SEO and usability, tabs should not be used just to hide large amounts of unrelated content. They work best when each panel supports the same user task or topic. If the content is completely different, a normal page section or navigation menu may be a better choice.

CSS Tabs vs Accordions vs Navigation Menus

Tabs, accordions, and navigation menus can look similar, but they solve different design problems. Choosing the right pattern helps users understand how to move through your content and prevents the page from feeling confusing.

Tabs

Best for switching between related content panels inside the same section, such as product details, dashboard views, pricing options, or documentation topics.

Accordions

Best for vertically stacked content where users may open one or several items, such as FAQs, support answers, product details, or mobile filters.

Navigation Menus

Best for moving users to different pages, larger site areas, categories, or important sections across the website.

If you need collapsible FAQ sections, you may also like our guide to modern CSS accordions. If you are building a header, dropdown, mobile menu, or mega menu, see our collection of modern CSS navigation menus. For larger page structures, our modern CSS layouts guide is a better starting point.

Should CSS Tabs Use JavaScript?

You can create simple tabs with CSS only, usually by using radio inputs, labels, and sibling selectors. CSS-only tabs are useful for demos, lightweight sections, and simple static content where you do not need advanced interaction logic.

For real websites, JavaScript is often the better option when tabs need stronger accessibility, keyboard navigation, ARIA states, analytics events, deep linking, or more flexible behavior. A JavaScript tab component can update the active tab, control which panel is visible, and make the interface easier to use with a keyboard or screen reader.

In this post, you will see both approaches. Some examples are CSS-only, while more advanced examples use small JavaScript snippets where it makes the tab interface more practical, accessible, or realistic for production websites.

30 Modern CSS Tabs Examples

The examples below include different types of tab layouts for modern websites: product tabs, responsive tabs, dashboard tabs, vertical tabs, animated tabs, pricing tabs, documentation tabs, mobile-friendly tabs, and accessible JavaScript tabs. Each demo includes a live preview and visible code blocks so you can understand how the layout works and adapt it to your own design.

1. Basic CSS Tabs

Basic CSS tabs are a simple and practical way to organize related content into separate panels. They work well for landing pages, service sections, product details, support content, and small feature blocks.

This example uses a clean card layout, rounded tab buttons, clear active states, and a compact content panel. The live preview is placed inside a fixed-height preview box, so the example area stays controlled instead of stretching the full page.

  • Perfect for simple content sections, landing pages, and product information
  • Uses clear active states for better usability
  • Includes a small JavaScript snippet for switching tabs
  • Responsive and easy to customize
  • Preview area stays inside a controlled demo box

Simple tab layout

This basic tab section keeps related content in one clean interface. It is useful for short landing page sections, service descriptions, product highlights, and small documentation blocks.

Clean UI Responsive Easy to edit

Organized feature content

Use tabs to separate feature content without making the page longer. Visitors can quickly switch between panels and focus only on the information they need.

Feature sections Landing pages Modern layout

Helpful support panel

A tabbed support area can show quick answers, contact details, help resources, or onboarding notes in the same compact section.

Support content Help center User friendly

HTML

<section class="basic-css-tabs">

  <div class="basic-css-tabs-nav" role="tablist" aria-label="Basic CSS tabs">
    <button class="basic-css-tabs-btn is-active" type="button" data-tab="overview">Overview</button>
    <button class="basic-css-tabs-btn" type="button" data-tab="features">Features</button>
    <button class="basic-css-tabs-btn" type="button" data-tab="support">Support</button>
  </div>

  <div class="basic-css-tabs-panel is-active" data-panel="overview">
    <h3>Simple tab layout</h3>
    <p>This basic tab section keeps related content in one clean interface. It is useful for short landing page sections, service descriptions, product highlights, and small documentation blocks.</p>
    <div class="basic-css-tabs-tags">
      <span>Clean UI</span>
      <span>Responsive</span>
      <span>Easy to edit</span>
    </div>
  </div>

  <div class="basic-css-tabs-panel" data-panel="features">
    <h3>Organized feature content</h3>
    <p>Use tabs to separate feature content without making the page longer. Visitors can quickly switch between panels and focus only on the information they need.</p>
    <div class="basic-css-tabs-tags">
      <span>Feature sections</span>
      <span>Landing pages</span>
      <span>Modern layout</span>
    </div>
  </div>

  <div class="basic-css-tabs-panel" data-panel="support">
    <h3>Helpful support panel</h3>
    <p>A tabbed support area can show quick answers, contact details, help resources, or onboarding notes in the same compact section.</p>
    <div class="basic-css-tabs-tags">
      <span>Support content</span>
      <span>Help center</span>
      <span>User friendly</span>
    </div>
  </div>

</section>

CSS

.basic-css-tabs{
width:min(100%,820px);
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
overflow:hidden;
}

.basic-css-tabs-nav{
display:flex;
gap:8px;
padding:14px;
background:#f8fafc;
border-bottom:1px solid rgba(15,23,42,.08);
}

.basic-css-tabs-btn{
flex:1;
cursor:pointer;
border:0;
border-radius:16px;
padding:14px 16px;
background:transparent;
color:#475569;
font-size:15px;
font-weight:900;
line-height:1.25;
transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.basic-css-tabs-btn:hover{
background:#eef2ff;
color:#3730a3;
transform:translateY(-1px);
}

.basic-css-tabs-btn.is-active{
background:linear-gradient(135deg,#4f46e5,#7c3aed);
color:#ffffff;
box-shadow:0 14px 32px rgba(79,70,229,.28);
}

.basic-css-tabs-panel{
display:none;
padding:34px;
}

.basic-css-tabs-panel.is-active{
display:block;
}

.basic-css-tabs-panel h3{
margin:0 0 12px;
font-size:clamp(28px,4vw,42px);
line-height:1.08;
font-weight:950;
letter-spacing:-.045em;
color:#0f172a;
}

.basic-css-tabs-panel p{
max-width:660px;
margin:0;
font-size:16px;
line-height:1.75;
color:#475569;
}

.basic-css-tabs-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
}

.basic-css-tabs-tags span{
display:inline-flex;
align-items:center;
border-radius:999px;
padding:8px 12px;
background:#eef2ff;
color:#4338ca;
font-size:13px;
font-weight:900;
}

@media (max-width:640px){
.basic-css-tabs-nav{
flex-direction:column;
}

.basic-css-tabs-btn{
text-align:left;
}

.basic-css-tabs-panel{
padding:24px;
}

.basic-css-tabs-panel h3{
font-size:30px;
}
}

JavaScript

document.querySelectorAll(".basic-css-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".basic-css-tabs-btn");
const panels=tabBlock.querySelectorAll(".basic-css-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This basic CSS tabs example is a flexible starting point for many website sections. You can keep the same structure and change the tab labels, colors, spacing, and panel content to match your own design system.

2. Responsive CSS Tabs

Responsive CSS tabs are designed to stay usable on desktop, tablet, and mobile screens. Instead of forcing every tab into one tight row, this layout uses a flexible grid that adapts as the screen becomes smaller.

This example is useful when tab labels are longer or when the tab section needs to support more content. The preview is inside a controlled scrollable demo box, so the design stays easy to review inside a blog post.

  • Perfect for service pages, SaaS sections, feature blocks, and content-heavy websites
  • Uses a responsive tab grid that adapts on smaller screens
  • Includes a modern dark preview style with strong contrast
  • Uses a small JavaScript snippet for active tab switching
  • Preview area stays inside a fixed-height demo box
Responsive Tabs

Switch content without breaking mobile layouts

Use this responsive tab design when your tab labels need more space and the layout must stay clean on different screen sizes.

Design system friendly

This responsive tab layout uses reusable spacing, consistent button states, and a flexible panel area. It can fit into landing pages, dashboards, or content-heavy website sections.

4 Flexible tab buttons
100% Responsive width

Mobile-friendly structure

The tab buttons move from four columns to two columns and then to one column on smaller screens, making each tab easier to read and tap.

2x Tablet tab columns
1x Mobile tab column

Fast to customize

You can replace the labels, text, and statistics with your own content. The structure stays simple, while the visual style feels polished and modern.

CSS Scoped styles
JS Small switcher

Built for content growth

This type of tab section works well when your website grows and you need to organize more information without overwhelming the first screen.

UX Cleaner sections
SEO Better structure

HTML

<section class="responsive-css-tabs">

  <div class="responsive-css-tabs-header">
    <div class="responsive-css-tabs-label">Responsive Tabs</div>
    <h3 class="responsive-css-tabs-title">Switch content without <span>breaking mobile layouts</span></h3>
    <p class="responsive-css-tabs-text">Use this responsive tab design when your tab labels need more space and the layout must stay clean on different screen sizes.</p>
  </div>

  <div class="responsive-css-tabs-nav" role="tablist" aria-label="Responsive CSS tabs">
    <button class="responsive-css-tabs-btn is-active" type="button" data-tab="design">Design System</button>
    <button class="responsive-css-tabs-btn" type="button" data-tab="mobile">Mobile Layout</button>
    <button class="responsive-css-tabs-btn" type="button" data-tab="speed">Fast Setup</button>
    <button class="responsive-css-tabs-btn" type="button" data-tab="growth">Growth Ready</button>
  </div>

  <div class="responsive-css-tabs-content">

    <div class="responsive-css-tabs-panel is-active" data-panel="design">
      <div>
        <h3>Design system friendly</h3>
        <p>This responsive tab layout uses reusable spacing, consistent button states, and a flexible panel area.</p>
      </div>
      <div class="responsive-css-tabs-stats">
        <div class="responsive-css-tabs-stat">
          <strong>4</strong>
          <span>Flexible tab buttons</span>
        </div>
        <div class="responsive-css-tabs-stat">
          <strong>100%</strong>
          <span>Responsive width</span>
        </div>
      </div>
    </div>

    <div class="responsive-css-tabs-panel" data-panel="mobile">
      <div>
        <h3>Mobile-friendly structure</h3>
        <p>The tab buttons move from four columns to two columns and then to one column on smaller screens.</p>
      </div>
      <div class="responsive-css-tabs-stats">
        <div class="responsive-css-tabs-stat">
          <strong>2x</strong>
          <span>Tablet tab columns</span>
        </div>
        <div class="responsive-css-tabs-stat">
          <strong>1x</strong>
          <span>Mobile tab column</span>
        </div>
      </div>
    </div>

    <div class="responsive-css-tabs-panel" data-panel="speed">
      <div>
        <h3>Fast to customize</h3>
        <p>You can replace the labels, text, and statistics with your own content.</p>
      </div>
      <div class="responsive-css-tabs-stats">
        <div class="responsive-css-tabs-stat">
          <strong>CSS</strong>
          <span>Scoped styles</span>
        </div>
        <div class="responsive-css-tabs-stat">
          <strong>JS</strong>
          <span>Small switcher</span>
        </div>
      </div>
    </div>

    <div class="responsive-css-tabs-panel" data-panel="growth">
      <div>
        <h3>Built for content growth</h3>
        <p>This type of tab section works well when your website grows and you need to organize more information.</p>
      </div>
      <div class="responsive-css-tabs-stats">
        <div class="responsive-css-tabs-stat">
          <strong>UX</strong>
          <span>Cleaner sections</span>
        </div>
        <div class="responsive-css-tabs-stat">
          <strong>SEO</strong>
          <span>Better structure</span>
        </div>
      </div>
    </div>

  </div>

</section>

CSS

.responsive-css-tabs{
width:min(100%,920px);
}

.responsive-css-tabs-header{
margin-bottom:24px;
text-align:center;
}

.responsive-css-tabs-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(96,165,250,.14);
border:1px solid rgba(147,197,253,.20);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.responsive-css-tabs-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,54px);
line-height:1.02;
font-weight:950;
letter-spacing:-.055em;
color:#ffffff;
}

.responsive-css-tabs-title span{
background:linear-gradient(90deg,#60a5fa,#c084fc,#34d399);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.responsive-css-tabs-text{
max-width:660px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.responsive-css-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:14px;
}

.responsive-css-tabs-btn{
cursor:pointer;
min-height:58px;
border:1px solid rgba(148,163,184,.22);
border-radius:18px;
padding:13px 14px;
background:rgba(255,255,255,.07);
color:#dbeafe;
font-size:14px;
font-weight:850;
line-height:1.25;
text-align:left;
transition:background .22s ease,border-color .22s ease,transform .22s ease;
}

.responsive-css-tabs-btn:hover{
transform:translateY(-2px);
border-color:rgba(147,197,253,.48);
background:rgba(255,255,255,.11);
}

.responsive-css-tabs-btn.is-active{
border-color:rgba(96,165,250,.9);
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#ffffff;
box-shadow:0 18px 36px rgba(37,99,235,.22);
}

.responsive-css-tabs-content{
border:1px solid rgba(148,163,184,.24);
border-radius:24px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
overflow:hidden;
}

.responsive-css-tabs-panel{
display:none;
padding:30px;
}

.responsive-css-tabs-panel.is-active{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:26px;
align-items:center;
}

.responsive-css-tabs-panel h3{
margin:0 0 12px;
color:#ffffff;
font-size:28px;
line-height:1.2;
font-weight:950;
}

.responsive-css-tabs-panel p{
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.responsive-css-tabs-stats{
display:grid;
gap:12px;
}

.responsive-css-tabs-stat{
padding:16px;
border:1px solid rgba(148,163,184,.22);
border-radius:18px;
background:rgba(15,23,42,.32);
}

.responsive-css-tabs-stat strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:26px;
line-height:1;
font-weight:950;
}

.responsive-css-tabs-stat span{
color:#bfdbfe;
font-size:13px;
font-weight:800;
}

@media (max-width:820px){
.responsive-css-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.responsive-css-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.responsive-css-tabs-header{
text-align:left;
}

.responsive-css-tabs-title{
font-size:34px;
}

.responsive-css-tabs-nav{
grid-template-columns:1fr;
}

.responsive-css-tabs-btn{
min-height:50px;
}

.responsive-css-tabs-panel{
padding:22px;
}

.responsive-css-tabs-panel h3{
font-size:24px;
}
}

JavaScript

document.querySelectorAll(".responsive-css-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".responsive-css-tabs-btn");
const panels=tabBlock.querySelectorAll(".responsive-css-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This responsive CSS tabs example is useful when you want the tab navigation to stay clean on different screen sizes. The layout keeps the desktop version polished while making the mobile version easier to tap and read.

3. CSS Only Radio Tabs

CSS only radio tabs are useful when you want a tab interface without JavaScript. This technique uses hidden radio inputs, labels as tab buttons, and CSS selectors to show the active content panel.

This example has a soft editorial style with a clean content card, rounded tabs, and a calm background. It is a good choice for simple content sections, blog layouts, lightweight landing pages, and static website components.

  • Perfect for simple static tab sections without JavaScript
  • Uses radio inputs and labels to control the active panel
  • Clean light design with soft spacing and readable content
  • Good for blogs, landing pages, documentation notes, and service sections
  • Preview area stays inside a fixed-height scrollable demo box
CSS Only Tabs

Tabs without JavaScript

Use this radio-based tab pattern when you want a lightweight tab section that works with HTML and CSS only.

Plan the content first

CSS only tabs work best when the content is simple and predictable. Use them for grouped information where each panel supports the same topic or user goal.

Step 01 Group related content before designing the tabs.
Step 02 Keep tab labels short and easy to scan.
Step 03 Make the active tab visually obvious.

Create a calm interface

This design uses soft colors, rounded corners, and clear spacing. The result feels modern without needing animations or complex interaction logic.

Readable Use enough contrast between text and background.
Flexible The layout adapts well to different content lengths.
Lightweight No JavaScript is required for the tab switching.

Publish a simple section

You can place this pattern inside a landing page, documentation block, blog article, or product information area. It is easy to copy and customize.

Static sites Useful for simple HTML and CSS projects.
WordPress Can be placed inside a custom HTML block.
Reusable Change colors, labels, and content as needed.

HTML

<section class="css-only-radio-tabs">

  <div class="css-only-radio-tabs-header">
    <div class="css-only-radio-tabs-kicker">CSS Only Tabs</div>
    <h3 class="css-only-radio-tabs-title">Tabs without <span>JavaScript</span></h3>
    <p class="css-only-radio-tabs-text">Use this radio-based tab pattern when you want a lightweight tab section that works with HTML and CSS only.</p>
  </div>

  <input type="radio" name="css-only-radio-tabs" id="css-only-radio-tab-1" checked>
  <input type="radio" name="css-only-radio-tabs" id="css-only-radio-tab-2">
  <input type="radio" name="css-only-radio-tabs" id="css-only-radio-tab-3">

  <div class="css-only-radio-tabs-nav" role="tablist" aria-label="CSS only radio tabs">
    <label for="css-only-radio-tab-1">Strategy</label>
    <label for="css-only-radio-tab-2">Design</label>
    <label for="css-only-radio-tab-3">Publishing</label>
  </div>

  <div class="css-only-radio-tabs-panels">

    <div class="css-only-radio-tabs-panel css-only-radio-tabs-panel-1">
      <h3>Plan the content first</h3>
      <p>CSS only tabs work best when the content is simple and predictable. Use them for grouped information where each panel supports the same topic or user goal.</p>
      <div class="css-only-radio-tabs-notes">
        <div class="css-only-radio-tabs-note">
          <strong>Step 01</strong>
          <span>Group related content before designing the tabs.</span>
        </div>
        <div class="css-only-radio-tabs-note">
          <strong>Step 02</strong>
          <span>Keep tab labels short and easy to scan.</span>
        </div>
        <div class="css-only-radio-tabs-note">
          <strong>Step 03</strong>
          <span>Make the active tab visually obvious.</span>
        </div>
      </div>
    </div>

    <div class="css-only-radio-tabs-panel css-only-radio-tabs-panel-2">
      <h3>Create a calm interface</h3>
      <p>This design uses soft colors, rounded corners, and clear spacing. The result feels modern without needing animations or complex interaction logic.</p>
      <div class="css-only-radio-tabs-notes">
        <div class="css-only-radio-tabs-note">
          <strong>Readable</strong>
          <span>Use enough contrast between text and background.</span>
        </div>
        <div class="css-only-radio-tabs-note">
          <strong>Flexible</strong>
          <span>The layout adapts well to different content lengths.</span>
        </div>
        <div class="css-only-radio-tabs-note">
          <strong>Lightweight</strong>
          <span>No JavaScript is required for the tab switching.</span>
        </div>
      </div>
    </div>

    <div class="css-only-radio-tabs-panel css-only-radio-tabs-panel-3">
      <h3>Publish a simple section</h3>
      <p>You can place this pattern inside a landing page, documentation block, blog article, or product information area. It is easy to copy and customize.</p>
      <div class="css-only-radio-tabs-notes">
        <div class="css-only-radio-tabs-note">
          <strong>Static sites</strong>
          <span>Useful for simple HTML and CSS projects.</span>
        </div>
        <div class="css-only-radio-tabs-note">
          <strong>WordPress</strong>
          <span>Can be placed inside a custom HTML block.</span>
        </div>
        <div class="css-only-radio-tabs-note">
          <strong>Reusable</strong>
          <span>Change colors, labels, and content as needed.</span>
        </div>
      </div>
    </div>

  </div>

</section>

CSS

.css-only-radio-tabs{
width:min(100%,860px);
padding:28px;
border-radius:30px;
background:rgba(255,255,255,.88);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 26px 80px rgba(120,53,15,.13);
backdrop-filter:blur(16px);
}

.css-only-radio-tabs-header{
margin-bottom:24px;
}

.css-only-radio-tabs-kicker{
display:inline-flex;
align-items:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.css-only-radio-tabs-title{
margin:0 0 10px;
font-size:clamp(32px,5vw,52px);
line-height:1.04;
font-weight:950;
letter-spacing:-.055em;
color:#111827;
}

.css-only-radio-tabs-title span{
color:#ea580c;
}

.css-only-radio-tabs-text{
max-width:650px;
margin:0;
font-size:16px;
line-height:1.75;
color:#57534e;
}

.css-only-radio-tabs input[type="radio"]{
position:absolute;
opacity:0;
pointer-events:none;
}

.css-only-radio-tabs-nav{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:18px;
padding:8px;
border-radius:22px;
background:#fff7ed;
border:1px solid rgba(249,115,22,.14);
}

.css-only-radio-tabs-nav label{
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
flex:1 1 150px;
min-height:48px;
border-radius:16px;
padding:12px 14px;
color:#7c2d12;
font-size:14px;
font-weight:900;
line-height:1.2;
transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.css-only-radio-tabs-nav label:hover{
background:#fed7aa;
transform:translateY(-1px);
}

.css-only-radio-tabs-panels{
position:relative;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 46px rgba(15,23,42,.07);
overflow:hidden;
}

.css-only-radio-tabs-panel{
display:none;
padding:30px;
}

.css-only-radio-tabs-panel h3{
margin:0 0 10px;
font-size:28px;
line-height:1.15;
font-weight:950;
letter-spacing:-.035em;
color:#111827;
}

.css-only-radio-tabs-panel p{
margin:0;
max-width:660px;
font-size:16px;
line-height:1.75;
color:#57534e;
}

.css-only-radio-tabs-notes{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:24px;
}

.css-only-radio-tabs-note{
padding:16px;
border-radius:18px;
background:#fff7ed;
border:1px solid rgba(249,115,22,.16);
}

.css-only-radio-tabs-note strong{
display:block;
margin-bottom:5px;
font-size:15px;
font-weight:950;
color:#9a3412;
}

.css-only-radio-tabs-note span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:700;
color:#78716c;
}

#css-only-radio-tab-1:checked ~ .css-only-radio-tabs-nav label[for="css-only-radio-tab-1"],
#css-only-radio-tab-2:checked ~ .css-only-radio-tabs-nav label[for="css-only-radio-tab-2"],
#css-only-radio-tab-3:checked ~ .css-only-radio-tabs-nav label[for="css-only-radio-tab-3"]{
background:linear-gradient(135deg,#f97316,#f43f5e);
color:#ffffff;
box-shadow:0 14px 34px rgba(249,115,22,.24);
}

#css-only-radio-tab-1:checked ~ .css-only-radio-tabs-panels .css-only-radio-tabs-panel-1,
#css-only-radio-tab-2:checked ~ .css-only-radio-tabs-panels .css-only-radio-tabs-panel-2,
#css-only-radio-tab-3:checked ~ .css-only-radio-tabs-panels .css-only-radio-tabs-panel-3{
display:block;
}

@media (max-width:720px){
.css-only-radio-tabs{
padding:22px;
border-radius:24px;
}

.css-only-radio-tabs-nav{
display:grid;
grid-template-columns:1fr;
}

.css-only-radio-tabs-nav label{
justify-content:flex-start;
}

.css-only-radio-tabs-panel{
padding:24px;
}

.css-only-radio-tabs-panel h3{
font-size:24px;
}

.css-only-radio-tabs-notes{
grid-template-columns:1fr;
}
}

This CSS only radio tabs example is useful when you want a lightweight tab component without extra scripts. It is best for simple, static content where the tab structure does not need advanced keyboard logic or dynamic behavior.

4. Product Details Tabs

Product details tabs are commonly used on ecommerce product pages to organize important buying information. Instead of showing description, specifications, shipping, and returns in one long block, tabs let customers choose the information they need.

This example uses a product-style layout with a visual product card, trust badges, feature highlights, and tabbed product information. It is designed to feel very different from the previous examples and works well for ecommerce stores, WooCommerce pages, product landing pages, and comparison sections.

  • Perfect for ecommerce product pages and WooCommerce product sections
  • Organizes description, specifications, delivery, and warranty content
  • Includes product image area, price card, trust badges, and tabbed details
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Premium UI Kit
Responsive layout Clean components Fast setup
Product Details

Modern Website UI Component Pack

A polished UI component section for product pages, digital products, SaaS websites, and ecommerce landing pages.

$49 one-time license

Built for modern websites

This product details tab section keeps buying information organized and easy to scan. Use it for product pages, landing pages, digital downloads, templates, and UI kits.

  • Clean layout for high-converting product pages
  • Useful for physical and digital products
  • Easy to adapt for WooCommerce-style sections

Technical specifications

Specification tabs are useful when customers need detailed product information but should not see everything at once.

  • Includes responsive HTML and CSS structure
  • Scoped class names for easier customization
  • Works well inside product detail sections

Delivery and access

Delivery tabs can explain shipping, digital access, download instructions, setup steps, or fulfillment details in a compact format.

  • Instant access for digital products
  • Clear delivery details for ecommerce customers
  • Helpful for reducing repeated support questions

Warranty and support

Use this panel for refund details, support conditions, warranty notes, update policies, or customer service information.

  • Organized support and warranty information
  • Easy to scan before purchase
  • Builds more confidence on product pages

HTML

<section class="product-details-tabs">

  <div class="product-details-tabs-media">
    <div class="product-details-tabs-badge">Premium UI Kit</div>

    <div class="product-details-tabs-product">
      <div class="product-details-tabs-product-visual"></div>
    </div>

    <div class="product-details-tabs-mini">
      <span>Responsive layout</span>
      <span>Clean components</span>
      <span>Fast setup</span>
    </div>
  </div>

  <div class="product-details-tabs-card">

    <div class="product-details-tabs-head">
      <div class="product-details-tabs-category">Product Details</div>
      <h3 class="product-details-tabs-title">Modern Website UI Component Pack</h3>
      <p class="product-details-tabs-summary">A polished UI component section for product pages, digital products, SaaS websites, and ecommerce landing pages.</p>

      <div class="product-details-tabs-price-row">
        <div class="product-details-tabs-price">
          <strong>$49</strong>
          <span>one-time license</span>
        </div>
        <button class="product-details-tabs-cta" type="button">Add to Cart</button>
      </div>
    </div>

    <div class="product-details-tabs-nav" role="tablist" aria-label="Product details tabs">
      <button class="product-details-tabs-btn is-active" type="button" data-tab="description">Description</button>
      <button class="product-details-tabs-btn" type="button" data-tab="specs">Specs</button>
      <button class="product-details-tabs-btn" type="button" data-tab="delivery">Delivery</button>
      <button class="product-details-tabs-btn" type="button" data-tab="warranty">Warranty</button>
    </div>

    <div class="product-details-tabs-panel is-active" data-panel="description">
      <h3>Built for modern websites</h3>
      <p>This product details tab section keeps buying information organized and easy to scan. Use it for product pages, landing pages, digital downloads, templates, and UI kits.</p>
      <ul class="product-details-tabs-list">
        <li>Clean layout for high-converting product pages</li>
        <li>Useful for physical and digital products</li>
        <li>Easy to adapt for WooCommerce-style sections</li>
      </ul>
    </div>

    <div class="product-details-tabs-panel" data-panel="specs">
      <h3>Technical specifications</h3>
      <p>Specification tabs are useful when customers need detailed product information but should not see everything at once.</p>
      <ul class="product-details-tabs-list">
        <li>Includes responsive HTML and CSS structure</li>
        <li>Scoped class names for easier customization</li>
        <li>Works well inside product detail sections</li>
      </ul>
    </div>

    <div class="product-details-tabs-panel" data-panel="delivery">
      <h3>Delivery and access</h3>
      <p>Delivery tabs can explain shipping, digital access, download instructions, setup steps, or fulfillment details in a compact format.</p>
      <ul class="product-details-tabs-list">
        <li>Instant access for digital products</li>
        <li>Clear delivery details for ecommerce customers</li>
        <li>Helpful for reducing repeated support questions</li>
      </ul>
    </div>

    <div class="product-details-tabs-panel" data-panel="warranty">
      <h3>Warranty and support</h3>
      <p>Use this panel for refund details, support conditions, warranty notes, update policies, or customer service information.</p>
      <ul class="product-details-tabs-list">
        <li>Organized support and warranty information</li>
        <li>Easy to scan before purchase</li>
        <li>Builds more confidence on product pages</li>
      </ul>
    </div>

  </div>

</section>

CSS

.product-details-tabs{
width:min(100%,980px);
display:grid;
grid-template-columns:.86fr 1.14fr;
gap:22px;
align-items:stretch;
}

.product-details-tabs-media{
position:relative;
overflow:hidden;
border-radius:30px;
background:
linear-gradient(135deg,#064e3b,#10b981);
box-shadow:0 28px 80px rgba(6,78,59,.22);
min-height:520px;
padding:24px;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.product-details-tabs-media::before{
content:"";
position:absolute;
inset:-80px;
background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.24),transparent 30%),
radial-gradient(circle at 85% 20%,rgba(167,243,208,.28),transparent 34%);
pointer-events:none;
}

.product-details-tabs-badge{
position:relative;
z-index:2;
width:max-content;
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}

.product-details-tabs-product{
position:relative;
z-index:2;
display:grid;
place-items:center;
flex:1;
padding:30px 0;
}

.product-details-tabs-product-visual{
width:min(100%,300px);
aspect-ratio:1/1.08;
border-radius:34px;
background:
linear-gradient(135deg,rgba(255,255,255,.92),rgba(236,253,245,.78));
border:1px solid rgba(255,255,255,.36);
box-shadow:
0 30px 80px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.48);
display:grid;
place-items:center;
position:relative;
overflow:hidden;
}

.product-details-tabs-product-visual::before{
content:"";
position:absolute;
width:60%;
height:72%;
border-radius:28px 28px 18px 18px;
background:linear-gradient(180deg,#bbf7d0,#22c55e);
box-shadow:0 20px 50px rgba(22,163,74,.24);
}

.product-details-tabs-product-visual::after{
content:"CSS";
position:relative;
z-index:2;
display:grid;
place-items:center;
width:84px;
height:84px;
border-radius:28px;
background:#064e3b;
color:#ffffff;
font-size:26px;
font-weight:950;
letter-spacing:-.04em;
box-shadow:0 18px 44px rgba(6,78,59,.28);
}

.product-details-tabs-mini{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.product-details-tabs-mini span{
display:block;
padding:12px;
border-radius:16px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:12px;
font-weight:850;
line-height:1.35;
text-align:center;
}

.product-details-tabs-card{
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.12);
overflow:hidden;
}

.product-details-tabs-head{
padding:28px 28px 20px;
border-bottom:1px solid rgba(15,23,42,.08);
}

.product-details-tabs-category{
display:inline-flex;
margin-bottom:12px;
padding:7px 11px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.product-details-tabs-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,46px);
line-height:1.03;
font-weight:950;
letter-spacing:-.055em;
color:#0f172a;
}

.product-details-tabs-summary{
margin:0 0 20px;
font-size:16px;
line-height:1.72;
color:#475569;
}

.product-details-tabs-price-row{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:14px;
}

.product-details-tabs-price{
display:flex;
align-items:end;
gap:8px;
}

.product-details-tabs-price strong{
color:#0f172a;
font-size:32px;
line-height:1;
font-weight:950;
}

.product-details-tabs-price span{
color:#64748b;
font-size:14px;
font-weight:800;
}

.product-details-tabs-cta{
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:999px;
padding:13px 18px;
background:linear-gradient(135deg,#059669,#14b8a6);
color:#ffffff;
font-size:14px;
font-weight:950;
box-shadow:0 16px 34px rgba(5,150,105,.24);
}

.product-details-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
border-bottom:1px solid rgba(15,23,42,.08);
background:#f8fafc;
}

.product-details-tabs-btn{
cursor:pointer;
border:0;
border-right:1px solid rgba(15,23,42,.08);
padding:15px 10px;
background:transparent;
color:#475569;
font-size:13px;
font-weight:900;
line-height:1.25;
transition:background .22s ease,color .22s ease;
}

.product-details-tabs-btn:last-child{
border-right:0;
}

.product-details-tabs-btn:hover{
background:#ecfdf5;
color:#047857;
}

.product-details-tabs-btn.is-active{
background:#ffffff;
color:#047857;
box-shadow:inset 0 -3px 0 #10b981;
}

.product-details-tabs-panel{
display:none;
padding:28px;
}

.product-details-tabs-panel.is-active{
display:block;
}

.product-details-tabs-panel h3{
margin:0 0 12px;
font-size:25px;
line-height:1.15;
font-weight:950;
letter-spacing:-.035em;
color:#0f172a;
}

.product-details-tabs-panel p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

.product-details-tabs-list{
display:grid;
gap:10px;
margin:18px 0 0;
padding:0;
list-style:none;
}

.product-details-tabs-list li{
display:flex;
gap:10px;
align-items:flex-start;
padding:12px 14px;
border-radius:16px;
background:#f8fafc;
color:#334155;
font-size:14px;
font-weight:750;
line-height:1.45;
}

.product-details-tabs-list li::before{
content:"✓";
display:grid;
place-items:center;
flex:0 0 auto;
width:22px;
height:22px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:950;
}

@media (max-width:900px){
.product-details-tabs{
grid-template-columns:1fr;
}

.product-details-tabs-media{
min-height:420px;
}

.product-details-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:640px){
.product-details-tabs-head{
padding:24px 22px 18px;
}

.product-details-tabs-title{
font-size:32px;
}

.product-details-tabs-nav{
grid-template-columns:1fr;
}

.product-details-tabs-btn{
border-right:0;
border-bottom:1px solid rgba(15,23,42,.08);
text-align:left;
padding:14px 18px;
}

.product-details-tabs-panel{
padding:22px;
}

.product-details-tabs-mini{
grid-template-columns:1fr;
}

.product-details-tabs-media{
min-height:360px;
}
}

JavaScript

document.querySelectorAll(".product-details-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".product-details-tabs-btn");
const panels=tabBlock.querySelectorAll(".product-details-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This product details tabs example is useful when you want to make an ecommerce product page easier to scan. It keeps important buying information close to the product while avoiding a long, overwhelming description area.

5. Ecommerce Product Tabs

Ecommerce product tabs are useful when a store needs to show different buying details without making the product page too long. They can organize product highlights, size options, materials, shipping information, customer notes, and care instructions.

This example uses a marketplace-style layout with category tabs, product cards, rating badges, and compact buying information. It is designed for ecommerce stores, product grids, featured collections, and WooCommerce-style sections.

  • Perfect for ecommerce stores, product collections, and WooCommerce sections
  • Uses tabs to switch between featured product categories
  • Includes product cards, ratings, prices, and call-to-action buttons
  • Uses a small JavaScript snippet for tab switching
  • Preview area stays inside a fixed-height scrollable demo box
Shop Tabs

Featured ecommerce collections

Use category tabs to help shoppers browse selected products without leaving the section.

New
★★★★★4.9

UI Starter Kit

A clean product card layout for modern ecommerce and digital stores.

$39 View
Fresh
★★★★★4.8

Landing Pack

Reusable layouts for product pages, hero sections, and feature blocks.

$59 View
New
★★★★☆4.7

Product Blocks

Modern product sections for ecommerce homepages and category pages.

$45 View
Top
★★★★★5.0

Dashboard UI

A polished interface set for SaaS dashboards and admin panels.

$79 View
Hot
★★★★★4.9

Checkout Kit

Conversion-focused checkout components for ecommerce websites.

$49 View
Best
★★★★★4.9

Marketing Cards

Card layouts for pricing, testimonials, features, and landing pages.

$29 View
-30%
★★★★☆4.6

Mini UI Bundle

A small collection of clean web components for quick projects.

$19 View
Deal
★★★★☆4.7

Form Pack

Modern contact, login, signup, and checkout form layouts.

$25 View
Sale
★★★★★4.8

Hero Kit

Responsive hero section layouts for modern websites and landing pages.

$35 View

HTML

<section class="ecommerce-product-tabs">

  <div class="ecommerce-product-tabs-header">
    <div>
      <div class="ecommerce-product-tabs-kicker">Shop Tabs</div>
      <h3 class="ecommerce-product-tabs-title">Featured ecommerce collections</h3>
    </div>
    <p class="ecommerce-product-tabs-intro">Use category tabs to help shoppers browse selected products without leaving the section.</p>
  </div>

  <div class="ecommerce-product-tabs-nav" role="tablist" aria-label="Ecommerce product tabs">
    <button class="ecommerce-product-tabs-btn is-active" type="button" data-tab="new">New Arrivals</button>
    <button class="ecommerce-product-tabs-btn" type="button" data-tab="popular">Best Sellers</button>
    <button class="ecommerce-product-tabs-btn" type="button" data-tab="sale">On Sale</button>
  </div>

  <div class="ecommerce-product-tabs-panel is-active" data-panel="new">

    <article class="ecommerce-product-card">
      <div class="ecommerce-product-card-media">
        <span class="ecommerce-product-badge">New</span>
        <div class="ecommerce-product-card-shape"></div>
      </div>
      <div class="ecommerce-product-card-body">
        <div class="ecommerce-product-rating"><span>★★★★★</span><small>4.9</small></div>
        <h3>UI Starter Kit</h3>
        <p>A clean product card layout for modern ecommerce and digital stores.</p>
        <div class="ecommerce-product-bottom">
          <strong class="ecommerce-product-price">$39</strong>
          <a class="ecommerce-product-link" href="#">View</a>
        </div>
      </div>
    </article>

  </div>

</section>

CSS

.ecommerce-product-tabs{
width:min(100%,1040px);
}

.ecommerce-product-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:end;
margin-bottom:24px;
}

.ecommerce-product-tabs-kicker{
display:inline-flex;
align-items:center;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fce7f3;
color:#be185d;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.ecommerce-product-tabs-title{
margin:0;
font-size:clamp(32px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.ecommerce-product-tabs-intro{
max-width:330px;
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.ecommerce-product-tabs-nav{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:18px;
padding:8px;
border-radius:999px;
background:rgba(255,255,255,.72);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 46px rgba(15,23,42,.08);
}

.ecommerce-product-tabs-btn{
cursor:pointer;
border:0;
border-radius:999px;
padding:12px 16px;
background:transparent;
color:#475569;
font-size:14px;
font-weight:900;
line-height:1.2;
transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.ecommerce-product-tabs-btn:hover{
background:#fce7f3;
color:#be185d;
transform:translateY(-1px);
}

.ecommerce-product-tabs-btn.is-active{
background:linear-gradient(135deg,#db2777,#7c3aed);
color:#ffffff;
box-shadow:0 14px 34px rgba(219,39,119,.24);
}

.ecommerce-product-tabs-panel{
display:none;
}

.ecommerce-product-tabs-panel.is-active{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}

.ecommerce-product-card{
overflow:hidden;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 58px rgba(15,23,42,.10);
}

.ecommerce-product-card-media{
position:relative;
min-height:210px;
display:grid;
place-items:center;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 34%),
linear-gradient(135deg,#f9a8d4,#a78bfa);
}

.ecommerce-product-card-media.is-blue{
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 34%),
linear-gradient(135deg,#93c5fd,#6366f1);
}

.ecommerce-product-card-media.is-green{
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 34%),
linear-gradient(135deg,#86efac,#14b8a6);
}

.ecommerce-product-card-shape{
width:108px;
height:128px;
border-radius:34px;
background:rgba(255,255,255,.86);
box-shadow:0 24px 56px rgba(15,23,42,.18);
position:relative;
}

.ecommerce-product-card-shape::before{
content:"";
position:absolute;
left:50%;
top:18px;
width:48px;
height:48px;
border-radius:18px;
background:rgba(15,23,42,.86);
transform:translateX(-50%);
}

.ecommerce-product-badge{
position:absolute;
top:16px;
left:16px;
display:inline-flex;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.88);
color:#be185d;
font-size:12px;
font-weight:950;
}

.ecommerce-product-card-body{
padding:20px;
}

.ecommerce-product-rating{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}

.ecommerce-product-rating span{
color:#f59e0b;
font-size:13px;
font-weight:950;
}

.ecommerce-product-rating small{
color:#64748b;
font-size:12px;
font-weight:800;
}

.ecommerce-product-card h3{
margin:0 0 8px;
color:#0f172a;
font-size:20px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
}

.ecommerce-product-card p{
margin:0 0 16px;
color:#64748b;
font-size:14px;
line-height:1.6;
}

.ecommerce-product-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.ecommerce-product-price{
color:#0f172a;
font-size:22px;
font-weight:950;
letter-spacing:-.04em;
}

.ecommerce-product-link{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:10px 13px;
background:#0f172a;
color:#ffffff;
font-size:13px;
font-weight:900;
text-decoration:none;
}

@media (max-width:900px){
.ecommerce-product-tabs-header{
grid-template-columns:1fr;
gap:12px;
}

.ecommerce-product-tabs-intro{
max-width:none;
}

.ecommerce-product-tabs-panel.is-active{
grid-template-columns:1fr 1fr;
}
}

@media (max-width:640px){
.ecommerce-product-tabs-title{
font-size:34px;
}

.ecommerce-product-tabs-nav{
border-radius:22px;
}

.ecommerce-product-tabs-btn{
width:100%;
text-align:left;
}

.ecommerce-product-tabs-panel.is-active{
grid-template-columns:1fr;
}

.ecommerce-product-card-media{
min-height:190px;
}
}

JavaScript

document.querySelectorAll(".ecommerce-product-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".ecommerce-product-tabs-btn");
const panels=tabBlock.querySelectorAll(".ecommerce-product-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This ecommerce product tabs example is useful when you want to show multiple product groups in one compact section. It gives shoppers a faster way to browse featured products, best sellers, and sale items without loading another page.

6. Pricing Plan Tabs

Pricing plan tabs are useful when a website needs to compare different pricing views, billing cycles, or customer types. A common use case is switching between monthly and yearly pricing, but the same pattern also works for personal, business, and enterprise plans.

This example uses a SaaS-style pricing layout with a dark background, glowing active tabs, pricing cards, feature lists, and highlighted recommended plan. It is intentionally different from the ecommerce product tabs example and works well for software, memberships, subscriptions, hosting, and service packages.

  • Perfect for SaaS websites, subscriptions, memberships, and service packages
  • Switches between monthly and yearly pricing views
  • Includes pricing cards, feature lists, and a highlighted recommended plan
  • Uses a small JavaScript snippet for changing active pricing panels
  • Preview area stays inside a fixed-height scrollable demo box
Pricing Tabs

Flexible plans for growing teams

Switch between monthly and yearly billing to compare pricing options without making the pricing section too long.

Starter

For small projects and simple websites.

$19/mo
  • 5 active projects
  • Basic components
  • Email support
Start Plan
Popular

Pro

For growing websites and client projects.

$49/mo
  • Unlimited projects
  • Advanced components
  • Priority support
Choose Pro

Studio

For agencies and larger design systems.

$99/mo
  • Team workspace
  • Reusable templates
  • Premium support
Contact Sales

Starter

For small projects with yearly savings.

$15/mo
  • Billed yearly
  • 5 active projects
  • Basic components
Start Yearly
Best Value

Pro

For consistent website and client work.

$39/mo
  • Billed yearly
  • Unlimited projects
  • Priority support
Choose Yearly

Studio

For agencies that need a full toolkit.

$79/mo
  • Billed yearly
  • Team workspace
  • Premium support
Contact Sales

HTML

<section class="pricing-plan-tabs">

  <div class="pricing-plan-tabs-header">
    <div class="pricing-plan-tabs-label">Pricing Tabs</div>
    <h3 class="pricing-plan-tabs-title">Flexible plans for <span>growing teams</span></h3>
    <p class="pricing-plan-tabs-text">Switch between monthly and yearly billing to compare pricing options without making the pricing section too long.</p>
  </div>

  <div class="pricing-plan-tabs-toggle" role="tablist" aria-label="Pricing plan tabs">
    <button class="pricing-plan-tabs-btn is-active" type="button" data-tab="monthly">Monthly</button>
    <button class="pricing-plan-tabs-btn" type="button" data-tab="yearly">Yearly - Save 20%</button>
  </div>

  <div class="pricing-plan-tabs-panel is-active" data-panel="monthly">

    <article class="pricing-plan-card">
      <h3>Starter</h3>
      <p>For small projects and simple websites.</p>
      <div class="pricing-plan-price"><strong>$19</strong><span>/mo</span></div>
      <ul class="pricing-plan-list">
        <li>5 active projects</li>
        <li>Basic components</li>
        <li>Email support</li>
      </ul>
      <a class="pricing-plan-cta" href="#">Start Plan</a>
    </article>

    <article class="pricing-plan-card is-featured">
      <span class="pricing-plan-badge">Popular</span>
      <h3>Pro</h3>
      <p>For growing websites and client projects.</p>
      <div class="pricing-plan-price"><strong>$49</strong><span>/mo</span></div>
      <ul class="pricing-plan-list">
        <li>Unlimited projects</li>
        <li>Advanced components</li>
        <li>Priority support</li>
      </ul>
      <a class="pricing-plan-cta" href="#">Choose Pro</a>
    </article>

  </div>

</section>

CSS

.pricing-plan-tabs{
width:min(100%,1040px);
}

.pricing-plan-tabs-header{
text-align:center;
margin-bottom:26px;
}

.pricing-plan-tabs-label{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(99,102,241,.14);
border:1px solid rgba(165,180,252,.20);
color:#c7d2fe;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.pricing-plan-tabs-label::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12),0 0 24px rgba(34,197,94,.55);
}

.pricing-plan-tabs-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff;
}

.pricing-plan-tabs-title span{
background:linear-gradient(90deg,#60a5fa,#c084fc,#34d399);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.pricing-plan-tabs-text{
max-width:670px;
margin:0 auto;
color:#cbd5e1;
font-size:16px;
line-height:1.75;
}

.pricing-plan-tabs-toggle{
width:max-content;
max-width:100%;
display:flex;
gap:8px;
margin:0 auto 22px;
padding:8px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.pricing-plan-tabs-btn{
cursor:pointer;
border:0;
border-radius:999px;
padding:12px 18px;
background:transparent;
color:#cbd5e1;
font-size:14px;
font-weight:950;
line-height:1.2;
transition:background .22s ease,color .22s ease,box-shadow .22s ease;
}

.pricing-plan-tabs-btn.is-active{
background:linear-gradient(135deg,#2563eb,#8b5cf6);
color:#ffffff;
box-shadow:0 14px 34px rgba(37,99,235,.26);
}

.pricing-plan-tabs-panel{
display:none;
}

.pricing-plan-tabs-panel.is-active{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}

.pricing-plan-card{
position:relative;
overflow:hidden;
padding:24px;
border-radius:28px;
background:rgba(15,23,42,.86);
border:1px solid rgba(148,163,184,.22);
box-shadow:0 24px 70px rgba(0,0,0,.26);
}

.pricing-plan-card.is-featured{
background:
radial-gradient(circle at 50% 0%,rgba(139,92,246,.28),transparent 36%),
rgba(15,23,42,.94);
border-color:rgba(168,85,247,.52);
box-shadow:
0 26px 80px rgba(0,0,0,.32),
0 0 0 1px rgba(168,85,247,.18),
0 0 48px rgba(139,92,246,.18);
}

.pricing-plan-badge{
position:absolute;
top:18px;
right:18px;
display:inline-flex;
padding:7px 10px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(74,222,128,.22);
color:#bbf7d0;
font-size:12px;
font-weight:950;
}

.pricing-plan-card h3{
margin:0 0 10px;
color:#ffffff;
font-size:23px;
line-height:1.2;
font-weight:950;
}

.pricing-plan-card p{
margin:0 0 20px;
color:#94a3b8;
font-size:14px;
line-height:1.65;
}

.pricing-plan-price{
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:20px;
}

.pricing-plan-price strong{
color:#ffffff;
font-size:44px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
}

.pricing-plan-price span{
padding-bottom:5px;
color:#94a3b8;
font-size:14px;
font-weight:800;
}

.pricing-plan-list{
display:grid;
gap:11px;
margin:0 0 22px;
padding:0;
list-style:none;
}

.pricing-plan-list li{
display:flex;
gap:10px;
align-items:flex-start;
color:#cbd5e1;
font-size:14px;
line-height:1.45;
font-weight:750;
}

.pricing-plan-list li::before{
content:"✓";
display:grid;
place-items:center;
flex:0 0 auto;
width:21px;
height:21px;
border-radius:999px;
background:rgba(34,197,94,.14);
color:#86efac;
font-size:12px;
font-weight:950;
}

.pricing-plan-cta{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
border-radius:999px;
padding:13px 16px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:14px;
font-weight:950;
text-decoration:none;
transition:background .22s ease,transform .22s ease;
}

.pricing-plan-cta:hover{
background:rgba(255,255,255,.14);
transform:translateY(-1px);
}

.pricing-plan-card.is-featured .pricing-plan-cta{
background:linear-gradient(135deg,#2563eb,#8b5cf6);
border-color:transparent;
box-shadow:0 16px 36px rgba(37,99,235,.24);
}

@media (max-width:900px){
.pricing-plan-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.pricing-plan-tabs-title{
font-size:34px;
}

.pricing-plan-tabs-toggle{
width:100%;
display:grid;
grid-template-columns:1fr;
border-radius:22px;
}

.pricing-plan-card{
padding:22px;
}

.pricing-plan-price strong{
font-size:38px;
}
}

JavaScript

document.querySelectorAll(".pricing-plan-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".pricing-plan-tabs-btn");
const panels=tabBlock.querySelectorAll(".pricing-plan-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This pricing plan tabs example is useful when you need to compare billing options without duplicating a long pricing section. It keeps monthly and yearly plans organized while still making the recommended plan stand out visually.

7. FAQ Tabs

FAQ tabs are useful when a website has many questions across different categories. Instead of showing one long FAQ list, you can group questions into topics such as general questions, pricing, account setup, support, shipping, or product details.

This example uses a help center style with category tabs on top and FAQ cards below. It is different from a normal accordion because the tabs first filter the topic, while the FAQ cards keep the answers short and easy to scan.

  • Perfect for FAQ pages, help centers, SaaS websites, ecommerce stores, and support sections
  • Groups questions by topic instead of showing one long FAQ list
  • Uses a calm help center design with soft cards and clear category buttons
  • Uses a small JavaScript snippet for switching FAQ categories
  • Preview area stays inside a fixed-height scrollable demo box
FAQ Tabs

Find answers by category

Use FAQ tabs when your help section has many questions and visitors need a faster way to browse common topics.

01

What are CSS tabs used for?

CSS tabs are used to organize related content into separate panels so users can switch between topics without leaving the current section.

02

Are tab sections good for long content?

Tabs work best for related content groups. If the content is very long or unrelated, normal page sections may be easier to read.

03

Can I use tabs on mobile?

Yes. Mobile tabs should be easy to tap, readable, and either stacked, scrollable, or converted into a compact layout.

$

Can tabs compare pricing options?

Yes. Pricing tabs are useful for monthly and yearly plans, personal and business plans, or different service packages.

%

Should yearly savings be shown in tabs?

Yearly savings can be shown in a tab label or highlighted inside the pricing panel to make the difference easy to understand.

A

Can tabs organize account settings?

Yes. Account pages often use tabs for profile details, billing, password settings, notifications, and privacy options.

ID

Do account tabs need JavaScript?

For production dashboards, JavaScript is usually better because it can manage state, keyboard navigation, and accessibility attributes.

?

Are FAQ tabs better than FAQ accordions?

FAQ tabs and accordions solve different problems. Tabs group topics first, while accordions expand individual questions inside a topic.

24

Where should support tabs be used?

Use support tabs in help centers, onboarding areas, product support pages, and documentation pages with several content categories.

Tip for FAQ tab design Use tabs for categories and accordions for individual questions if your FAQ section has many answers. This keeps the section structured and easier to scan.

HTML

<section class="faq-tabs">

  <div class="faq-tabs-header">
    <div class="faq-tabs-kicker">FAQ Tabs</div>
    <h3 class="faq-tabs-title">Find answers by <span>category</span></h3>
    <p class="faq-tabs-text">Use FAQ tabs when your help section has many questions and visitors need a faster way to browse common topics.</p>
  </div>

  <div class="faq-tabs-nav" role="tablist" aria-label="FAQ tabs">
    <button class="faq-tabs-btn is-active" type="button" data-tab="general">General</button>
    <button class="faq-tabs-btn" type="button" data-tab="pricing">Pricing</button>
    <button class="faq-tabs-btn" type="button" data-tab="account">Account</button>
    <button class="faq-tabs-btn" type="button" data-tab="support">Support</button>
  </div>

  <div class="faq-tabs-panel is-active" data-panel="general">

    <div class="faq-tabs-item">
      <div class="faq-tabs-icon">01</div>
      <div>
        <h3>What are CSS tabs used for?</h3>
        <p>CSS tabs are used to organize related content into separate panels so users can switch between topics without leaving the current section.</p>
      </div>
    </div>

    <div class="faq-tabs-item">
      <div class="faq-tabs-icon">02</div>
      <div>
        <h3>Are tab sections good for long content?</h3>
        <p>Tabs work best for related content groups. If the content is very long or unrelated, normal page sections may be easier to read.</p>
      </div>
    </div>

  </div>

</section>

CSS

.faq-tabs{
width:min(100%,960px);
}

.faq-tabs-header{
text-align:center;
margin-bottom:26px;
}

.faq-tabs-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.faq-tabs-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.faq-tabs-title span{
color:#0284c7;
}

.faq-tabs-text{
max-width:680px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#475569;
}

.faq-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:18px;
}

.faq-tabs-btn{
cursor:pointer;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
padding:16px 14px;
background:rgba(255,255,255,.78);
color:#475569;
font-size:14px;
font-weight:900;
line-height:1.25;
box-shadow:0 16px 40px rgba(15,23,42,.06);
transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}

.faq-tabs-btn:hover{
transform:translateY(-2px);
background:#f0f9ff;
color:#0369a1;
border-color:rgba(14,165,233,.25);
}

.faq-tabs-btn.is-active{
background:linear-gradient(135deg,#0284c7,#0ea5e9);
color:#ffffff;
border-color:transparent;
box-shadow:0 18px 40px rgba(2,132,199,.22);
}

.faq-tabs-panel{
display:none;
}

.faq-tabs-panel.is-active{
display:grid;
gap:14px;
}

.faq-tabs-item{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:16px;
padding:20px;
border-radius:24px;
background:rgba(255,255,255,.88);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 48px rgba(15,23,42,.08);
}

.faq-tabs-icon{
display:grid;
place-items:center;
width:46px;
height:46px;
border-radius:17px;
background:#e0f2fe;
color:#0284c7;
font-size:18px;
font-weight:950;
}

.faq-tabs-item h3{
margin:0 0 8px;
color:#0f172a;
font-size:19px;
line-height:1.25;
font-weight:950;
letter-spacing:-.02em;
}

.faq-tabs-item p{
margin:0;
color:#475569;
font-size:15px;
line-height:1.7;
}

.faq-tabs-note{
margin-top:18px;
padding:18px;
border-radius:22px;
background:#0f172a;
color:#e5e7eb;
box-shadow:0 22px 58px rgba(15,23,42,.16);
}

.faq-tabs-note strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:16px;
font-weight:950;
}

.faq-tabs-note span{
display:block;
font-size:14px;
line-height:1.65;
color:#cbd5e1;
}

@media (max-width:820px){
.faq-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:640px){
.faq-tabs-header{
text-align:left;
}

.faq-tabs-title{
font-size:34px;
}

.faq-tabs-nav{
grid-template-columns:1fr;
}

.faq-tabs-btn{
text-align:left;
}

.faq-tabs-item{
grid-template-columns:1fr;
}

.faq-tabs-icon{
width:42px;
height:42px;
}
}

JavaScript

document.querySelectorAll(".faq-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".faq-tabs-btn");
const panels=tabBlock.querySelectorAll(".faq-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This FAQ tabs example is useful when a normal FAQ accordion would become too long. Tabs let you organize questions by category first, which makes the support section easier to browse and more user-friendly.

8. Dashboard Tabs

Dashboard tabs help organize analytics, reports, activity, users, settings, and other admin content inside a compact app-style interface. They are common in SaaS dashboards, admin panels, customer portals, analytics tools, and internal business platforms.

This example uses a dark dashboard layout with a sidebar-style header, statistic cards, activity rows, and tabbed panels. It is intentionally more app-like than the previous examples so the post includes a wider range of tab UI styles.

  • Perfect for dashboards, admin panels, analytics tools, SaaS apps, and customer portals
  • Uses tabs to switch between overview, analytics, activity, and settings panels
  • Includes stat cards, chart-style blocks, and dashboard rows
  • Uses a small JavaScript snippet for tab switching
  • Preview area stays inside a fixed-height scrollable demo box

Analytics Dashboard

Live project overview
Online
Visitors48.2K
Revenue$12.8K
Orders934
Growth18%

Weekly performance

Quick status

Conversion+12%
Page speedGood
Tasks7 open

Traffic sources

Top channels

Organic42%
Direct28%
Social19%

Recent activity

New order received2 min ago
Landing page updated18 min ago
New subscriber joined42 min ago
Report generated1 hour ago
Email notifications Send weekly reports and important alerts to the admin email.
Public analytics Allow selected team members to view simplified analytics data.
Performance alerts Notify the team when conversion rate or speed metrics change.

HTML

<section class="dashboard-tabs">

  <div class="dashboard-tabs-top">
    <div class="dashboard-tabs-brand">
      <div class="dashboard-tabs-logo">DB</div>
      <div>
        <h3>Analytics Dashboard</h3>
        <span>Live project overview</span>
      </div>
    </div>
    <div class="dashboard-tabs-profile">Online</div>
  </div>

  <div class="dashboard-tabs-nav" role="tablist" aria-label="Dashboard tabs">
    <button class="dashboard-tabs-btn is-active" type="button" data-tab="overview">Overview</button>
    <button class="dashboard-tabs-btn" type="button" data-tab="analytics">Analytics</button>
    <button class="dashboard-tabs-btn" type="button" data-tab="activity">Activity</button>
    <button class="dashboard-tabs-btn" type="button" data-tab="settings">Settings</button>
  </div>

  <div class="dashboard-tabs-body">

    <div class="dashboard-tabs-panel is-active" data-panel="overview">
      <div class="dashboard-tabs-grid">
        <div class="dashboard-tabs-stat"><span>Visitors</span><strong>48.2K</strong></div>
        <div class="dashboard-tabs-stat"><span>Revenue</span><strong>$12.8K</strong></div>
        <div class="dashboard-tabs-stat"><span>Orders</span><strong>934</strong></div>
        <div class="dashboard-tabs-stat"><span>Growth</span><strong>18%</strong></div>
      </div>
    </div>

  </div>

</section>

CSS

.dashboard-tabs{
width:min(100%,1050px);
border-radius:32px;
overflow:hidden;
background:rgba(15,23,42,.88);
border:1px solid rgba(148,163,184,.22);
box-shadow:0 30px 90px rgba(0,0,0,.34);
}

.dashboard-tabs-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px;
border-bottom:1px solid rgba(148,163,184,.18);
background:rgba(2,6,23,.42);
}

.dashboard-tabs-brand{
display:flex;
align-items:center;
gap:13px;
}

.dashboard-tabs-logo{
display:grid;
place-items:center;
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
color:#ffffff;
font-weight:950;
box-shadow:0 16px 36px rgba(14,165,233,.22);
}

.dashboard-tabs-brand h3{
margin:0;
color:#ffffff;
font-size:20px;
line-height:1.2;
font-weight:950;
}

.dashboard-tabs-brand span{
display:block;
margin-top:3px;
color:#94a3b8;
font-size:13px;
font-weight:750;
}

.dashboard-tabs-profile{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#e5e7eb;
font-size:13px;
font-weight:850;
}

.dashboard-tabs-profile::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.dashboard-tabs-nav{
display:flex;
gap:10px;
padding:16px 22px;
border-bottom:1px solid rgba(148,163,184,.18);
overflow-x:auto;
background:rgba(15,23,42,.72);
}

.dashboard-tabs-btn{
cursor:pointer;
flex:0 0 auto;
border:1px solid rgba(148,163,184,.18);
border-radius:999px;
padding:11px 15px;
background:rgba(255,255,255,.06);
color:#cbd5e1;
font-size:14px;
font-weight:900;
line-height:1.2;
transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;
}

.dashboard-tabs-btn:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.10);
border-color:rgba(125,211,252,.36);
color:#ffffff;
}

.dashboard-tabs-btn.is-active{
background:linear-gradient(135deg,#0284c7,#7c3aed);
border-color:transparent;
color:#ffffff;
box-shadow:0 16px 36px rgba(2,132,199,.22);
}

.dashboard-tabs-body{
padding:22px;
}

.dashboard-tabs-panel{
display:none;
}

.dashboard-tabs-panel.is-active{
display:block;
}

.dashboard-tabs-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:16px;
}

.dashboard-tabs-stat{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
}

.dashboard-tabs-stat span{
display:block;
margin-bottom:8px;
color:#94a3b8;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.dashboard-tabs-stat strong{
display:block;
color:#ffffff;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.045em;
}

.dashboard-tabs-main{
display:grid;
grid-template-columns:1.4fr .8fr;
gap:16px;
}

.dashboard-tabs-card{
padding:20px;
border-radius:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
}

.dashboard-tabs-card h4{
margin:0 0 14px;
color:#ffffff;
font-size:18px;
font-weight:950;
}

.dashboard-tabs-chart{
height:190px;
display:flex;
align-items:end;
gap:10px;
padding:14px;
border-radius:18px;
background:rgba(2,6,23,.35);
}

.dashboard-tabs-bar{
flex:1;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#38bdf8,#8b5cf6);
min-height:34px;
box-shadow:0 12px 30px rgba(56,189,248,.15);
}

.dashboard-tabs-row-list{
display:grid;
gap:10px;
}

.dashboard-tabs-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-radius:16px;
background:rgba(2,6,23,.35);
}

.dashboard-tabs-row strong{
color:#e5e7eb;
font-size:14px;
font-weight:900;
}

.dashboard-tabs-row span{
color:#94a3b8;
font-size:13px;
font-weight:750;
}

.dashboard-tabs-row em{
font-style:normal;
color:#86efac;
font-size:13px;
font-weight:900;
}

.dashboard-tabs-settings{
display:grid;
gap:12px;
}

.dashboard-tabs-setting{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
}

.dashboard-tabs-setting strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:15px;
font-weight:950;
}

.dashboard-tabs-setting span{
display:block;
color:#94a3b8;
font-size:13px;
line-height:1.45;
}

.dashboard-tabs-switch{
width:48px;
height:28px;
padding:4px;
border-radius:999px;
background:linear-gradient(135deg,#0284c7,#7c3aed);
flex:0 0 auto;
}

.dashboard-tabs-switch::before{
content:"";
display:block;
width:20px;
height:20px;
border-radius:999px;
background:#ffffff;
margin-left:auto;
}

@media (max-width:900px){
.dashboard-tabs-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.dashboard-tabs-main{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.dashboard-tabs-top{
align-items:flex-start;
flex-direction:column;
}

.dashboard-tabs-grid{
grid-template-columns:1fr;
}

.dashboard-tabs-body{
padding:16px;
}

.dashboard-tabs-chart{
height:160px;
}

.dashboard-tabs-setting{
align-items:flex-start;
flex-direction:column;
}
}

JavaScript

document.querySelectorAll(".dashboard-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".dashboard-tabs-btn");
const panels=tabBlock.querySelectorAll(".dashboard-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This dashboard tabs example is useful for app-style interfaces where many views need to live inside the same layout. The tabs keep the dashboard compact while still giving users quick access to overview, analytics, activity, and settings content.

9. Settings Panel Tabs

Settings panel tabs are useful for account pages, dashboard settings, user profiles, admin panels, SaaS apps, membership portals, and customer areas. They help divide settings into clear groups such as profile, security, billing, notifications, and privacy.

This example uses a clean application-style layout with a left tab menu and a detailed settings panel on the right. It feels different from the previous dashboard example because it focuses on forms, toggles, profile details, and user account options.

  • Perfect for account settings, SaaS dashboards, user portals, and admin pages
  • Uses vertical tabs for profile, security, billing, and notifications
  • Includes form fields, toggle rows, billing card, and clean app styling
  • Uses a small JavaScript snippet for switching settings panels
  • Preview area stays inside a fixed-height scrollable demo box
Settings Panel

Manage your account

Use vertical settings tabs to organize account details, security preferences, billing information, and notification options in one clean interface.

Two-factor authentication Add an extra layer of security to your account login.
Login alerts Receive an email when a new device signs in.

Password updated

Your password was last changed 24 days ago. Use regular updates to keep the account safer.

Pro Plan Active subscription · Next invoice on June 14
$49 / month

Billing details

Use this panel for invoices, payment methods, tax information, plan upgrades, and subscription settings.

Weekly reports Send a summary of account activity every Monday.
Product updates Notify me when new features and UI components are released.
Security messages Always send important account and security notifications.

HTML

<section class="settings-panel-tabs">

  <aside class="settings-panel-tabs-sidebar">
    <div class="settings-panel-tabs-user">
      <div class="settings-panel-tabs-avatar">MH</div>
      <div>
        <strong>John Doe</strong>
        <span>Account settings</span>
      </div>
    </div>

    <div class="settings-panel-tabs-nav" role="tablist" aria-label="Settings panel tabs">
      <button class="settings-panel-tabs-btn is-active" type="button" data-tab="profile">Profile</button>
      <button class="settings-panel-tabs-btn" type="button" data-tab="security">Security</button>
      <button class="settings-panel-tabs-btn" type="button" data-tab="billing">Billing</button>
      <button class="settings-panel-tabs-btn" type="button" data-tab="notifications">Notifications</button>
    </div>
  </aside>

  <div class="settings-panel-tabs-content">

    <div class="settings-panel-tabs-head">
      <div class="settings-panel-tabs-label">Settings Panel</div>
      <h3>Manage your account</h3>
      <p>Use vertical settings tabs to organize account details, security preferences, billing information, and notification options in one clean interface.</p>
    </div>

    <div class="settings-panel-tabs-panel is-active" data-panel="profile">
      <div class="settings-panel-tabs-form-grid">
        <div class="settings-panel-tabs-field">
          <label>First name</label>
          <input type="text" value="John">
        </div>
        <div class="settings-panel-tabs-field">
          <label>Last name</label>
          <input type="text" value="Doe">
        </div>
      </div>
    </div>

  </div>

</section>

CSS

.settings-panel-tabs{
width:min(100%,1040px);
display:grid;
grid-template-columns:280px minmax(0,1fr);
gap:18px;
align-items:stretch;
}

.settings-panel-tabs-sidebar{
padding:22px;
border-radius:30px;
background:#0f172a;
box-shadow:0 26px 78px rgba(15,23,42,.22);
color:#ffffff;
}

.settings-panel-tabs-user{
display:flex;
align-items:center;
gap:12px;
padding-bottom:20px;
margin-bottom:18px;
border-bottom:1px solid rgba(255,255,255,.10);
}

.settings-panel-tabs-avatar{
display:grid;
place-items:center;
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#6366f1,#14b8a6);
color:#ffffff;
font-size:18px;
font-weight:950;
}

.settings-panel-tabs-nav{
display:grid;
gap:10px;
}

.settings-panel-tabs-btn{
cursor:pointer;
display:flex;
align-items:center;
gap:11px;
width:100%;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
padding:13px 14px;
background:rgba(255,255,255,.05);
color:#cbd5e1;
font-size:14px;
font-weight:900;
line-height:1.2;
text-align:left;
}

.settings-panel-tabs-btn.is-active{
background:linear-gradient(135deg,#4f46e5,#14b8a6);
border-color:transparent;
color:#ffffff;
box-shadow:0 16px 34px rgba(79,70,229,.20);
}

.settings-panel-tabs-content{
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 26px 78px rgba(15,23,42,.12);
overflow:hidden;
}

.settings-panel-tabs-head{
padding:26px 28px;
border-bottom:1px solid rgba(15,23,42,.08);
}

.settings-panel-tabs-panel{
display:none;
padding:28px;
}

.settings-panel-tabs-panel.is-active{
display:block;
}

.settings-panel-tabs-form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}

.settings-panel-tabs-field{
display:grid;
gap:8px;
}

.settings-panel-tabs-field label{
color:#334155;
font-size:13px;
font-weight:950;
}

.settings-panel-tabs-field input{
width:100%;
border:1px solid #dbe3ef;
border-radius:16px;
padding:13px 14px;
background:#f8fafc;
color:#0f172a;
font-size:14px;
font-weight:750;
outline:none;
}

.settings-panel-tabs-row-list{
display:grid;
gap:12px;
}

.settings-panel-tabs-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.settings-panel-tabs-toggle{
width:50px;
height:30px;
padding:4px;
border-radius:999px;
background:linear-gradient(135deg,#4f46e5,#14b8a6);
flex:0 0 auto;
}

.settings-panel-tabs-toggle::before{
content:"";
display:block;
width:22px;
height:22px;
border-radius:999px;
background:#ffffff;
margin-left:auto;
box-shadow:0 3px 10px rgba(15,23,42,.18);
}

@media (max-width:860px){
.settings-panel-tabs{
grid-template-columns:1fr;
}

.settings-panel-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:640px){
.settings-panel-tabs-sidebar,
.settings-panel-tabs-content{
border-radius:24px;
}

.settings-panel-tabs-nav{
grid-template-columns:1fr;
}

.settings-panel-tabs-form-grid{
grid-template-columns:1fr;
}
}

JavaScript

document.querySelectorAll(".settings-panel-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".settings-panel-tabs-btn");
const panels=tabBlock.querySelectorAll(".settings-panel-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This settings panel tabs example is useful when you need to organize many account controls without creating a long settings page. Vertical tabs make the structure feel more like a real application interface.

10. Animated Underline Tabs

Animated underline tabs are a clean and minimal tab style where the active state is shown with a moving underline instead of a filled button. This works well for modern landing pages, editorial websites, feature sections, case studies, product pages, and documentation blocks.

This example uses a soft white layout, large typography, image-style content cards, and an animated underline effect. It is intentionally lighter and more elegant than the app-style settings panel example.

  • Perfect for landing pages, feature sections, case studies, and editorial layouts
  • Uses a minimal animated underline active state
  • Includes large content cards and soft visual placeholders
  • Uses a small JavaScript snippet for switching tabs and moving the underline
  • Preview area stays inside a fixed-height scrollable demo box
Underline Tabs

Elegant tabs with a moving line

Use animated underline tabs when you want a minimal interface that still feels interactive and polished.

Start with the structure

Before designing tab styles, decide how the content should be grouped. A clean tab layout works best when each tab supports the same user goal.

  • Group related content into clear categories
  • Keep tab labels short and readable
  • Make sure the active state is easy to see

Use a calm active state

An underline animation is subtle, so it works well in clean editorial sections, product feature blocks, case studies, and landing page content.

  • Use spacing to make the tabs easy to tap
  • Keep the underline motion quick and smooth
  • Avoid using too many tab labels in one row

Test across screen sizes

Minimal tabs should still work on mobile. Let the tab row scroll horizontally or stack the tabs when the available width becomes too small.

  • Check the tab row on small screens
  • Use enough contrast for text and active states
  • Keep the content panels readable and focused

HTML

<section class="animated-underline-tabs">

  <div class="animated-underline-tabs-header">
    <div>
      <div class="animated-underline-tabs-kicker">Underline Tabs</div>
      <h3 class="animated-underline-tabs-title">Elegant tabs with a <span>moving line</span></h3>
    </div>
    <p class="animated-underline-tabs-text">Use animated underline tabs when you want a minimal interface that still feels interactive and polished.</p>
  </div>

  <div class="animated-underline-tabs-nav" role="tablist" aria-label="Animated underline tabs">
    <button class="animated-underline-tabs-btn is-active" type="button" data-tab="strategy">Strategy</button>
    <button class="animated-underline-tabs-btn" type="button" data-tab="design">Design</button>
    <button class="animated-underline-tabs-btn" type="button" data-tab="launch">Launch</button>
    <span class="animated-underline-tabs-line"></span>
  </div>

  <div class="animated-underline-tabs-panel is-active" data-panel="strategy">
    <div class="animated-underline-tabs-visual"></div>
    <div class="animated-underline-tabs-copy">
      <h3>Start with the structure</h3>
      <p>Before designing tab styles, decide how the content should be grouped. A clean tab layout works best when each tab supports the same user goal.</p>
      <ul class="animated-underline-tabs-list">
        <li>Group related content into clear categories</li>
        <li>Keep tab labels short and readable</li>
        <li>Make sure the active state is easy to see</li>
      </ul>
    </div>
  </div>

</section>

CSS

.animated-underline-tabs{
width:min(100%,980px);
padding:34px;
border-radius:34px;
background:rgba(255,255,255,.88);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.10);
}

.animated-underline-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);
gap:30px;
align-items:end;
margin-bottom:28px;
}

.animated-underline-tabs-kicker{
display:inline-flex;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#f1f5f9;
color:#475569;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.animated-underline-tabs-title{
margin:0;
font-size:clamp(34px,5vw,60px);
line-height:.98;
font-weight:950;
letter-spacing:-.07em;
color:#0f172a;
}

.animated-underline-tabs-title span{
color:#4f46e5;
}

.animated-underline-tabs-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.animated-underline-tabs-nav{
position:relative;
display:flex;
gap:26px;
border-bottom:1px solid rgba(15,23,42,.12);
margin-bottom:26px;
overflow-x:auto;
}

.animated-underline-tabs-btn{
cursor:pointer;
position:relative;
flex:0 0 auto;
border:0;
padding:0 0 16px;
background:transparent;
color:#64748b;
font-size:15px;
font-weight:950;
line-height:1.2;
transition:color .22s ease;
}

.animated-underline-tabs-btn:hover,
.animated-underline-tabs-btn.is-active{
color:#0f172a;
}

.animated-underline-tabs-line{
position:absolute;
left:0;
bottom:-1px;
width:76px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#4f46e5,#14b8a6);
transition:transform .28s ease,width .28s ease;
}

.animated-underline-tabs-panel{
display:none;
}

.animated-underline-tabs-panel.is-active{
display:grid;
grid-template-columns:.95fr 1.05fr;
gap:24px;
align-items:stretch;
}

.animated-underline-tabs-visual{
min-height:320px;
border-radius:30px;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 34%),
linear-gradient(135deg,#c7d2fe,#a7f3d0);
position:relative;
overflow:hidden;
box-shadow:0 24px 60px rgba(79,70,229,.16);
}

.animated-underline-tabs-copy{
padding:28px;
border-radius:30px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

@media (max-width:820px){
.animated-underline-tabs-header{
grid-template-columns:1fr;
gap:14px;
}

.animated-underline-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.animated-underline-tabs{
padding:22px;
border-radius:26px;
}

.animated-underline-tabs-title{
font-size:36px;
}

.animated-underline-tabs-copy{
padding:22px;
}
}

JavaScript

document.querySelectorAll(".animated-underline-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".animated-underline-tabs-btn");
const panels=tabBlock.querySelectorAll(".animated-underline-tabs-panel");
const line=tabBlock.querySelector(".animated-underline-tabs-line");

function moveLine(button){
line.style.width=button.offsetWidth+"px";
line.style.transform="translateX("+button.offsetLeft+"px)";
}

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
moveLine(button);
});
});

moveLine(tabBlock.querySelector(".animated-underline-tabs-btn.is-active"));

window.addEventListener("resize",function(){
const activeButton=tabBlock.querySelector(".animated-underline-tabs-btn.is-active");
moveLine(activeButton);
});
});

This animated underline tabs example is useful when you want the tab interface to feel lightweight and elegant. The moving underline gives users a clear active state without making the tab buttons visually heavy.

11. Pill Style Tabs

Pill style tabs use rounded tab buttons that look like selectable pills. This style is popular in modern landing pages, SaaS websites, product sections, portfolio filters, and feature comparison areas because it feels soft, friendly, and easy to click.

This example uses a clean light layout, a centered pill navigation, soft gradients, rounded content cards, and a feature-focused content area. It is intentionally different from the animated underline tabs because the active state is shown as a filled pill button instead of a thin line.

  • Perfect for landing pages, SaaS sections, feature blocks, and product pages
  • Uses rounded pill buttons with a clear active state
  • Includes feature cards, soft gradients, and clean spacing
  • Uses a small JavaScript snippet for switching tab panels
  • Preview area stays inside a fixed-height scrollable demo box
Pill Style Tabs

Soft tabs for modern sections

Use pill tabs when you want the tab navigation to feel friendly, rounded, and easy to interact with.

Plan the section first

Pill style tabs work best when each tab represents a clear step, feature group, or content category. Keep the labels short and the panels focused.

Clear labels Use short tab text that users can scan quickly.
Related content Keep every panel connected to the same main topic.
Soft style Rounded tabs feel friendly and modern.
Mobile ready Stack buttons when space becomes limited.

Build a reusable component

This tab style is easy to reuse across landing pages, service sections, feature blocks, and product pages because the layout stays clean and flexible.

Reusable CSS Scoped class names make editing easier.
Balanced spacing Padding and gaps keep the interface readable.
Clear active state The filled pill shows the selected tab clearly.
Flexible content Use text, cards, images, or short feature lists.

Launch with better UX

Before publishing, test the tab section on mobile screens, make sure the active state is visible, and keep hidden panels easy to access.

Check contrast Make sure text and buttons are easy to read.
Test taps Tab buttons should be large enough for mobile users.
Avoid clutter Do not add too many tabs in one row.
Review content Each panel should answer a clear user need.

HTML

<section class="pill-style-tabs">

  <div class="pill-style-tabs-header">
    <div class="pill-style-tabs-kicker">Pill Style Tabs</div>
    <h3 class="pill-style-tabs-title">Soft tabs for <span>modern sections</span></h3>
    <p class="pill-style-tabs-text">Use pill tabs when you want the tab navigation to feel friendly, rounded, and easy to interact with.</p>
  </div>

  <div class="pill-style-tabs-nav" role="tablist" aria-label="Pill style tabs">
    <button class="pill-style-tabs-btn is-active" type="button" data-tab="planning">Planning</button>
    <button class="pill-style-tabs-btn" type="button" data-tab="building">Building</button>
    <button class="pill-style-tabs-btn" type="button" data-tab="launching">Launching</button>
  </div>

  <div class="pill-style-tabs-panel is-active" data-panel="planning">
    <div class="pill-style-tabs-visual"></div>
    <div class="pill-style-tabs-content">
      <h3>Plan the section first</h3>
      <p>Pill style tabs work best when each tab represents a clear step, feature group, or content category.</p>
      <div class="pill-style-tabs-grid">
        <div class="pill-style-tabs-card">
          <strong>Clear labels</strong>
          <span>Use short tab text that users can scan quickly.</span>
        </div>
        <div class="pill-style-tabs-card">
          <strong>Related content</strong>
          <span>Keep every panel connected to the same main topic.</span>
        </div>
      </div>
    </div>
  </div>

</section>

CSS

.pill-style-tabs{
width:min(100%,980px);
padding:34px;
border-radius:34px;
background:rgba(255,255,255,.88);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.10);
}

.pill-style-tabs-header{
max-width:760px;
margin:0 auto 24px;
text-align:center;
}

.pill-style-tabs-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ccfbf1;
color:#0f766e;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.pill-style-tabs-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.pill-style-tabs-title span{
color:#0d9488;
}

.pill-style-tabs-nav{
width:max-content;
max-width:100%;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin:0 auto 24px;
padding:8px;
border-radius:999px;
background:#f1f5f9;
border:1px solid rgba(15,23,42,.08);
}

.pill-style-tabs-btn{
cursor:pointer;
border:0;
border-radius:999px;
padding:12px 17px;
background:transparent;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1.2;
}

.pill-style-tabs-btn.is-active{
background:linear-gradient(135deg,#0d9488,#2563eb);
color:#ffffff;
box-shadow:0 16px 34px rgba(13,148,136,.24);
}

.pill-style-tabs-panel{
display:none;
}

.pill-style-tabs-panel.is-active{
display:grid;
grid-template-columns:.95fr 1.05fr;
gap:24px;
align-items:stretch;
}

.pill-style-tabs-visual{
position:relative;
min-height:330px;
border-radius:30px;
overflow:hidden;
background:
radial-gradient(circle at 28% 24%,rgba(255,255,255,.58),transparent 34%),
linear-gradient(135deg,#5eead4,#93c5fd);
box-shadow:0 24px 64px rgba(13,148,136,.18);
}

.pill-style-tabs-content{
padding:28px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
}

.pill-style-tabs-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

@media (max-width:820px){
.pill-style-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.pill-style-tabs{
padding:22px;
border-radius:26px;
}

.pill-style-tabs-header{
text-align:left;
}

.pill-style-tabs-title{
font-size:36px;
}

.pill-style-tabs-nav{
width:100%;
border-radius:24px;
}

.pill-style-tabs-btn{
width:100%;
text-align:left;
}

.pill-style-tabs-grid{
grid-template-columns:1fr;
}
}

JavaScript

document.querySelectorAll(".pill-style-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".pill-style-tabs-btn");
const panels=tabBlock.querySelectorAll(".pill-style-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This pill style tabs example is useful when you want a soft and modern tab navigation that feels more like a UI control than a traditional menu. The rounded buttons make the section feel approachable and easy to interact with.

12. Icon Tabs

Icon tabs combine short labels with visual symbols, making the tab navigation easier to scan. They work especially well for SaaS features, service categories, dashboards, app sections, product benefits, and process steps.

This example uses large icon cards as the tab buttons and a dark content panel underneath. The style is more visual and bolder than simple pill tabs, making it useful for modern product pages and app landing pages.

  • Perfect for SaaS pages, feature sections, app landing pages, dashboards, and service blocks
  • Uses icon-based tab buttons for faster scanning
  • Includes bold active states, feature cards, and a dark content panel
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Icon Tabs

Feature tabs with visual shortcuts

Use icon tabs when users need to understand the available sections quickly before reading the full content.

Build faster website sections

Icon tabs help users scan content quickly. They are especially useful when each tab represents a clear feature, benefit, or product category.

  • Use short labels with clear icons
  • Keep the content panel focused
  • Make the selected tab visually stronger

Create a stronger visual system

The icon row gives the section a more visual identity. This works well for SaaS landing pages, service blocks, and app feature sections.

  • Match icons with the meaning of each tab
  • Use consistent colors and spacing
  • Avoid decorative icons that confuse users

Reuse the same tab structure

You can reuse this layout for process steps, onboarding flows, service packages, feature comparisons, or content categories.

  • Works with many content types
  • Easy to expand with more panels
  • Good for app-style landing pages

Guide users to the right content

Icon tabs can make support sections easier to scan by giving each topic a clear visual cue before the user opens the full panel.

  • Useful for help centers and onboarding
  • Good for customer education sections
  • Works with FAQ and documentation content

HTML

<section class="icon-tabs">

  <div class="icon-tabs-header">
    <div class="icon-tabs-kicker">Icon Tabs</div>
    <h3 class="icon-tabs-title">Feature tabs with <span>visual shortcuts</span></h3>
    <p class="icon-tabs-text">Use icon tabs when users need to understand the available sections quickly before reading the full content.</p>
  </div>

  <div class="icon-tabs-nav" role="tablist" aria-label="Icon tabs">
    <button class="icon-tabs-btn is-active" type="button" data-tab="speed">
      <span class="icon-tabs-symbol">⚡</span>
      <strong>Speed</strong>
      <span>Fast loading layouts and lightweight components.</span>
    </button>

    <button class="icon-tabs-btn" type="button" data-tab="design">
      <span class="icon-tabs-symbol">◇</span>
      <strong>Design</strong>
      <span>Modern visual systems with polished UI patterns.</span>
    </button>
  </div>

  <div class="icon-tabs-panel is-active" data-panel="speed">
    <div class="icon-tabs-copy">
      <h3>Build faster website sections</h3>
      <p>Icon tabs help users scan content quickly. They are especially useful when each tab represents a clear feature, benefit, or product category.</p>
      <ul class="icon-tabs-list">
        <li>Use short labels with clear icons</li>
        <li>Keep the content panel focused</li>
        <li>Make the selected tab visually stronger</li>
      </ul>
    </div>
    <div class="icon-tabs-preview-card"></div>
  </div>

</section>

CSS

.icon-tabs{
width:min(100%,1040px);
}

.icon-tabs-header{
text-align:center;
margin-bottom:26px;
}

.icon-tabs-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(251,191,36,.12);
border:1px solid rgba(251,191,36,.22);
color:#fde68a;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.icon-tabs-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff;
}

.icon-tabs-title span{
background:linear-gradient(90deg,#fbbf24,#60a5fa,#c084fc);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.icon-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:18px;
}

.icon-tabs-btn{
cursor:pointer;
min-height:150px;
border:1px solid rgba(148,163,184,.18);
border-radius:26px;
padding:18px;
background:rgba(255,255,255,.06);
color:#e5e7eb;
text-align:left;
box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.icon-tabs-btn.is-active{
border-color:rgba(251,191,36,.70);
background:
radial-gradient(circle at 20% 0%,rgba(251,191,36,.20),transparent 36%),
rgba(255,255,255,.10);
}

.icon-tabs-symbol{
display:grid;
place-items:center;
width:52px;
height:52px;
margin-bottom:16px;
border-radius:18px;
background:linear-gradient(135deg,#fbbf24,#f97316);
color:#111827;
font-size:24px;
font-weight:950;
}

.icon-tabs-panel{
display:none;
}

.icon-tabs-panel.is-active{
display:grid;
grid-template-columns:1fr .8fr;
gap:18px;
align-items:stretch;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.icon-tabs-copy h3{
margin:0 0 12px;
font-size:34px;
line-height:1.08;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff;
}

.icon-tabs-preview-card{
position:relative;
overflow:hidden;
min-height:290px;
border-radius:26px;
background:
radial-gradient(circle at 28% 20%,rgba(255,255,255,.18),transparent 34%),
linear-gradient(135deg,#111827,#334155);
border:1px solid rgba(255,255,255,.10);
}

@media (max-width:900px){
.icon-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.icon-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.icon-tabs-header{
text-align:left;
}

.icon-tabs-title{
font-size:34px;
}

.icon-tabs-nav{
grid-template-columns:1fr;
}

.icon-tabs-btn{
min-height:auto;
}

.icon-tabs-panel.is-active{
padding:20px;
}
}

JavaScript

document.querySelectorAll(".icon-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".icon-tabs-btn");
const panels=tabBlock.querySelectorAll(".icon-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This icon tabs example is useful when you want the tab navigation to feel more visual and easier to scan. Icons can make each tab more recognizable, but they should always support the label instead of replacing it completely.

13. Vertical Tabs

Vertical tabs place the tab navigation on the side instead of the top. This makes them useful when tab labels are longer, when the section has more categories, or when the layout needs to feel more like a product feature panel or documentation interface.

This example uses a bright split layout with vertical tab buttons on the left and a large content panel on the right. It works well for SaaS features, service pages, documentation sections, onboarding flows, and comparison content.

  • Perfect for SaaS feature sections, service pages, documentation, and onboarding content
  • Uses vertical tab buttons for longer labels and clearer scanning
  • Includes large content panels, feature bullets, and visual highlight cards
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Vertical Tabs

Organize deeper content

Use vertical tabs when the section has longer labels, more structure, or content that benefits from a side navigation layout.

Start with user intent

Before building vertical tabs, decide why users need to switch between panels. The best tab sections help people compare or explore related content faster.

  • Identify the main user task
  • Keep each panel connected to the same topic
  • Use tab labels that are easy to understand

Build a clear content map

Vertical tabs work well when each panel has a clear role. Use the side navigation to show the full structure before the user opens each panel.

  • Keep the number of tabs manageable
  • Use short subtitles for extra context
  • Place the most important tab first

Create a strong active state

The selected vertical tab should be obvious. Use color, shadow, contrast, or a stronger background to show which panel is currently open.

  • Use enough contrast for active tabs
  • Keep inactive tabs readable
  • Make the content area visually connected

Test the mobile layout

On smaller screens, vertical tabs should stack above the content or become a compact grid. Avoid forcing a narrow side menu on mobile.

  • Stack the layout on mobile
  • Use large tap targets
  • Check long labels before publishing

HTML

<section class="vertical-tabs">

  <div class="vertical-tabs-nav-card">
    <div class="vertical-tabs-kicker">Vertical Tabs</div>
    <h3>Organize deeper content</h3>
    <p>Use vertical tabs when the section has longer labels, more structure, or content that benefits from a side navigation layout.</p>

    <div class="vertical-tabs-nav" role="tablist" aria-label="Vertical tabs">
      <button class="vertical-tabs-btn is-active" type="button" data-tab="research">
        <span class="vertical-tabs-number">01</span>
        <span><strong>Research</strong><span>Understand the content and user needs.</span></span>
      </button>

      <button class="vertical-tabs-btn" type="button" data-tab="structure">
        <span class="vertical-tabs-number">02</span>
        <span><strong>Structure</strong><span>Group related information clearly.</span></span>
      </button>
    </div>
  </div>

  <div class="vertical-tabs-content">

    <div class="vertical-tabs-panel is-active" data-panel="research">
      <div class="vertical-tabs-copy">
        <h3>Start with <span>user intent</span></h3>
        <p>Before building vertical tabs, decide why users need to switch between panels.</p>
        <ul class="vertical-tabs-list">
          <li>Identify the main user task</li>
          <li>Keep each panel connected to the same topic</li>
          <li>Use tab labels that are easy to understand</li>
        </ul>
      </div>
      <div class="vertical-tabs-visual"></div>
    </div>

  </div>

</section>

CSS

.vertical-tabs{
width:min(100%,1040px);
display:grid;
grid-template-columns:300px minmax(0,1fr);
gap:18px;
align-items:stretch;
}

.vertical-tabs-nav-card{
padding:24px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.vertical-tabs-kicker{
display:inline-flex;
align-items:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.vertical-tabs-nav{
display:grid;
gap:10px;
}

.vertical-tabs-btn{
cursor:pointer;
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:12px;
align-items:center;
width:100%;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
padding:14px;
background:#f8fafc;
color:#334155;
text-align:left;
}

.vertical-tabs-btn.is-active{
background:linear-gradient(135deg,#2563eb,#14b8a6);
border-color:transparent;
color:#ffffff;
box-shadow:0 16px 38px rgba(37,99,235,.22);
}

.vertical-tabs-number{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:14px;
background:#ffffff;
color:#2563eb;
font-size:13px;
font-weight:950;
}

.vertical-tabs-content{
position:relative;
overflow:hidden;
border-radius:30px;
background:#0f172a;
border:1px solid rgba(15,23,42,.12);
box-shadow:0 28px 80px rgba(15,23,42,.18);
}

.vertical-tabs-panel{
position:relative;
z-index:2;
display:none;
min-height:520px;
padding:34px;
}

.vertical-tabs-panel.is-active{
display:grid;
grid-template-columns:1fr .72fr;
gap:26px;
align-items:center;
}

.vertical-tabs-copy h3{
margin:0 0 14px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#ffffff;
}

.vertical-tabs-copy p{
margin:0 0 24px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.vertical-tabs-list{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.vertical-tabs-visual{
min-height:360px;
border-radius:28px;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.20),transparent 34%),
linear-gradient(135deg,#1e293b,#334155);
border:1px solid rgba(255,255,255,.12);
}

@media (max-width:900px){
.vertical-tabs{
grid-template-columns:1fr;
}

.vertical-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.vertical-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.vertical-tabs-nav{
grid-template-columns:1fr;
}

.vertical-tabs-panel{
padding:24px;
}

.vertical-tabs-copy h3{
font-size:34px;
}

.vertical-tabs-visual{
min-height:260px;
}
}

JavaScript

document.querySelectorAll(".vertical-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".vertical-tabs-btn");
const panels=tabBlock.querySelectorAll(".vertical-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This vertical tabs example is useful when a horizontal tab row would become too crowded. The side navigation gives each tab more room and makes the section feel structured, especially for documentation, feature explanations, and onboarding content.

14. Sidebar Tabs

Sidebar tabs combine a navigation sidebar with tabbed content panels. This pattern is common in dashboards, documentation layouts, admin screens, project management tools, customer portals, and internal web applications.

This example uses a full app-style sidebar with navigation items, a top content header, project cards, status rows, and tabbed panels. It feels more like a mini web app than a normal content section, which makes it visually different from the previous vertical tabs example.

  • Perfect for dashboards, documentation layouts, admin areas, and customer portals
  • Uses a sidebar navigation pattern with tabbed content panels
  • Includes project cards, status rows, and a clean app-style layout
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box

Workspace overview

Use sidebar tabs when your interface needs app-style navigation inside one larger content area.

Live workspace
Active12
Completed48
In review6

Project tasks

Landing page UIToday
Product card updateTomorrow
Checkout flow reviewFriday

Progress

Monthly report

Key metrics

Conversion+14%
Traffic+32%
Retention+8%
Getting started guide Use this area for documentation links, help content, internal guides, or onboarding instructions.
Component library Sidebar tabs work well when documents need to stay close to the working interface.
Release notes Show product updates, changelog items, or internal notes inside the same tabbed layout.
Design team Responsible for UI systems, layout reviews, and visual consistency.
Development team Responsible for implementation, performance, and component behavior.
Content team Responsible for copy, documentation, and help center updates.

HTML

<section class="sidebar-tabs">

  <aside class="sidebar-tabs-side">
    <div class="sidebar-tabs-logo-row">
      <div class="sidebar-tabs-logo">A</div>
      <div>
        <strong>Acme App</strong>
        <span>Project workspace</span>
      </div>
    </div>

    <div class="sidebar-tabs-nav" role="tablist" aria-label="Sidebar tabs">
      <button class="sidebar-tabs-btn is-active" type="button" data-tab="projects">
        <span class="sidebar-tabs-icon">P</span>
        Projects
      </button>
      <button class="sidebar-tabs-btn" type="button" data-tab="reports">
        <span class="sidebar-tabs-icon">R</span>
        Reports
      </button>
    </div>
  </aside>

  <div class="sidebar-tabs-content">

    <div class="sidebar-tabs-top">
      <div>
        <h3>Workspace overview</h3>
        <p>Use sidebar tabs when your interface needs app-style navigation inside one larger content area.</p>
      </div>
      <div class="sidebar-tabs-status">Live workspace</div>
    </div>

    <div class="sidebar-tabs-panel is-active" data-panel="projects">
      <div class="sidebar-tabs-grid">
        <div class="sidebar-tabs-card"><span>Active</span><strong>12</strong></div>
        <div class="sidebar-tabs-card"><span>Completed</span><strong>48</strong></div>
        <div class="sidebar-tabs-card"><span>In review</span><strong>6</strong></div>
      </div>
    </div>

  </div>

</section>

CSS

.sidebar-tabs{
width:min(100%,1080px);
min-height:600px;
display:grid;
grid-template-columns:260px minmax(0,1fr);
border-radius:34px;
overflow:hidden;
background:rgba(15,23,42,.92);
border:1px solid rgba(148,163,184,.22);
box-shadow:0 34px 100px rgba(0,0,0,.36);
}

.sidebar-tabs-side{
padding:22px;
background:
radial-gradient(circle at 20% 0%,rgba(168,85,247,.18),transparent 34%),
rgba(2,6,23,.55);
border-right:1px solid rgba(148,163,184,.18);
}

.sidebar-tabs-logo-row{
display:flex;
align-items:center;
gap:12px;
margin-bottom:24px;
}

.sidebar-tabs-logo{
display:grid;
place-items:center;
width:46px;
height:46px;
border-radius:17px;
background:linear-gradient(135deg,#a855f7,#0ea5e9);
color:#ffffff;
font-weight:950;
box-shadow:0 18px 44px rgba(168,85,247,.22);
}

.sidebar-tabs-nav{
display:grid;
gap:9px;
}

.sidebar-tabs-btn{
cursor:pointer;
display:flex;
align-items:center;
gap:11px;
width:100%;
border:1px solid rgba(255,255,255,.08);
border-radius:17px;
padding:13px;
background:rgba(255,255,255,.045);
color:#cbd5e1;
font-size:14px;
font-weight:900;
text-align:left;
}

.sidebar-tabs-btn.is-active{
background:linear-gradient(135deg,#7c3aed,#0284c7);
border-color:transparent;
color:#ffffff;
box-shadow:0 16px 36px rgba(124,58,237,.22);
}

.sidebar-tabs-icon{
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:11px;
background:rgba(255,255,255,.10);
font-size:14px;
font-weight:950;
}

.sidebar-tabs-content{
padding:24px;
}

.sidebar-tabs-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
}

.sidebar-tabs-top h3{
margin:0 0 6px;
color:#ffffff;
font-size:32px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
}

.sidebar-tabs-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-bottom:16px;
}

.sidebar-tabs-card{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.sidebar-tabs-panel{
display:none;
}

.sidebar-tabs-panel.is-active{
display:block;
}

@media (max-width:900px){
.sidebar-tabs{
grid-template-columns:1fr;
}

.sidebar-tabs-side{
border-right:0;
border-bottom:1px solid rgba(148,163,184,.18);
}

.sidebar-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.sidebar-tabs-grid{
grid-template-columns:1fr 1fr;
}
}

@media (max-width:640px){
.sidebar-tabs{
border-radius:26px;
}

.sidebar-tabs-nav{
grid-template-columns:1fr;
}

.sidebar-tabs-top{
flex-direction:column;
}

.sidebar-tabs-grid{
grid-template-columns:1fr;
}

.sidebar-tabs-content{
padding:18px;
}
}

JavaScript

document.querySelectorAll(".sidebar-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".sidebar-tabs-btn");
const panels=tabBlock.querySelectorAll(".sidebar-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This sidebar tabs example is useful when your design needs to feel more like an app interface. It keeps navigation and content connected in one layout, making it practical for dashboards, project workspaces, documentation sections, and customer portals.

15. Scrollable Mobile Tabs

Scrollable mobile tabs are useful when a tab section has several categories but there is not enough space to show every tab at once on small screens. Instead of stacking all tabs vertically, the tab row can scroll horizontally while the content stays below it.

This example uses a mobile-first tab bar with a horizontal scroll area, compact pill tabs, and clean content cards. It works well for mobile product filters, blog categories, app sections, ecommerce categories, documentation topics, and compact dashboard views.

  • Perfect for mobile category tabs, product filters, blog topics, and app sections
  • Uses a horizontally scrollable tab row on smaller screens
  • Includes compact content cards and a mobile-friendly layout
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Mobile Tabs

Swipe-friendly tab navigation

Use scrollable tabs when mobile users need quick access to several categories without a crowded layout.

Featured itemHighlight the most important content first.
Quick actionGive mobile users a clear next step.
Clean layoutKeep cards short and easy to scan.

Designed for small screens

Scrollable mobile tabs keep the tab row compact while still allowing several categories. Users can swipe or scroll the tab row horizontally.

  • Works well with many short tab labels
  • Keeps the content area below the tab row
  • Reduces vertical clutter on mobile screens
Popular topicShow content that users visit most often.
High engagementUseful for category-based browsing.

Show popular categories

This pattern is useful for blog categories, ecommerce collections, app sections, and dashboard filters where the user needs quick switching.

  • Good for content discovery
  • Simple active state for selected tabs
  • Easy to use with touch scrolling
Recent updatePlace new content inside a compact panel.
Fresh contentHelp users return to the latest items.

Keep new content accessible

A recent tab can show new posts, product updates, release notes, messages, or recently viewed items inside the same interface.

  • Useful for apps and content sites
  • Can support quick updates
  • Keeps the page structure compact
Saved itemLet users return to important content.
Personal listUseful for dashboards and member areas.

Support personalized sections

Saved tabs are common in apps, customer portals, ecommerce wishlists, learning platforms, and project dashboards.

  • Good for user-specific content
  • Works with lists and cards
  • Easy to combine with filters
System updateShow short announcements or product news.
Release noteKeep updates grouped by topic.

Share updates cleanly

Update tabs can organize release notes, announcements, changelog items, and product improvements without making the page too long.

  • Useful for SaaS and app websites
  • Keeps updates easy to scan
  • Works well with short content cards

HTML

<section class="scrollable-mobile-tabs">

  <div class="scrollable-mobile-tabs-header">
    <div>
      <div class="scrollable-mobile-tabs-kicker">Mobile Tabs</div>
      <h3 class="scrollable-mobile-tabs-title">Swipe-friendly <span>tab navigation</span></h3>
    </div>
    <p class="scrollable-mobile-tabs-text">Use scrollable tabs when mobile users need quick access to several categories without a crowded layout.</p>
  </div>

  <div class="scrollable-mobile-tabs-scroll">
    <div class="scrollable-mobile-tabs-nav" role="tablist" aria-label="Scrollable mobile tabs">
      <button class="scrollable-mobile-tabs-btn is-active" type="button" data-tab="featured">Featured</button>
      <button class="scrollable-mobile-tabs-btn" type="button" data-tab="popular">Popular</button>
      <button class="scrollable-mobile-tabs-btn" type="button" data-tab="recent">Recent</button>
      <button class="scrollable-mobile-tabs-btn" type="button" data-tab="saved">Saved</button>
      <button class="scrollable-mobile-tabs-btn" type="button" data-tab="updates">Updates</button>
    </div>
  </div>

  <div class="scrollable-mobile-tabs-panel is-active" data-panel="featured">
    <div class="scrollable-mobile-tabs-phone">
      <div class="scrollable-mobile-tabs-screen">
        <div class="scrollable-mobile-tabs-mini-card"><strong>Featured item</strong><span>Highlight the most important content first.</span></div>
        <div class="scrollable-mobile-tabs-mini-card"><strong>Quick action</strong><span>Give mobile users a clear next step.</span></div>
      </div>
    </div>
    <div class="scrollable-mobile-tabs-content">
      <h3>Designed for small screens</h3>
      <p>Scrollable mobile tabs keep the tab row compact while still allowing several categories.</p>
    </div>
  </div>

</section>

CSS

.scrollable-mobile-tabs{
width:min(100%,960px);
padding:34px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.10);
}

.scrollable-mobile-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(240px,.45fr);
gap:24px;
align-items:end;
margin-bottom:24px;
}

.scrollable-mobile-tabs-kicker{
display:inline-flex;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ffe4e6;
color:#be123c;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.scrollable-mobile-tabs-title{
margin:0;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.scrollable-mobile-tabs-scroll{
position:relative;
margin:0 -6px 22px;
overflow-x:auto;
overflow-y:hidden;
padding:6px;
scrollbar-width:thin;
}

.scrollable-mobile-tabs-nav{
display:flex;
gap:10px;
min-width:max-content;
}

.scrollable-mobile-tabs-btn{
cursor:pointer;
flex:0 0 auto;
border:1px solid rgba(15,23,42,.08);
border-radius:999px;
padding:12px 16px;
background:#f8fafc;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1.2;
}

.scrollable-mobile-tabs-btn.is-active{
background:linear-gradient(135deg,#e11d48,#2563eb);
color:#ffffff;
border-color:transparent;
box-shadow:0 16px 36px rgba(225,29,72,.22);
}

.scrollable-mobile-tabs-panel{
display:none;
}

.scrollable-mobile-tabs-panel.is-active{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:20px;
align-items:stretch;
}

.scrollable-mobile-tabs-phone{
position:relative;
min-height:390px;
border-radius:38px;
background:#0f172a;
box-shadow:0 30px 80px rgba(15,23,42,.22);
padding:18px;
overflow:hidden;
}

.scrollable-mobile-tabs-content{
padding:28px;
border-radius:30px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

@media (max-width:820px){
.scrollable-mobile-tabs-header{
grid-template-columns:1fr;
gap:12px;
}

.scrollable-mobile-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.scrollable-mobile-tabs{
padding:22px;
border-radius:26px;
}

.scrollable-mobile-tabs-title{
font-size:36px;
}

.scrollable-mobile-tabs-phone{
min-height:330px;
}

.scrollable-mobile-tabs-content{
padding:22px;
}
}

JavaScript

document.querySelectorAll(".scrollable-mobile-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".scrollable-mobile-tabs-btn");
const panels=tabBlock.querySelectorAll(".scrollable-mobile-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This scrollable mobile tabs example is useful when a section has more tabs than can comfortably fit on a small screen. The horizontal tab row keeps the interface compact while still making every category available.

16. Gradient Tabs

Gradient tabs use colorful backgrounds, glowing active states, and strong visual contrast to make a tab section feel more energetic. They work well for SaaS websites, app landing pages, creative portfolios, AI tools, digital products, and modern service pages.

This example uses a bold gradient background, glass-style panels, animated-looking active buttons, and colorful content cards. It is more visual than a minimal tab pattern, so it works best when the tab section should become a clear design feature on the page.

  • Perfect for SaaS landing pages, AI tools, digital products, and creative websites
  • Uses colorful gradient backgrounds and strong active tab states
  • Includes glass-style cards, feature rows, and glowing UI details
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Gradient Tabs

Colorful tabs for modern websites

Use gradient tabs when the tab section should feel bold, energetic, and visually connected to a modern brand system.

Make the section memorable

Gradient tabs can become a strong visual feature on a landing page. Use them when the design should feel premium, creative, or product-focused.

Strong identityUse colors that match the brand style.
Clear statesMake the active tab easy to see.
Premium lookGlass panels and shadows add depth.
Focused contentKeep each panel short and readable.

Add energy without clutter

Gradients already create visual movement. Keep animations subtle and avoid adding too many effects that compete with the content.

Soft hoverUse gentle transitions for interaction.
Light glowAdd depth without hurting readability.
Fast responseTabs should switch quickly.
No overloadUse motion only where it helps.

Keep text highly readable

Bright tabs need strong contrast. Use simple body text, enough spacing, and calm content panels so users can read without distraction.

ContrastUse white text on dark panels.
SpacingGive each block enough breathing room.
HierarchyUse clear headings and short cards.
BalanceLet the gradient support the content.

Test before publishing

Gradient tabs should be tested on mobile screens, dark mode contexts, and different display sizes to make sure the design stays usable.

Mobile checkStack tabs if needed on small screens.
Color reviewCheck readability against all backgrounds.
PerformanceAvoid heavy assets inside the tab section.
AccessibilityKeep focus states visible and clear.

HTML

<section class="gradient-tabs">

  <div class="gradient-tabs-header">
    <div>
      <div class="gradient-tabs-badge">Gradient Tabs</div>
      <h3 class="gradient-tabs-title">Colorful tabs for <span>modern websites</span></h3>
    </div>
    <p class="gradient-tabs-text">Use gradient tabs when the tab section should feel bold, energetic, and visually connected to a modern brand system.</p>
  </div>

  <div class="gradient-tabs-nav" role="tablist" aria-label="Gradient tabs">
    <button class="gradient-tabs-btn is-active" type="button" data-tab="brand">Brand</button>
    <button class="gradient-tabs-btn" type="button" data-tab="motion">Motion</button>
    <button class="gradient-tabs-btn" type="button" data-tab="content">Content</button>
    <button class="gradient-tabs-btn" type="button" data-tab="launch">Launch</button>
  </div>

  <div class="gradient-tabs-panel is-active" data-panel="brand">
    <div class="gradient-tabs-copy">
      <h3>Make the section memorable</h3>
      <p>Gradient tabs can become a strong visual feature on a landing page.</p>
      <div class="gradient-tabs-feature-grid">
        <div class="gradient-tabs-feature"><strong>Strong identity</strong><span>Use colors that match the brand style.</span></div>
        <div class="gradient-tabs-feature"><strong>Clear states</strong><span>Make the active tab easy to see.</span></div>
      </div>
    </div>
    <div class="gradient-tabs-visual"></div>
  </div>

</section>

CSS

.gradient-tabs{
width:min(100%,1040px);
position:relative;
overflow:hidden;
border-radius:36px;
padding:34px;
background:
radial-gradient(circle at 16% 16%,rgba(236,72,153,.28),transparent 32%),
radial-gradient(circle at 84% 18%,rgba(59,130,246,.28),transparent 34%),
linear-gradient(135deg,rgba(30,41,59,.92),rgba(15,23,42,.96));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(0,0,0,.38);
}

.gradient-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(240px,.5fr);
gap:26px;
align-items:end;
margin-bottom:26px;
}

.gradient-tabs-badge{
display:inline-flex;
width:max-content;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#fbcfe8;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.gradient-tabs-title{
margin:0;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#ffffff;
}

.gradient-tabs-title span{
background:linear-gradient(90deg,#fb7185,#c084fc,#60a5fa,#facc15);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.gradient-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:18px;
padding:10px;
border-radius:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
backdrop-filter:blur(18px);
}

.gradient-tabs-btn{
cursor:pointer;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
padding:14px 12px;
background:rgba(255,255,255,.06);
color:#cbd5e1;
font-size:14px;
font-weight:950;
line-height:1.2;
}

.gradient-tabs-btn.is-active{
background:linear-gradient(135deg,#ec4899,#8b5cf6,#2563eb);
border-color:transparent;
color:#ffffff;
box-shadow:0 18px 44px rgba(236,72,153,.24);
}

.gradient-tabs-panel{
display:none;
}

.gradient-tabs-panel.is-active{
display:grid;
grid-template-columns:1fr .85fr;
gap:18px;
align-items:stretch;
}

.gradient-tabs-copy{
padding:26px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(18px);
}

.gradient-tabs-feature-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.gradient-tabs-visual{
position:relative;
min-height:360px;
border-radius:28px;
overflow:hidden;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 34%),
linear-gradient(135deg,#ec4899,#8b5cf6,#2563eb);
box-shadow:0 26px 80px rgba(236,72,153,.24);
}

@media (max-width:900px){
.gradient-tabs-header{
grid-template-columns:1fr;
gap:14px;
}

.gradient-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.gradient-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.gradient-tabs{
padding:22px;
border-radius:28px;
}

.gradient-tabs-title{
font-size:36px;
}

.gradient-tabs-nav{
grid-template-columns:1fr;
}

.gradient-tabs-btn{
text-align:left;
}

.gradient-tabs-feature-grid{
grid-template-columns:1fr;
}

.gradient-tabs-visual{
min-height:280px;
}
}

JavaScript

document.querySelectorAll(".gradient-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".gradient-tabs-btn");
const panels=tabBlock.querySelectorAll(".gradient-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This gradient tabs example is useful when the tab component should be a strong visual part of the page. It works best for modern landing pages where color, brand identity, and visual impact matter.

17. Glassmorphism Tabs

Glassmorphism tabs use translucent panels, blurred backgrounds, soft borders, and layered depth to create a modern glass-like interface. This style works well for SaaS websites, AI tools, dashboard previews, portfolio sections, and futuristic landing pages.

This example uses a colorful background, frosted glass tab buttons, translucent content panels, and glowing accent cards. It is visually different from the gradient tabs because the main focus is transparency, blur, and layered glass surfaces.

  • Perfect for SaaS pages, AI tools, dashboards, and futuristic landing pages
  • Uses translucent glass panels with blur and soft borders
  • Includes glass-style tab buttons, feature cards, and layered depth
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Glass Tabs

Frosted tab UI with layered depth

Use glassmorphism tabs when your section needs a modern, translucent, and futuristic interface style.

Create translucent surfaces

Glassmorphism tabs rely on semi-transparent backgrounds, subtle borders, and backdrop blur. The effect works best when the background has enough color and depth.

BlurUse backdrop-filter to soften the background.
BorderAdd light borders for visible glass edges.
TransparencyKeep panels translucent but readable.
SpacingUse padding to prevent visual clutter.

Layer the interface carefully

Glass UI looks better when the section has multiple visible layers. Use a colored background, glass panels, and soft shadows to create depth.

BackgroundUse gradients or blurred shapes behind panels.
ShadowSoft shadows separate each layer.
CardsUse small inner cards for content groups.
HierarchyMake headings stronger than body text.

Keep the text readable

The biggest glassmorphism mistake is weak contrast. Use clear text colors, stronger headings, and a darker overlay when the background is too bright.

Readable textUse high contrast for all important content.
Active stateMake the selected tab obvious.
Simple copyKeep each panel short and focused.
TestingCheck the component on different screens.

Make glass tabs mobile friendly

On smaller screens, glass tabs should stack or use a two-column layout. Avoid tiny text and keep the active state easy to tap.

Tap sizeUse large buttons for touch screens.
StackingStack tabs when space is limited.
PerformanceUse blur effects carefully.
FallbackKeep the layout readable without blur.

HTML

<section class="glassmorphism-tabs">

  <div class="glassmorphism-tabs-inner">

    <div class="glassmorphism-tabs-header">
      <div>
        <div class="glassmorphism-tabs-badge">Glass Tabs</div>
        <h3 class="glassmorphism-tabs-title">Frosted tab UI with <span>layered depth</span></h3>
      </div>
      <p class="glassmorphism-tabs-text">Use glassmorphism tabs when your section needs a modern, translucent, and futuristic interface style.</p>
    </div>

    <div class="glassmorphism-tabs-nav" role="tablist" aria-label="Glassmorphism tabs">
      <button class="glassmorphism-tabs-btn is-active" type="button" data-tab="surface">Surface</button>
      <button class="glassmorphism-tabs-btn" type="button" data-tab="depth">Depth</button>
      <button class="glassmorphism-tabs-btn" type="button" data-tab="contrast">Contrast</button>
      <button class="glassmorphism-tabs-btn" type="button" data-tab="mobile">Mobile</button>
    </div>

    <div class="glassmorphism-tabs-panel is-active" data-panel="surface">
      <div class="glassmorphism-tabs-copy">
        <h3>Create translucent surfaces</h3>
        <p>Glassmorphism tabs rely on semi-transparent backgrounds, subtle borders, and backdrop blur.</p>
        <div class="glassmorphism-tabs-grid">
          <div class="glassmorphism-tabs-card"><strong>Blur</strong><span>Use backdrop-filter to soften the background.</span></div>
          <div class="glassmorphism-tabs-card"><strong>Border</strong><span>Add light borders for visible glass edges.</span></div>
        </div>
      </div>
      <div class="glassmorphism-tabs-visual"></div>
    </div>

  </div>

</section>

CSS

.glassmorphism-tabs{
width:min(100%,1040px);
position:relative;
overflow:hidden;
padding:34px;
border-radius:36px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 34px 100px rgba(0,0,0,.36);
backdrop-filter:blur(22px);
}

.glassmorphism-tabs-inner{
position:relative;
z-index:2;
}

.glassmorphism-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(240px,.45fr);
gap:26px;
align-items:end;
margin-bottom:26px;
}

.glassmorphism-tabs-badge{
display:inline-flex;
width:max-content;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
color:#bae6fd;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.glassmorphism-tabs-title{
margin:0;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#ffffff;
}

.glassmorphism-tabs-title span{
background:linear-gradient(90deg,#67e8f9,#c084fc,#f9a8d4);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.glassmorphism-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:18px;
padding:10px;
border-radius:24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(18px);
}

.glassmorphism-tabs-btn{
cursor:pointer;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
padding:14px 12px;
background:rgba(255,255,255,.06);
color:#dbeafe;
font-size:14px;
font-weight:950;
line-height:1.2;
}

.glassmorphism-tabs-btn.is-active{
background:rgba(255,255,255,.20);
border-color:rgba(186,230,253,.50);
color:#ffffff;
box-shadow:
0 18px 44px rgba(14,165,233,.18),
inset 0 1px 0 rgba(255,255,255,.20);
}

.glassmorphism-tabs-panel{
display:none;
}

.glassmorphism-tabs-panel.is-active{
display:grid;
grid-template-columns:1fr .85fr;
gap:18px;
align-items:stretch;
}

.glassmorphism-tabs-copy{
padding:26px;
border-radius:28px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 24px 70px rgba(0,0,0,.18);
backdrop-filter:blur(18px);
}

.glassmorphism-tabs-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.glassmorphism-tabs-card{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
}

.glassmorphism-tabs-visual{
position:relative;
min-height:360px;
border-radius:28px;
overflow:hidden;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.16);
box-shadow:
0 26px 80px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.16);
backdrop-filter:blur(18px);
}

@media (max-width:900px){
.glassmorphism-tabs-header{
grid-template-columns:1fr;
gap:14px;
}

.glassmorphism-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.glassmorphism-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.glassmorphism-tabs{
padding:22px;
border-radius:28px;
}

.glassmorphism-tabs-title{
font-size:36px;
}

.glassmorphism-tabs-nav{
grid-template-columns:1fr;
}

.glassmorphism-tabs-grid{
grid-template-columns:1fr;
}

.glassmorphism-tabs-visual{
min-height:280px;
}
}

JavaScript

document.querySelectorAll(".glassmorphism-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".glassmorphism-tabs-btn");
const panels=tabBlock.querySelectorAll(".glassmorphism-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This glassmorphism tabs example is useful when a website section needs a premium, futuristic, or app-like visual style. Use glass effects carefully and always check that the content remains readable on every background.

18. Dark Mode Tabs

Dark mode tabs are useful for modern dashboards, SaaS pages, developer tools, AI products, portfolio websites, and dark landing pages. They keep the interface compact while matching a darker visual system.

This example uses a clean dark layout, high-contrast typography, simple tab buttons, metric cards, and a focused content panel. It is less decorative than the glassmorphism tabs and works better when readability is the main priority.

  • Perfect for dark websites, dashboards, SaaS pages, AI tools, and developer documentation
  • Uses strong contrast and clean dark UI styling
  • Includes metric cards, content blocks, and clear active states
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Dark Mode Tabs

Clean tabs for dark interfaces

Use dark mode tabs when your website, dashboard, or app section needs strong contrast and a focused visual style.

System active
Views42K
Clicks9.8K
Leads812
Growth21%

Focused overview panel

Dark mode tabs work best when each panel has strong contrast, clear headings, and simple content blocks that are easy to scan.

  • Use bright active states on dark backgrounds
  • Keep text readable with enough contrast
  • Avoid placing too many effects behind body text
Fast scanStat cards make the overview easier to understand.
Clear stateThe active tab uses a strong blue highlight.

Feature-focused content

Use this panel to explain product features, technical details, or benefits inside a dark UI section.

  • Reusable layout for SaaS pages
  • Works well for developer tools
  • Good for feature comparisons
ComponentsShow reusable UI blocks.
WorkflowExplain how the feature helps users.

Reports and analytics

Dark tab sections are useful for reporting screens because the contrast helps metrics, charts, and summaries stand out.

  • Show important report summaries
  • Use compact stat cards
  • Keep data labels readable
MonthlySummarize performance over time.
ExportInclude actions for reports.

Security settings

Use a dark mode tab panel for security checks, account controls, access information, and important status messages.

  • Highlight critical account settings
  • Separate security topics into panels
  • Use clear status labels and warnings
2FAShow authentication status.
AccessExplain permission controls.

HTML

<section class="dark-mode-tabs">

  <div class="dark-mode-tabs-top">
    <div>
      <div class="dark-mode-tabs-kicker">Dark Mode Tabs</div>
      <h3 class="dark-mode-tabs-title">Clean tabs for <span>dark interfaces</span></h3>
      <p class="dark-mode-tabs-text">Use dark mode tabs when your website, dashboard, or app section needs strong contrast and a focused visual style.</p>
    </div>
    <div class="dark-mode-tabs-status">System active</div>
  </div>

  <div class="dark-mode-tabs-nav" role="tablist" aria-label="Dark mode tabs">
    <button class="dark-mode-tabs-btn is-active" type="button" data-tab="overview">Overview</button>
    <button class="dark-mode-tabs-btn" type="button" data-tab="features">Features</button>
    <button class="dark-mode-tabs-btn" type="button" data-tab="reports">Reports</button>
    <button class="dark-mode-tabs-btn" type="button" data-tab="security">Security</button>
  </div>

  <div class="dark-mode-tabs-body">

    <div class="dark-mode-tabs-panel is-active" data-panel="overview">
      <div class="dark-mode-tabs-grid">
        <div class="dark-mode-tabs-stat"><span>Views</span><strong>42K</strong></div>
        <div class="dark-mode-tabs-stat"><span>Clicks</span><strong>9.8K</strong></div>
        <div class="dark-mode-tabs-stat"><span>Leads</span><strong>812</strong></div>
        <div class="dark-mode-tabs-stat"><span>Growth</span><strong>21%</strong></div>
      </div>
    </div>

  </div>

</section>

CSS

.dark-mode-tabs{
width:min(100%,1040px);
border-radius:34px;
background:#0f172a;
border:1px solid rgba(148,163,184,.22);
box-shadow:0 34px 100px rgba(0,0,0,.36);
overflow:hidden;
}

.dark-mode-tabs-top{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
padding:28px;
border-bottom:1px solid rgba(148,163,184,.18);
background:#111827;
}

.dark-mode-tabs-kicker{
display:inline-flex;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:rgba(59,130,246,.13);
border:1px solid rgba(96,165,250,.20);
color:#bfdbfe;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.dark-mode-tabs-title{
margin:0 0 8px;
font-size:clamp(32px,5vw,54px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff;
}

.dark-mode-tabs-title span{
color:#60a5fa;
}

.dark-mode-tabs-nav{
display:flex;
gap:10px;
padding:16px 28px;
border-bottom:1px solid rgba(148,163,184,.18);
background:#0b1120;
overflow-x:auto;
}

.dark-mode-tabs-btn{
cursor:pointer;
flex:0 0 auto;
border:1px solid rgba(148,163,184,.18);
border-radius:999px;
padding:11px 15px;
background:rgba(255,255,255,.04);
color:#cbd5e1;
font-size:14px;
font-weight:950;
line-height:1.2;
}

.dark-mode-tabs-btn.is-active{
background:#2563eb;
border-color:#2563eb;
color:#ffffff;
box-shadow:0 16px 36px rgba(37,99,235,.24);
}

.dark-mode-tabs-body{
padding:28px;
}

.dark-mode-tabs-panel{
display:none;
}

.dark-mode-tabs-panel.is-active{
display:block;
}

.dark-mode-tabs-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:16px;
}

.dark-mode-tabs-stat{
padding:18px;
border-radius:22px;
background:#111827;
border:1px solid rgba(148,163,184,.18);
}

.dark-mode-tabs-stat span{
display:block;
margin-bottom:8px;
color:#94a3b8;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.dark-mode-tabs-stat strong{
display:block;
color:#ffffff;
font-size:28px;
line-height:1;
font-weight:950;
letter-spacing:-.045em;
}

.dark-mode-tabs-main{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:16px;
}

.dark-mode-tabs-card{
padding:22px;
border-radius:24px;
background:#111827;
border:1px solid rgba(148,163,184,.18);
}

@media (max-width:900px){
.dark-mode-tabs-top{
grid-template-columns:1fr;
}

.dark-mode-tabs-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.dark-mode-tabs-main{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.dark-mode-tabs{
border-radius:26px;
}

.dark-mode-tabs-top,
.dark-mode-tabs-body{
padding:22px;
}

.dark-mode-tabs-title{
font-size:34px;
}

.dark-mode-tabs-nav{
padding:14px 22px;
}

.dark-mode-tabs-grid{
grid-template-columns:1fr;
}
}

JavaScript

document.querySelectorAll(".dark-mode-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".dark-mode-tabs-btn");
const panels=tabBlock.querySelectorAll(".dark-mode-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This dark mode tabs example is useful when readability and structure matter more than heavy decoration. It keeps the interface clean, compact, and suitable for dashboards, product sections, technical pages, and modern dark websites.

19. Neumorphism Tabs

Neumorphism tabs use soft shadows, subtle highlights, rounded surfaces, and low-contrast backgrounds to create a smooth “pressed” interface effect. This style works best for clean UI sections, app screens, profile panels, dashboards, and modern content cards.

This example uses a soft gray background, raised tab buttons, inset active states, and rounded content cards. It is visually different from dark, gradient, and glass styles because the design depends on subtle depth instead of strong color contrast.

  • Perfect for soft UI sections, app interfaces, profile panels, and clean dashboards
  • Uses subtle light and shadow to create a neumorphic effect
  • Includes raised tab buttons, inset active states, and soft content cards
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Neumorphism Tabs

Soft UI tabs with subtle depth

Use neumorphism tabs when you want a smooth, calm, and rounded interface with gentle shadows.

Create a calm interface

Neumorphism works best when the background, cards, and buttons share a similar color palette. The design relies on shadows instead of strong borders.

  • Use a soft background color
  • Keep shadows consistent across the component
  • Use strong text contrast for readability

Use shadows carefully

The raised and inset effects should feel subtle. Too much shadow can make the interface look heavy or reduce readability.

  • Balance light and dark shadows
  • Use inset shadows for selected tabs
  • Avoid low contrast body text

Make active tabs clear

Because neumorphism can be low contrast, the active tab needs an obvious visual difference through color, inset depth, or stronger text.

  • Add color to the active tab text
  • Use inset shadow for pressed states
  • Keep hover feedback simple

Keep mobile layouts readable

On small screens, stack the tab buttons and keep the panels simple. Neumorphic shadows need enough spacing to avoid visual clutter.

  • Stack tabs vertically on mobile
  • Increase tap target size
  • Use enough spacing between cards

HTML

<section class="neumorphism-tabs">

  <div class="neumorphism-tabs-header">
    <div class="neumorphism-tabs-kicker">Neumorphism Tabs</div>
    <h3 class="neumorphism-tabs-title">Soft UI tabs with <span>subtle depth</span></h3>
    <p class="neumorphism-tabs-text">Use neumorphism tabs when you want a smooth, calm, and rounded interface with gentle shadows.</p>
  </div>

  <div class="neumorphism-tabs-nav" role="tablist" aria-label="Neumorphism tabs">
    <button class="neumorphism-tabs-btn is-active" type="button" data-tab="soft">Soft UI</button>
    <button class="neumorphism-tabs-btn" type="button" data-tab="depth">Depth</button>
    <button class="neumorphism-tabs-btn" type="button" data-tab="states">States</button>
    <button class="neumorphism-tabs-btn" type="button" data-tab="mobile">Mobile</button>
  </div>

  <div class="neumorphism-tabs-panel is-active" data-panel="soft">
    <div class="neumorphism-tabs-copy">
      <h3>Create a calm interface</h3>
      <p>Neumorphism works best when the background, cards, and buttons share a similar color palette.</p>
      <ul class="neumorphism-tabs-list">
        <li>Use a soft background color</li>
        <li>Keep shadows consistent across the component</li>
        <li>Use strong text contrast for readability</li>
      </ul>
    </div>
    <div class="neumorphism-tabs-visual"></div>
  </div>

</section>

CSS

.neumorphism-tabs{
width:min(100%,980px);
padding:34px;
border-radius:36px;
background:#e9edf4;
box-shadow:
18px 18px 44px rgba(148,163,184,.46),
-18px -18px 44px rgba(255,255,255,.92);
}

.neumorphism-tabs-header{
max-width:760px;
margin:0 auto 26px;
text-align:center;
}

.neumorphism-tabs-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:9px 14px;
border-radius:999px;
background:#e9edf4;
color:#475569;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
box-shadow:
8px 8px 18px rgba(148,163,184,.34),
-8px -8px 18px rgba(255,255,255,.88);
}

.neumorphism-tabs-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#1e293b;
}

.neumorphism-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:24px;
}

.neumorphism-tabs-btn{
cursor:pointer;
border:0;
border-radius:22px;
padding:16px 14px;
background:#e9edf4;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1.25;
box-shadow:
10px 10px 22px rgba(148,163,184,.36),
-10px -10px 22px rgba(255,255,255,.86);
}

.neumorphism-tabs-btn.is-active{
color:#2563eb;
box-shadow:
inset 7px 7px 16px rgba(148,163,184,.38),
inset -7px -7px 16px rgba(255,255,255,.92);
}

.neumorphism-tabs-panel{
display:none;
}

.neumorphism-tabs-panel.is-active{
display:grid;
grid-template-columns:1fr .85fr;
gap:22px;
align-items:stretch;
}

.neumorphism-tabs-copy{
padding:28px;
border-radius:30px;
background:#e9edf4;
box-shadow:
inset 8px 8px 20px rgba(148,163,184,.28),
inset -8px -8px 20px rgba(255,255,255,.82);
}

.neumorphism-tabs-visual{
position:relative;
min-height:350px;
border-radius:30px;
background:#e9edf4;
box-shadow:
14px 14px 34px rgba(148,163,184,.38),
-14px -14px 34px rgba(255,255,255,.88);
overflow:hidden;
}

@media (max-width:900px){
.neumorphism-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.neumorphism-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.neumorphism-tabs{
padding:22px;
border-radius:28px;
}

.neumorphism-tabs-header{
text-align:left;
}

.neumorphism-tabs-title{
font-size:36px;
}

.neumorphism-tabs-nav{
grid-template-columns:1fr;
}

.neumorphism-tabs-btn{
text-align:left;
}
}

JavaScript

document.querySelectorAll(".neumorphism-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".neumorphism-tabs-btn");
const panels=tabBlock.querySelectorAll(".neumorphism-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This neumorphism tabs example is useful when you want a soft and calm UI style. Because neumorphism can easily become low contrast, always make sure the text, active state, and clickable areas remain clear.

20. Card Style Tabs

Card style tabs turn each tab into a larger clickable card instead of a small button. This pattern works well when each tab needs a title, short explanation, icon, number, or visual preview before the user opens the full content panel.

This example uses selectable tab cards at the top and a large content card below. It works well for service sections, SaaS features, process steps, homepage sections, and comparison blocks.

  • Perfect for service sections, SaaS features, process steps, and homepage content
  • Uses large clickable cards as tab controls
  • Includes card descriptions, feature lists, and a strong content panel
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Card Style Tabs

Clickable cards as tab controls

Use card tabs when each option needs more context than a short tab label can provide.

Give every tab a clear purpose

Card style tabs work best when each option needs a short explanation before the user opens the panel. This makes the tab controls feel more informative.

  • Use a short title and supporting description
  • Keep each card visually balanced
  • Make the selected card obvious

Turn the tab row into a design element

Large tab cards can become a key visual part of the section. Use them for services, features, process steps, or comparison groups.

  • Use icons or numbers to improve scanning
  • Keep descriptions short and useful
  • Match the content panel to the selected card

Guide users through related options

Card tabs can help users understand choices before they click. This makes them useful for conversion-focused landing pages and service sections.

  • Use cards for meaningful choices
  • Avoid too many cards in one row
  • Keep the next action easy to find

HTML

<section class="card-style-tabs">

  <div class="card-style-tabs-header">
    <div>
      <div class="card-style-tabs-kicker">Card Style Tabs</div>
      <h3 class="card-style-tabs-title">Clickable cards as <span>tab controls</span></h3>
    </div>
    <p class="card-style-tabs-text">Use card tabs when each option needs more context than a short tab label can provide.</p>
  </div>

  <div class="card-style-tabs-nav" role="tablist" aria-label="Card style tabs">
    <button class="card-style-tabs-btn is-active" type="button" data-tab="strategy">
      <span class="card-style-tabs-number">01</span>
      <h3>Strategy</h3>
      <p>Plan the structure and decide how each panel supports the user goal.</p>
    </button>

    <button class="card-style-tabs-btn" type="button" data-tab="creative">
      <span class="card-style-tabs-number">02</span>
      <h3>Creative</h3>
      <p>Design the visual system, active states, spacing, and content hierarchy.</p>
    </button>
  </div>

  <div class="card-style-tabs-panel is-active" data-panel="strategy">
    <div class="card-style-tabs-copy">
      <h3>Give every tab a clear purpose</h3>
      <p>Card style tabs work best when each option needs a short explanation before the user opens the panel.</p>
      <ul class="card-style-tabs-list">
        <li>Use a short title and supporting description</li>
        <li>Keep each card visually balanced</li>
        <li>Make the selected card obvious</li>
      </ul>
    </div>
    <div class="card-style-tabs-visual"></div>
  </div>

</section>

CSS

.card-style-tabs{
width:min(100%,1060px);
}

.card-style-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(240px,.45fr);
gap:24px;
align-items:end;
margin-bottom:24px;
}

.card-style-tabs-kicker{
display:inline-flex;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fef3c7;
color:#b45309;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.card-style-tabs-title{
margin:0;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.card-style-tabs-nav{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-bottom:18px;
}

.card-style-tabs-btn{
cursor:pointer;
position:relative;
overflow:hidden;
border:1px solid rgba(15,23,42,.08);
border-radius:26px;
padding:20px;
background:#ffffff;
text-align:left;
box-shadow:0 20px 54px rgba(15,23,42,.08);
}

.card-style-tabs-btn.is-active{
border-color:rgba(245,158,11,.62);
box-shadow:
0 28px 70px rgba(15,23,42,.14),
0 0 0 4px rgba(245,158,11,.12);
}

.card-style-tabs-number{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:16px;
margin-bottom:16px;
background:#fffbeb;
color:#b45309;
font-size:14px;
font-weight:950;
}

.card-style-tabs-panel{
display:none;
}

.card-style-tabs-panel.is-active{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:18px;
align-items:stretch;
padding:28px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.12);
}

.card-style-tabs-copy h3{
margin:0 0 12px;
font-size:36px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.card-style-tabs-visual{
position:relative;
min-height:360px;
border-radius:28px;
overflow:hidden;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.48),transparent 34%),
linear-gradient(135deg,#fbbf24,#60a5fa);
box-shadow:0 24px 70px rgba(245,158,11,.22);
}

@media (max-width:900px){
.card-style-tabs-header{
grid-template-columns:1fr;
gap:12px;
}

.card-style-tabs-nav{
grid-template-columns:1fr;
}

.card-style-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.card-style-tabs-title{
font-size:36px;
}

.card-style-tabs-panel.is-active{
padding:22px;
border-radius:26px;
}

.card-style-tabs-copy h3{
font-size:28px;
}

.card-style-tabs-visual{
min-height:280px;
}
}

JavaScript

document.querySelectorAll(".card-style-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".card-style-tabs-btn");
const panels=tabBlock.querySelectorAll(".card-style-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This card style tabs example is useful when normal tab buttons do not provide enough context. Large tab cards make each choice clearer and can turn the tab navigation itself into a strong visual part of the section.

21. Tabs with Image Content

Tabs with image content are useful when each tab needs to show a strong visual preview together with text. This pattern works well for portfolios, product showcases, case studies, service pages, travel sections, real estate layouts, and landing pages where images help explain the content.

This example uses large visual panels, clean tab buttons, image-style placeholders, and a content area that changes with each tab. It feels more editorial and visual than card-only tabs.

  • Perfect for portfolios, product showcases, case studies, and landing pages
  • Combines tabbed text with large image-style visual areas
  • Uses different visual gradients for each content panel
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Image Content Tabs

Visual tabs for stronger storytelling

Use image-based tabs when the content is easier to understand with a large visual preview.

Show the main idea visually

Image content tabs work well when each tab needs a visual preview. This layout can highlight product features, project categories, travel locations, or portfolio sections.

  • Use a strong visual area for each tab
  • Keep the copy short and connected to the image
  • Make the active tab easy to identify

Organize portfolio categories

Use tabbed images to separate website projects, branding work, UI designs, product launches, or creative campaigns inside one section.

  • Good for agency and portfolio websites
  • Works with screenshots or abstract visuals
  • Helps visitors browse without leaving the page

Turn case studies into tabs

Case study tabs can show different project phases such as challenge, solution, result, and testimonial without creating a very long layout.

  • Useful for service businesses and SaaS pages
  • Can explain processes step by step
  • Supports visual proof and focused copy

HTML

<section class="image-content-tabs">

  <div class="image-content-tabs-header">
    <div>
      <div class="image-content-tabs-kicker">Image Content Tabs</div>
      <h3 class="image-content-tabs-title">Visual tabs for <span>stronger storytelling</span></h3>
    </div>
    <p class="image-content-tabs-text">Use image-based tabs when the content is easier to understand with a large visual preview.</p>
  </div>

  <div class="image-content-tabs-nav" role="tablist" aria-label="Tabs with image content">
    <button class="image-content-tabs-btn is-active" type="button" data-tab="showcase">Showcase</button>
    <button class="image-content-tabs-btn" type="button" data-tab="portfolio">Portfolio</button>
    <button class="image-content-tabs-btn" type="button" data-tab="case">Case Study</button>
  </div>

  <div class="image-content-tabs-panel is-active" data-panel="showcase">
    <div class="image-content-tabs-image"></div>
    <div class="image-content-tabs-copy">
      <h3>Show the main idea visually</h3>
      <p>Image content tabs work well when each tab needs a visual preview.</p>
      <ul class="image-content-tabs-list">
        <li>Use a strong visual area for each tab</li>
        <li>Keep the copy short and connected to the image</li>
        <li>Make the active tab easy to identify</li>
      </ul>
    </div>
  </div>

</section>

CSS

.image-content-tabs{
width:min(100%,1060px);
padding:34px;
border-radius:36px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.10);
}

.image-content-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);
gap:24px;
align-items:end;
margin-bottom:24px;
}

.image-content-tabs-title{
margin:0;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.image-content-tabs-nav{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
padding:8px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.image-content-tabs-btn{
cursor:pointer;
border:0;
border-radius:18px;
padding:13px 16px;
background:transparent;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1.2;
}

.image-content-tabs-btn.is-active{
background:linear-gradient(135deg,#0284c7,#7c3aed);
color:#ffffff;
box-shadow:0 16px 36px rgba(2,132,199,.22);
}

.image-content-tabs-panel{
display:none;
}

.image-content-tabs-panel.is-active{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:22px;
align-items:stretch;
}

.image-content-tabs-image{
position:relative;
min-height:430px;
border-radius:32px;
overflow:hidden;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.52),transparent 34%),
linear-gradient(135deg,#38bdf8,#8b5cf6);
box-shadow:0 26px 76px rgba(14,165,233,.20);
}

.image-content-tabs-copy{
display:flex;
flex-direction:column;
justify-content:center;
padding:30px;
border-radius:32px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

@media (max-width:900px){
.image-content-tabs-header{
grid-template-columns:1fr;
}

.image-content-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.image-content-tabs{
padding:22px;
border-radius:28px;
}

.image-content-tabs-title{
font-size:36px;
}

.image-content-tabs-btn{
width:100%;
text-align:left;
}

.image-content-tabs-image{
min-height:300px;
}
}

JavaScript

document.querySelectorAll(".image-content-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".image-content-tabs-btn");
const panels=tabBlock.querySelectorAll(".image-content-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This tabs with image content example is useful when visual context matters as much as the text. It helps turn a normal tab section into a stronger storytelling block for portfolios, product pages, and case studies.

22. Feature Tabs

Feature tabs are one of the most common tab patterns on SaaS websites and modern landing pages. They let visitors compare different product benefits, feature groups, workflows, or use cases without scrolling through many repeated sections.

This example uses a modern product feature layout with a clean heading, compact tab navigation, feature cards, and a large interface preview. It is designed for SaaS, apps, AI tools, software products, plugins, and service websites.

  • Perfect for SaaS websites, app landing pages, plugins, and service pages
  • Uses tabs to organize product benefits and feature groups
  • Includes feature cards, interface preview, and strong active states
  • Uses a small JavaScript snippet for switching panels
  • Preview area stays inside a fixed-height scrollable demo box
Feature Tabs

Show product benefits in one focused section

Use feature tabs when you want to explain multiple product benefits without repeating the same layout again and again.

Automate repetitive work

Feature tabs are useful for showing different product benefits inside one compact section. Each panel can focus on a specific use case or workflow.

Smart actionsTrigger common tasks automatically.
Less manual workReduce repeated steps in daily workflows.
Fast setupExplain key benefits quickly.
Reusable UIKeep the same structure for every feature.

Explain data clearly

Use a feature tab for analytics, reports, dashboards, or tracking tools. The panel can show what the user gains from each feature.

Live metricsShow the most important numbers.
Better decisionsTurn raw data into clear insights.
Simple reportsKeep reporting easy to understand.
Visual contextSupport the text with a UI preview.

Help teams work together

Collaboration tabs can explain shared workspaces, team comments, project boards, notifications, and approval workflows.

Team workspaceKeep people aligned in one place.
Shared notesCollect feedback without losing context.
Better handoffMake tasks clearer for every role.
Organized flowGroup collaboration benefits into panels.

Build more trust

Security tabs are useful when a product needs to explain access control, privacy, protection, backups, and account safety in a compact way.

Access controlExplain permissions clearly.
Data protectionMake privacy benefits easier to understand.
Backup optionsShow reliability and recovery features.
User confidenceUse clear content to reduce doubt.

HTML

<section class="feature-tabs">

  <div class="feature-tabs-header">
    <div class="feature-tabs-badge">Feature Tabs</div>
    <h3 class="feature-tabs-title">Show product benefits in <span>one focused section</span></h3>
    <p class="feature-tabs-text">Use feature tabs when you want to explain multiple product benefits without repeating the same layout again and again.</p>
  </div>

  <div class="feature-tabs-nav" role="tablist" aria-label="Feature tabs">
    <button class="feature-tabs-btn is-active" type="button" data-tab="automation">Automation</button>
    <button class="feature-tabs-btn" type="button" data-tab="analytics">Analytics</button>
    <button class="feature-tabs-btn" type="button" data-tab="collaboration">Collaboration</button>
    <button class="feature-tabs-btn" type="button" data-tab="security">Security</button>
  </div>

  <div class="feature-tabs-panel is-active" data-panel="automation">
    <div class="feature-tabs-copy">
      <h3>Automate repetitive work</h3>
      <p>Feature tabs are useful for showing different product benefits inside one compact section.</p>
      <div class="feature-tabs-grid">
        <div class="feature-tabs-card"><strong>Smart actions</strong><span>Trigger common tasks automatically.</span></div>
        <div class="feature-tabs-card"><strong>Less manual work</strong><span>Reduce repeated steps in daily workflows.</span></div>
      </div>
    </div>
    <div class="feature-tabs-ui"></div>
  </div>

</section>

CSS

.feature-tabs{
width:min(100%,1060px);
}

.feature-tabs-header{
max-width:760px;
margin:0 auto 26px;
text-align:center;
}

.feature-tabs-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#ffffff;
}

.feature-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:18px;
padding:10px;
border-radius:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.feature-tabs-btn{
cursor:pointer;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
padding:15px 12px;
background:rgba(255,255,255,.055);
color:#cbd5e1;
font-size:14px;
font-weight:950;
line-height:1.2;
}

.feature-tabs-btn.is-active{
background:linear-gradient(135deg,#2563eb,#14b8a6);
border-color:transparent;
color:#ffffff;
box-shadow:0 18px 44px rgba(37,99,235,.22);
}

.feature-tabs-panel{
display:none;
}

.feature-tabs-panel.is-active{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:18px;
align-items:stretch;
padding:24px;
border-radius:32px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
box-shadow:0 28px 90px rgba(0,0,0,.28);
}

.feature-tabs-copy h3{
margin:0 0 12px;
font-size:34px;
line-height:1.08;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff;
}

.feature-tabs-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.feature-tabs-ui{
position:relative;
min-height:380px;
border-radius:28px;
overflow:hidden;
background:#0f172a;
border:1px solid rgba(148,163,184,.18);
box-shadow:0 26px 80px rgba(0,0,0,.30);
}

@media (max-width:900px){
.feature-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.feature-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.feature-tabs-header{
text-align:left;
}

.feature-tabs-title{
font-size:36px;
}

.feature-tabs-nav{
grid-template-columns:1fr;
}

.feature-tabs-grid{
grid-template-columns:1fr;
}

.feature-tabs-ui{
min-height:320px;
}
}

JavaScript

document.querySelectorAll(".feature-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".feature-tabs-btn");
const panels=tabBlock.querySelectorAll(".feature-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This feature tabs example is useful when a product or service has several important benefits but the page should stay compact. It gives each feature enough space while keeping the whole section organized inside one tabbed interface.

23. Blog Category Tabs

Blog category tabs are useful when a blog homepage, resource center, tutorial library, or magazine layout needs to show posts from different topics in one compact section. Instead of sending visitors to separate category pages immediately, tabs let them browse featured posts by topic.

This example uses a modern editorial layout with category tabs, featured article cards, post meta, tags, and a highlighted main story. It works well for blogs, tutorials, resource pages, content hubs, and SEO-focused websites.

  • Perfect for blogs, tutorial libraries, content hubs, and resource pages
  • Uses tabs to switch between blog categories
  • Includes featured post cards, tags, post dates, and reading-time labels
  • Uses a small JavaScript snippet for switching category panels
  • Preview area stays inside a fixed-height scrollable demo box
Blog Category Tabs

Browse posts by popular topics

Use category tabs to help visitors discover different types of blog content without leaving the page.

Featured Design Guide

How to build cleaner website sections with modern UI patterns

Use tabs, cards, spacing, and visual hierarchy to make content easier to scan and more useful for visitors.

UI Design 8 min read 2026 Guide
Layout

Better content cards for landing pages

Create card sections that feel balanced, readable, and easy to reuse.

UX

How tab sections improve scanning

Use tabs only when content groups are related and easy to compare.

Style

Design systems for small websites

Build a consistent look with reusable colors, spacing, and components.

Featured Development Guide

Reusable front-end components for faster website building

Use scoped HTML, CSS, and JavaScript patterns to create components that are easier to copy, edit, and maintain.

Frontend 10 min read Code Examples
CSS

When to use Grid instead of Flexbox

Choose the right layout tool for cards, dashboards, and content sections.

JavaScript

Small scripts for interactive UI

Add useful interaction without making the page heavy or complicated.

Performance

Keep demo components lightweight

Use simple markup and scoped CSS to avoid unnecessary page weight.

Featured Marketing Guide

Turn helpful content sections into stronger conversion paths

Use organized sections, clear CTAs, and readable content blocks to help visitors move from learning to action.

SEO 7 min read Content Strategy
SEO

Structure articles for better search intent

Match headings, examples, and internal links with what users want to find.

Conversion

Where to place CTAs in long guides

Use useful CTAs without interrupting the reader too often.

Content

Make examples easier to browse

Use visible code, previews, and clear section titles to improve usability.

HTML

<section class="blog-category-tabs">

  <div class="blog-category-tabs-header">
    <div>
      <div class="blog-category-tabs-kicker">Blog Category Tabs</div>
      <h3 class="blog-category-tabs-title">Browse posts by <span>popular topics</span></h3>
    </div>
    <p class="blog-category-tabs-text">Use category tabs to help visitors discover different types of blog content without leaving the page.</p>
  </div>

  <div class="blog-category-tabs-nav" role="tablist" aria-label="Blog category tabs">
    <button class="blog-category-tabs-btn is-active" type="button" data-tab="design">Design</button>
    <button class="blog-category-tabs-btn" type="button" data-tab="development">Development</button>
    <button class="blog-category-tabs-btn" type="button" data-tab="marketing">Marketing</button>
  </div>

  <div class="blog-category-tabs-panel is-active" data-panel="design">

    <article class="blog-category-tabs-featured">
      <span class="blog-category-tabs-tag">Featured Design Guide</span>
      <h3>How to build cleaner website sections with modern UI patterns</h3>
      <p>Use tabs, cards, spacing, and visual hierarchy to make content easier to scan and more useful for visitors.</p>
      <div class="blog-category-tabs-meta">
        <span>UI Design</span>
        <span>8 min read</span>
        <span>2026 Guide</span>
      </div>
    </article>

    <div class="blog-category-tabs-side">
      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb"></div>
        <div>
          <small>Layout</small>
          <h4>Better content cards for landing pages</h4>
          <p>Create card sections that feel balanced, readable, and easy to reuse.</p>
        </div>
      </article>

      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb is-blue"></div>
        <div>
          <small>UX</small>
          <h4>How tab sections improve scanning</h4>
          <p>Use tabs only when content groups are related and easy to compare.</p>
        </div>
      </article>

      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb is-green"></div>
        <div>
          <small>Style</small>
          <h4>Design systems for small websites</h4>
          <p>Build a consistent look with reusable colors, spacing, and components.</p>
        </div>
      </article>
    </div>

  </div>

  <div class="blog-category-tabs-panel" data-panel="development">

    <article class="blog-category-tabs-featured is-blue">
      <span class="blog-category-tabs-tag">Featured Development Guide</span>
      <h3>Reusable front-end components for faster website building</h3>
      <p>Use scoped HTML, CSS, and JavaScript patterns to create components that are easier to copy, edit, and maintain.</p>
      <div class="blog-category-tabs-meta">
        <span>Frontend</span>
        <span>10 min read</span>
        <span>Code Examples</span>
      </div>
    </article>

    <div class="blog-category-tabs-side">
      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb is-blue"></div>
        <div>
          <small>CSS</small>
          <h4>When to use Grid instead of Flexbox</h4>
          <p>Choose the right layout tool for cards, dashboards, and content sections.</p>
        </div>
      </article>

      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb"></div>
        <div>
          <small>JavaScript</small>
          <h4>Small scripts for interactive UI</h4>
          <p>Add useful interaction without making the page heavy or complicated.</p>
        </div>
      </article>

      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb is-green"></div>
        <div>
          <small>Performance</small>
          <h4>Keep demo components lightweight</h4>
          <p>Use simple markup and scoped CSS to avoid unnecessary page weight.</p>
        </div>
      </article>
    </div>

  </div>

  <div class="blog-category-tabs-panel" data-panel="marketing">

    <article class="blog-category-tabs-featured is-green">
      <span class="blog-category-tabs-tag">Featured Marketing Guide</span>
      <h3>Turn helpful content sections into stronger conversion paths</h3>
      <p>Use organized sections, clear CTAs, and readable content blocks to help visitors move from learning to action.</p>
      <div class="blog-category-tabs-meta">
        <span>SEO</span>
        <span>7 min read</span>
        <span>Content Strategy</span>
      </div>
    </article>

    <div class="blog-category-tabs-side">
      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb is-green"></div>
        <div>
          <small>SEO</small>
          <h4>Structure articles for better search intent</h4>
          <p>Match headings, examples, and internal links with what users want to find.</p>
        </div>
      </article>

      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb is-blue"></div>
        <div>
          <small>Conversion</small>
          <h4>Where to place CTAs in long guides</h4>
          <p>Use useful CTAs without interrupting the reader too often.</p>
        </div>
      </article>

      <article class="blog-category-tabs-post">
        <div class="blog-category-tabs-thumb"></div>
        <div>
          <small>Content</small>
          <h4>Make examples easier to browse</h4>
          <p>Use visible code, previews, and clear section titles to improve usability.</p>
        </div>
      </article>
    </div>

  </div>

</section>

CSS

.blog-category-tabs{
width:min(100%,1080px);
padding:34px;
border-radius:36px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.10);
}

.blog-category-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);
gap:24px;
align-items:end;
margin-bottom:24px;
}

.blog-category-tabs-kicker{
display:inline-flex;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.blog-category-tabs-title{
margin:0;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.blog-category-tabs-title span{
color:#7c3aed;
}

.blog-category-tabs-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.blog-category-tabs-nav{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
padding:8px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.blog-category-tabs-btn{
cursor:pointer;
border:0;
border-radius:18px;
padding:13px 16px;
background:transparent;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1.2;
transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.blog-category-tabs-btn:hover{
background:#ede9fe;
color:#6d28d9;
transform:translateY(-1px);
}

.blog-category-tabs-btn.is-active{
background:linear-gradient(135deg,#7c3aed,#db2777);
color:#ffffff;
box-shadow:0 16px 36px rgba(124,58,237,.22);
}

.blog-category-tabs-panel{
display:none;
}

.blog-category-tabs-panel.is-active{
display:grid;
grid-template-columns:1.08fr .92fr;
gap:18px;
align-items:stretch;
}

.blog-category-tabs-featured{
position:relative;
overflow:hidden;
min-height:460px;
border-radius:32px;
padding:28px;
display:flex;
flex-direction:column;
justify-content:flex-end;
background:
linear-gradient(180deg,rgba(15,23,42,.05),rgba(15,23,42,.78)),
radial-gradient(circle at 24% 20%,rgba(255,255,255,.38),transparent 34%),
linear-gradient(135deg,#818cf8,#f472b6);
box-shadow:0 26px 76px rgba(124,58,237,.18);
}

.blog-category-tabs-featured.is-blue{
background:
linear-gradient(180deg,rgba(15,23,42,.05),rgba(15,23,42,.78)),
radial-gradient(circle at 24% 20%,rgba(255,255,255,.38),transparent 34%),
linear-gradient(135deg,#38bdf8,#2563eb);
}

.blog-category-tabs-featured.is-green{
background:
linear-gradient(180deg,rgba(15,23,42,.05),rgba(15,23,42,.78)),
radial-gradient(circle at 24% 20%,rgba(255,255,255,.38),transparent 34%),
linear-gradient(135deg,#34d399,#0f766e);
}

.blog-category-tabs-tag{
display:inline-flex;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
color:#ffffff;
font-size:13px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.blog-category-tabs-featured h3{
max-width:620px;
margin:0 0 12px;
color:#ffffff;
font-size:clamp(30px,4vw,48px);
line-height:1.04;
font-weight:950;
letter-spacing:-.055em;
}

.blog-category-tabs-featured p{
max-width:560px;
margin:0 0 18px;
color:#e5e7eb;
font-size:16px;
line-height:1.7;
}

.blog-category-tabs-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.blog-category-tabs-meta span{
display:inline-flex;
align-items:center;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:12px;
font-weight:850;
}

.blog-category-tabs-side{
display:grid;
gap:14px;
}

.blog-category-tabs-post{
display:grid;
grid-template-columns:112px minmax(0,1fr);
gap:14px;
align-items:center;
padding:14px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.blog-category-tabs-post:hover{
transform:translateY(-2px);
background:#ffffff;
box-shadow:0 18px 46px rgba(15,23,42,.10);
}

.blog-category-tabs-thumb{
min-height:104px;
border-radius:18px;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.44),transparent 34%),
linear-gradient(135deg,#a78bfa,#f472b6);
}

.blog-category-tabs-thumb.is-blue{
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.44),transparent 34%),
linear-gradient(135deg,#60a5fa,#2563eb);
}

.blog-category-tabs-thumb.is-green{
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.44),transparent 34%),
linear-gradient(135deg,#34d399,#0f766e);
}

.blog-category-tabs-post small{
display:inline-flex;
margin-bottom:7px;
color:#7c3aed;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.blog-category-tabs-post h4{
margin:0 0 7px;
color:#0f172a;
font-size:18px;
line-height:1.22;
font-weight:950;
letter-spacing:-.025em;
}

.blog-category-tabs-post p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.55;
font-weight:700;
}

@media (max-width:900px){
.blog-category-tabs-header{
grid-template-columns:1fr;
gap:12px;
}

.blog-category-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.blog-category-tabs{
padding:22px;
border-radius:28px;
}

.blog-category-tabs-title{
font-size:36px;
}

.blog-category-tabs-btn{
width:100%;
text-align:left;
}

.blog-category-tabs-featured{
min-height:380px;
padding:22px;
}

.blog-category-tabs-post{
grid-template-columns:1fr;
}

.blog-category-tabs-thumb{
min-height:160px;
}
}

JavaScript

document.querySelectorAll(".blog-category-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".blog-category-tabs-btn");
const panels=tabBlock.querySelectorAll(".blog-category-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This blog category tabs example is useful when a content-heavy website needs to show multiple topics without creating a long homepage section. It helps readers browse categories faster and keeps featured content visually organized.

24. Portfolio Tabs

Portfolio tabs help designers, agencies, freelancers, developers, photographers, and creative studios organize project examples by type. Instead of showing every project in one large gallery, tabs can separate websites, branding, UI design, case studies, and selected work.

This example uses a bold portfolio layout with filter-style tabs, large project cards, gradient thumbnails, project categories, and short descriptions. It works well for portfolio websites, agency homepages, creative galleries, and project showcases.

  • Perfect for portfolios, agency websites, creative studios, and project galleries
  • Uses tabs to filter different project categories
  • Includes large project cards, labels, descriptions, and visual thumbnails
  • Uses a small JavaScript snippet for switching portfolio panels
  • Preview area stays inside a fixed-height scrollable demo box
Portfolio Tabs

Showcase projects by creative category

Use portfolio tabs when visitors need to browse selected work by project type, service category, or creative direction.

Featured Website

Conversion-focused landing page system

A modern website concept with strong hero sections, reusable content blocks, product cards, and clear calls to action.

Website

SaaS homepage concept

A clean landing page with feature sections, pricing blocks, and tabbed content.

Website

Service business layout

A structured service page with trust sections, process cards, and quote prompts.

Website

Product showcase page

A visual product page with cards, highlights, feature tabs, and comparison sections.

Featured Branding

Bold identity system for a digital product

A brand direction with energetic colors, strong typography, reusable visual shapes, and modern web-ready components.

Branding

Color system concept

A flexible palette for landing pages, product UI, and marketing graphics.

Branding

Typography direction

A clean type system with strong headings, readable body text, and clear hierarchy.

Branding

Visual asset set

Reusable abstract visuals, gradient cards, icon blocks, and section backgrounds.

Featured UI Design

Dashboard interface with reusable components

An app-style interface with cards, tabs, charts, activity rows, and responsive dashboard panels.

UI Design

Analytics dashboard

A dark dashboard concept with stat cards, charts, and tabbed reports.

UI Design

Settings panel

A clean app settings layout with forms, toggles, billing blocks, and vertical tabs.

UI Design

Product detail interface

A product page UI with tabbed details, product visuals, trust badges, and feature lists.

HTML

<section class="portfolio-tabs">

  <div class="portfolio-tabs-header">
    <div>
      <div class="portfolio-tabs-kicker">Portfolio Tabs</div>
      <h3 class="portfolio-tabs-title">Showcase projects by <span>creative category</span></h3>
    </div>
    <p class="portfolio-tabs-text">Use portfolio tabs when visitors need to browse selected work by project type, service category, or creative direction.</p>
  </div>

  <div class="portfolio-tabs-nav" role="tablist" aria-label="Portfolio tabs">
    <button class="portfolio-tabs-btn is-active" type="button" data-tab="websites">Websites</button>
    <button class="portfolio-tabs-btn" type="button" data-tab="branding">Branding</button>
    <button class="portfolio-tabs-btn" type="button" data-tab="ui">UI Design</button>
  </div>

  <div class="portfolio-tabs-panel is-active" data-panel="websites">

    <article class="portfolio-tabs-main-card">
      <div class="portfolio-tabs-main-card-content">
        <span class="portfolio-tabs-label">Featured Website</span>
        <h3>Conversion-focused landing page system</h3>
        <p>A modern website concept with strong hero sections, reusable content blocks, product cards, and clear calls to action.</p>
      </div>
    </article>

    <div class="portfolio-tabs-grid">
      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb"></div>
        <div>
          <small>Website</small>
          <h4>SaaS homepage concept</h4>
          <p>A clean landing page with feature sections, pricing blocks, and tabbed content.</p>
        </div>
      </article>

      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb is-orange"></div>
        <div>
          <small>Website</small>
          <h4>Service business layout</h4>
          <p>A structured service page with trust sections, process cards, and quote prompts.</p>
        </div>
      </article>

      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb is-green"></div>
        <div>
          <small>Website</small>
          <h4>Product showcase page</h4>
          <p>A visual product page with cards, highlights, feature tabs, and comparison sections.</p>
        </div>
      </article>
    </div>

  </div>

  <div class="portfolio-tabs-panel" data-panel="branding">

    <article class="portfolio-tabs-main-card is-orange">
      <div class="portfolio-tabs-main-card-content">
        <span class="portfolio-tabs-label">Featured Branding</span>
        <h3>Bold identity system for a digital product</h3>
        <p>A brand direction with energetic colors, strong typography, reusable visual shapes, and modern web-ready components.</p>
      </div>
    </article>

    <div class="portfolio-tabs-grid">
      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb is-orange"></div>
        <div>
          <small>Branding</small>
          <h4>Color system concept</h4>
          <p>A flexible palette for landing pages, product UI, and marketing graphics.</p>
        </div>
      </article>

      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb"></div>
        <div>
          <small>Branding</small>
          <h4>Typography direction</h4>
          <p>A clean type system with strong headings, readable body text, and clear hierarchy.</p>
        </div>
      </article>

      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb is-green"></div>
        <div>
          <small>Branding</small>
          <h4>Visual asset set</h4>
          <p>Reusable abstract visuals, gradient cards, icon blocks, and section backgrounds.</p>
        </div>
      </article>
    </div>

  </div>

  <div class="portfolio-tabs-panel" data-panel="ui">

    <article class="portfolio-tabs-main-card is-green">
      <div class="portfolio-tabs-main-card-content">
        <span class="portfolio-tabs-label">Featured UI Design</span>
        <h3>Dashboard interface with reusable components</h3>
        <p>An app-style interface with cards, tabs, charts, activity rows, and responsive dashboard panels.</p>
      </div>
    </article>

    <div class="portfolio-tabs-grid">
      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb is-green"></div>
        <div>
          <small>UI Design</small>
          <h4>Analytics dashboard</h4>
          <p>A dark dashboard concept with stat cards, charts, and tabbed reports.</p>
        </div>
      </article>

      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb"></div>
        <div>
          <small>UI Design</small>
          <h4>Settings panel</h4>
          <p>A clean app settings layout with forms, toggles, billing blocks, and vertical tabs.</p>
        </div>
      </article>

      <article class="portfolio-tabs-project">
        <div class="portfolio-tabs-thumb is-orange"></div>
        <div>
          <small>UI Design</small>
          <h4>Product detail interface</h4>
          <p>A product page UI with tabbed details, product visuals, trust badges, and feature lists.</p>
        </div>
      </article>
    </div>

  </div>

</section>

CSS

.portfolio-tabs{
width:min(100%,1080px);
}

.portfolio-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);
gap:26px;
align-items:end;
margin-bottom:26px;
}

.portfolio-tabs-kicker{
display:inline-flex;
width:max-content;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(236,72,153,.12);
border:1px solid rgba(244,114,182,.20);
color:#fbcfe8;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.portfolio-tabs-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#f472b6;
box-shadow:0 0 0 4px rgba(244,114,182,.12);
}

.portfolio-tabs-title{
margin:0;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.07em;
color:#ffffff;
}

.portfolio-tabs-title span{
background:linear-gradient(90deg,#f472b6,#38bdf8,#fbbf24);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.portfolio-tabs-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.portfolio-tabs-nav{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
padding:8px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.portfolio-tabs-btn{
cursor:pointer;
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
padding:12px 16px;
background:rgba(255,255,255,.05);
color:#cbd5e1;
font-size:14px;
font-weight:950;
line-height:1.2;
transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.portfolio-tabs-btn:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.10);
color:#ffffff;
}

.portfolio-tabs-btn.is-active{
background:linear-gradient(135deg,#ec4899,#0ea5e9);
border-color:transparent;
color:#ffffff;
box-shadow:0 16px 38px rgba(236,72,153,.22);
}

.portfolio-tabs-panel{
display:none;
}

.portfolio-tabs-panel.is-active{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:16px;
align-items:stretch;
}

.portfolio-tabs-main-card{
position:relative;
overflow:hidden;
min-height:480px;
padding:28px;
border-radius:34px;
display:flex;
flex-direction:column;
justify-content:flex-end;
background:
linear-gradient(180deg,rgba(2,6,23,.05),rgba(2,6,23,.82)),
radial-gradient(circle at 26% 20%,rgba(255,255,255,.22),transparent 34%),
linear-gradient(135deg,#ec4899,#0ea5e9);
box-shadow:0 28px 86px rgba(0,0,0,.26);
}

.portfolio-tabs-main-card.is-orange{
background:
linear-gradient(180deg,rgba(2,6,23,.05),rgba(2,6,23,.82)),
radial-gradient(circle at 26% 20%,rgba(255,255,255,.22),transparent 34%),
linear-gradient(135deg,#f97316,#8b5cf6);
}

.portfolio-tabs-main-card.is-green{
background:
linear-gradient(180deg,rgba(2,6,23,.05),rgba(2,6,23,.82)),
radial-gradient(circle at 26% 20%,rgba(255,255,255,.22),transparent 34%),
linear-gradient(135deg,#14b8a6,#2563eb);
}

.portfolio-tabs-main-card::before{
content:"";
position:absolute;
left:34px;
right:34px;
top:34px;
height:42%;
border-radius:30px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.portfolio-tabs-main-card-content{
position:relative;
z-index:2;
}

.portfolio-tabs-label{
display:inline-flex;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:13px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.portfolio-tabs-main-card h3{
max-width:600px;
margin:0 0 12px;
color:#ffffff;
font-size:clamp(30px,4vw,50px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
}

.portfolio-tabs-main-card p{
max-width:560px;
margin:0;
color:#e5e7eb;
font-size:16px;
line-height:1.7;
}

.portfolio-tabs-grid{
display:grid;
grid-template-columns:1fr;
gap:14px;
}

.portfolio-tabs-project{
display:grid;
grid-template-columns:130px minmax(0,1fr);
gap:14px;
padding:14px;
border-radius:26px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
box-shadow:0 20px 60px rgba(0,0,0,.20);
}

.portfolio-tabs-thumb{
min-height:116px;
border-radius:20px;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.32),transparent 34%),
linear-gradient(135deg,#ec4899,#0ea5e9);
}

.portfolio-tabs-thumb.is-orange{
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.32),transparent 34%),
linear-gradient(135deg,#f97316,#8b5cf6);
}

.portfolio-tabs-thumb.is-green{
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.32),transparent 34%),
linear-gradient(135deg,#14b8a6,#2563eb);
}

.portfolio-tabs-project small{
display:inline-flex;
margin-bottom:7px;
color:#f9a8d4;
font-size:12px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}

.portfolio-tabs-project h4{
margin:0 0 7px;
color:#ffffff;
font-size:18px;
line-height:1.22;
font-weight:950;
letter-spacing:-.025em;
}

.portfolio-tabs-project p{
margin:0;
color:#94a3b8;
font-size:13px;
line-height:1.55;
font-weight:700;
}

@media (max-width:900px){
.portfolio-tabs-header{
grid-template-columns:1fr;
gap:12px;
}

.portfolio-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.portfolio-tabs-title{
font-size:36px;
}

.portfolio-tabs-nav{
border-radius:24px;
}

.portfolio-tabs-btn{
width:100%;
text-align:left;
}

.portfolio-tabs-main-card{
min-height:400px;
padding:22px;
}

.portfolio-tabs-project{
grid-template-columns:1fr;
}

.portfolio-tabs-thumb{
min-height:180px;
}
}

JavaScript

document.querySelectorAll(".portfolio-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".portfolio-tabs-btn");
const panels=tabBlock.querySelectorAll(".portfolio-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This portfolio tabs example is useful when a creative website needs to show different types of work without overwhelming the visitor. Tabs keep the portfolio organized while the larger project cards make the section feel visual and premium.

25. Documentation Tabs

Documentation tabs are useful for technical pages, API guides, plugin documentation, onboarding guides, and product help centers. They help separate installation steps, usage examples, code snippets, settings, and troubleshooting information without forcing everything into one long page section.

This example uses a developer documentation layout with a left content area, tabbed sections, code-style cards, checklist rows, and a clean dark preview panel. It works well for docs pages, developer tools, SaaS products, WordPress plugins, and technical tutorials.

  • Perfect for documentation pages, API guides, plugin docs, and onboarding content
  • Uses tabs to separate installation, usage, settings, and troubleshooting
  • Includes code-style panels, checklist rows, and developer-friendly UI
  • Uses a small JavaScript snippet for switching documentation panels
  • Preview area stays inside a fixed-height scrollable demo box
docs/component-tabs.html

Install the component

Start with a simple HTML structure, scoped CSS classes, and a small JavaScript snippet that controls the active tab and visible panel.

  • Create the tab buttons with matching data attributes
  • Add content panels with matching panel values
  • Load the JavaScript after the HTML appears on the page
Install example HTML 
<div class="docs-tabs">
  <button data-tab="install">Install</button>
  <div data-panel="install">
    Installation content
  </div>
</div>

Use clear examples

Documentation tabs work best when every tab answers a specific user question. Keep examples short and separate setup from advanced usage.

  • Use one tab for basic usage
  • Use another tab for advanced patterns
  • Keep code snippets readable and complete
Usage example JavaScript 
document.querySelectorAll(".docs-tabs").forEach(function(block){
  const buttons = block.querySelectorAll("[data-tab]");
  const panels = block.querySelectorAll("[data-panel]");
});

Explain configuration

Settings tabs are useful when a component has multiple options, layout variations, responsive rules, or theme values that need documentation.

  • Show default values clearly
  • Explain which settings are optional
  • Add examples for common configurations
Settings example CSS 
.docs-tabs{
  --tab-radius: 18px;
  --tab-gap: 10px;
  --active-color: #2563eb;
}

Add troubleshooting notes

Troubleshooting tabs help users solve common problems without searching the whole page. Keep fixes direct and easy to scan.

  • Check that data-tab and data-panel values match
  • Make sure JavaScript loads after the markup
  • Use unique class names when multiple demos appear on one page
Common fix Checklist 
✓ Match tab and panel names
✓ Use unique wrapper classes
✓ Avoid duplicate IDs
✓ Test each tab after publishing

HTML

<section class="documentation-tabs">

  <aside class="documentation-tabs-sidebar">
    <div class="documentation-tabs-badge">Docs Tabs</div>
    <h3>Developer documentation</h3>
    <p>Use documentation tabs to organize technical setup steps, usage examples, settings, and common fixes.</p>

    <div class="documentation-tabs-nav" role="tablist" aria-label="Documentation tabs">
      <button class="documentation-tabs-btn is-active" type="button" data-tab="install">
        <span class="documentation-tabs-icon">01</span>
        <span><strong>Install</strong><span>Setup and first steps</span></span>
      </button>

      <button class="documentation-tabs-btn" type="button" data-tab="usage">
        <span class="documentation-tabs-icon">02</span>
        <span><strong>Usage</strong><span>Basic component examples</span></span>
      </button>

      <button class="documentation-tabs-btn" type="button" data-tab="settings">
        <span class="documentation-tabs-icon">03</span>
        <span><strong>Settings</strong><span>Options and configuration</span></span>
      </button>

      <button class="documentation-tabs-btn" type="button" data-tab="fixes">
        <span class="documentation-tabs-icon">04</span>
        <span><strong>Fixes</strong><span>Troubleshooting notes</span></span>
      </button>
    </div>
  </aside>

  <div class="documentation-tabs-content">

    <div class="documentation-tabs-top">
      <div class="documentation-tabs-window">
        <span class="documentation-tabs-dot"></span>
        <span class="documentation-tabs-dot"></span>
        <span class="documentation-tabs-dot"></span>
      </div>
      <div class="documentation-tabs-file">docs/component-tabs.html</div>
    </div>

    <div class="documentation-tabs-panel is-active" data-panel="install">
      <div class="documentation-tabs-copy">
        <h3>Install the component</h3>
        <p>Start with a simple HTML structure, scoped CSS classes, and a small JavaScript snippet that controls the active tab and visible panel.</p>
        <ul class="documentation-tabs-steps">
          <li>Create the tab buttons with matching data attributes</li>
          <li>Add content panels with matching panel values</li>
          <li>Load the JavaScript after the HTML appears on the page</li>
        </ul>
      </div>
      <div class="documentation-tabs-code">
        <div class="documentation-tabs-code-head">
          <strong>Install example</strong>
          <span>HTML</span>
        </div>
        <pre><span class="blue">&lt;div</span> class="docs-tabs"<span class="blue">&gt;</span>
  <span class="blue">&lt;button</span> data-tab="install"<span class="blue">&gt;</span>Install<span class="blue">&lt;/button&gt;</span>
  <span class="blue">&lt;div</span> data-panel="install"<span class="blue">&gt;</span>
    Installation content
  <span class="blue">&lt;/div&gt;</span>
<span class="blue">&lt;/div&gt;</span></pre>
      </div>
    </div>

    <div class="documentation-tabs-panel" data-panel="usage">
      <div class="documentation-tabs-copy">
        <h3>Use clear examples</h3>
        <p>Documentation tabs work best when every tab answers a specific user question. Keep examples short and separate setup from advanced usage.</p>
        <ul class="documentation-tabs-steps">
          <li>Use one tab for basic usage</li>
          <li>Use another tab for advanced patterns</li>
          <li>Keep code snippets readable and complete</li>
        </ul>
      </div>
      <div class="documentation-tabs-code">
        <div class="documentation-tabs-code-head">
          <strong>Usage example</strong>
          <span>JavaScript</span>
        </div>
        <pre><span class="pink">document</span>.querySelectorAll(".docs-tabs").forEach(function(block){
  const buttons = block.querySelectorAll("[data-tab]");
  const panels = block.querySelectorAll("[data-panel]");
});</pre>
      </div>
    </div>

    <div class="documentation-tabs-panel" data-panel="settings">
      <div class="documentation-tabs-copy">
        <h3>Explain configuration</h3>
        <p>Settings tabs are useful when a component has multiple options, layout variations, responsive rules, or theme values that need documentation.</p>
        <ul class="documentation-tabs-steps">
          <li>Show default values clearly</li>
          <li>Explain which settings are optional</li>
          <li>Add examples for common configurations</li>
        </ul>
      </div>
      <div class="documentation-tabs-code">
        <div class="documentation-tabs-code-head">
          <strong>Settings example</strong>
          <span>CSS</span>
        </div>
        <pre><span class="green">.docs-tabs</span>{
  --tab-radius: 18px;
  --tab-gap: 10px;
  --active-color: #2563eb;
}</pre>
      </div>
    </div>

    <div class="documentation-tabs-panel" data-panel="fixes">
      <div class="documentation-tabs-copy">
        <h3>Add troubleshooting notes</h3>
        <p>Troubleshooting tabs help users solve common problems without searching the whole page. Keep fixes direct and easy to scan.</p>
        <ul class="documentation-tabs-steps">
          <li>Check that data-tab and data-panel values match</li>
          <li>Make sure JavaScript loads after the markup</li>
          <li>Use unique class names when multiple demos appear on one page</li>
        </ul>
      </div>
      <div class="documentation-tabs-code">
        <div class="documentation-tabs-code-head">
          <strong>Common fix</strong>
          <span>Checklist</span>
        </div>
        <pre>✓ Match tab and panel names
✓ Use unique wrapper classes
✓ Avoid duplicate IDs
✓ Test each tab after publishing</pre>
      </div>
    </div>

  </div>

</section>

CSS

.documentation-tabs{
width:min(100%,1080px);
display:grid;
grid-template-columns:320px minmax(0,1fr);
gap:18px;
align-items:stretch;
}

.documentation-tabs-sidebar{
padding:24px;
border-radius:32px;
background:#0f172a;
border:1px solid rgba(148,163,184,.20);
box-shadow:0 30px 90px rgba(0,0,0,.28);
}

.documentation-tabs-badge{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(74,222,128,.20);
color:#bbf7d0;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.documentation-tabs-badge::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.documentation-tabs-sidebar h3{
margin:0 0 10px;
font-size:32px;
line-height:1.05;
font-weight:950;
letter-spacing:-.055em;
color:#ffffff;
}

.documentation-tabs-sidebar p{
margin:0 0 22px;
font-size:15px;
line-height:1.7;
color:#94a3b8;
}

.documentation-tabs-nav{
display:grid;
gap:10px;
}

.documentation-tabs-btn{
cursor:pointer;
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:12px;
align-items:center;
width:100%;
border:1px solid rgba(148,163,184,.16);
border-radius:18px;
padding:14px;
background:rgba(255,255,255,.05);
color:#cbd5e1;
text-align:left;
transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.documentation-tabs-btn:hover{
transform:translateX(2px);
background:rgba(255,255,255,.08);
color:#ffffff;
border-color:rgba(74,222,128,.28);
}

.documentation-tabs-btn.is-active{
background:linear-gradient(135deg,#16a34a,#2563eb);
border-color:transparent;
color:#ffffff;
box-shadow:0 16px 38px rgba(22,163,74,.20);
}

.documentation-tabs-icon{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:14px;
background:rgba(255,255,255,.10);
font-size:14px;
font-weight:950;
}

.documentation-tabs-btn strong{
display:block;
margin-bottom:3px;
font-size:15px;
font-weight:950;
line-height:1.25;
}

.documentation-tabs-btn span span{
display:block;
font-size:12px;
font-weight:750;
line-height:1.45;
opacity:.78;
}

.documentation-tabs-content{
overflow:hidden;
border-radius:32px;
background:#111827;
border:1px solid rgba(148,163,184,.20);
box-shadow:0 30px 90px rgba(0,0,0,.30);
}

.documentation-tabs-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px 22px;
border-bottom:1px solid rgba(148,163,184,.16);
background:#0b1120;
}

.documentation-tabs-window{
display:flex;
align-items:center;
gap:8px;
}

.documentation-tabs-dot{
width:10px;
height:10px;
border-radius:999px;
background:#ef4444;
}

.documentation-tabs-dot:nth-child(2){
background:#f59e0b;
}

.documentation-tabs-dot:nth-child(3){
background:#22c55e;
}

.documentation-tabs-file{
color:#94a3b8;
font-size:13px;
font-weight:850;
}

.documentation-tabs-panel{
display:none;
padding:28px;
}

.documentation-tabs-panel.is-active{
display:grid;
grid-template-columns:1fr .86fr;
gap:18px;
align-items:stretch;
}

.documentation-tabs-copy{
display:flex;
flex-direction:column;
justify-content:center;
}

.documentation-tabs-copy h3{
margin:0 0 12px;
font-size:36px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff;
}

.documentation-tabs-copy p{
margin:0 0 22px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.documentation-tabs-steps{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.documentation-tabs-steps li{
display:flex;
align-items:flex-start;
gap:10px;
padding:13px 14px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(148,163,184,.14);
color:#e5e7eb;
font-size:14px;
font-weight:800;
line-height:1.45;
}

.documentation-tabs-steps li::before{
content:"";
width:9px;
height:9px;
margin-top:5px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
flex:0 0 auto;
}

.documentation-tabs-code{
overflow:hidden;
border-radius:24px;
background:#020617;
border:1px solid rgba(148,163,184,.18);
box-shadow:0 24px 70px rgba(0,0,0,.32);
}

.documentation-tabs-code-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border-bottom:1px solid rgba(148,163,184,.14);
background:#0f172a;
}

.documentation-tabs-code-head strong{
color:#ffffff;
font-size:14px;
font-weight:950;
}

.documentation-tabs-code-head span{
color:#94a3b8;
font-size:12px;
font-weight:850;
}

.documentation-tabs-code pre{
margin:0;
padding:20px;
white-space:pre-wrap;
font-size:13px;
line-height:1.7;
color:#cbd5e1;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.documentation-tabs-code .green{
color:#86efac;
}

.documentation-tabs-code .blue{
color:#93c5fd;
}

.documentation-tabs-code .pink{
color:#f9a8d4;
}

@media (max-width:920px){
.documentation-tabs{
grid-template-columns:1fr;
}

.documentation-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.documentation-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.documentation-tabs-sidebar,
.documentation-tabs-content{
border-radius:26px;
}

.documentation-tabs-nav{
grid-template-columns:1fr;
}

.documentation-tabs-panel{
padding:22px;
}

.documentation-tabs-copy h3{
font-size:28px;
}

.documentation-tabs-top{
align-items:flex-start;
flex-direction:column;
}
}

JavaScript

document.querySelectorAll(".documentation-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".documentation-tabs-btn");
const panels=tabBlock.querySelectorAll(".documentation-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This documentation tabs example is useful when technical content needs structure. Tabs let readers jump between setup, usage, configuration, and troubleshooting without scrolling through a long documentation block.

26. Comparison Tabs

Comparison tabs are useful when visitors need to compare plans, products, services, platforms, workflows, or feature groups. Instead of showing one huge comparison table, tabs can separate the comparison by audience, use case, price level, or feature category.

This example uses a clean comparison layout with tab buttons, two comparison columns, score badges, feature rows, and a recommendation block. It works well for SaaS pages, product comparison posts, pricing pages, service pages, and buying guides.

  • Perfect for SaaS comparisons, pricing pages, service pages, and buying guides
  • Uses tabs to compare different use cases or customer groups
  • Includes feature rows, score badges, recommendation blocks, and clear columns
  • Uses a small JavaScript snippet for switching comparison panels
  • Preview area stays inside a fixed-height scrollable demo box
Comparison Tabs

Compare options by real use case

Use comparison tabs to help visitors understand which option fits their situation without showing one overwhelming table.

Basic Plan

Simple setup

Good for early-stage websites that need a clean starting point.

7.8/ 10 score
  • Quick launch for small pages
  • Basic support and simple features
  • Lower cost for early testing
  • Limited advanced customization
Recommended

Growth Plan

Better for startups that need more flexibility and stronger conversion sections.

9.2/ 10 score
  • More flexible landing page sections
  • Better analytics and content blocks
  • Good balance of price and features
  • Room to grow without rebuilding
★
Best choice for startups The Growth Plan is better when the website needs to support marketing, testing, and future expansion.
Standard

Client Projects

Useful for smaller client websites and repeatable service packages.

8.1/ 10 score
  • Reusable layout patterns
  • Good for smaller client sites
  • Simple project structure
  • Limited team collaboration features
Recommended

Agency System

Better for agencies that need repeatable workflows, templates, and scalable sections.

9.4/ 10 score
  • Reusable components for many projects
  • Stronger workflow and handoff structure
  • Better consistency between client websites
  • More useful for long-term growth
★
Best choice for agencies The Agency System is stronger when the goal is to reuse sections, speed up delivery, and keep design quality consistent.
Team Plan

Shared workspace

Useful for teams that need shared access and a predictable content structure.

8.5/ 10 score
  • Better team organization
  • Shared components and assets
  • Clearer content structure
  • May need extra governance tools
Recommended

Enterprise Suite

Best for larger teams that need stronger controls, documentation, and scalable systems.

9.6/ 10 score
  • Scalable design and content system
  • Advanced documentation structure
  • Better governance and consistency
  • More suitable for complex websites
★
Best choice for enterprise teams The Enterprise Suite is stronger when multiple teams need consistent patterns, reusable documentation, and long-term scalability.

HTML

<section class="comparison-tabs">

  <div class="comparison-tabs-header">
    <div>
      <div class="comparison-tabs-kicker">Comparison Tabs</div>
      <h3 class="comparison-tabs-title">Compare options by <span>real use case</span></h3>
    </div>
    <p class="comparison-tabs-text">Use comparison tabs to help visitors understand which option fits their situation without showing one overwhelming table.</p>
  </div>

  <div class="comparison-tabs-nav" role="tablist" aria-label="Comparison tabs">
    <button class="comparison-tabs-btn is-active" type="button" data-tab="startup">Startup</button>
    <button class="comparison-tabs-btn" type="button" data-tab="agency">Agency</button>
    <button class="comparison-tabs-btn" type="button" data-tab="enterprise">Enterprise</button>
  </div>

  <div class="comparison-tabs-panel is-active" data-panel="startup">

    <div class="comparison-tabs-grid">
      <article class="comparison-tabs-card">
        <div class="comparison-tabs-card-head">
          <span class="comparison-tabs-label">Basic Plan</span>
          <h3>Simple setup</h3>
          <p>Good for early-stage websites that need a clean starting point.</p>
          <div class="comparison-tabs-score"><strong>7.8</strong><span>/ 10 score</span></div>
        </div>
        <ul class="comparison-tabs-list">
          <li>Quick launch for small pages</li>
          <li>Basic support and simple features</li>
          <li>Lower cost for early testing</li>
          <li>Limited advanced customization</li>
        </ul>
      </article>

      <article class="comparison-tabs-card is-highlighted">
        <div class="comparison-tabs-card-head">
          <span class="comparison-tabs-label">Recommended</span>
          <h3>Growth Plan</h3>
          <p>Better for startups that need more flexibility and stronger conversion sections.</p>
          <div class="comparison-tabs-score"><strong>9.2</strong><span>/ 10 score</span></div>
        </div>
        <ul class="comparison-tabs-list">
          <li>More flexible landing page sections</li>
          <li>Better analytics and content blocks</li>
          <li>Good balance of price and features</li>
          <li>Room to grow without rebuilding</li>
        </ul>
      </article>
    </div>

    <div class="comparison-tabs-recommendation">
      <div class="comparison-tabs-recommendation-icon">★</div>
      <div>
        <strong>Best choice for startups</strong>
        <span>The Growth Plan is better when the website needs to support marketing, testing, and future expansion.</span>
      </div>
    </div>

  </div>

  <div class="comparison-tabs-panel" data-panel="agency">

    <div class="comparison-tabs-grid">
      <article class="comparison-tabs-card">
        <div class="comparison-tabs-card-head">
          <span class="comparison-tabs-label">Standard</span>
          <h3>Client Projects</h3>
          <p>Useful for smaller client websites and repeatable service packages.</p>
          <div class="comparison-tabs-score"><strong>8.1</strong><span>/ 10 score</span></div>
        </div>
        <ul class="comparison-tabs-list">
          <li>Reusable layout patterns</li>
          <li>Good for smaller client sites</li>
          <li>Simple project structure</li>
          <li>Limited team collaboration features</li>
        </ul>
      </article>

      <article class="comparison-tabs-card is-highlighted">
        <div class="comparison-tabs-card-head">
          <span class="comparison-tabs-label">Recommended</span>
          <h3>Agency System</h3>
          <p>Better for agencies that need repeatable workflows, templates, and scalable sections.</p>
          <div class="comparison-tabs-score"><strong>9.4</strong><span>/ 10 score</span></div>
        </div>
        <ul class="comparison-tabs-list">
          <li>Reusable components for many projects</li>
          <li>Stronger workflow and handoff structure</li>
          <li>Better consistency between client websites</li>
          <li>More useful for long-term growth</li>
        </ul>
      </article>
    </div>

    <div class="comparison-tabs-recommendation">
      <div class="comparison-tabs-recommendation-icon">★</div>
      <div>
        <strong>Best choice for agencies</strong>
        <span>The Agency System is stronger when the goal is to reuse sections, speed up delivery, and keep design quality consistent.</span>
      </div>
    </div>

  </div>

  <div class="comparison-tabs-panel" data-panel="enterprise">

    <div class="comparison-tabs-grid">
      <article class="comparison-tabs-card">
        <div class="comparison-tabs-card-head">
          <span class="comparison-tabs-label">Team Plan</span>
          <h3>Shared workspace</h3>
          <p>Useful for teams that need shared access and a predictable content structure.</p>
          <div class="comparison-tabs-score"><strong>8.5</strong><span>/ 10 score</span></div>
        </div>
        <ul class="comparison-tabs-list">
          <li>Better team organization</li>
          <li>Shared components and assets</li>
          <li>Clearer content structure</li>
          <li>May need extra governance tools</li>
        </ul>
      </article>

      <article class="comparison-tabs-card is-highlighted">
        <div class="comparison-tabs-card-head">
          <span class="comparison-tabs-label">Recommended</span>
          <h3>Enterprise Suite</h3>
          <p>Best for larger teams that need stronger controls, documentation, and scalable systems.</p>
          <div class="comparison-tabs-score"><strong>9.6</strong><span>/ 10 score</span></div>
        </div>
        <ul class="comparison-tabs-list">
          <li>Scalable design and content system</li>
          <li>Advanced documentation structure</li>
          <li>Better governance and consistency</li>
          <li>More suitable for complex websites</li>
        </ul>
      </article>
    </div>

    <div class="comparison-tabs-recommendation">
      <div class="comparison-tabs-recommendation-icon">★</div>
      <div>
        <strong>Best choice for enterprise teams</strong>
        <span>The Enterprise Suite is stronger when multiple teams need consistent patterns, reusable documentation, and long-term scalability.</span>
      </div>
    </div>

  </div>

</section>

CSS

.comparison-tabs{
width:min(100%,1080px);
padding:34px;
border-radius:36px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.10);
}

.comparison-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);
gap:24px;
align-items:end;
margin-bottom:24px;
}

.comparison-tabs-kicker{
display:inline-flex;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#fef3c7;
color:#b45309;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.comparison-tabs-title{
margin:0;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.comparison-tabs-title span{
color:#d97706;
}

.comparison-tabs-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.comparison-tabs-nav{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
padding:8px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.comparison-tabs-btn{
cursor:pointer;
border:0;
border-radius:18px;
padding:13px 16px;
background:transparent;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1.2;
transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.comparison-tabs-btn:hover{
background:#fef3c7;
color:#b45309;
transform:translateY(-1px);
}

.comparison-tabs-btn.is-active{
background:linear-gradient(135deg,#f59e0b,#2563eb);
color:#ffffff;
box-shadow:0 16px 36px rgba(245,158,11,.22);
}

.comparison-tabs-panel{
display:none;
}

.comparison-tabs-panel.is-active{
display:block;
}

.comparison-tabs-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-bottom:16px;
}

.comparison-tabs-card{
overflow:hidden;
border-radius:30px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 56px rgba(15,23,42,.08);
}

.comparison-tabs-card.is-highlighted{
background:#0f172a;
border-color:rgba(15,23,42,.20);
box-shadow:0 26px 80px rgba(15,23,42,.18);
}

.comparison-tabs-card-head{
padding:22px;
border-bottom:1px solid rgba(15,23,42,.08);
}

.comparison-tabs-card.is-highlighted .comparison-tabs-card-head{
border-bottom-color:rgba(255,255,255,.12);
}

.comparison-tabs-label{
display:inline-flex;
margin-bottom:12px;
padding:7px 10px;
border-radius:999px;
background:#ffffff;
color:#b45309;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.comparison-tabs-card.is-highlighted .comparison-tabs-label{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#fde68a;
}

.comparison-tabs-card h3{
margin:0 0 8px;
font-size:26px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.comparison-tabs-card.is-highlighted h3{
color:#ffffff;
}

.comparison-tabs-card p{
margin:0;
font-size:15px;
line-height:1.65;
color:#64748b;
}

.comparison-tabs-card.is-highlighted p{
color:#cbd5e1;
}

.comparison-tabs-score{
display:flex;
align-items:end;
gap:8px;
margin-top:18px;
}

.comparison-tabs-score strong{
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.comparison-tabs-card.is-highlighted .comparison-tabs-score strong{
color:#ffffff;
}

.comparison-tabs-score span{
padding-bottom:5px;
color:#64748b;
font-size:13px;
font-weight:850;
}

.comparison-tabs-card.is-highlighted .comparison-tabs-score span{
color:#94a3b8;
}

.comparison-tabs-list{
display:grid;
gap:0;
margin:0;
padding:0;
list-style:none;
}

.comparison-tabs-list li{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px 22px;
border-bottom:1px solid rgba(15,23,42,.07);
color:#334155;
font-size:14px;
font-weight:800;
line-height:1.45;
}

.comparison-tabs-card.is-highlighted .comparison-tabs-list li{
border-bottom-color:rgba(255,255,255,.10);
color:#e5e7eb;
}

.comparison-tabs-list li:last-child{
border-bottom:0;
}

.comparison-tabs-list li::before{
content:"✓";
display:grid;
place-items:center;
width:22px;
height:22px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
flex:0 0 auto;
}

.comparison-tabs-card.is-highlighted .comparison-tabs-list li::before{
background:rgba(34,197,94,.14);
color:#86efac;
}

.comparison-tabs-recommendation{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:16px;
align-items:center;
padding:20px;
border-radius:26px;
background:#fffbeb;
border:1px solid rgba(245,158,11,.22);
}

.comparison-tabs-recommendation-icon{
display:grid;
place-items:center;
width:54px;
height:54px;
border-radius:18px;
background:linear-gradient(135deg,#f59e0b,#2563eb);
color:#ffffff;
font-size:20px;
font-weight:950;
box-shadow:0 16px 34px rgba(245,158,11,.20);
}

.comparison-tabs-recommendation strong{
display:block;
margin-bottom:5px;
color:#0f172a;
font-size:17px;
font-weight:950;
}

.comparison-tabs-recommendation span{
display:block;
color:#64748b;
font-size:14px;
line-height:1.6;
font-weight:750;
}

@media (max-width:900px){
.comparison-tabs-header{
grid-template-columns:1fr;
gap:12px;
}

.comparison-tabs-grid{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.comparison-tabs{
padding:22px;
border-radius:28px;
}

.comparison-tabs-title{
font-size:36px;
}

.comparison-tabs-btn{
width:100%;
text-align:left;
}

.comparison-tabs-recommendation{
grid-template-columns:1fr;
}
}

JavaScript

document.querySelectorAll(".comparison-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".comparison-tabs-btn");
const panels=tabBlock.querySelectorAll(".comparison-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This comparison tabs example is useful when visitors need help choosing between options. Instead of creating one large comparison table, tabs can focus the comparison around a specific audience, use case, or decision path.

27. Multi-Step Form Tabs

Multi-step form tabs are useful when a form has several logical stages, such as account details, project information, preferences, and confirmation. Instead of showing one long form, tabs can make the process feel more organized and less overwhelming.

This example uses a step-style tab navigation, form panels, progress indicators, input fields, selectable cards, and next/back buttons. It works well for quote forms, onboarding flows, checkout steps, signup forms, booking forms, and project request forms.

  • Perfect for quote forms, onboarding flows, checkout steps, and signup forms
  • Uses tab-style steps to organize form sections
  • Includes form fields, selectable cards, progress labels, and navigation buttons
  • Uses JavaScript for step switching and next/back controls
  • Preview area stays inside a fixed-height scrollable demo box

Tell us about your project

Each step keeps the form focused. Users can move forward, go back, or jump between sections using the tab-style steps.

Starter Best for simple pages and small improvements.
Growth Best for complete sections and conversion-focused layouts.
Custom Best for larger projects with custom requirements.
Contact details Ready to review
Project scope Website design
Selected package Growth
Next step Submit request

HTML

<section class="multi-step-form-tabs">

  <aside class="multi-step-form-tabs-sidebar">
    <div class="multi-step-form-tabs-badge">Form Tabs</div>
    <h3>Project request flow</h3>
    <p>Use step tabs to divide a longer form into smaller, easier sections that feel more manageable.</p>

    <div class="multi-step-form-tabs-steps" role="tablist" aria-label="Multi-step form tabs">
      <button class="multi-step-form-tabs-step is-active" type="button" data-tab="contact">
        <span class="multi-step-form-tabs-number">01</span>
        <span><strong>Contact</strong><span>Basic details</span></span>
      </button>

      <button class="multi-step-form-tabs-step" type="button" data-tab="project">
        <span class="multi-step-form-tabs-number">02</span>
        <span><strong>Project</strong><span>Scope and message</span></span>
      </button>

      <button class="multi-step-form-tabs-step" type="button" data-tab="budget">
        <span class="multi-step-form-tabs-number">03</span>
        <span><strong>Budget</strong><span>Preferred package</span></span>
      </button>

      <button class="multi-step-form-tabs-step" type="button" data-tab="review">
        <span class="multi-step-form-tabs-number">04</span>
        <span><strong>Review</strong><span>Confirm request</span></span>
      </button>
    </div>
  </aside>

  <div class="multi-step-form-tabs-card">

    <div class="multi-step-form-tabs-head">
      <div class="multi-step-form-tabs-progress">
        <div class="multi-step-form-tabs-progress-bar"></div>
      </div>
      <h3>Tell us about your project</h3>
      <p>Each step keeps the form focused. Users can move forward, go back, or jump between sections using the tab-style steps.</p>
    </div>

    <div class="multi-step-form-tabs-panel is-active" data-panel="contact">
      <div class="multi-step-form-tabs-grid">
        <div class="multi-step-form-tabs-field">
          <label>First name</label>
          <input type="text" placeholder="Enter first name">
        </div>

        <div class="multi-step-form-tabs-field">
          <label>Last name</label>
          <input type="text" placeholder="Enter last name">
        </div>

        <div class="multi-step-form-tabs-field">
          <label>Email address</label>
          <input type="email" placeholder="hello@example.com">
        </div>

        <div class="multi-step-form-tabs-field">
          <label>Company</label>
          <input type="text" placeholder="Company name">
        </div>
      </div>
    </div>

    <div class="multi-step-form-tabs-panel" data-panel="project">
      <div class="multi-step-form-tabs-grid">
        <div class="multi-step-form-tabs-field">
          <label>Project type</label>
          <select>
            <option>Website design</option>
            <option>Landing page</option>
            <option>Online store</option>
            <option>Custom UI section</option>
          </select>
        </div>

        <div class="multi-step-form-tabs-field">
          <label>Timeline</label>
          <select>
            <option>As soon as possible</option>
            <option>2-4 weeks</option>
            <option>1-2 months</option>
            <option>Flexible</option>
          </select>
        </div>

        <div class="multi-step-form-tabs-field full">
          <label>Project message</label>
          <textarea placeholder="Describe the project, goals, pages, features, and important details."></textarea>
        </div>
      </div>
    </div>

    <div class="multi-step-form-tabs-panel" data-panel="budget">
      <div class="multi-step-form-tabs-options">
        <div class="multi-step-form-tabs-option is-selected">
          <strong>Starter</strong>
          <span>Best for simple pages and small improvements.</span>
        </div>

        <div class="multi-step-form-tabs-option">
          <strong>Growth</strong>
          <span>Best for complete sections and conversion-focused layouts.</span>
        </div>

        <div class="multi-step-form-tabs-option">
          <strong>Custom</strong>
          <span>Best for larger projects with custom requirements.</span>
        </div>
      </div>
    </div>

    <div class="multi-step-form-tabs-panel" data-panel="review">
      <div class="multi-step-form-tabs-summary">
        <div class="multi-step-form-tabs-summary-row">
          <strong>Contact details</strong>
          <span>Ready to review</span>
        </div>

        <div class="multi-step-form-tabs-summary-row">
          <strong>Project scope</strong>
          <span>Website design</span>
        </div>

        <div class="multi-step-form-tabs-summary-row">
          <strong>Selected package</strong>
          <span>Growth</span>
        </div>

        <div class="multi-step-form-tabs-summary-row">
          <strong>Next step</strong>
          <span>Submit request</span>
        </div>
      </div>
    </div>

    <div class="multi-step-form-tabs-actions">
      <button class="multi-step-form-tabs-action multi-step-form-tabs-back" type="button">Back</button>
      <button class="multi-step-form-tabs-action multi-step-form-tabs-next" type="button">Next Step</button>
    </div>

  </div>

</section>

CSS

.multi-step-form-tabs{
width:min(100%,1060px);
display:grid;
grid-template-columns:340px minmax(0,1fr);
gap:18px;
align-items:stretch;
}

.multi-step-form-tabs-sidebar{
padding:26px;
border-radius:34px;
background:#0f172a;
border:1px solid rgba(15,23,42,.12);
box-shadow:0 28px 80px rgba(15,23,42,.18);
color:#ffffff;
}

.multi-step-form-tabs-badge{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(20,184,166,.14);
border:1px solid rgba(45,212,191,.22);
color:#ccfbf1;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.multi-step-form-tabs-badge::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#2dd4bf;
box-shadow:0 0 0 4px rgba(45,212,191,.12);
}

.multi-step-form-tabs-sidebar h3{
margin:0 0 10px;
font-size:34px;
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
}

.multi-step-form-tabs-sidebar p{
margin:0 0 24px;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.multi-step-form-tabs-steps{
display:grid;
gap:12px;
}

.multi-step-form-tabs-step{
cursor:pointer;
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:12px;
align-items:center;
width:100%;
border:1px solid rgba(255,255,255,.10);
border-radius:20px;
padding:14px;
background:rgba(255,255,255,.055);
color:#cbd5e1;
text-align:left;
transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.multi-step-form-tabs-step:hover{
transform:translateX(2px);
background:rgba(255,255,255,.09);
color:#ffffff;
}

.multi-step-form-tabs-step.is-active{
background:linear-gradient(135deg,#14b8a6,#6366f1);
border-color:transparent;
color:#ffffff;
box-shadow:0 16px 38px rgba(20,184,166,.22);
}

.multi-step-form-tabs-number{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:16px;
background:rgba(255,255,255,.10);
font-size:14px;
font-weight:950;
}

.multi-step-form-tabs-step.is-active .multi-step-form-tabs-number{
background:rgba(255,255,255,.20);
border:1px solid rgba(255,255,255,.24);
}

.multi-step-form-tabs-step strong{
display:block;
margin-bottom:3px;
font-size:15px;
font-weight:950;
line-height:1.25;
}

.multi-step-form-tabs-step span span{
display:block;
font-size:12px;
font-weight:750;
line-height:1.45;
opacity:.78;
}

.multi-step-form-tabs-card{
overflow:hidden;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.12);
}

.multi-step-form-tabs-head{
padding:26px 28px;
border-bottom:1px solid rgba(15,23,42,.08);
background:#ffffff;
}

.multi-step-form-tabs-progress{
height:10px;
border-radius:999px;
background:#e2e8f0;
overflow:hidden;
margin-bottom:18px;
}

.multi-step-form-tabs-progress-bar{
height:100%;
width:25%;
border-radius:999px;
background:linear-gradient(90deg,#14b8a6,#6366f1);
transition:width .26s ease;
}

.multi-step-form-tabs-head h3{
margin:0 0 8px;
font-size:clamp(28px,4vw,42px);
line-height:1.06;
font-weight:950;
letter-spacing:-.055em;
color:#0f172a;
}

.multi-step-form-tabs-head p{
max-width:650px;
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.multi-step-form-tabs-panel{
display:none;
padding:28px;
}

.multi-step-form-tabs-panel.is-active{
display:block;
}

.multi-step-form-tabs-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}

.multi-step-form-tabs-field{
display:grid;
gap:8px;
}

.multi-step-form-tabs-field.full{
grid-column:1/-1;
}

.multi-step-form-tabs-field label{
color:#334155;
font-size:13px;
font-weight:950;
}

.multi-step-form-tabs-field input,
.multi-step-form-tabs-field textarea,
.multi-step-form-tabs-field select{
width:100%;
border:1px solid #dbe3ef;
border-radius:16px;
padding:13px 14px;
background:#f8fafc;
color:#0f172a;
font-size:14px;
font-weight:750;
outline:none;
}

.multi-step-form-tabs-field textarea{
min-height:118px;
resize:vertical;
}

.multi-step-form-tabs-field input:focus,
.multi-step-form-tabs-field textarea:focus,
.multi-step-form-tabs-field select:focus{
border-color:#14b8a6;
box-shadow:0 0 0 4px rgba(20,184,166,.12);
background:#ffffff;
}

.multi-step-form-tabs-options{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.multi-step-form-tabs-option{
cursor:pointer;
position:relative;
padding:18px;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.multi-step-form-tabs-option:hover{
transform:translateY(-2px);
background:#ffffff;
border-color:rgba(20,184,166,.24);
box-shadow:0 18px 46px rgba(15,23,42,.08);
}

.multi-step-form-tabs-option.is-selected{
background:#f0fdfa;
border-color:rgba(20,184,166,.50);
box-shadow:0 0 0 4px rgba(20,184,166,.10);
}

.multi-step-form-tabs-option strong{
display:block;
margin-bottom:6px;
color:#0f172a;
font-size:16px;
font-weight:950;
}

.multi-step-form-tabs-option span{
display:block;
color:#64748b;
font-size:13px;
line-height:1.5;
font-weight:750;
}

.multi-step-form-tabs-summary{
display:grid;
gap:12px;
}

.multi-step-form-tabs-summary-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px;
border-radius:18px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.multi-step-form-tabs-summary-row strong{
color:#0f172a;
font-size:15px;
font-weight:950;
}

.multi-step-form-tabs-summary-row span{
color:#64748b;
font-size:14px;
font-weight:800;
}

.multi-step-form-tabs-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:22px 28px;
border-top:1px solid rgba(15,23,42,.08);
background:#f8fafc;
}

.multi-step-form-tabs-action{
cursor:pointer;
border:0;
border-radius:999px;
padding:13px 18px;
font-size:14px;
font-weight:950;
line-height:1.2;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.multi-step-form-tabs-action:hover{
transform:translateY(-1px);
}

.multi-step-form-tabs-back{
background:#ffffff;
color:#334155;
border:1px solid rgba(15,23,42,.10);
}

.multi-step-form-tabs-next{
background:linear-gradient(135deg,#14b8a6,#6366f1);
color:#ffffff;
box-shadow:0 16px 34px rgba(20,184,166,.22);
}

@media (max-width:920px){
.multi-step-form-tabs{
grid-template-columns:1fr;
}

.multi-step-form-tabs-steps{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:640px){
.multi-step-form-tabs-sidebar,
.multi-step-form-tabs-card{
border-radius:26px;
}

.multi-step-form-tabs-steps,
.multi-step-form-tabs-grid,
.multi-step-form-tabs-options{
grid-template-columns:1fr;
}

.multi-step-form-tabs-head,
.multi-step-form-tabs-panel,
.multi-step-form-tabs-actions{
padding:22px;
}

.multi-step-form-tabs-actions{
flex-direction:column;
align-items:stretch;
}

.multi-step-form-tabs-action{
width:100%;
}
}

JavaScript

document.querySelectorAll(".multi-step-form-tabs-demo").forEach(function(tabBlock){
const buttons=Array.from(tabBlock.querySelectorAll(".multi-step-form-tabs-step"));
const panels=Array.from(tabBlock.querySelectorAll(".multi-step-form-tabs-panel"));
const progress=tabBlock.querySelector(".multi-step-form-tabs-progress-bar");
const nextButton=tabBlock.querySelector(".multi-step-form-tabs-next");
const backButton=tabBlock.querySelector(".multi-step-form-tabs-back");
let currentIndex=0;

function updateStep(index){
currentIndex=Math.max(0,Math.min(index,buttons.length-1));
const target=buttons[currentIndex].getAttribute("data-tab");

buttons.forEach(function(button){
button.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

buttons[currentIndex].classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
progress.style.width=((currentIndex+1)/buttons.length*100)+"%";
backButton.disabled=currentIndex===0;
nextButton.textContent=currentIndex===buttons.length-1?"Submit Request":"Next Step";
}

buttons.forEach(function(button,index){
button.addEventListener("click",function(){
updateStep(index);
});
});

nextButton.addEventListener("click",function(){
if(currentIndex0){
updateStep(currentIndex-1);
}
});

tabBlock.querySelectorAll(".multi-step-form-tabs-option").forEach(function(option){
option.addEventListener("click",function(){
tabBlock.querySelectorAll(".multi-step-form-tabs-option").forEach(function(item){
item.classList.remove("is-selected");
});
option.classList.add("is-selected");
});
});

updateStep(0);
});

This multi-step form tabs example is useful when a long form needs to feel easier and more structured. The step tabs, progress bar, and next/back buttons help users understand where they are in the process.

28. Nested Tabs

Nested tabs are tabs inside another tab panel. They are useful when a section has two levels of organization, such as product categories and product details, documentation topics and examples, dashboard areas and subviews, or service groups and package options.

This example uses primary tabs at the top and smaller secondary tabs inside the active panel. It is more advanced than a normal tab section, so it works best when the content genuinely needs two levels of navigation.

  • Perfect for documentation, dashboards, product pages, and complex content sections
  • Uses primary tabs and secondary nested tabs
  • Includes nested content cards, feature lists, and subview panels
  • Uses JavaScript for both outer and inner tab switching
  • Preview area stays inside a fixed-height scrollable demo box
Nested Tabs

Two-level tabs for complex content

Use nested tabs when the content needs a main category and a second layer of detail inside that category.

Product overview

The first nested level can describe the main product category. The second level can separate overview, features, pricing, and technical details.

  • Use primary tabs for large categories
  • Use nested tabs for details inside that category
  • Keep the structure easy to understand

Product features

Feature sub-tabs can organize automation, analytics, collaboration, and security without creating separate repeated sections.

  • Show related feature groups
  • Keep each sub-panel focused
  • Use clear active states for both tab levels

Product pricing

Pricing sub-tabs can explain plans, billing cycles, included features, and upgrade paths inside the product category.

  • Separate price details from feature details
  • Use simple labels for each subview
  • Avoid hiding critical pricing information

Service design

Nested tabs can separate service phases such as planning, design, development, and support inside one service block.

  • Explain the design process
  • Show what the client receives
  • Keep the service page compact

Service build

The build sub-tab can explain implementation, responsive layouts, component setup, and testing before launch.

  • Show implementation details
  • Explain technical deliverables
  • Keep the content easy to scan

Service support

Support sub-tabs can describe maintenance, documentation, performance checks, and future improvements.

  • Explain ongoing support clearly
  • Show what happens after launch
  • Help users understand the next steps

Resource guides

Resource tabs can organize guides, tutorials, documentation, examples, and support content inside one learning section.

  • Group learning content by type
  • Make long resources easier to browse
  • Use nested tabs only when the structure helps

Technical docs

Docs sub-tabs can separate setup, usage, examples, configuration, and troubleshooting inside the resource category.

  • Useful for technical documentation
  • Works with code examples and checklists
  • Helps users find the right section faster

FAQ content

FAQ sub-tabs can group common questions by topic, product, audience, or support stage.

  • Use FAQ groups for large help sections
  • Keep answers short and useful
  • Combine tabs with accordions when needed

HTML

<section class="nested-tabs">

  <div class="nested-tabs-header">
    <div>
      <div class="nested-tabs-kicker">Nested Tabs</div>
      <h3 class="nested-tabs-title">Two-level tabs for <span>complex content</span></h3>
    </div>
    <p class="nested-tabs-text">Use nested tabs when the content needs a main category and a second layer of detail inside that category.</p>
  </div>

  <div class="nested-tabs-primary-nav" role="tablist" aria-label="Primary nested tabs">
    <button class="nested-tabs-primary-btn is-active" type="button" data-tab="products">Products</button>
    <button class="nested-tabs-primary-btn" type="button" data-tab="services">Services</button>
    <button class="nested-tabs-primary-btn" type="button" data-tab="resources">Resources</button>
  </div>

  <div class="nested-tabs-primary-panel is-active" data-panel="products">
    <div class="nested-tabs-panel-shell">

      <div class="nested-tabs-secondary-nav" role="tablist" aria-label="Product nested tabs">
        <button class="nested-tabs-secondary-btn is-active" type="button" data-tab="product-overview">Overview</button>
        <button class="nested-tabs-secondary-btn" type="button" data-tab="product-features">Features</button>
        <button class="nested-tabs-secondary-btn" type="button" data-tab="product-pricing">Pricing</button>
      </div>

      <div class="nested-tabs-secondary-panel is-active" data-panel="product-overview">
        <div class="nested-tabs-copy">
          <h3>Product overview</h3>
          <p>The first nested level can describe the main product category. The second level can separate overview, features, pricing, and technical details.</p>
          <ul class="nested-tabs-list">
            <li>Use primary tabs for large categories</li>
            <li>Use nested tabs for details inside that category</li>
            <li>Keep the structure easy to understand</li>
          </ul>
        </div>
        <div class="nested-tabs-visual"></div>
      </div>

      <div class="nested-tabs-secondary-panel" data-panel="product-features">
        <div class="nested-tabs-copy">
          <h3>Product features</h3>
          <p>Feature sub-tabs can organize automation, analytics, collaboration, and security without creating separate repeated sections.</p>
          <ul class="nested-tabs-list">
            <li>Show related feature groups</li>
            <li>Keep each sub-panel focused</li>
            <li>Use clear active states for both tab levels</li>
          </ul>
        </div>
        <div class="nested-tabs-visual is-green"></div>
      </div>

      <div class="nested-tabs-secondary-panel" data-panel="product-pricing">
        <div class="nested-tabs-copy">
          <h3>Product pricing</h3>
          <p>Pricing sub-tabs can explain plans, billing cycles, included features, and upgrade paths inside the product category.</p>
          <ul class="nested-tabs-list">
            <li>Separate price details from feature details</li>
            <li>Use simple labels for each subview</li>
            <li>Avoid hiding critical pricing information</li>
          </ul>
        </div>
        <div class="nested-tabs-visual is-pink"></div>
      </div>

    </div>
  </div>

  <div class="nested-tabs-primary-panel" data-panel="services">
    <div class="nested-tabs-panel-shell">

      <div class="nested-tabs-secondary-nav" role="tablist" aria-label="Service nested tabs">
        <button class="nested-tabs-secondary-btn is-active" type="button" data-tab="service-design">Design</button>
        <button class="nested-tabs-secondary-btn" type="button" data-tab="service-build">Build</button>
        <button class="nested-tabs-secondary-btn" type="button" data-tab="service-support">Support</button>
      </div>

      <div class="nested-tabs-secondary-panel is-active" data-panel="service-design">
        <div class="nested-tabs-copy">
          <h3>Service design</h3>
          <p>Nested tabs can separate service phases such as planning, design, development, and support inside one service block.</p>
          <ul class="nested-tabs-list">
            <li>Explain the design process</li>
            <li>Show what the client receives</li>
            <li>Keep the service page compact</li>
          </ul>
        </div>
        <div class="nested-tabs-visual is-pink"></div>
      </div>

      <div class="nested-tabs-secondary-panel" data-panel="service-build">
        <div class="nested-tabs-copy">
          <h3>Service build</h3>
          <p>The build sub-tab can explain implementation, responsive layouts, component setup, and testing before launch.</p>
          <ul class="nested-tabs-list">
            <li>Show implementation details</li>
            <li>Explain technical deliverables</li>
            <li>Keep the content easy to scan</li>
          </ul>
        </div>
        <div class="nested-tabs-visual"></div>
      </div>

      <div class="nested-tabs-secondary-panel" data-panel="service-support">
        <div class="nested-tabs-copy">
          <h3>Service support</h3>
          <p>Support sub-tabs can describe maintenance, documentation, performance checks, and future improvements.</p>
          <ul class="nested-tabs-list">
            <li>Explain ongoing support clearly</li>
            <li>Show what happens after launch</li>
            <li>Help users understand the next steps</li>
          </ul>
        </div>
        <div class="nested-tabs-visual is-green"></div>
      </div>

    </div>
  </div>

  <div class="nested-tabs-primary-panel" data-panel="resources">
    <div class="nested-tabs-panel-shell">

      <div class="nested-tabs-secondary-nav" role="tablist" aria-label="Resource nested tabs">
        <button class="nested-tabs-secondary-btn is-active" type="button" data-tab="resource-guides">Guides</button>
        <button class="nested-tabs-secondary-btn" type="button" data-tab="resource-docs">Docs</button>
        <button class="nested-tabs-secondary-btn" type="button" data-tab="resource-faq">FAQ</button>
      </div>

      <div class="nested-tabs-secondary-panel is-active" data-panel="resource-guides">
        <div class="nested-tabs-copy">
          <h3>Resource guides</h3>
          <p>Resource tabs can organize guides, tutorials, documentation, examples, and support content inside one learning section.</p>
          <ul class="nested-tabs-list">
            <li>Group learning content by type</li>
            <li>Make long resources easier to browse</li>
            <li>Use nested tabs only when the structure helps</li>
          </ul>
        </div>
        <div class="nested-tabs-visual is-green"></div>
      </div>

      <div class="nested-tabs-secondary-panel" data-panel="resource-docs">
        <div class="nested-tabs-copy">
          <h3>Technical docs</h3>
          <p>Docs sub-tabs can separate setup, usage, examples, configuration, and troubleshooting inside the resource category.</p>
          <ul class="nested-tabs-list">
            <li>Useful for technical documentation</li>
            <li>Works with code examples and checklists</li>
            <li>Helps users find the right section faster</li>
          </ul>
        </div>
        <div class="nested-tabs-visual"></div>
      </div>

      <div class="nested-tabs-secondary-panel" data-panel="resource-faq">
        <div class="nested-tabs-copy">
          <h3>FAQ content</h3>
          <p>FAQ sub-tabs can group common questions by topic, product, audience, or support stage.</p>
          <ul class="nested-tabs-list">
            <li>Use FAQ groups for large help sections</li>
            <li>Keep answers short and useful</li>
            <li>Combine tabs with accordions when needed</li>
          </ul>
        </div>
        <div class="nested-tabs-visual is-pink"></div>
      </div>

    </div>
  </div>

</section>

CSS

.nested-tabs{
width:min(100%,1080px);
padding:34px;
border-radius:36px;
background:rgba(15,23,42,.92);
border:1px solid rgba(148,163,184,.20);
box-shadow:0 34px 100px rgba(0,0,0,.36);
}

.nested-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);
gap:26px;
align-items:end;
margin-bottom:26px;
}

.nested-tabs-kicker{
display:inline-flex;
width:max-content;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.13);
border:1px solid rgba(196,181,253,.20);
color:#ddd6fe;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.nested-tabs-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#a855f7;
box-shadow:0 0 0 4px rgba(168,85,247,.13);
}

.nested-tabs-title{
margin:0;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.07em;
color:#ffffff;
}

.nested-tabs-title span{
background:linear-gradient(90deg,#c084fc,#38bdf8,#34d399);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.nested-tabs-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.nested-tabs-primary-nav{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-bottom:18px;
padding:10px;
border-radius:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.nested-tabs-primary-btn{
cursor:pointer;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
padding:15px 14px;
background:rgba(255,255,255,.055);
color:#cbd5e1;
font-size:14px;
font-weight:950;
line-height:1.2;
transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.nested-tabs-primary-btn:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.10);
color:#ffffff;
}

.nested-tabs-primary-btn.is-active{
background:linear-gradient(135deg,#7c3aed,#0284c7);
border-color:transparent;
color:#ffffff;
box-shadow:0 18px 44px rgba(124,58,237,.24);
}

.nested-tabs-primary-panel{
display:none;
}

.nested-tabs-primary-panel.is-active{
display:block;
}

.nested-tabs-panel-shell{
padding:22px;
border-radius:30px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.18);
box-shadow:0 26px 80px rgba(0,0,0,.24);
}

.nested-tabs-secondary-nav{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:18px;
padding:8px;
border-radius:999px;
background:rgba(2,6,23,.35);
border:1px solid rgba(148,163,184,.14);
}

.nested-tabs-secondary-btn{
cursor:pointer;
border:1px solid rgba(148,163,184,.14);
border-radius:999px;
padding:11px 15px;
background:rgba(255,255,255,.04);
color:#cbd5e1;
font-size:13px;
font-weight:950;
line-height:1.2;
transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}

.nested-tabs-secondary-btn:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.08);
color:#ffffff;
}

.nested-tabs-secondary-btn.is-active{
background:#ffffff;
border-color:#ffffff;
color:#0f172a;
}

.nested-tabs-secondary-panel{
display:none;
}

.nested-tabs-secondary-panel.is-active{
display:grid;
grid-template-columns:.95fr 1.05fr;
gap:18px;
align-items:stretch;
}

.nested-tabs-copy{
padding:8px;
}

.nested-tabs-copy h3{
margin:0 0 12px;
font-size:34px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff;
}

.nested-tabs-copy p{
margin:0 0 22px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.nested-tabs-list{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.nested-tabs-list li{
display:flex;
align-items:flex-start;
gap:10px;
padding:13px 14px;
border-radius:16px;
background:rgba(2,6,23,.34);
border:1px solid rgba(148,163,184,.14);
color:#e5e7eb;
font-size:14px;
font-weight:800;
line-height:1.45;
}

.nested-tabs-list li::before{
content:"";
width:9px;
height:9px;
margin-top:5px;
border-radius:999px;
background:#38bdf8;
box-shadow:0 0 0 4px rgba(56,189,248,.12);
flex:0 0 auto;
}

.nested-tabs-visual{
position:relative;
min-height:360px;
border-radius:28px;
overflow:hidden;
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 34%),
linear-gradient(135deg,#7c3aed,#0284c7);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 26px 80px rgba(2,132,199,.22);
}

.nested-tabs-visual.is-green{
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 34%),
linear-gradient(135deg,#14b8a6,#2563eb);
}

.nested-tabs-visual.is-pink{
background:
radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 34%),
linear-gradient(135deg,#ec4899,#8b5cf6);
}

.nested-tabs-visual::before{
content:"";
position:absolute;
left:32px;
right:32px;
top:32px;
height:94px;
border-radius:26px;
background:rgba(255,255,255,.20);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.nested-tabs-visual::after{
content:"";
position:absolute;
left:32px;
right:32px;
bottom:32px;
height:42%;
border-radius:28px;
background:rgba(2,6,23,.36);
border:1px solid rgba(255,255,255,.12);
}

@media (max-width:920px){
.nested-tabs-header{
grid-template-columns:1fr;
gap:14px;
}

.nested-tabs-primary-nav{
grid-template-columns:1fr;
}

.nested-tabs-secondary-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.nested-tabs{
padding:22px;
border-radius:28px;
}

.nested-tabs-title{
font-size:36px;
}

.nested-tabs-secondary-nav{
border-radius:22px;
}

.nested-tabs-secondary-btn{
width:100%;
text-align:left;
}

.nested-tabs-copy h3{
font-size:28px;
}

.nested-tabs-visual{
min-height:280px;
}
}

JavaScript

document.querySelectorAll(".nested-tabs-demo").forEach(function(tabBlock){

function initTabs(buttonSelector,panelSelector){
const buttons=tabBlock.querySelectorAll(buttonSelector);
const panels=tabBlock.querySelectorAll(panelSelector);

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
}

initTabs(".nested-tabs-primary-btn",".nested-tabs-primary-panel");

tabBlock.querySelectorAll(".nested-tabs-primary-panel").forEach(function(primaryPanel){
const secondaryButtons=primaryPanel.querySelectorAll(".nested-tabs-secondary-btn");
const secondaryPanels=primaryPanel.querySelectorAll(".nested-tabs-secondary-panel");

secondaryButtons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

secondaryButtons.forEach(function(btn){
btn.classList.remove("is-active");
});

secondaryPanels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
primaryPanel.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

});

This nested tabs example is useful when one level of tabs is not enough to organize the content. Use it carefully, because nested navigation can become confusing if the labels are unclear or the structure is too deep.

29. Accessible JavaScript Tabs

Accessible JavaScript tabs are built with better keyboard support, ARIA attributes, visible focus states, and semantic tab roles. This makes the tab interface easier to use for keyboard users, screen readers, and visitors who rely on assistive technology.

This example uses proper role="tablist", role="tab", role="tabpanel", aria-selected, aria-controls, keyboard arrow navigation, Home and End key support, and visible focus styles. It is more practical than many visual-only tab examples because accessibility is part of the component behavior.

  • Perfect for production websites, documentation pages, SaaS sections, and UI components
  • Uses ARIA roles and attributes for better assistive technology support
  • Includes keyboard navigation with arrow keys, Home, and End
  • Uses visible focus states and clear active tab styling
  • Preview area stays inside a fixed-height scrollable demo box
Accessible Tabs

Tabs with keyboard support

Use accessible JavaScript tabs when the component needs to work well for keyboard users and assistive technologies.

Use the correct tab structure

Accessible tabs need a clear relationship between each tab button and its content panel. ARIA attributes help assistive technology understand that relationship.

  • Use role=”tablist” on the tab wrapper
  • Use role=”tab” on every tab button
  • Use role=”tabpanel” on each content panel
ARIA structure
role=”tablist” defines the tab group.
aria-controls connects a tab to a panel.
aria-selected shows which tab is active.

Support keyboard navigation

Keyboard support makes tabs easier to use without a mouse. Arrow keys should move between tabs, while Home and End should jump to the first or last tab.

  • Use ArrowRight and ArrowLeft for tab movement
  • Use Home to focus the first tab
  • Use End to focus the last tab
Keyboard behavior
ArrowRight moves to the next tab.
ArrowLeft moves to the previous tab.
Home / End jump to first or last tab.

Make focus clearly visible

Visible focus styles help keyboard users understand where they are on the page. Focus indicators should be easy to see and not removed by custom CSS.

  • Use a strong focus outline
  • Keep focus and active states visually different
  • Do not remove outlines without replacing them
Focus styling
:focus should be visible.
outline-offset creates breathing room.
Focus styles improve real usability.

Test the component before publishing

Accessible tabs should be tested with keyboard navigation, mobile layout, visible focus states, and screen reader structure before they are used in production.

  • Tab through the component without a mouse
  • Check arrow key navigation
  • Verify that hidden panels are not shown visually
Testing checklist
✓ Keyboard navigation works.
✓ Focus state is visible.
✓ Active tab state is clear.

HTML

<section class="accessible-js-tabs">

  <div class="accessible-js-tabs-header">
    <div>
      <div class="accessible-js-tabs-kicker">Accessible Tabs</div>
      <h3 class="accessible-js-tabs-title">Tabs with <span>keyboard support</span></h3>
    </div>
    <p class="accessible-js-tabs-text">Use accessible JavaScript tabs when the component needs to work well for keyboard users and assistive technologies.</p>
  </div>

  <div class="accessible-js-tabs-tablist" role="tablist" aria-label="Accessible JavaScript tabs">
    <button class="accessible-js-tabs-tab" id="accessible-tab-structure" type="button" role="tab" aria-selected="true" aria-controls="accessible-panel-structure" tabindex="0" data-tab="structure">Structure</button>
    <button class="accessible-js-tabs-tab" id="accessible-tab-keyboard" type="button" role="tab" aria-selected="false" aria-controls="accessible-panel-keyboard" tabindex="-1" data-tab="keyboard">Keyboard</button>
    <button class="accessible-js-tabs-tab" id="accessible-tab-focus" type="button" role="tab" aria-selected="false" aria-controls="accessible-panel-focus" tabindex="-1" data-tab="focus">Focus States</button>
    <button class="accessible-js-tabs-tab" id="accessible-tab-testing" type="button" role="tab" aria-selected="false" aria-controls="accessible-panel-testing" tabindex="-1" data-tab="testing">Testing</button>
  </div>

  <div class="accessible-js-tabs-panel is-active" id="accessible-panel-structure" role="tabpanel" aria-labelledby="accessible-tab-structure" data-panel="structure">
    <div class="accessible-js-tabs-info">
      <h3>Use the correct tab structure</h3>
      <p>Accessible tabs need a clear relationship between each tab button and its content panel. ARIA attributes help assistive technology understand that relationship.</p>
      <ul class="accessible-js-tabs-checklist">
        <li>Use role="tablist" on the tab wrapper</li>
        <li>Use role="tab" on every tab button</li>
        <li>Use role="tabpanel" on each content panel</li>
      </ul>
    </div>
    <div class="accessible-js-tabs-code-card">
      <div class="accessible-js-tabs-code-head">
        <div class="accessible-js-tabs-code-dots"><span></span><span></span><span></span></div>
        <strong>ARIA structure</strong>
      </div>
      <div class="accessible-js-tabs-code-body">
        <div class="accessible-js-tabs-code-row"><strong>role="tablist"</strong> defines the tab group.</div>
        <div class="accessible-js-tabs-code-row"><strong>aria-controls</strong> connects a tab to a panel.</div>
        <div class="accessible-js-tabs-code-row"><strong>aria-selected</strong> shows which tab is active.</div>
      </div>
    </div>
  </div>

  <div class="accessible-js-tabs-panel" id="accessible-panel-keyboard" role="tabpanel" aria-labelledby="accessible-tab-keyboard" data-panel="keyboard">
    <div class="accessible-js-tabs-info">
      <h3>Support keyboard navigation</h3>
      <p>Keyboard support makes tabs easier to use without a mouse. Arrow keys should move between tabs, while Home and End should jump to the first or last tab.</p>
      <ul class="accessible-js-tabs-checklist">
        <li>Use ArrowRight and ArrowLeft for tab movement</li>
        <li>Use Home to focus the first tab</li>
        <li>Use End to focus the last tab</li>
      </ul>
    </div>
    <div class="accessible-js-tabs-code-card">
      <div class="accessible-js-tabs-code-head">
        <div class="accessible-js-tabs-code-dots"><span></span><span></span><span></span></div>
        <strong>Keyboard behavior</strong>
      </div>
      <div class="accessible-js-tabs-code-body">
        <div class="accessible-js-tabs-code-row"><strong>ArrowRight</strong> moves to the next tab.</div>
        <div class="accessible-js-tabs-code-row"><strong>ArrowLeft</strong> moves to the previous tab.</div>
        <div class="accessible-js-tabs-code-row"><strong>Home / End</strong> jump to first or last tab.</div>
      </div>
    </div>
  </div>

  <div class="accessible-js-tabs-panel" id="accessible-panel-focus" role="tabpanel" aria-labelledby="accessible-tab-focus" data-panel="focus">
    <div class="accessible-js-tabs-info">
      <h3>Make focus clearly visible</h3>
      <p>Visible focus styles help keyboard users understand where they are on the page. Focus indicators should be easy to see and not removed by custom CSS.</p>
      <ul class="accessible-js-tabs-checklist">
        <li>Use a strong focus outline</li>
        <li>Keep focus and active states visually different</li>
        <li>Do not remove outlines without replacing them</li>
      </ul>
    </div>
    <div class="accessible-js-tabs-code-card">
      <div class="accessible-js-tabs-code-head">
        <div class="accessible-js-tabs-code-dots"><span></span><span></span><span></span></div>
        <strong>Focus styling</strong>
      </div>
      <div class="accessible-js-tabs-code-body">
        <div class="accessible-js-tabs-code-row"><strong>:focus</strong> should be visible.</div>
        <div class="accessible-js-tabs-code-row"><span>outline-offset</span> creates breathing room.</div>
        <div class="accessible-js-tabs-code-row">Focus styles improve real usability.</div>
      </div>
    </div>
  </div>

  <div class="accessible-js-tabs-panel" id="accessible-panel-testing" role="tabpanel" aria-labelledby="accessible-tab-testing" data-panel="testing">
    <div class="accessible-js-tabs-info">
      <h3>Test the component before publishing</h3>
      <p>Accessible tabs should be tested with keyboard navigation, mobile layout, visible focus states, and screen reader structure before they are used in production.</p>
      <ul class="accessible-js-tabs-checklist">
        <li>Tab through the component without a mouse</li>
        <li>Check arrow key navigation</li>
        <li>Verify that hidden panels are not shown visually</li>
      </ul>
    </div>
    <div class="accessible-js-tabs-code-card">
      <div class="accessible-js-tabs-code-head">
        <div class="accessible-js-tabs-code-dots"><span></span><span></span><span></span></div>
        <strong>Testing checklist</strong>
      </div>
      <div class="accessible-js-tabs-code-body">
        <div class="accessible-js-tabs-code-row">✓ Keyboard navigation works.</div>
        <div class="accessible-js-tabs-code-row">✓ Focus state is visible.</div>
        <div class="accessible-js-tabs-code-row">✓ Active tab state is clear.</div>
      </div>
    </div>
  </div>

</section>

CSS

.accessible-js-tabs{
width:min(100%,1060px);
padding:34px;
border-radius:36px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.10);
}

.accessible-js-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);
gap:24px;
align-items:end;
margin-bottom:24px;
}

.accessible-js-tabs-kicker{
display:inline-flex;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.accessible-js-tabs-title{
margin:0;
font-size:clamp(34px,5vw,60px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.accessible-js-tabs-title span{
color:#2563eb;
}

.accessible-js-tabs-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.accessible-js-tabs-tablist{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:20px;
padding:10px;
border-radius:24px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.accessible-js-tabs-tab{
cursor:pointer;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
padding:15px 14px;
background:#ffffff;
color:#475569;
font-size:14px;
font-weight:950;
line-height:1.2;
text-align:left;
transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.accessible-js-tabs-tab:hover{
transform:translateY(-2px);
background:#eff6ff;
color:#1d4ed8;
border-color:rgba(37,99,235,.22);
}

.accessible-js-tabs-tab:focus{
outline:3px solid rgba(37,99,235,.30);
outline-offset:3px;
}

.accessible-js-tabs-tab[aria-selected="true"]{
background:linear-gradient(135deg,#2563eb,#16a34a);
border-color:transparent;
color:#ffffff;
box-shadow:0 16px 36px rgba(37,99,235,.22);
}

.accessible-js-tabs-panel{
display:none;
}

.accessible-js-tabs-panel.is-active{
display:grid;
grid-template-columns:.92fr 1.08fr;
gap:20px;
align-items:stretch;
}

.accessible-js-tabs-info{
display:flex;
flex-direction:column;
justify-content:center;
padding:28px;
border-radius:30px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.accessible-js-tabs-info h3{
margin:0 0 12px;
font-size:34px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.accessible-js-tabs-info p{
margin:0 0 22px;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.accessible-js-tabs-checklist{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.accessible-js-tabs-checklist li{
display:flex;
align-items:flex-start;
gap:10px;
padding:12px 14px;
border-radius:16px;
background:#ffffff;
border:1px solid rgba(15,23,42,.07);
color:#334155;
font-size:14px;
font-weight:800;
line-height:1.45;
}

.accessible-js-tabs-checklist li::before{
content:"✓";
display:grid;
place-items:center;
width:22px;
height:22px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:950;
flex:0 0 auto;
}

.accessible-js-tabs-code-card{
overflow:hidden;
border-radius:30px;
background:#0f172a;
border:1px solid rgba(15,23,42,.14);
box-shadow:0 26px 76px rgba(15,23,42,.18);
}

.accessible-js-tabs-code-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:16px 18px;
border-bottom:1px solid rgba(148,163,184,.18);
background:#111827;
}

.accessible-js-tabs-code-dots{
display:flex;
gap:8px;
}

.accessible-js-tabs-code-dots span{
width:10px;
height:10px;
border-radius:999px;
background:#ef4444;
}

.accessible-js-tabs-code-dots span:nth-child(2){
background:#f59e0b;
}

.accessible-js-tabs-code-dots span:nth-child(3){
background:#22c55e;
}

.accessible-js-tabs-code-head strong{
color:#e5e7eb;
font-size:13px;
font-weight:950;
}

.accessible-js-tabs-code-body{
display:grid;
gap:12px;
padding:20px;
}

.accessible-js-tabs-code-row{
padding:14px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(148,163,184,.14);
color:#cbd5e1;
font-size:13px;
line-height:1.65;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.accessible-js-tabs-code-row strong{
color:#93c5fd;
font-weight:950;
}

.accessible-js-tabs-code-row span{
color:#86efac;
}

@media (max-width:900px){
.accessible-js-tabs-header{
grid-template-columns:1fr;
gap:12px;
}

.accessible-js-tabs-tablist{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.accessible-js-tabs-panel.is-active{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.accessible-js-tabs{
padding:22px;
border-radius:28px;
}

.accessible-js-tabs-title{
font-size:36px;
}

.accessible-js-tabs-tablist{
grid-template-columns:1fr;
}

.accessible-js-tabs-info{
padding:22px;
}

.accessible-js-tabs-info h3{
font-size:28px;
}
}

JavaScript

document.querySelectorAll(".accessible-js-tabs-demo").forEach(function(tabBlock){
const tabs=Array.from(tabBlock.querySelectorAll(".accessible-js-tabs-tab"));
const panels=Array.from(tabBlock.querySelectorAll(".accessible-js-tabs-panel"));

function activateTab(tab,focusTab){
tabs.forEach(function(item){
item.setAttribute("aria-selected","false");
item.setAttribute("tabindex","-1");
item.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

tab.setAttribute("aria-selected","true");
tab.setAttribute("tabindex","0");
tab.classList.add("is-active");

const targetPanel=tabBlock.querySelector("#"+tab.getAttribute("aria-controls"));
targetPanel.classList.add("is-active");

if(focusTab){
tab.focus();
}
}

tabs.forEach(function(tab,index){
tab.addEventListener("click",function(){
activateTab(tab,false);
});

tab.addEventListener("keydown",function(event){
let newIndex=index;

if(event.key==="ArrowRight"){
newIndex=index+1;
if(newIndex>=tabs.length){
newIndex=0;
}
event.preventDefault();
activateTab(tabs[newIndex],true);
}

if(event.key==="ArrowLeft"){
newIndex=index-1;
if(newIndex<0){
newIndex=tabs.length-1;
}
event.preventDefault();
activateTab(tabs[newIndex],true);
}

if(event.key==="Home"){
event.preventDefault();
activateTab(tabs[0],true);
}

if(event.key==="End"){
event.preventDefault();
activateTab(tabs[tabs.length-1],true);
}
});
});

activateTab(tabs[0],false);
});

This accessible JavaScript tabs example is useful when a tab component needs to be more than just visually attractive. It gives users better keyboard control, clearer structure, and stronger usability across different browsing methods.

30. Complete Responsive Tabs Section

A complete responsive tabs section combines many of the patterns from this guide into one polished layout. It includes a strong heading, responsive tab navigation, feature panels, content cards, a visual preview, mobile-friendly stacking, and JavaScript tab switching.

This final example is designed as a full website section that could be used on a SaaS landing page, product page, service page, plugin website, or digital product homepage. It is a complete responsive tab UI that works as a practical starting point for real projects.

  • Perfect for landing pages, SaaS products, plugin websites, and service pages
  • Combines responsive layout, strong content hierarchy, and tabbed feature panels
  • Includes CTA buttons, feature cards, trust metrics, and a large UI preview
  • Uses JavaScript for clean tab switching
  • Preview area stays inside a fixed-height scrollable demo box
Complete Tabs Section

Responsive tabs for real website sections

Use this complete tab section as a starting point for landing pages, SaaS websites, product pages, and service pages.

Overview

Explain the main value in one focused tab panel

A complete responsive tabs section should combine strong copy, useful feature cards, clear actions, and a visual preview that supports the message.

Clear structureTabs keep related content grouped.
Responsive layoutThe section stacks cleanly on mobile.
Visual proofThe preview supports the main message.
Useful CTAsButtons guide users to the next action.
Start Building View Details
Speed98
Leads42%
UXA+
Workflow

Show how the process works step by step

Workflow tabs are useful when visitors need to understand how your product, service, or system helps them move from problem to result.

PlanStart with goals and content structure.
DesignCreate a visual system with reusable blocks.
BuildTurn the structure into responsive sections.
ImproveRefine the section based on user behavior.
See Workflow Learn More
Steps04
Time-35%
FlowClean
Performance

Keep the component useful and lightweight

A good tab section should look polished without becoming heavy. Use CSS for visuals, keep JavaScript small, and avoid loading unnecessary assets.

Scoped CSSUnique classes reduce style conflicts.
Small JSOnly switch panels and active states.
No heavy assetsUse gradients and CSS shapes when possible.
Fast interactionTabs should switch instantly.
Optimize Section Read Tips
CSSLight
JSSmall
LoadFast
Support

Use tabs to guide users to helpful information

Support tabs can organize FAQs, documentation, onboarding notes, troubleshooting content, and customer education inside one compact interface.

Help topicsGroup common support questions.
Docs linksPoint users to detailed resources.
OnboardingExplain what to do next.
ClarityReduce confusion with clear labels.
Open Help Contact Support
Docs24
FAQ18
HelpLive

HTML

<section class="complete-responsive-tabs">

  <div class="complete-responsive-tabs-header">
    <div>
      <div class="complete-responsive-tabs-kicker">Complete Tabs Section</div>
      <h3 class="complete-responsive-tabs-title">Responsive tabs for <span>real website sections</span></h3>
    </div>
    <p class="complete-responsive-tabs-text">Use this complete tab section as a starting point for landing pages, SaaS websites, product pages, and service pages.</p>
  </div>

  <div class="complete-responsive-tabs-nav" role="tablist" aria-label="Complete responsive tabs">
    <button class="complete-responsive-tabs-btn is-active" type="button" data-tab="overview">Overview</button>
    <button class="complete-responsive-tabs-btn" type="button" data-tab="workflow">Workflow</button>
    <button class="complete-responsive-tabs-btn" type="button" data-tab="performance">Performance</button>
    <button class="complete-responsive-tabs-btn" type="button" data-tab="support">Support</button>
  </div>

  <div class="complete-responsive-tabs-panel is-active" data-panel="overview">
    <div class="complete-responsive-tabs-content">
      <span class="complete-responsive-tabs-label">Overview</span>
      <h3>Explain the main value in one focused tab panel</h3>
      <p>A complete responsive tabs section should combine strong copy, useful feature cards, clear actions, and a visual preview that supports the message.</p>
      <div class="complete-responsive-tabs-feature-grid">
        <div class="complete-responsive-tabs-feature"><strong>Clear structure</strong><span>Tabs keep related content grouped.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Responsive layout</strong><span>The section stacks cleanly on mobile.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Visual proof</strong><span>The preview supports the main message.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Useful CTAs</strong><span>Buttons guide users to the next action.</span></div>
      </div>
      <div class="complete-responsive-tabs-actions">
        <a class="complete-responsive-tabs-cta primary" href="#">Start Building</a>
        <a class="complete-responsive-tabs-cta secondary" href="#">View Details</a>
      </div>
    </div>

    <div class="complete-responsive-tabs-visual">
      <div class="complete-responsive-tabs-browser">
        <div class="complete-responsive-tabs-dots"><span></span><span></span><span></span></div>
        <div class="complete-responsive-tabs-url"></div>
      </div>
      <div class="complete-responsive-tabs-ui">
        <div class="complete-responsive-tabs-hero-card"></div>
        <div class="complete-responsive-tabs-side-stack">
          <div class="complete-responsive-tabs-side-card"></div>
          <div class="complete-responsive-tabs-side-card"></div>
        </div>
        <div class="complete-responsive-tabs-wide-card"></div>
      </div>
      <div class="complete-responsive-tabs-metrics">
        <div class="complete-responsive-tabs-metric"><span>Speed</span><strong>98</strong></div>
        <div class="complete-responsive-tabs-metric"><span>Leads</span><strong>42%</strong></div>
        <div class="complete-responsive-tabs-metric"><span>UX</span><strong>A+</strong></div>
      </div>
    </div>
  </div>

  <div class="complete-responsive-tabs-panel" data-panel="workflow">
    <div class="complete-responsive-tabs-content">
      <span class="complete-responsive-tabs-label">Workflow</span>
      <h3>Show how the process works step by step</h3>
      <p>Workflow tabs are useful when visitors need to understand how your product, service, or system helps them move from problem to result.</p>
      <div class="complete-responsive-tabs-feature-grid">
        <div class="complete-responsive-tabs-feature"><strong>Plan</strong><span>Start with goals and content structure.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Design</strong><span>Create a visual system with reusable blocks.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Build</strong><span>Turn the structure into responsive sections.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Improve</strong><span>Refine the section based on user behavior.</span></div>
      </div>
      <div class="complete-responsive-tabs-actions">
        <a class="complete-responsive-tabs-cta primary" href="#">See Workflow</a>
        <a class="complete-responsive-tabs-cta secondary" href="#">Learn More</a>
      </div>
    </div>

    <div class="complete-responsive-tabs-visual">
      <div class="complete-responsive-tabs-browser">
        <div class="complete-responsive-tabs-dots"><span></span><span></span><span></span></div>
        <div class="complete-responsive-tabs-url"></div>
      </div>
      <div class="complete-responsive-tabs-ui">
        <div class="complete-responsive-tabs-hero-card"></div>
        <div class="complete-responsive-tabs-side-stack">
          <div class="complete-responsive-tabs-side-card"></div>
          <div class="complete-responsive-tabs-side-card"></div>
        </div>
        <div class="complete-responsive-tabs-wide-card"></div>
      </div>
      <div class="complete-responsive-tabs-metrics">
        <div class="complete-responsive-tabs-metric"><span>Steps</span><strong>04</strong></div>
        <div class="complete-responsive-tabs-metric"><span>Time</span><strong>-35%</strong></div>
        <div class="complete-responsive-tabs-metric"><span>Flow</span><strong>Clean</strong></div>
      </div>
    </div>
  </div>

  <div class="complete-responsive-tabs-panel" data-panel="performance">
    <div class="complete-responsive-tabs-content">
      <span class="complete-responsive-tabs-label">Performance</span>
      <h3>Keep the component useful and lightweight</h3>
      <p>A good tab section should look polished without becoming heavy. Use CSS for visuals, keep JavaScript small, and avoid loading unnecessary assets.</p>
      <div class="complete-responsive-tabs-feature-grid">
        <div class="complete-responsive-tabs-feature"><strong>Scoped CSS</strong><span>Unique classes reduce style conflicts.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Small JS</strong><span>Only switch panels and active states.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>No heavy assets</strong><span>Use gradients and CSS shapes when possible.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Fast interaction</strong><span>Tabs should switch instantly.</span></div>
      </div>
      <div class="complete-responsive-tabs-actions">
        <a class="complete-responsive-tabs-cta primary" href="#">Optimize Section</a>
        <a class="complete-responsive-tabs-cta secondary" href="#">Read Tips</a>
      </div>
    </div>

    <div class="complete-responsive-tabs-visual">
      <div class="complete-responsive-tabs-browser">
        <div class="complete-responsive-tabs-dots"><span></span><span></span><span></span></div>
        <div class="complete-responsive-tabs-url"></div>
      </div>
      <div class="complete-responsive-tabs-ui">
        <div class="complete-responsive-tabs-hero-card"></div>
        <div class="complete-responsive-tabs-side-stack">
          <div class="complete-responsive-tabs-side-card"></div>
          <div class="complete-responsive-tabs-side-card"></div>
        </div>
        <div class="complete-responsive-tabs-wide-card"></div>
      </div>
      <div class="complete-responsive-tabs-metrics">
        <div class="complete-responsive-tabs-metric"><span>CSS</span><strong>Light</strong></div>
        <div class="complete-responsive-tabs-metric"><span>JS</span><strong>Small</strong></div>
        <div class="complete-responsive-tabs-metric"><span>Load</span><strong>Fast</strong></div>
      </div>
    </div>
  </div>

  <div class="complete-responsive-tabs-panel" data-panel="support">
    <div class="complete-responsive-tabs-content">
      <span class="complete-responsive-tabs-label">Support</span>
      <h3>Use tabs to guide users to helpful information</h3>
      <p>Support tabs can organize FAQs, documentation, onboarding notes, troubleshooting content, and customer education inside one compact interface.</p>
      <div class="complete-responsive-tabs-feature-grid">
        <div class="complete-responsive-tabs-feature"><strong>Help topics</strong><span>Group common support questions.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Docs links</strong><span>Point users to detailed resources.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Onboarding</strong><span>Explain what to do next.</span></div>
        <div class="complete-responsive-tabs-feature"><strong>Clarity</strong><span>Reduce confusion with clear labels.</span></div>
      </div>
      <div class="complete-responsive-tabs-actions">
        <a class="complete-responsive-tabs-cta primary" href="#">Open Help</a>
        <a class="complete-responsive-tabs-cta secondary" href="#">Contact Support</a>
      </div>
    </div>

    <div class="complete-responsive-tabs-visual">
      <div class="complete-responsive-tabs-browser">
        <div class="complete-responsive-tabs-dots"><span></span><span></span><span></span></div>
        <div class="complete-responsive-tabs-url"></div>
      </div>
      <div class="complete-responsive-tabs-ui">
        <div class="complete-responsive-tabs-hero-card"></div>
        <div class="complete-responsive-tabs-side-stack">
          <div class="complete-responsive-tabs-side-card"></div>
          <div class="complete-responsive-tabs-side-card"></div>
        </div>
        <div class="complete-responsive-tabs-wide-card"></div>
      </div>
      <div class="complete-responsive-tabs-metrics">
        <div class="complete-responsive-tabs-metric"><span>Docs</span><strong>24</strong></div>
        <div class="complete-responsive-tabs-metric"><span>FAQ</span><strong>18</strong></div>
        <div class="complete-responsive-tabs-metric"><span>Help</span><strong>Live</strong></div>
      </div>
    </div>
  </div>

</section>

CSS

.complete-responsive-tabs{
width:min(100%,1120px);
position:relative;
overflow:hidden;
padding:38px;
border-radius:38px;
background:
radial-gradient(circle at 16% 12%,rgba(14,165,233,.18),transparent 32%),
radial-gradient(circle at 88% 18%,rgba(168,85,247,.18),transparent 34%),
rgba(15,23,42,.92);
border:1px solid rgba(148,163,184,.20);
box-shadow:0 34px 100px rgba(0,0,0,.38);
}

.complete-responsive-tabs-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);
gap:28px;
align-items:end;
margin-bottom:28px;
}

.complete-responsive-tabs-kicker{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(14,165,233,.12);
border:1px solid rgba(125,211,252,.22);
color:#bae6fd;
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.complete-responsive-tabs-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#38bdf8;
box-shadow:0 0 0 4px rgba(56,189,248,.12),0 0 24px rgba(56,189,248,.48);
}

.complete-responsive-tabs-title{
margin:0;
font-size:clamp(36px,5vw,68px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#ffffff;
}

.complete-responsive-tabs-title span{
background:linear-gradient(90deg,#38bdf8,#34d399,#c084fc);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.complete-responsive-tabs-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.complete-responsive-tabs-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:20px;
padding:10px;
border-radius:26px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.complete-responsive-tabs-btn{
cursor:pointer;
border:1px solid rgba(255,255,255,.10);
border-radius:20px;
padding:16px 14px;
background:rgba(255,255,255,.055);
color:#cbd5e1;
font-size:14px;
font-weight:950;
line-height:1.2;
text-align:left;
transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.complete-responsive-tabs-btn:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.10);
color:#ffffff;
}

.complete-responsive-tabs-btn.is-active{
background:linear-gradient(135deg,#0284c7,#16a34a,#7c3aed);
border-color:transparent;
color:#ffffff;
box-shadow:0 18px 44px rgba(14,165,233,.22);
}

.complete-responsive-tabs-panel{
display:none;
}

.complete-responsive-tabs-panel.is-active{
display:grid;
grid-template-columns:.88fr 1.12fr;
gap:20px;
align-items:stretch;
}

.complete-responsive-tabs-content{
display:flex;
flex-direction:column;
justify-content:center;
padding:28px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.18);
box-shadow:0 26px 80px rgba(0,0,0,.22);
}

.complete-responsive-tabs-label{
display:inline-flex;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#bae6fd;
font-size:13px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.complete-responsive-tabs-content h3{
margin:0 0 12px;
font-size:clamp(30px,4vw,46px);
line-height:1.05;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff;
}

.complete-responsive-tabs-content p{
margin:0 0 22px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.complete-responsive-tabs-feature-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-bottom:22px;
}

.complete-responsive-tabs-feature{
padding:16px;
border-radius:20px;
background:rgba(2,6,23,.34);
border:1px solid rgba(148,163,184,.14);
}

.complete-responsive-tabs-feature strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:15px;
font-weight:950;
}

.complete-responsive-tabs-feature span{
display:block;
color:#94a3b8;
font-size:13px;
line-height:1.5;
font-weight:750;
}

.complete-responsive-tabs-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.complete-responsive-tabs-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:12px 17px;
border-radius:999px;
font-size:14px;
font-weight:950;
line-height:1.2;
text-decoration:none;
}

.complete-responsive-tabs-cta.primary{
background:linear-gradient(135deg,#38bdf8,#34d399);
color:#04111f;
box-shadow:0 18px 38px rgba(56,189,248,.20);
}

.complete-responsive-tabs-cta.secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
}

.complete-responsive-tabs-visual{
position:relative;
overflow:hidden;
min-height:520px;
border-radius:32px;
background:#0f172a;
border:1px solid rgba(148,163,184,.18);
box-shadow:0 30px 90px rgba(0,0,0,.32);
}

.complete-responsive-tabs-browser{
height:58px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:0 20px;
border-bottom:1px solid rgba(148,163,184,.16);
background:#111827;
}

.complete-responsive-tabs-dots{
display:flex;
gap:8px;
}

.complete-responsive-tabs-dots span{
width:10px;
height:10px;
border-radius:999px;
background:#ef4444;
}

.complete-responsive-tabs-dots span:nth-child(2){
background:#f59e0b;
}

.complete-responsive-tabs-dots span:nth-child(3){
background:#22c55e;
}

.complete-responsive-tabs-url{
flex:1;
max-width:360px;
height:32px;
border-radius:999px;
background:#020617;
border:1px solid rgba(148,163,184,.14);
}

.complete-responsive-tabs-ui{
display:grid;
grid-template-columns:1fr .72fr;
gap:16px;
padding:20px;
}

.complete-responsive-tabs-hero-card{
min-height:210px;
border-radius:28px;
background:
radial-gradient(circle at 28% 20%,rgba(255,255,255,.18),transparent 34%),
linear-gradient(135deg,#0284c7,#7c3aed);
box-shadow:0 26px 70px rgba(2,132,199,.22);
}

.complete-responsive-tabs-side-stack{
display:grid;
gap:14px;
}

.complete-responsive-tabs-side-card{
min-height:98px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.14);
}

.complete-responsive-tabs-wide-card{
grid-column:1/-1;
min-height:150px;
border-radius:28px;
background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 30%),
rgba(255,255,255,.08);
border:1px solid rgba(148,163,184,.14);
}

.complete-responsive-tabs-metrics{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
padding:0 20px 20px;
}

.complete-responsive-tabs-metric{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(148,163,184,.14);
}

.complete-responsive-tabs-metric span{
display:block;
margin-bottom:6px;
color:#94a3b8;
font-size:12px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}

.complete-responsive-tabs-metric strong{
display:block;
color:#ffffff;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.045em;
}

@media (max-width:960px){
.complete-responsive-tabs-header{
grid-template-columns:1fr;
gap:14px;
}

.complete-responsive-tabs-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.complete-responsive-tabs-panel.is-active{
grid-template-columns:1fr;
}

.complete-responsive-tabs-visual{
min-height:460px;
}
}

@media (max-width:640px){
.complete-responsive-tabs{
padding:22px;
border-radius:28px;
}

.complete-responsive-tabs-title{
font-size:38px;
}

.complete-responsive-tabs-nav{
grid-template-columns:1fr;
}

.complete-responsive-tabs-feature-grid,
.complete-responsive-tabs-ui,
.complete-responsive-tabs-metrics{
grid-template-columns:1fr;
}

.complete-responsive-tabs-content{
padding:22px;
}

.complete-responsive-tabs-visual{
min-height:520px;
}

.complete-responsive-tabs-actions{
flex-direction:column;
}

.complete-responsive-tabs-cta{
width:100%;
}
}

JavaScript

document.querySelectorAll(".complete-responsive-tabs-demo").forEach(function(tabBlock){
const buttons=tabBlock.querySelectorAll(".complete-responsive-tabs-btn");
const panels=tabBlock.querySelectorAll(".complete-responsive-tabs-panel");

buttons.forEach(function(button){
button.addEventListener("click",function(){
const target=button.getAttribute("data-tab");

buttons.forEach(function(btn){
btn.classList.remove("is-active");
});

panels.forEach(function(panel){
panel.classList.remove("is-active");
});

button.classList.add("is-active");
tabBlock.querySelector('[data-panel="'+target+'"]').classList.add("is-active");
});
});
});

This complete responsive tabs section is a practical final example because it combines structure, design, content, responsiveness, and interaction in one reusable block. It can be adapted for product features, services, workflows, support sections, and landing page content.

Recommended hosting for WordPress websites

Build faster WordPress websites with managed hosting

If you are creating modern CSS tabs, UI components, landing pages, and code-heavy blog content, fast hosting can make a real difference for performance, user experience, and SEO.

Visit Kinsta
Kinsta managed WordPress hosting

CSS Tabs Best Practices

Modern CSS tabs can make a website cleaner, faster to scan, and easier to use, but only when the content structure makes sense. A tab section should help the visitor compare or switch between related information. If the panels are unrelated, a normal page section, card grid, accordion, or navigation menu may be easier to understand.

The best tab interfaces usually have short labels, obvious active states, readable content panels, responsive behavior, and a clear purpose. When tabs are used for product details, feature groups, dashboard panels, documentation topics, or pricing information, they should reduce confusion instead of hiding important details.

01

Use tabs for related content only

Tabs work best when every panel belongs to the same topic, product, feature group, or user task. Do not use tabs to hide random sections that should be visible on the page.

02

Keep tab labels short

Short labels like Overview, Features, Pricing, Reviews, Specs, or Support are easier to scan. Long labels can make the tab row crowded, especially on mobile screens.

03

Make the active tab obvious

The selected tab should look clearly different from inactive tabs. Use stronger color, contrast, background, border, or shadow so users always know which panel is open.

04

Design for mobile first

On small screens, tabs may need to stack vertically, become horizontally scrollable, or turn into an accordion-like layout. Never force many tiny tabs into one narrow row.

For larger website structures, tabs should also match the rest of your design system. Use similar spacing, border radius, typography, button styles, and color logic across your components. If your site already uses modern CSS cards, CSS buttons, and CSS layouts, your tab UI should feel like part of the same visual language.

Accessibility Tips for Tab Interfaces

Accessibility is one of the most important parts of a real tab interface. A tab section should not only look good with CSS. It should also be understandable for keyboard users, screen readers, and people who use assistive technology. This is especially important for product tabs, documentation tabs, dashboard tabs, pricing tabs, and settings tabs where important content may be hidden inside panels.

For simple visual sections, a lightweight JavaScript solution can be enough. For production UI components, it is better to include proper roles, ARIA attributes, keyboard behavior, visible focus styles, and readable fallback content.

  • Use semantic structure where possible, especially when tabs behave like a real application component.
  • Add clear active states so the selected tab is visually obvious.
  • Keep focus styles visible for keyboard users. Do not remove outlines without replacing them.
  • Support keyboard navigation for advanced JavaScript tabs, especially arrow keys, Home, and End.
  • Use ARIA carefully with role="tablist", role="tab", role="tabpanel", aria-selected, and aria-controls when building a production tab component.
  • Do not hide critical information in a tab panel if users must see it before making a decision.

The accessible JavaScript tabs example in this guide shows how a tab interface can include better keyboard support and clearer ARIA relationships. If accessibility is a priority, use that example as a stronger starting point than a purely visual tab design.

Common CSS Tabs Mistakes

Many tab sections look attractive in a screenshot but become confusing on a real website. The most common problems are weak active states, too many tab buttons, hidden SEO-critical content, poor mobile behavior, and tab labels that do not clearly explain what the user will find inside each panel.

Too many tabs in one row

If a tab row has eight, ten, or more items, it can become difficult to scan. Use fewer tabs, grouped categories, scrollable mobile tabs, or a different layout pattern.

Weak active state

Users should never need to guess which tab is open. The active tab should have clear contrast, especially on dark mode, glassmorphism, gradient, and minimal tab designs.

Bad mobile layout

A desktop tab row can break on mobile if it is not responsive. Stack the buttons, use horizontal scrolling, or simplify the tab structure for smaller screens.

Hiding important content

Tabs should organize content, not bury important information. If users must know something before buying, signing up, or contacting you, make it easy to find.

Another mistake is using tabs when accordions would be better. Tabs are good for switching between parallel content panels, while accordions are often better for FAQ sections, long mobile content, and vertically stacked answers. For more examples, see our guide to modern CSS accordions for FAQ, product, and content toggle sections.

CSS Tabs FAQ

What are CSS tabs?

CSS tabs are UI sections that organize related content into separate panels. Users click or tap a tab button to view a different panel without leaving the current page.

Can tabs be made with CSS only?

Yes. Simple tabs can be created with hidden radio inputs, labels, and CSS selectors. CSS-only tabs are useful for lightweight demos and simple static sections, but JavaScript is often better for accessibility and advanced behavior.

Are CSS tabs good for SEO?

Tabs can be fine for SEO when the content is useful, accessible, and included in the page HTML. Avoid using tabs to hide thin, unrelated, or keyword-stuffed content. The tab content should help users understand the topic better.

Should product pages use tabs?

Product tabs can work very well for descriptions, specifications, shipping information, reviews, size guides, and FAQs. Just make sure the most important buying information is easy to see and not buried too deeply.

Are tabs better than accordions?

Tabs and accordions solve different problems. Tabs are better for switching between related panels at the same level. Accordions are better for stacked questions, long lists, and content where users may open several items.

How many tabs should a section have?

Most website sections work best with three to six tabs. If you need many more, consider grouping the content differently, using a scrollable mobile tab row, or choosing a card grid, sidebar layout, or accordion instead.

Conclusion: Build Better CSS Tabs for Modern Websites

CSS tabs are a practical UI pattern for modern websites because they help organize related content without making the page feel too long. They are useful for product pages, SaaS features, pricing sections, documentation, dashboards, blog categories, portfolio sections, settings panels, and many other website components.

The best tab designs are not only visually modern. They are also clear, responsive, accessible, and easy to understand. Before using tabs, make sure the content belongs together, the labels are short, the active state is obvious, and the mobile version remains comfortable to use.

Use the examples in this guide as starting points. You can copy the HTML, CSS, and JavaScript, then adjust the colors, spacing, typography, tab labels, and content panels to match your own website design system.

Related CSS Guides

UI Components 30 Modern CSS Accordions for Websites

FAQ, product, and content toggle examples for modern websites.

 Navigation 25 Modern CSS Navigation Menus

Responsive navbar, dropdown, mobile menu, and mega menu examples.

 Layouts 25 Modern CSS Layouts for Websites

Grid, Flexbox, container queries, dashboards, cards, and landing sections.

 Forms 30 Modern CSS Forms for Websites

Contact, login, checkout, booking, upload, and UI form examples.

 Cards 25 Modern CSS Cards for Websites

Responsive content cards, pricing cards, product cards, and UI card layouts.

 Buttons 20 Modern CSS Buttons

Hover effects, animated buttons, CTA buttons, and modern UI button styles.

Image SEO Texts

Featured image title: Modern CSS Tabs UI Examples for Websites

Featured image alt text: Futuristic website interface showing modern CSS tabs, responsive tab panels, UI cards, and glowing web design components.

Featured image description: A modern futuristic UI illustration for a CSS tabs tutorial, featuring responsive tab navigation, content panels, interface cards, and web design elements for a 2026 website design guide.

SEO Title and Meta Description

SEO title: 30 Modern CSS Tabs for Websites – Responsive Tab UI Examples

Meta description: Explore 30 modern CSS tabs for websites with responsive tab UI, product tabs, dashboard tabs, CSS-only tabs, accessible JavaScript tabs, and full HTML/CSS examples.

]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-tabs/feed/ 0 30 Modern CSS Accordions for Websites – FAQ, Product & Content Toggle Examples https://veebilehed24.ee/en/blog/css-effects/modern-css-accordions/ https://veebilehed24.ee/en/blog/css-effects/modern-css-accordions/#respond Sun, 24 May 2026 10:14:46 +0000 https://veebilehed24.ee/?p=1347 Modern CSS accordions are one of the most useful UI components for organizing website content without making a page feel too long or crowded. They let visitors open the information they need, while keeping FAQ sections, product details, pricing questions, documentation notes, and mobile content blocks clean and easy to scan.

In this guide, you will find 30 modern CSS accordion examples built with HTML and CSS. Most examples use simple, accessible markup with <details> and <summary>, while a few advanced accordion patterns include a small JavaScript snippet when it improves the interaction.

Each example includes a live preview, visible HTML code, visible CSS code, and a short explanation, so you can copy, customize, and reuse the accordion design in your own website, WordPress theme, landing page, product page, support center, or client project.

Table of Contents

Kinsta hosting

What Is a CSS Accordion?

A CSS accordion is a content toggle component where a user clicks or taps a title to open hidden content. The closed state keeps the page compact, while the open state reveals more details only when the visitor wants to read them.

Accordions are commonly used for FAQ answers, product information, specifications, pricing questions, documentation sections, mobile filters, support pages, and dashboard settings. They are especially useful when a page has many related pieces of content that do not all need to be visible at the same time.

Many modern CSS accordions can be built with native HTML using <details> and <summary>. This keeps the content inside the HTML, makes the component easier to understand, and allows the basic open-and-close behavior to work without a large JavaScript library.

Why Use CSS Accordions?

CSS accordions are useful because they make long content easier to scan. Instead of showing every answer, detail, or setting at once, an accordion lets users choose the section they want to open.

  • They save vertical space on long pages and mobile layouts.
  • They make FAQ sections easier to read by showing questions first.
  • They organize product information such as descriptions, specifications, shipping, warranty, and returns.
  • They work well for documentation where users may only need one answer at a time.
  • They help mobile users navigate filters, settings, and grouped content more comfortably.

The best accordion designs do not hide important conversion content. They are most useful for supporting details, optional explanations, repeated questions, and grouped information.

Where to Use Accordions

Accordions can be used in many parts of a modern website, but they work best when the user expects expandable information. A good accordion should make content easier to understand, not harder to find.

  • FAQ sections: answer common customer questions in a compact layout.
  • Product pages: organize descriptions, specifications, shipping, warranty, and returns.
  • Pricing pages: explain billing, cancellation, invoices, upgrades, and plan limits.
  • Documentation pages: group setup steps, troubleshooting notes, and technical explanations.
  • Support centers: create clean help sections for common topics.
  • Mobile filters: keep category, price, size, color, and brand filters compact.
  • Dashboard settings: separate account, notifications, privacy, billing, and security options.
  • Landing pages: show extra feature details without making the main layout too heavy.

Below you will find 30 accordion patterns for different website sections and UI needs, from simple FAQ accordions to product accordions, mobile filters, sidebar menus, dashboard settings, animated accordions, and complete responsive accordion sections.

30 Modern CSS Accordion Examples

The following examples show practical accordion patterns for modern websites. Each example includes a live preview and visible HTML/CSS code, so you can copy the structure, adjust the styling, and reuse the pattern in your own website, WordPress theme, landing page, product page, documentation page, support center, or client project.

Most accordion examples use only HTML and CSS. If an example needs extra behavior, such as allowing only one item to stay open at a time or animating dynamic height more smoothly, it may include a small JavaScript snippet.

1. Modern FAQ Accordion

A modern FAQ accordion is one of the most common ways to display questions and answers on a website. It helps visitors scan the most important questions quickly and open only the answers they need.

This example uses native <details> and <summary> elements, which makes the accordion simple, lightweight, and easy to reuse. The design includes rounded cards, soft shadows, clear spacing, and a clean open state.

  • Perfect for FAQ sections, service pages, landing pages, and support pages
  • Uses native HTML accordion behavior with <details> and <summary>
  • Includes modern card styling, hover states, and open-state styling
  • Works without JavaScript
  • Responsive and easy to customize
FAQ Accordion

Frequently asked questions

Use this modern FAQ accordion to keep important answers organized, readable, and easy to scan on every screen size.

Can I use this accordion without JavaScript?

Yes. This example uses native details and summary elements, so the open and close behavior works without any JavaScript.

Is this accordion responsive?

Yes. The layout uses flexible widths, readable spacing, and mobile-friendly padding, so it adapts well to smaller screens.

Can I change the colors and spacing?

You can customize the background, border, shadow, text colors, icon style, spacing, and border radius to match your website design.

Where should I use this FAQ accordion?

This pattern works well on landing pages, service pages, support pages, product pages, pricing pages, and blog posts with common questions.

HTML

<section class="modern-faq-accordion">

  <div class="modern-faq-header">
    <div class="modern-faq-kicker">FAQ Accordion</div>
    <h3 class="modern-faq-title">Frequently asked questions</h3>
    <p class="modern-faq-text">Use this modern FAQ accordion to keep important answers organized, readable, and easy to scan on every screen size.</p>
  </div>

  <div class="modern-faq-list">

    <details class="modern-faq-item" open>
      <summary>Can I use this accordion without JavaScript?</summary>
      <div class="modern-faq-answer">
        <p>Yes. This example uses native details and summary elements, so the open and close behavior works without any JavaScript.</p>
      </div>
    </details>

    <details class="modern-faq-item">
      <summary>Is this accordion responsive?</summary>
      <div class="modern-faq-answer">
        <p>Yes. The layout uses flexible widths, readable spacing, and mobile-friendly padding, so it adapts well to smaller screens.</p>
      </div>
    </details>

    <details class="modern-faq-item">
      <summary>Can I change the colors and spacing?</summary>
      <div class="modern-faq-answer">
        <p>You can customize the background, border, shadow, text colors, icon style, spacing, and border radius to match your website design.</p>
      </div>
    </details>

    <details class="modern-faq-item">
      <summary>Where should I use this FAQ accordion?</summary>
      <div class="modern-faq-answer">
        <p>This pattern works well on landing pages, service pages, support pages, product pages, pricing pages, and blog posts with common questions.</p>
      </div>
    </details>

  </div>

</section>

CSS

.modern-faq-accordion{
width:min(100%,780px);
}

.modern-faq-header{
margin-bottom:24px;
text-align:center;
}

.modern-faq-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.modern-faq-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,52px);
line-height:1.02;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.modern-faq-text{
max-width:620px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#475569;
}

.modern-faq-list{
display:grid;
gap:14px;
}

.modern-faq-item{
border-radius:20px;
background:rgba(255,255,255,.92);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 44px rgba(15,23,42,.08);
overflow:hidden;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.modern-faq-item:hover{
transform:translateY(-2px);
box-shadow:0 24px 56px rgba(15,23,42,.12);
border-color:rgba(37,99,235,.22);
}

.modern-faq-item[open]{
border-color:rgba(37,99,235,.32);
box-shadow:0 24px 60px rgba(37,99,235,.13);
}

.modern-faq-item summary{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 22px;
cursor:pointer;
font-size:17px;
font-weight:900;
line-height:1.35;
color:#0f172a;
list-style:none;
}

.modern-faq-item summary::-webkit-details-marker{
display:none;
}

.modern-faq-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#eff6ff;
color:#2563eb;
font-size:24px;
font-weight:800;
line-height:1;
transition:transform .22s ease, background .22s ease, color .22s ease;
}

.modern-faq-item[open] summary::after{
content:"−";
background:#2563eb;
color:#ffffff;
transform:rotate(180deg);
}

.modern-faq-answer{
padding:0 22px 22px;
}

.modern-faq-answer p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 640px){
.modern-faq-title{
font-size:34px;
}

.modern-faq-item summary{
padding:18px;
font-size:16px;
}

.modern-faq-answer{
padding:0 18px 18px;
}
}

This modern FAQ accordion is a strong starting point for most websites because it is simple, readable, and lightweight. Since the content stays in the HTML, it is also practical for real FAQ pages, support sections, and SEO-friendly content blocks.

2. Minimal CSS Accordion

A minimal CSS accordion is useful when you want expandable content without heavy visual effects. It keeps the design clean and lets the text remain the main focus.

This example uses thin borders, simple typography, subtle spacing, and a lightweight open state. It is a good choice for documentation pages, clean blogs, help articles, and minimalist website sections.

  • Perfect for clean websites, documentation pages, help pages, and simple content sections
  • Uses native <details> and <summary> elements
  • Minimal visual style with thin borders and calm spacing
  • No JavaScript required
  • Easy to adapt to light or dark website designs

Minimal Accordion

Simple answers, clean layout

Use this minimal accordion when the design should feel calm, readable, and focused on the content.

What makes this accordion minimal?

It uses simple borders, clear typography, calm spacing, and a small icon indicator instead of heavy shadows, gradients, or decorative effects.

Does this accordion need JavaScript?

No. The example uses native HTML details and summary elements, so the basic accordion behavior works automatically.

Where does this style work best?

This style works well for documentation pages, help articles, clean blog layouts, product notes, and simple FAQ sections.

Can I use this on a WordPress page?

Yes. You can place the HTML and CSS inside a custom HTML block, theme template, reusable block, or custom WordPress component.

HTML

<section class="minimal-css-accordion">

  <div class="minimal-css-accordion-header">
    <p class="minimal-css-accordion-label">Minimal Accordion</p>
    <h3 class="minimal-css-accordion-title">Simple answers, clean layout</h3>
    <p class="minimal-css-accordion-intro">Use this minimal accordion when the design should feel calm, readable, and focused on the content.</p>
  </div>

  <div class="minimal-css-accordion-list">

    <details class="minimal-css-accordion-item" open>
      <summary>What makes this accordion minimal?</summary>
      <div class="minimal-css-accordion-content">
        <p>It uses simple borders, clear typography, calm spacing, and a small icon indicator instead of heavy shadows, gradients, or decorative effects.</p>
      </div>
    </details>

    <details class="minimal-css-accordion-item">
      <summary>Does this accordion need JavaScript?</summary>
      <div class="minimal-css-accordion-content">
        <p>No. The example uses native HTML details and summary elements, so the basic accordion behavior works automatically.</p>
      </div>
    </details>

    <details class="minimal-css-accordion-item">
      <summary>Where does this style work best?</summary>
      <div class="minimal-css-accordion-content">
        <p>This style works well for documentation pages, help articles, clean blog layouts, product notes, and simple FAQ sections.</p>
      </div>
    </details>

    <details class="minimal-css-accordion-item">
      <summary>Can I use this on a WordPress page?</summary>
      <div class="minimal-css-accordion-content">
        <p>Yes. You can place the HTML and CSS inside a custom HTML block, theme template, reusable block, or custom WordPress component.</p>
      </div>
    </details>

  </div>

</section>

CSS

.minimal-css-accordion{
width:min(100%,760px);
padding:34px;
border-radius:28px;
background:#ffffff;
border:1px solid #e5e7eb;
box-shadow:0 20px 60px rgba(15,23,42,.08);
}

.minimal-css-accordion-header{
margin-bottom:22px;
}

.minimal-css-accordion-label{
margin:0 0 10px;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#64748b;
}

.minimal-css-accordion-title{
margin:0 0 10px;
font-size:clamp(30px,4.5vw,46px);
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
color:#111827;
}

.minimal-css-accordion-intro{
margin:0;
max-width:620px;
font-size:16px;
line-height:1.75;
color:#4b5563;
}

.minimal-css-accordion-list{
border-top:1px solid #e5e7eb;
}

.minimal-css-accordion-item{
border-bottom:1px solid #e5e7eb;
}

.minimal-css-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 0;
cursor:pointer;
list-style:none;
font-size:17px;
font-weight:850;
line-height:1.4;
color:#111827;
transition:color .2s ease;
}

.minimal-css-accordion-item summary::-webkit-details-marker{
display:none;
}

.minimal-css-accordion-item summary:hover{
color:#2563eb;
}

.minimal-css-accordion-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:28px;
height:28px;
border-radius:999px;
border:1px solid #d1d5db;
color:#111827;
font-size:20px;
font-weight:700;
line-height:1;
transition:transform .2s ease, border-color .2s ease, color .2s ease;
}

.minimal-css-accordion-item[open] summary{
color:#2563eb;
}

.minimal-css-accordion-item[open] summary::after{
content:"−";
border-color:#2563eb;
color:#2563eb;
transform:rotate(180deg);
}

.minimal-css-accordion-content{
padding:0 0 20px;
}

.minimal-css-accordion-content p{
margin:0;
max-width:620px;
font-size:15px;
line-height:1.75;
color:#4b5563;
}

@media (max-width: 640px){
.minimal-css-accordion{
padding:24px;
border-radius:22px;
}

.minimal-css-accordion-title{
font-size:32px;
}

.minimal-css-accordion-item summary{
padding:18px 0;
font-size:16px;
}
}

This minimal CSS accordion works best when the surrounding website design is already clean and you do not want the accordion to dominate the page. It keeps the content accessible and easy to read while still giving users a clear open-and-close interaction.

3. Card Style Accordion

A card style accordion gives each expandable item its own visual container. This makes the accordion feel more like a set of modern content cards instead of a simple list.

This example uses rounded cards, soft shadows, subtle gradients, and clear spacing. It works well for service details, feature explanations, FAQ blocks, product information, and homepage content sections.

  • Perfect for feature sections, service pages, product pages, and modern FAQ blocks
  • Each accordion item is styled as a separate card
  • Includes soft shadows, rounded corners, and clear open states
  • Uses native <details> and <summary>
  • Works without JavaScript
Card Accordion

Organized content cards

Use this style when each accordion item should feel like a separate content block.

01 Plan the content structure Group related information before designing the UI.

A card style accordion works best when every item has a clear topic. Use short titles, helpful subtitles, and concise content inside each open panel.

02 Keep the layout easy to scan Use spacing, shadows, and hierarchy carefully.

Separate cards help visitors understand where one topic ends and the next begins. This is useful for service details, feature lists, and FAQ blocks.

03 Make the open state obvious Use a stronger border, icon change, or background shift.

The open state should feel visually different from the closed state. This helps users understand which accordion item they are currently reading.

HTML

<section class="card-style-accordion">

  <div class="card-style-accordion-head">

    <div>
      <div class="card-style-accordion-label">Card Accordion</div>
      <h3 class="card-style-accordion-title">Organized content cards</h3>
    </div>

    <p class="card-style-accordion-intro">Use this style when each accordion item should feel like a separate content block.</p>

  </div>

  <div class="card-style-accordion-grid">

    <details class="card-style-accordion-item" open>
      <summary>
        <span class="card-style-accordion-icon">01</span>
        <span class="card-style-accordion-summary-text">
          <strong>Plan the content structure</strong>
          <span>Group related information before designing the UI.</span>
        </span>
        <span class="card-style-accordion-toggle"></span>
      </summary>
      <div class="card-style-accordion-content">
        <p>A card style accordion works best when every item has a clear topic. Use short titles, helpful subtitles, and concise content inside each open panel.</p>
      </div>
    </details>

    <details class="card-style-accordion-item">
      <summary>
        <span class="card-style-accordion-icon">02</span>
        <span class="card-style-accordion-summary-text">
          <strong>Keep the layout easy to scan</strong>
          <span>Use spacing, shadows, and hierarchy carefully.</span>
        </span>
        <span class="card-style-accordion-toggle"></span>
      </summary>
      <div class="card-style-accordion-content">
        <p>Separate cards help visitors understand where one topic ends and the next begins. This is useful for service details, feature lists, and FAQ blocks.</p>
      </div>
    </details>

    <details class="card-style-accordion-item">
      <summary>
        <span class="card-style-accordion-icon">03</span>
        <span class="card-style-accordion-summary-text">
          <strong>Make the open state obvious</strong>
          <span>Use a stronger border, icon change, or background shift.</span>
        </span>
        <span class="card-style-accordion-toggle"></span>
      </summary>
      <div class="card-style-accordion-content">
        <p>The open state should feel visually different from the closed state. This helps users understand which accordion item they are currently reading.</p>
      </div>
    </details>

  </div>

</section>

CSS

.card-style-accordion{
width:min(100%,820px);
}

.card-style-accordion-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:end;
margin-bottom:24px;
}

.card-style-accordion-label{
display:inline-flex;
align-items:center;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.card-style-accordion-title{
margin:0;
font-size:clamp(32px,5vw,54px);
line-height:1.02;
font-weight:950;
letter-spacing:-.055em;
color:#0f172a;
}

.card-style-accordion-intro{
margin:0;
max-width:300px;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.card-style-accordion-grid{
display:grid;
gap:16px;
}

.card-style-accordion-item{
position:relative;
overflow:hidden;
border-radius:24px;
background:rgba(255,255,255,.92);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.09);
transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.card-style-accordion-item::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:5px;
background:linear-gradient(180deg,#0ea5e9,#8b5cf6);
opacity:.55;
transition:opacity .24s ease;
}

.card-style-accordion-item:hover{
transform:translateY(-3px);
box-shadow:0 28px 70px rgba(15,23,42,.14);
border-color:rgba(14,165,233,.24);
}

.card-style-accordion-item[open]{
box-shadow:0 30px 76px rgba(14,165,233,.16);
border-color:rgba(14,165,233,.32);
}

.card-style-accordion-item[open]::before{
opacity:1;
}

.card-style-accordion-item summary{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:16px;
align-items:center;
padding:22px 24px 22px 26px;
cursor:pointer;
list-style:none;
}

.card-style-accordion-item summary::-webkit-details-marker{
display:none;
}

.card-style-accordion-icon{
display:grid;
place-items:center;
width:48px;
height:48px;
border-radius:18px;
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
color:#ffffff;
font-size:22px;
font-weight:900;
box-shadow:0 14px 34px rgba(14,165,233,.20);
}

.card-style-accordion-summary-text strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.card-style-accordion-summary-text span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:700;
color:#64748b;
}

.card-style-accordion-toggle{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:999px;
background:#f1f5f9;
color:#0f172a;
font-size:22px;
font-weight:800;
transition:transform .24s ease, background .24s ease, color .24s ease;
}

.card-style-accordion-toggle::before{
content:"+";
}

.card-style-accordion-item[open] .card-style-accordion-toggle{
background:#0ea5e9;
color:#ffffff;
transform:rotate(180deg);
}

.card-style-accordion-item[open] .card-style-accordion-toggle::before{
content:"−";
}

.card-style-accordion-content{
padding:0 24px 24px 90px;
}

.card-style-accordion-content p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 720px){
.card-style-accordion-head{
grid-template-columns:1fr;
gap:12px;
}

.card-style-accordion-intro{
max-width:none;
}

.card-style-accordion-item summary{
grid-template-columns:auto minmax(0,1fr);
padding:20px;
}

.card-style-accordion-toggle{
grid-column:2;
justify-self:start;
margin-top:4px;
}

.card-style-accordion-content{
padding:0 20px 20px;
}

.card-style-accordion-icon{
width:44px;
height:44px;
border-radius:16px;
}
}

This card style accordion is useful when the accordion should feel like part of a premium content section rather than a simple FAQ list. The separate card structure makes each item easier to scan and gives the component a polished, modern look.

4. Gradient Header Accordion

A gradient header accordion uses colorful header areas to make expandable content feel more visual and energetic. It is a good choice for modern landing pages, SaaS websites, creative portfolios, and feature sections.

This example uses bold gradient summary bars, dark content panels, and strong contrast. The style is more expressive than a minimal accordion, so it works best when you want the accordion to become a visible design element.

  • Perfect for SaaS pages, app landing pages, creative websites, and feature sections
  • Uses gradient accordion headers with dark content panels
  • Clear open state with icon rotation and brighter color treatment
  • Built with native <details> and <summary>
  • No JavaScript required
Gradient Accordion

Colorful content toggles

Use gradient headers when your accordion should feel bold, visual, and closely connected to a modern landing page design.

01 Design with stronger visual hierarchy Use color to make key sections stand out.

Gradient headers can help users separate content groups quickly. This is useful for landing pages, feature breakdowns, and modern product sections.

  • Strong visual separation
  • Clear open and closed states
  • Good for colorful brand systems
02 Keep the content panel readable Balance bright headers with calm body content.

When the accordion header is colorful, the open content area should usually be calmer. This keeps the section readable and prevents the design from feeling too busy.

  • Use strong contrast
  • Keep body text simple
  • Avoid too many competing colors
03 Match the gradient to your brand Use colors that fit the page identity.

You can replace the gradient colors with your own brand palette. Try to keep the text color readable and test the component on both desktop and mobile screens.

  • Customize gradient stops
  • Adjust border radius and shadows
  • Test readability before publishing

HTML

<section class="gradient-header-accordion">

  <div class="gradient-header-accordion-top">
    <div class="gradient-header-accordion-badge">Gradient Accordion</div>
    <h3 class="gradient-header-accordion-title">Colorful content <span>toggles</span></h3>
    <p class="gradient-header-accordion-text">Use gradient headers when your accordion should feel bold, visual, and closely connected to a modern landing page design.</p>
  </div>

  <div class="gradient-header-accordion-list">

    <details class="gradient-header-accordion-item" open>
      <summary>
        <span class="gradient-header-accordion-summary-inner">
          <span class="gradient-header-accordion-number">01</span>
          <span class="gradient-header-accordion-summary-copy">
            <strong>Design with stronger visual hierarchy</strong>
            <span>Use color to make key sections stand out.</span>
          </span>
        </span>
        <span class="gradient-header-accordion-arrow"></span>
      </summary>
      <div class="gradient-header-accordion-content">
        <p>Gradient headers can help users separate content groups quickly. This is useful for landing pages, feature breakdowns, and modern product sections.</p>
        <ul>
          <li>Strong visual separation</li>
          <li>Clear open and closed states</li>
          <li>Good for colorful brand systems</li>
        </ul>
      </div>
    </details>

    <details class="gradient-header-accordion-item">
      <summary>
        <span class="gradient-header-accordion-summary-inner">
          <span class="gradient-header-accordion-number">02</span>
          <span class="gradient-header-accordion-summary-copy">
            <strong>Keep the content panel readable</strong>
            <span>Balance bright headers with calm body content.</span>
          </span>
        </span>
        <span class="gradient-header-accordion-arrow"></span>
      </summary>
      <div class="gradient-header-accordion-content">
        <p>When the accordion header is colorful, the open content area should usually be calmer. This keeps the section readable and prevents the design from feeling too busy.</p>
        <ul>
          <li>Use strong contrast</li>
          <li>Keep body text simple</li>
          <li>Avoid too many competing colors</li>
        </ul>
      </div>
    </details>

    <details class="gradient-header-accordion-item">
      <summary>
        <span class="gradient-header-accordion-summary-inner">
          <span class="gradient-header-accordion-number">03</span>
          <span class="gradient-header-accordion-summary-copy">
            <strong>Match the gradient to your brand</strong>
            <span>Use colors that fit the page identity.</span>
          </span>
        </span>
        <span class="gradient-header-accordion-arrow"></span>
      </summary>
      <div class="gradient-header-accordion-content">
        <p>You can replace the gradient colors with your own brand palette. Try to keep the text color readable and test the component on both desktop and mobile screens.</p>
        <ul>
          <li>Customize gradient stops</li>
          <li>Adjust border radius and shadows</li>
          <li>Test readability before publishing</li>
        </ul>
      </div>
    </details>

  </div>

</section>

CSS

.gradient-header-accordion{
width:min(100%,820px);
}

.gradient-header-accordion-top{
margin-bottom:26px;
text-align:center;
}

.gradient-header-accordion-badge{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#fbcfe8;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.gradient-header-accordion-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,54px);
line-height:1.02;
font-weight:950;
letter-spacing:-.055em;
color:#ffffff;
}

.gradient-header-accordion-title span{
background:linear-gradient(90deg,#fb7185,#c084fc,#60a5fa);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.gradient-header-accordion-text{
max-width:640px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.gradient-header-accordion-list{
display:grid;
gap:16px;
}

.gradient-header-accordion-item{
overflow:hidden;
border-radius:24px;
background:rgba(15,23,42,.84);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.26);
}

.gradient-header-accordion-item summary{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
padding:0;
cursor:pointer;
list-style:none;
}

.gradient-header-accordion-item summary::-webkit-details-marker{
display:none;
}

.gradient-header-accordion-summary-inner{
display:flex;
align-items:center;
gap:14px;
padding:20px 22px;
background:linear-gradient(135deg,rgba(244,63,94,.95),rgba(168,85,247,.92),rgba(37,99,235,.95));
color:#ffffff;
}

.gradient-header-accordion-number{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:14px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.18);
font-size:14px;
font-weight:950;
}

.gradient-header-accordion-summary-copy strong{
display:block;
margin-bottom:3px;
font-size:18px;
line-height:1.3;
font-weight:950;
}

.gradient-header-accordion-summary-copy span{
display:block;
font-size:14px;
line-height:1.45;
font-weight:700;
color:rgba(255,255,255,.78);
}

.gradient-header-accordion-arrow{
display:grid;
place-items:center;
width:46px;
height:46px;
margin-right:18px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:24px;
font-weight:900;
transition:transform .24s ease, background .24s ease;
}

.gradient-header-accordion-arrow::before{
content:"+";
}

.gradient-header-accordion-item[open] .gradient-header-accordion-arrow{
transform:rotate(180deg);
background:rgba(255,255,255,.14);
}

.gradient-header-accordion-item[open] .gradient-header-accordion-arrow::before{
content:"−";
}

.gradient-header-accordion-content{
padding:22px;
border-top:1px solid rgba(255,255,255,.10);
background:
radial-gradient(circle at 18% 10%,rgba(168,85,247,.16),transparent 34%),
rgba(2,6,23,.45);
}

.gradient-header-accordion-content p{
margin:0;
font-size:15px;
line-height:1.8;
color:#cbd5e1;
}

.gradient-header-accordion-content ul{
display:grid;
gap:8px;
margin:16px 0 0;
padding-left:20px;
color:#cbd5e1;
font-size:14px;
line-height:1.6;
}

@media (max-width: 640px){
.gradient-header-accordion-title{
font-size:34px;
}

.gradient-header-accordion-item summary{
grid-template-columns:1fr;
}

.gradient-header-accordion-summary-inner{
padding:18px;
align-items:flex-start;
}

.gradient-header-accordion-arrow{
margin:0 0 18px 18px;
width:40px;
height:40px;
}

.gradient-header-accordion-content{
padding:18px;
}
}

This gradient header accordion works best when the accordion is part of a bold visual section. It is more decorative than a minimal FAQ accordion, so use it where color, branding, and visual impact are important.

5. Dark Mode Accordion

A dark mode accordion is useful for modern dashboards, developer tools, SaaS pages, AI tools, portfolio websites, and dark landing pages. It keeps the content compact while matching a darker visual system.

This example uses a deep background, glowing borders, high-contrast text, and a subtle neon accent. The design feels modern without making the accordion difficult to read.

  • Perfect for dark websites, dashboards, SaaS pages, AI tools, and developer documentation
  • Uses strong contrast for better readability
  • Includes neon-style accents and a clear open state
  • Built with native <details> and <summary>
  • Works without JavaScript
Dark Mode Accordion

Clean content for dark interfaces

Use this dark accordion for dashboards, software pages, developer docs, AI tools, and modern dark mode layouts.

01 Use high contrast for readable text

Dark mode accordions need strong contrast between the text and background. Use light text colors, visible borders, and clear spacing between sections.

02 Keep the glow effect subtle

Neon effects can look modern, but too much glow can reduce readability. Use glow mainly for borders, icons, focus states, and open states.

03 Use native HTML when possible

This example uses <details> and <summary>, so the basic accordion interaction works without a JavaScript library.

HTML

<section class="dark-mode-accordion">

  <div class="dark-mode-accordion-header">
    <div class="dark-mode-accordion-label">Dark Mode Accordion</div>
    <h3 class="dark-mode-accordion-title">Clean content for <span>dark interfaces</span></h3>
    <p class="dark-mode-accordion-text">Use this dark accordion for dashboards, software pages, developer docs, AI tools, and modern dark mode layouts.</p>
  </div>

  <div class="dark-mode-accordion-list">

    <details class="dark-mode-accordion-item" open>
      <summary>
        <span class="dark-mode-accordion-question">
          <span class="dark-mode-accordion-icon">01</span>
          <strong>Use high contrast for readable text</strong>
        </span>
        <span class="dark-mode-accordion-toggle"></span>
      </summary>
      <div class="dark-mode-accordion-content">
        <p>Dark mode accordions need strong contrast between the text and background. Use light text colors, visible borders, and clear spacing between sections.</p>
      </div>
    </details>

    <details class="dark-mode-accordion-item">
      <summary>
        <span class="dark-mode-accordion-question">
          <span class="dark-mode-accordion-icon">02</span>
          <strong>Keep the glow effect subtle</strong>
        </span>
        <span class="dark-mode-accordion-toggle"></span>
      </summary>
      <div class="dark-mode-accordion-content">
        <p>Neon effects can look modern, but too much glow can reduce readability. Use glow mainly for borders, icons, focus states, and open states.</p>
      </div>
    </details>

    <details class="dark-mode-accordion-item">
      <summary>
        <span class="dark-mode-accordion-question">
          <span class="dark-mode-accordion-icon">03</span>
          <strong>Use native HTML when possible</strong>
        </span>
        <span class="dark-mode-accordion-toggle"></span>
      </summary>
      <div class="dark-mode-accordion-content">
        <p>This example uses <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code>, so the basic accordion interaction works without a JavaScript library.</p>
      </div>
    </details>

  </div>

</section>

CSS

.dark-mode-accordion{
width:min(100%,820px);
}

.dark-mode-accordion-header{
margin-bottom:26px;
text-align:center;
}

.dark-mode-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(59,130,246,.14);
border:1px solid rgba(147,197,253,.20);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.dark-mode-accordion-label::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.13),0 0 24px rgba(34,197,94,.55);
}

.dark-mode-accordion-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,54px);
line-height:1.02;
font-weight:950;
letter-spacing:-.055em;
color:#ffffff;
}

.dark-mode-accordion-title span{
background:linear-gradient(90deg,#60a5fa,#c084fc,#fb7185);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.dark-mode-accordion-text{
max-width:640px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.dark-mode-accordion-list{
display:grid;
gap:14px;
}

.dark-mode-accordion-item{
overflow:hidden;
border-radius:22px;
background:rgba(15,23,42,.78);
border:1px solid rgba(148,163,184,.18);
box-shadow:0 24px 70px rgba(0,0,0,.28);
transition:border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.dark-mode-accordion-item:hover{
transform:translateY(-2px);
border-color:rgba(96,165,250,.42);
box-shadow:0 30px 82px rgba(0,0,0,.36);
}

.dark-mode-accordion-item[open]{
border-color:rgba(96,165,250,.60);
box-shadow:
0 26px 80px rgba(0,0,0,.34),
0 0 0 1px rgba(96,165,250,.18),
0 0 42px rgba(59,130,246,.16);
}

.dark-mode-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px;
cursor:pointer;
list-style:none;
}

.dark-mode-accordion-item summary::-webkit-details-marker{
display:none;
}

.dark-mode-accordion-question{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}

.dark-mode-accordion-icon{
display:grid;
place-items:center;
flex:0 0 auto;
width:42px;
height:42px;
border-radius:16px;
background:rgba(59,130,246,.14);
border:1px solid rgba(147,197,253,.20);
color:#93c5fd;
font-size:18px;
font-weight:950;
}

.dark-mode-accordion-question strong{
display:block;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#ffffff;
}

.dark-mode-accordion-toggle{
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#e2e8f0;
font-size:22px;
font-weight:800;
transition:transform .24s ease, background .24s ease, color .24s ease;
}

.dark-mode-accordion-toggle::before{
content:"+";
}

.dark-mode-accordion-item[open] .dark-mode-accordion-toggle{
background:#2563eb;
border-color:#60a5fa;
color:#ffffff;
transform:rotate(180deg);
}

.dark-mode-accordion-item[open] .dark-mode-accordion-toggle::before{
content:"−";
}

.dark-mode-accordion-content{
padding:0 22px 22px 78px;
}

.dark-mode-accordion-content p{
margin:0;
font-size:15px;
line-height:1.8;
color:#cbd5e1;
}

.dark-mode-accordion-content code{
padding:3px 6px;
border-radius:8px;
background:rgba(255,255,255,.08);
color:#bfdbfe;
}

@media (max-width: 640px){
.dark-mode-accordion-title{
font-size:34px;
}

.dark-mode-accordion-item summary{
padding:18px;
align-items:flex-start;
}

.dark-mode-accordion-question{
align-items:flex-start;
}

.dark-mode-accordion-content{
padding:0 18px 18px;
}

.dark-mode-accordion-toggle{
width:32px;
height:32px;
}
}

This dark mode accordion is useful when your website already uses a dark interface or when you want a more technical, futuristic visual style. The most important detail is contrast: the accordion should look modern, but the content still needs to be easy to read.

6. Glassmorphism Accordion

A glassmorphism accordion uses translucent panels, soft blur, light borders, and layered backgrounds to create a modern frosted-glass effect. It works well in creative, SaaS, portfolio, and futuristic landing page designs.

This example places accordion cards on top of a colorful gradient background. The frosted panels help the content stay readable while still allowing the background to feel rich and visual.

  • Perfect for modern landing pages, portfolios, SaaS websites, and creative sections
  • Uses translucent surfaces, blur, gradients, and soft borders
  • Creates a premium frosted-glass accordion style
  • Built with native <details> and <summary>
  • Works without JavaScript
Glassmorphism Accordion

Soft glass panels for modern UI

Use this frosted-glass accordion when you want a layered, premium, and futuristic content toggle design.

01 Use translucent panels carefully

Glassmorphism works best when the background has color and depth, but the content panel still has enough contrast for readable text.

02 Add blur and borders for separation

Backdrop blur, soft borders, and subtle shadows help the accordion cards stand out from the background without looking too heavy.

03 Keep the text simple and readable

Because the visual style is already decorative, the content inside the accordion should stay concise, direct, and easy to scan.

HTML

<section class="glassmorphism-accordion">

  <div class="glassmorphism-accordion-header">
    <div class="glassmorphism-accordion-label">Glassmorphism Accordion</div>
    <h3 class="glassmorphism-accordion-title">Soft glass panels for modern UI</h3>
    <p class="glassmorphism-accordion-text">Use this frosted-glass accordion when you want a layered, premium, and futuristic content toggle design.</p>
  </div>

  <div class="glassmorphism-accordion-list">

    <details class="glassmorphism-accordion-item" open>
      <summary>
        <span class="glassmorphism-accordion-question">
          <span class="glassmorphism-accordion-icon">01</span>
          <strong>Use translucent panels carefully</strong>
        </span>
        <span class="glassmorphism-accordion-toggle"></span>
      </summary>
      <div class="glassmorphism-accordion-content">
        <p>Glassmorphism works best when the background has color and depth, but the content panel still has enough contrast for readable text.</p>
      </div>
    </details>

    <details class="glassmorphism-accordion-item">
      <summary>
        <span class="glassmorphism-accordion-question">
          <span class="glassmorphism-accordion-icon">02</span>
          <strong>Add blur and borders for separation</strong>
        </span>
        <span class="glassmorphism-accordion-toggle"></span>
      </summary>
      <div class="glassmorphism-accordion-content">
        <p>Backdrop blur, soft borders, and subtle shadows help the accordion cards stand out from the background without looking too heavy.</p>
      </div>
    </details>

    <details class="glassmorphism-accordion-item">
      <summary>
        <span class="glassmorphism-accordion-question">
          <span class="glassmorphism-accordion-icon">03</span>
          <strong>Keep the text simple and readable</strong>
        </span>
        <span class="glassmorphism-accordion-toggle"></span>
      </summary>
      <div class="glassmorphism-accordion-content">
        <p>Because the visual style is already decorative, the content inside the accordion should stay concise, direct, and easy to scan.</p>
      </div>
    </details>

  </div>

</section>

CSS

.glassmorphism-accordion{
position:relative;
z-index:2;
width:min(100%,820px);
padding:28px;
border-radius:34px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 34px 110px rgba(0,0,0,.28);
backdrop-filter:blur(22px);
}

.glassmorphism-accordion-header{
margin-bottom:24px;
text-align:center;
}

.glassmorphism-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.glassmorphism-accordion-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,54px);
line-height:1.02;
font-weight:950;
letter-spacing:-.055em;
color:#ffffff;
text-shadow:0 10px 32px rgba(0,0,0,.24);
}

.glassmorphism-accordion-text{
max-width:640px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:rgba(255,255,255,.82);
}

.glassmorphism-accordion-list{
display:grid;
gap:14px;
}

.glassmorphism-accordion-item{
overflow:hidden;
border-radius:24px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 20px 60px rgba(0,0,0,.18);
backdrop-filter:blur(18px);
transition:transform .24s ease, background .24s ease, border-color .24s ease;
}

.glassmorphism-accordion-item:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.34);
}

.glassmorphism-accordion-item[open]{
background:rgba(255,255,255,.20);
border-color:rgba(255,255,255,.42);
}

.glassmorphism-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px;
cursor:pointer;
list-style:none;
}

.glassmorphism-accordion-item summary::-webkit-details-marker{
display:none;
}

.glassmorphism-accordion-question{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}

.glassmorphism-accordion-icon{
display:grid;
place-items:center;
flex:0 0 auto;
width:44px;
height:44px;
border-radius:16px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.25);
color:#ffffff;
font-size:18px;
font-weight:950;
}

.glassmorphism-accordion-question strong{
display:block;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#ffffff;
}

.glassmorphism-accordion-toggle{
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:22px;
font-weight:800;
transition:transform .24s ease, background .24s ease;
}

.glassmorphism-accordion-toggle::before{
content:"+";
}

.glassmorphism-accordion-item[open] .glassmorphism-accordion-toggle{
transform:rotate(180deg);
background:rgba(255,255,255,.28);
}

.glassmorphism-accordion-item[open] .glassmorphism-accordion-toggle::before{
content:"−";
}

.glassmorphism-accordion-content{
padding:0 22px 22px 80px;
}

.glassmorphism-accordion-content p{
margin:0;
font-size:15px;
line-height:1.8;
color:rgba(255,255,255,.82);
}

@media (max-width: 640px){
.glassmorphism-accordion{
padding:20px;
border-radius:26px;
}

.glassmorphism-accordion-title{
font-size:34px;
}

.glassmorphism-accordion-item summary{
padding:18px;
align-items:flex-start;
}

.glassmorphism-accordion-question{
align-items:flex-start;
}

.glassmorphism-accordion-content{
padding:0 18px 18px;
}
}

This glassmorphism accordion is best for pages where the design should feel premium, layered, and visual. Keep the background colorful but controlled, and always test the text contrast before using this style in production.

7. Neumorphism Accordion

A neumorphism accordion uses soft shadows, rounded shapes, and subtle depth to create a smooth interface style. It works best on light backgrounds where the shadows can create a gentle raised or pressed effect.

This example uses a soft gray surface, rounded accordion rows, inset-style open content, and calm spacing. It is useful for app-like interfaces, settings panels, profile pages, and clean product sections.

  • Perfect for app UI, profile settings, soft landing pages, and dashboard sections
  • Uses soft shadows and rounded surfaces
  • Creates a calm raised-card effect
  • Built with native <details> and <summary>
  • Works without JavaScript
Neumorphism Accordion

Soft depth for calm interfaces

Use this accordion style when you want a gentle app-like interface with soft shadows and smooth rounded surfaces.

01 Use soft shadows for depth Raised surfaces make the accordion feel tactile.

Neumorphism depends on subtle light and dark shadows. Keep the background close to the card color so the raised effect feels smooth.

02 Keep contrast readable Soft UI still needs clear text hierarchy.

Because neumorphism uses low-contrast surfaces, the text should be darker and easier to read than the surrounding interface.

03 Use it for smaller UI sections This style works best in focused components.

Neumorphism can feel heavy if used everywhere. Use it for cards, settings panels, profile blocks, or selected content sections.

HTML

<section class="neumorphism-accordion">

  <div class="neumorphism-accordion-header">
    <div class="neumorphism-accordion-label">Neumorphism Accordion</div>
    <h3 class="neumorphism-accordion-title">Soft depth for calm interfaces</h3>
    <p class="neumorphism-accordion-text">Use this accordion style when you want a gentle app-like interface with soft shadows and smooth rounded surfaces.</p>
  </div>

  <div class="neumorphism-accordion-list">

    <details class="neumorphism-accordion-item" open>
      <summary>
        <span class="neumorphism-accordion-question">
          <span class="neumorphism-accordion-icon">01</span>
          <span>
            <strong>Use soft shadows for depth</strong>
            <span>Raised surfaces make the accordion feel tactile.</span>
          </span>
        </span>
        <span class="neumorphism-accordion-toggle"></span>
      </summary>
      <div class="neumorphism-accordion-content">
        <p>Neumorphism depends on subtle light and dark shadows. Keep the background close to the card color so the raised effect feels smooth.</p>
      </div>
    </details>

    <details class="neumorphism-accordion-item">
      <summary>
        <span class="neumorphism-accordion-question">
          <span class="neumorphism-accordion-icon">02</span>
          <span>
            <strong>Keep contrast readable</strong>
            <span>Soft UI still needs clear text hierarchy.</span>
          </span>
        </span>
        <span class="neumorphism-accordion-toggle"></span>
      </summary>
      <div class="neumorphism-accordion-content">
        <p>Because neumorphism uses low-contrast surfaces, the text should be darker and easier to read than the surrounding interface.</p>
      </div>
    </details>

    <details class="neumorphism-accordion-item">
      <summary>
        <span class="neumorphism-accordion-question">
          <span class="neumorphism-accordion-icon">03</span>
          <span>
            <strong>Use it for smaller UI sections</strong>
            <span>This style works best in focused components.</span>
          </span>
        </span>
        <span class="neumorphism-accordion-toggle"></span>
      </summary>
      <div class="neumorphism-accordion-content">
        <p>Neumorphism can feel heavy if used everywhere. Use it for cards, settings panels, profile blocks, or selected content sections.</p>
      </div>
    </details>

  </div>

</section>

CSS

.neumorphism-accordion{
width:min(100%,800px);
padding:30px;
border-radius:34px;
background:#eef2f7;
box-shadow:
18px 18px 44px rgba(148,163,184,.45),
-18px -18px 44px rgba(255,255,255,.86);
}

.neumorphism-accordion-header{
margin-bottom:26px;
text-align:center;
}

.neumorphism-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 13px;
border-radius:999px;
background:#eef2f7;
box-shadow:
7px 7px 16px rgba(148,163,184,.34),
-7px -7px 16px rgba(255,255,255,.86);
color:#475569;
font-size:13px;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
}

.neumorphism-accordion-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,52px);
line-height:1.04;
font-weight:950;
letter-spacing:-.055em;
color:#172033;
}

.neumorphism-accordion-text{
max-width:620px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.neumorphism-accordion-list{
display:grid;
gap:18px;
}

.neumorphism-accordion-item{
border-radius:24px;
background:#eef2f7;
box-shadow:
10px 10px 24px rgba(148,163,184,.35),
-10px -10px 24px rgba(255,255,255,.88);
overflow:hidden;
transition:box-shadow .24s ease, transform .24s ease;
}

.neumorphism-accordion-item:hover{
transform:translateY(-2px);
box-shadow:
14px 14px 32px rgba(148,163,184,.40),
-14px -14px 32px rgba(255,255,255,.90);
}

.neumorphism-accordion-item[open]{
box-shadow:
inset 8px 8px 18px rgba(148,163,184,.30),
inset -8px -8px 18px rgba(255,255,255,.78);
}

.neumorphism-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px;
cursor:pointer;
list-style:none;
}

.neumorphism-accordion-item summary::-webkit-details-marker{
display:none;
}

.neumorphism-accordion-question{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}

.neumorphism-accordion-icon{
display:grid;
place-items:center;
flex:0 0 auto;
width:46px;
height:46px;
border-radius:18px;
background:#eef2f7;
box-shadow:
6px 6px 14px rgba(148,163,184,.34),
-6px -6px 14px rgba(255,255,255,.86);
color:#2563eb;
font-size:18px;
font-weight:950;
}

.neumorphism-accordion-question strong{
display:block;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#172033;
}

.neumorphism-accordion-question span{
display:block;
margin-top:3px;
font-size:14px;
line-height:1.5;
font-weight:700;
color:#64748b;
}

.neumorphism-accordion-toggle{
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#eef2f7;
box-shadow:
5px 5px 12px rgba(148,163,184,.34),
-5px -5px 12px rgba(255,255,255,.88);
color:#172033;
font-size:22px;
font-weight:800;
transition:transform .24s ease, color .24s ease, box-shadow .24s ease;
}

.neumorphism-accordion-toggle::before{
content:"+";
}

.neumorphism-accordion-item[open] .neumorphism-accordion-toggle{
transform:rotate(180deg);
color:#2563eb;
box-shadow:
inset 4px 4px 9px rgba(148,163,184,.34),
inset -4px -4px 9px rgba(255,255,255,.82);
}

.neumorphism-accordion-item[open] .neumorphism-accordion-toggle::before{
content:"−";
}

.neumorphism-accordion-content{
padding:0 22px 22px 82px;
}

.neumorphism-accordion-content p{
margin:0;
font-size:15px;
line-height:1.75;
color:#64748b;
}

@media (max-width: 640px){
.neumorphism-accordion{
padding:22px;
border-radius:26px;
}

.neumorphism-accordion-title{
font-size:34px;
}

.neumorphism-accordion-item summary{
padding:18px;
align-items:flex-start;
}

.neumorphism-accordion-question{
align-items:flex-start;
}

.neumorphism-accordion-content{
padding:0 18px 18px;
}
}

This neumorphism accordion is best for soft, app-like interfaces where the visual style should feel calm and tactile. Use it carefully, because neumorphism needs enough contrast to remain readable and accessible.

8. Icon Accordion

An icon accordion uses small visual symbols to help users understand each expandable item faster. Icons can make feature lists, onboarding sections, service benefits, and product explanations easier to scan.

This example uses colorful icon blocks, clean accordion cards, and a clear open state. The icons are simple text symbols, so the demo does not need external icon libraries or image files.

  • Perfect for feature lists, service benefits, onboarding sections, and product explanations
  • Uses simple built-in icon symbols without external libraries
  • Includes colorful icon blocks and a clean open state
  • Built with native <details> and <summary>
  • Works without JavaScript
Icon Accordion

Visual answers with clear icons

Use icons to make each accordion item easier to recognize and more engaging for visitors.

Feature lists Service pages Product details
✓ Clear structure Organize related information into readable groups.

Icons help users recognize the topic quickly. This can make feature sections, benefits, and onboarding content easier to scan.

⚡ Fast interaction Show details only when users need them.

The native details and summary elements make the accordion lightweight and easy to use without adding a JavaScript dependency.

★ Better visual hierarchy Highlight important sections with simple symbols.

Colorful icons can guide attention, but they should not replace clear text labels. Use both together for the best result.

? Helpful explanations Answer common questions in a compact layout.

This pattern is useful for FAQs, service notes, product highlights, comparison blocks, and short support sections.

HTML

<section class="icon-accordion">

  <div class="icon-accordion-intro">
    <div class="icon-accordion-label">Icon Accordion</div>
    <h3 class="icon-accordion-title">Visual answers with clear icons</h3>
    <p class="icon-accordion-text">Use icons to make each accordion item easier to recognize and more engaging for visitors.</p>
    <div class="icon-accordion-badges">
      <span class="icon-accordion-badge">Feature lists</span>
      <span class="icon-accordion-badge">Service pages</span>
      <span class="icon-accordion-badge">Product details</span>
    </div>
  </div>

  <div class="icon-accordion-list">

    <details class="icon-accordion-item" open>
      <summary>
        <span class="icon-accordion-question">
          <span class="icon-accordion-symbol">✓</span>
          <span>
            <strong>Clear structure</strong>
            <span>Organize related information into readable groups.</span>
          </span>
        </span>
        <span class="icon-accordion-toggle"></span>
      </summary>
      <div class="icon-accordion-content">
        <p>Icons help users recognize the topic quickly. This can make feature sections, benefits, and onboarding content easier to scan.</p>
      </div>
    </details>

    <details class="icon-accordion-item">
      <summary>
        <span class="icon-accordion-question">
          <span class="icon-accordion-symbol">⚡</span>
          <span>
            <strong>Fast interaction</strong>
            <span>Show details only when users need them.</span>
          </span>
        </span>
        <span class="icon-accordion-toggle"></span>
      </summary>
      <div class="icon-accordion-content">
        <p>The native details and summary elements make the accordion lightweight and easy to use without adding a JavaScript dependency.</p>
      </div>
    </details>

    <details class="icon-accordion-item">
      <summary>
        <span class="icon-accordion-question">
          <span class="icon-accordion-symbol">★</span>
          <span>
            <strong>Better visual hierarchy</strong>
            <span>Highlight important sections with simple symbols.</span>
          </span>
        </span>
        <span class="icon-accordion-toggle"></span>
      </summary>
      <div class="icon-accordion-content">
        <p>Colorful icons can guide attention, but they should not replace clear text labels. Use both together for the best result.</p>
      </div>
    </details>

    <details class="icon-accordion-item">
      <summary>
        <span class="icon-accordion-question">
          <span class="icon-accordion-symbol">?</span>
          <span>
            <strong>Helpful explanations</strong>
            <span>Answer common questions in a compact layout.</span>
          </span>
        </span>
        <span class="icon-accordion-toggle"></span>
      </summary>
      <div class="icon-accordion-content">
        <p>This pattern is useful for FAQs, service notes, product highlights, comparison blocks, and short support sections.</p>
      </div>
    </details>

  </div>

</section>

CSS

.icon-accordion{
width:min(100%,820px);
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:30px;
align-items:center;
}

.icon-accordion-intro{
min-width:0;
}

.icon-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.icon-accordion-title{
margin:0 0 14px;
font-size:clamp(34px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.icon-accordion-text{
margin:0 0 22px;
font-size:16px;
line-height:1.75;
color:#475569;
}

.icon-accordion-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.icon-accordion-badge{
display:inline-flex;
align-items:center;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 28px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.icon-accordion-list{
display:grid;
gap:14px;
}

.icon-accordion-item{
overflow:hidden;
border-radius:24px;
background:rgba(255,255,255,.94);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.09);
transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.icon-accordion-item:hover{
transform:translateY(-2px);
border-color:rgba(34,197,94,.28);
box-shadow:0 28px 70px rgba(15,23,42,.13);
}

.icon-accordion-item[open]{
border-color:rgba(34,197,94,.40);
box-shadow:0 30px 76px rgba(34,197,94,.14);
}

.icon-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px;
cursor:pointer;
list-style:none;
}

.icon-accordion-item summary::-webkit-details-marker{
display:none;
}

.icon-accordion-question{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}

.icon-accordion-symbol{
display:grid;
place-items:center;
flex:0 0 auto;
width:48px;
height:48px;
border-radius:18px;
font-size:23px;
box-shadow:0 14px 34px rgba(15,23,42,.10);
}

.icon-accordion-item:nth-child(1) .icon-accordion-symbol{
background:#dcfce7;
color:#15803d;
}

.icon-accordion-item:nth-child(2) .icon-accordion-symbol{
background:#dbeafe;
color:#1d4ed8;
}

.icon-accordion-item:nth-child(3) .icon-accordion-symbol{
background:#fef3c7;
color:#b45309;
}

.icon-accordion-item:nth-child(4) .icon-accordion-symbol{
background:#fce7f3;
color:#be185d;
}

.icon-accordion-question strong{
display:block;
margin-bottom:3px;
font-size:18px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.icon-accordion-question span{
display:block;
font-size:14px;
line-height:1.45;
font-weight:700;
color:#64748b;
}

.icon-accordion-toggle{
display:grid;
place-items:center;
flex:0 0 auto;
width:32px;
height:32px;
border-radius:999px;
background:#f1f5f9;
color:#0f172a;
font-size:22px;
font-weight:800;
transition:transform .24s ease, background .24s ease, color .24s ease;
}

.icon-accordion-toggle::before{
content:"+";
}

.icon-accordion-item[open] .icon-accordion-toggle{
background:#16a34a;
color:#ffffff;
transform:rotate(180deg);
}

.icon-accordion-item[open] .icon-accordion-toggle::before{
content:"−";
}

.icon-accordion-content{
padding:0 20px 20px 82px;
}

.icon-accordion-content p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 820px){
.icon-accordion{
grid-template-columns:1fr;
}

.icon-accordion-title{
font-size:36px;
}

.icon-accordion-item summary{
padding:18px;
align-items:flex-start;
}

.icon-accordion-question{
align-items:flex-start;
}

.icon-accordion-content{
padding:0 18px 18px;
}
}

This icon accordion makes expandable content more visual while staying lightweight. It is especially useful when each accordion item represents a benefit, feature, step, service, or product detail that can be recognized with a simple symbol.

9. Animated Chevron Accordion

An animated chevron accordion uses a rotating arrow indicator to show whether each item is open or closed. This is one of the most familiar accordion patterns because users immediately understand the interaction.

This example uses a clean card layout with a chevron icon created in CSS. When the accordion opens, the chevron rotates smoothly to create a simple but polished interaction.

  • Perfect for FAQ sections, mobile content blocks, product details, and help pages
  • Uses a CSS-created chevron icon
  • Includes smooth rotation when the item opens
  • Built with native <details> and <summary>
  • Works without JavaScript
Chevron Accordion

Smooth arrow interaction

Use this accordion when you want a familiar open-and-close indicator with a clean animated chevron.

Why use a chevron icon? It gives users a familiar visual clue.

A chevron is easy to understand because users often associate it with expanding, collapsing, moving forward, or revealing more content.

Can the chevron be made with CSS? No image or icon library is required.

Yes. This demo creates the chevron with borders on a pseudo-element, then rotates the icon when the accordion item is open.

Where does this pattern work best? Use it for clean, familiar content toggles.

This pattern works well for FAQ sections, support centers, mobile content blocks, checkout help, and product information panels.

HTML

<section class="chevron-accordion">

  <div class="chevron-accordion-header">
    <div class="chevron-accordion-label">Chevron Accordion</div>
    <h3 class="chevron-accordion-title">Smooth arrow interaction</h3>
    <p class="chevron-accordion-text">Use this accordion when you want a familiar open-and-close indicator with a clean animated chevron.</p>
  </div>

  <div class="chevron-accordion-list">

    <details class="chevron-accordion-item" open>
      <summary>
        <span class="chevron-accordion-copy">
          <strong>Why use a chevron icon?</strong>
          <span>It gives users a familiar visual clue.</span>
        </span>
        <span class="chevron-accordion-arrow"></span>
      </summary>
      <div class="chevron-accordion-content">
        <p>A chevron is easy to understand because users often associate it with expanding, collapsing, moving forward, or revealing more content.</p>
      </div>
    </details>

    <details class="chevron-accordion-item">
      <summary>
        <span class="chevron-accordion-copy">
          <strong>Can the chevron be made with CSS?</strong>
          <span>No image or icon library is required.</span>
        </span>
        <span class="chevron-accordion-arrow"></span>
      </summary>
      <div class="chevron-accordion-content">
        <p>Yes. This demo creates the chevron with borders on a pseudo-element, then rotates the icon when the accordion item is open.</p>
      </div>
    </details>

    <details class="chevron-accordion-item">
      <summary>
        <span class="chevron-accordion-copy">
          <strong>Where does this pattern work best?</strong>
          <span>Use it for clean, familiar content toggles.</span>
        </span>
        <span class="chevron-accordion-arrow"></span>
      </summary>
      <div class="chevron-accordion-content">
        <p>This pattern works well for FAQ sections, support centers, mobile content blocks, checkout help, and product information panels.</p>
      </div>
    </details>

  </div>

</section>

CSS

.chevron-accordion{
width:min(100%,780px);
}

.chevron-accordion-header{
margin-bottom:24px;
text-align:center;
}

.chevron-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#4338ca;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.chevron-accordion-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,52px);
line-height:1.04;
font-weight:950;
letter-spacing:-.055em;
color:#0f172a;
}

.chevron-accordion-text{
max-width:620px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#475569;
}

.chevron-accordion-list{
display:grid;
gap:14px;
}

.chevron-accordion-item{
overflow:hidden;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 48px rgba(15,23,42,.08);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.chevron-accordion-item:hover{
transform:translateY(-2px);
box-shadow:0 24px 62px rgba(15,23,42,.12);
border-color:rgba(99,102,241,.28);
}

.chevron-accordion-item[open]{
border-color:rgba(99,102,241,.38);
box-shadow:0 28px 72px rgba(99,102,241,.14);
}

.chevron-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px;
cursor:pointer;
list-style:none;
}

.chevron-accordion-item summary::-webkit-details-marker{
display:none;
}

.chevron-accordion-copy{
min-width:0;
}

.chevron-accordion-copy strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.chevron-accordion-copy span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:700;
color:#64748b;
}

.chevron-accordion-arrow{
position:relative;
display:grid;
place-items:center;
flex:0 0 auto;
width:40px;
height:40px;
border-radius:999px;
background:#f1f5f9;
transition:background .24s ease, transform .24s ease;
}

.chevron-accordion-arrow::before{
content:"";
width:10px;
height:10px;
border-right:3px solid #4338ca;
border-bottom:3px solid #4338ca;
transform:rotate(45deg) translateY(-2px);
transition:transform .24s ease, border-color .24s ease;
}

.chevron-accordion-item[open] .chevron-accordion-arrow{
background:#4338ca;
transform:rotate(180deg);
}

.chevron-accordion-item[open] .chevron-accordion-arrow::before{
border-color:#ffffff;
}

.chevron-accordion-content{
padding:0 22px 22px;
}

.chevron-accordion-content p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 640px){
.chevron-accordion-title{
font-size:34px;
}

.chevron-accordion-item summary{
padding:18px;
align-items:flex-start;
}

.chevron-accordion-arrow{
width:36px;
height:36px;
}

.chevron-accordion-content{
padding:0 18px 18px;
}
}

This animated chevron accordion is a safe and familiar pattern for most websites. It is simple enough for FAQ sections but polished enough for product pages, landing pages, and support content.

10. Numbered Accordion

A numbered accordion is useful when the content has a sequence, process, checklist, or step-by-step structure. The numbers help users understand order and make the section easier to scan.

This example uses large numbers, compact summaries, and clean expandable content. It works well for process sections, onboarding steps, tutorial blocks, service workflows, and “how it works” sections.

  • Perfect for process sections, onboarding steps, tutorials, and service workflows
  • Uses large visible numbers for easier scanning
  • Good alternative to long timeline sections
  • Built with native <details> and <summary>
  • Works without JavaScript
Numbered Accordion

Step-by-step content toggles

Use this accordion when your content follows a process, order, workflow, or guided sequence.

Start with the main goal Explain what the user should understand first.

Numbered accordions work best when every item represents a step. Keep the title short and use the open content area for extra explanation.

Break the process into clear parts Each step should cover one focused idea.

Use a numbered accordion instead of a long block of text when users may want to scan the process before reading the details.

Reveal details only when needed Keep the default page layout clean and compact.

This pattern is useful for onboarding, tutorials, service workflows, quote request steps, and how-it-works sections.

HTML

<section class="numbered-accordion">

  <div class="numbered-accordion-header">

    <div>
      <div class="numbered-accordion-label">Numbered Accordion</div>
      <h3 class="numbered-accordion-title">Step-by-step content toggles</h3>
    </div>

    <p class="numbered-accordion-text">Use this accordion when your content follows a process, order, workflow, or guided sequence.</p>

  </div>

  <div class="numbered-accordion-list">

    <details class="numbered-accordion-item" open>
      <summary>
        <span class="numbered-accordion-number"></span>
        <span class="numbered-accordion-copy">
          <strong>Start with the main goal</strong>
          <span>Explain what the user should understand first.</span>
        </span>
        <span class="numbered-accordion-toggle"></span>
      </summary>
      <div class="numbered-accordion-content">
        <p>Numbered accordions work best when every item represents a step. Keep the title short and use the open content area for extra explanation.</p>
      </div>
    </details>

    <details class="numbered-accordion-item">
      <summary>
        <span class="numbered-accordion-number"></span>
        <span class="numbered-accordion-copy">
          <strong>Break the process into clear parts</strong>
          <span>Each step should cover one focused idea.</span>
        </span>
        <span class="numbered-accordion-toggle"></span>
      </summary>
      <div class="numbered-accordion-content">
        <p>Use a numbered accordion instead of a long block of text when users may want to scan the process before reading the details.</p>
      </div>
    </details>

    <details class="numbered-accordion-item">
      <summary>
        <span class="numbered-accordion-number"></span>
        <span class="numbered-accordion-copy">
          <strong>Reveal details only when needed</strong>
          <span>Keep the default page layout clean and compact.</span>
        </span>
        <span class="numbered-accordion-toggle"></span>
      </summary>
      <div class="numbered-accordion-content">
        <p>This pattern is useful for onboarding, tutorials, service workflows, quote request steps, and how-it-works sections.</p>
      </div>
    </details>

  </div>

</section>

CSS

.numbered-accordion{
width:min(100%,860px);
}

.numbered-accordion-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);
gap:28px;
align-items:end;
margin-bottom:26px;
}

.numbered-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.numbered-accordion-title{
margin:0;
font-size:clamp(34px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.numbered-accordion-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.numbered-accordion-list{
display:grid;
gap:16px;
counter-reset:numberedAccordion;
}

.numbered-accordion-item{
counter-increment:numberedAccordion;
overflow:hidden;
border-radius:24px;
background:rgba(255,255,255,.94);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.numbered-accordion-item:hover{
transform:translateY(-2px);
border-color:rgba(249,115,22,.30);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.numbered-accordion-item[open]{
border-color:rgba(249,115,22,.42);
box-shadow:0 30px 76px rgba(249,115,22,.13);
}

.numbered-accordion-item summary{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:18px;
align-items:center;
padding:22px;
cursor:pointer;
list-style:none;
}

.numbered-accordion-item summary::-webkit-details-marker{
display:none;
}

.numbered-accordion-number{
display:grid;
place-items:center;
width:58px;
height:58px;
border-radius:20px;
background:linear-gradient(135deg,#f97316,#eab308);
color:#ffffff;
font-size:21px;
font-weight:950;
letter-spacing:-.04em;
box-shadow:0 16px 38px rgba(249,115,22,.22);
}

.numbered-accordion-number::before{
content:counter(numberedAccordion, decimal-leading-zero);
}

.numbered-accordion-copy strong{
display:block;
margin-bottom:4px;
font-size:19px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.numbered-accordion-copy span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:700;
color:#64748b;
}

.numbered-accordion-toggle{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:999px;
background:#fff7ed;
color:#c2410c;
font-size:22px;
font-weight:800;
transition:transform .24s ease, background .24s ease, color .24s ease;
}

.numbered-accordion-toggle::before{
content:"+";
}

.numbered-accordion-item[open] .numbered-accordion-toggle{
background:#f97316;
color:#ffffff;
transform:rotate(180deg);
}

.numbered-accordion-item[open] .numbered-accordion-toggle::before{
content:"−";
}

.numbered-accordion-content{
padding:0 22px 22px 98px;
}

.numbered-accordion-content p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 760px){
.numbered-accordion-header{
grid-template-columns:1fr;
gap:12px;
}

.numbered-accordion-title{
font-size:36px;
}

.numbered-accordion-item summary{
grid-template-columns:auto minmax(0,1fr);
padding:18px;
align-items:flex-start;
}

.numbered-accordion-number{
width:50px;
height:50px;
border-radius:18px;
font-size:18px;
}

.numbered-accordion-toggle{
grid-column:2;
justify-self:start;
margin-top:4px;
}

.numbered-accordion-content{
padding:0 18px 18px;
}
}

This numbered accordion is a strong choice when content needs order and hierarchy. It gives users a clear sequence while keeping the page shorter than a traditional step-by-step section.

11. Product Details Accordion

A product details accordion is useful for eCommerce product pages where customers need extra information but do not need to see everything at once. It keeps the product page cleaner while still making important details easy to access.

This example organizes product information into expandable sections such as description, shipping, warranty, and returns. It works well for WooCommerce stores, product landing pages, catalog websites, and online shops with detailed product information.

  • Perfect for WooCommerce product pages, eCommerce stores, and product landing pages
  • Organizes product description, shipping, warranty, and returns
  • Keeps long product pages cleaner and easier to scan
  • Built with native <details> and <summary>
  • Works without JavaScript
Featured Product

Modern Garden Kit

$249 $319
View Product
Product Details

Everything customers need to know

Use product accordions to organize long product information without overwhelming the page layout.

Description

This product is designed for customers who want a clean, durable, and easy-to-use solution. The description section can explain the main benefits, use cases, and product value.

Shipping information

Use this section to explain delivery times, shipping regions, packaging details, and any special delivery notes customers should know before ordering.

  • Estimated delivery time: 3–7 business days
  • Tracked shipping available
  • Secure packaging included
Warranty and support

This section can explain warranty length, support options, replacement parts, and how customers can contact your team if they need help.

Returns

Use this section to describe your return policy clearly. Keep the language simple so customers understand what is possible before they purchase.

HTML

<section class="product-details-layout">

  <div class="product-details-card">
    <div class="product-details-image"></div>
    <div class="product-details-info">
      <span class="product-details-category">Featured Product</span>
      <h3 class="product-details-name">Modern Garden Kit</h3>
      <div class="product-details-price">
        <strong>$249</strong>
        <span>$319</span>
      </div>
      <a class="product-details-button" href="#">View Product</a>
    </div>
  </div>

  <div class="product-details-accordion">

    <div class="product-details-accordion-header">
      <div class="product-details-accordion-label">Product Details</div>
      <h3 class="product-details-accordion-title">Everything customers need to know</h3>
      <p class="product-details-accordion-text">Use product accordions to organize long product information without overwhelming the page layout.</p>
    </div>

    <div class="product-details-list">

      <details class="product-details-item" open>
        <summary>Description</summary>
        <div class="product-details-content">
          <p>This product is designed for customers who want a clean, durable, and easy-to-use solution. The description section can explain the main benefits, use cases, and product value.</p>
        </div>
      </details>

      <details class="product-details-item">
        <summary>Shipping information</summary>
        <div class="product-details-content">
          <p>Use this section to explain delivery times, shipping regions, packaging details, and any special delivery notes customers should know before ordering.</p>
          <ul>
            <li>Estimated delivery time: 3–7 business days</li>
            <li>Tracked shipping available</li>
            <li>Secure packaging included</li>
          </ul>
        </div>
      </details>

      <details class="product-details-item">
        <summary>Warranty and support</summary>
        <div class="product-details-content">
          <p>This section can explain warranty length, support options, replacement parts, and how customers can contact your team if they need help.</p>
        </div>
      </details>

      <details class="product-details-item">
        <summary>Returns</summary>
        <div class="product-details-content">
          <p>Use this section to describe your return policy clearly. Keep the language simple so customers understand what is possible before they purchase.</p>
        </div>
      </details>

    </div>

  </div>

</section>

CSS

.product-details-layout{
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr);
gap:32px;
align-items:start;
}

.product-details-card{
position:sticky;
top:24px;
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);
}

.product-details-image{
min-height:320px;
position:relative;
background:
radial-gradient(circle at 32% 24%,rgba(255,255,255,.70),transparent 30%),
linear-gradient(135deg,#16a34a,#0f766e 52%,#0f172a);
}

.product-details-image::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:190px;
height:190px;
border-radius:38px;
transform:translate(-50%,-50%) rotate(10deg);
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 30px 70px rgba(0,0,0,.18);
}

.product-details-image::after{
content:"Product";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
color:#ffffff;
font-size:34px;
font-weight:950;
letter-spacing:-.05em;
}

.product-details-info{
padding:22px;
}

.product-details-category{
display:inline-flex;
margin-bottom:10px;
padding:7px 10px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.product-details-name{
margin:0 0 10px;
font-size:28px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.product-details-price{
display:flex;
align-items:center;
gap:10px;
margin-bottom:18px;
}

.product-details-price strong{
font-size:24px;
font-weight:950;
color:#0f172a;
}

.product-details-price span{
font-size:14px;
font-weight:800;
color:#64748b;
text-decoration:line-through;
}

.product-details-button{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
border-radius:999px;
background:linear-gradient(135deg,#16a34a,#2563eb);
color:#ffffff;
text-decoration:none;
font-size:15px;
font-weight:950;
box-shadow:0 18px 42px rgba(22,163,74,.20);
}

.product-details-accordion{
background:#ffffff;
border-radius:30px;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.10);
padding:26px;
}

.product-details-accordion-header{
margin-bottom:22px;
}

.product-details-accordion-label{
display:inline-flex;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.product-details-accordion-title{
margin:0 0 10px;
font-size:clamp(30px,4.6vw,48px);
line-height:1.05;
font-weight:950;
letter-spacing:-.055em;
color:#0f172a;
}

.product-details-accordion-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.product-details-list{
display:grid;
gap:12px;
}

.product-details-item{
overflow:hidden;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.product-details-item[open]{
background:#ffffff;
border-color:rgba(37,99,235,.28);
box-shadow:0 18px 46px rgba(37,99,235,.10);
}

.product-details-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px 20px;
cursor:pointer;
list-style:none;
font-size:17px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.product-details-item summary::-webkit-details-marker{
display:none;
}

.product-details-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:32px;
height:32px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.product-details-item[open] summary::after{
content:"−";
background:#2563eb;
color:#ffffff;
transform:rotate(180deg);
}

.product-details-content{
padding:0 20px 20px;
}

.product-details-content p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

.product-details-content ul{
display:grid;
gap:8px;
margin:14px 0 0;
padding-left:20px;
font-size:15px;
line-height:1.65;
color:#475569;
}

@media (max-width: 900px){
.product-details-layout{
grid-template-columns:1fr;
}

.product-details-card{
position:relative;
top:auto;
}

.product-details-image{
min-height:260px;
}
}

@media (max-width: 640px){
.product-details-accordion{
padding:20px;
border-radius:24px;
}

.product-details-accordion-title{
font-size:34px;
}

.product-details-item summary{
padding:17px;
font-size:16px;
}

.product-details-content{
padding:0 17px 17px;
}
}

This product details accordion is a practical pattern for online stores because it keeps the product page organized without removing important information. Customers can quickly open the sections they care about, such as shipping, warranty, or return details.

12. Product Specifications Accordion

A product specifications accordion is useful when a product has technical details, measurements, materials, compatibility notes, or comparison data. Instead of showing a long table directly on the page, the accordion keeps specifications compact and easier to browse.

This example includes a clean specifications table inside an accordion panel. It is useful for electronics, furniture, tools, greenhouse products, software plans, equipment, and any product page where detailed specs matter.

  • Perfect for technical products, WooCommerce product pages, and catalog websites
  • Includes a clean responsive specification table
  • Useful for dimensions, materials, compatibility, warranty, and included items
  • Built with native <details> and <summary>
  • Works without JavaScript
Specifications Accordion

Technical details in a clean layout

Product size 8 × 12 ft
Product specifications
Width 8 ft
Length 12 ft
Frame material Powder-coated aluminum
Panel type Clear polycarbonate panels
Door style Sliding double door
Warranty Limited manufacturer warranty
Durable frame Made for long-term outdoor use.
Lightweight panels Easy to handle during setup.
Expandable layout More specs can be added anytime.
What is included?

Use this section to list included components, accessories, installation parts, manuals, and optional items that come with the product.

Compatibility notes

This section can explain which accessories, foundations, replacement parts, or add-ons work with the product.

HTML

<section class="product-specs-accordion">

  <div class="product-specs-top">

    <div>
      <div class="product-specs-label">Specifications Accordion</div>
      <h3 class="product-specs-title">Technical details in a clean layout</h3>
    </div>

    <div class="product-specs-summary-card">
      <span>Product size</span>
      <strong>8 × 12 ft</strong>
    </div>

  </div>

  <div class="product-specs-list">

    <details class="product-specs-item" open>
      <summary>Product specifications</summary>
      <div class="product-specs-content">

        <div class="product-specs-table-wrap">
          <table class="product-specs-table">
            <tbody>
              <tr>
                <th>Width</th>
                <td>8 ft</td>
              </tr>
              <tr>
                <th>Length</th>
                <td>12 ft</td>
              </tr>
              <tr>
                <th>Frame material</th>
                <td>Powder-coated aluminum</td>
              </tr>
              <tr>
                <th>Panel type</th>
                <td>Clear polycarbonate panels</td>
              </tr>
              <tr>
                <th>Door style</th>
                <td>Sliding double door</td>
              </tr>
              <tr>
                <th>Warranty</th>
                <td>Limited manufacturer warranty</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="product-specs-notes">
          <div class="product-specs-note">
            <strong>Durable frame</strong>
            <span>Made for long-term outdoor use.</span>
          </div>
          <div class="product-specs-note">
            <strong>Lightweight panels</strong>
            <span>Easy to handle during setup.</span>
          </div>
          <div class="product-specs-note">
            <strong>Expandable layout</strong>
            <span>More specs can be added anytime.</span>
          </div>
        </div>

      </div>
    </details>

    <details class="product-specs-item">
      <summary>What is included?</summary>
      <div class="product-specs-content">
        <p>Use this section to list included components, accessories, installation parts, manuals, and optional items that come with the product.</p>
      </div>
    </details>

    <details class="product-specs-item">
      <summary>Compatibility notes</summary>
      <div class="product-specs-content">
        <p>This section can explain which accessories, foundations, replacement parts, or add-ons work with the product.</p>
      </div>
    </details>

  </div>

</section>

CSS

.product-specs-accordion{
width:min(100%,900px);
background:#ffffff;
border-radius:30px;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.12);
overflow:hidden;
}

.product-specs-top{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:22px;
align-items:end;
padding:28px;
background:
radial-gradient(circle at 12% 18%,rgba(14,165,233,.12),transparent 34%),
linear-gradient(135deg,#ffffff,#f8fafc);
border-bottom:1px solid #e2e8f0;
}

.product-specs-label{
display:inline-flex;
width:max-content;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.product-specs-title{
margin:0;
font-size:clamp(30px,4.8vw,50px);
line-height:1.04;
font-weight:950;
letter-spacing:-.055em;
color:#0f172a;
}

.product-specs-summary-card{
min-width:210px;
padding:18px;
border-radius:22px;
background:#0f172a;
color:#ffffff;
box-shadow:0 20px 52px rgba(15,23,42,.18);
}

.product-specs-summary-card span{
display:block;
margin-bottom:7px;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#93c5fd;
}

.product-specs-summary-card strong{
display:block;
font-size:28px;
line-height:1;
font-weight:950;
}

.product-specs-list{
padding:22px;
display:grid;
gap:14px;
}

.product-specs-item{
overflow:hidden;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.product-specs-item[open]{
background:#ffffff;
border-color:rgba(14,165,233,.34);
box-shadow:0 20px 54px rgba(14,165,233,.11);
}

.product-specs-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 22px;
cursor:pointer;
list-style:none;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.product-specs-item summary::-webkit-details-marker{
display:none;
}

.product-specs-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.product-specs-item[open] summary::after{
content:"−";
background:#0ea5e9;
color:#ffffff;
transform:rotate(180deg);
}

.product-specs-content{
padding:0 22px 22px;
}

.product-specs-table-wrap{
width:100%;
overflow-x:auto;
border-radius:18px;
border:1px solid #e2e8f0;
background:#ffffff;
}

.product-specs-table{
width:100%;
border-collapse:collapse;
min-width:520px;
}

.product-specs-table th,
.product-specs-table td{
padding:14px 16px;
text-align:left;
border-bottom:1px solid #e2e8f0;
font-size:14px;
line-height:1.5;
}

.product-specs-table tr:last-child th,
.product-specs-table tr:last-child td{
border-bottom:0;
}

.product-specs-table th{
width:38%;
background:#f8fafc;
color:#0f172a;
font-weight:950;
}

.product-specs-table td{
color:#475569;
font-weight:650;
}

.product-specs-notes{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:14px;
}

.product-specs-note{
padding:14px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.product-specs-note strong{
display:block;
margin-bottom:4px;
font-size:14px;
font-weight:950;
color:#0f172a;
}

.product-specs-note span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:700;
color:#64748b;
}

@media (max-width: 760px){
.product-specs-top{
grid-template-columns:1fr;
padding:22px;
}

.product-specs-summary-card{
min-width:0;
}

.product-specs-title{
font-size:34px;
}

.product-specs-list{
padding:18px;
}

.product-specs-item summary{
padding:18px;
font-size:16px;
}

.product-specs-content{
padding:0 18px 18px;
}

.product-specs-notes{
grid-template-columns:1fr;
}
}

This product specifications accordion is useful when technical details are important but should not dominate the full product page. The scrollable table wrapper also helps prevent wide specification tables from breaking the layout on smaller screens.

13. Pricing FAQ Accordion

A pricing FAQ accordion is useful on pricing pages, SaaS landing pages, subscription pages, membership websites, and service package pages. It helps answer common buying questions without making the pricing section too long.

This example uses a pricing-focused layout with a small plan summary card and FAQ accordion items for billing, cancellation, invoices, upgrades, and support. It is designed to support conversion while keeping the content compact.

  • Perfect for SaaS pricing pages, subscription plans, service packages, and membership websites
  • Answers billing, cancellation, upgrade, invoice, and support questions
  • Combines a pricing summary card with expandable FAQ content
  • Built with native <details> and <summary>
  • Works without JavaScript
Popular Plan

Pro Website Kit

$29 / month

A simple pricing card can sit next to the FAQ accordion to keep plan questions close to the buying decision.

  • Unlimited projects
  • Premium components
  • Email support included
Start Free Trial
Pricing FAQ

Questions before you choose a plan

Use this accordion to answer billing, cancellation, invoice, and upgrade questions directly on a pricing page.

Can I cancel anytime?

Yes. A pricing FAQ should explain cancellation clearly so customers understand whether they can stop, pause, or change their plan later.

Do you offer invoices?

This section can explain whether invoices are generated automatically, where customers can download them, and which billing details they include.

Can I upgrade my plan later?

Use this answer to explain upgrades, downgrades, prorated billing, plan limits, and how changes affect the current subscription period.

Is support included?

Pricing pages should clearly explain what kind of support is included, how fast customers can expect a reply, and whether premium support is available.

HTML

<section class="pricing-faq-layout">

  <div class="pricing-faq-plan">
    <div class="pricing-faq-plan-inner">
      <span class="pricing-faq-badge">Popular Plan</span>
      <h3>Pro Website Kit</h3>
      <div class="pricing-faq-price">
        <strong>$29</strong>
        <span>/ month</span>
      </div>
      <p>A simple pricing card can sit next to the FAQ accordion to keep plan questions close to the buying decision.</p>
      <ul class="pricing-faq-features">
        <li>Unlimited projects</li>
        <li>Premium components</li>
        <li>Email support included</li>
      </ul>
      <a class="pricing-faq-button" href="#">Start Free Trial</a>
    </div>
  </div>

  <div class="pricing-faq-accordion">

    <div class="pricing-faq-header">
      <div class="pricing-faq-label">Pricing FAQ</div>
      <h3 class="pricing-faq-title">Questions before you choose a plan</h3>
      <p class="pricing-faq-text">Use this accordion to answer billing, cancellation, invoice, and upgrade questions directly on a pricing page.</p>
    </div>

    <div class="pricing-faq-list">

      <details class="pricing-faq-item" open>
        <summary>Can I cancel anytime?</summary>
        <div class="pricing-faq-content">
          <p>Yes. A pricing FAQ should explain cancellation clearly so customers understand whether they can stop, pause, or change their plan later.</p>
        </div>
      </details>

      <details class="pricing-faq-item">
        <summary>Do you offer invoices?</summary>
        <div class="pricing-faq-content">
          <p>This section can explain whether invoices are generated automatically, where customers can download them, and which billing details they include.</p>
        </div>
      </details>

      <details class="pricing-faq-item">
        <summary>Can I upgrade my plan later?</summary>
        <div class="pricing-faq-content">
          <p>Use this answer to explain upgrades, downgrades, prorated billing, plan limits, and how changes affect the current subscription period.</p>
        </div>
      </details>

      <details class="pricing-faq-item">
        <summary>Is support included?</summary>
        <div class="pricing-faq-content">
          <p>Pricing pages should clearly explain what kind of support is included, how fast customers can expect a reply, and whether premium support is available.</p>
        </div>
      </details>

    </div>

  </div>

</section>

CSS

.pricing-faq-layout{
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr);
gap:30px;
align-items:start;
}

.pricing-faq-plan{
position:sticky;
top:24px;
padding:26px;
border-radius:30px;
background:#0f172a;
color:#ffffff;
box-shadow:0 28px 80px rgba(15,23,42,.24);
overflow:hidden;
}

.pricing-faq-plan::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 20% 20%,rgba(168,85,247,.36),transparent 32%),
radial-gradient(circle at 80% 28%,rgba(236,72,153,.28),transparent 34%);
pointer-events:none;
}

.pricing-faq-plan-inner{
position:relative;
z-index:2;
}

.pricing-faq-badge{
display:inline-flex;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#fbcfe8;
font-size:12px;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
}

.pricing-faq-plan h3{
margin:0 0 12px;
font-size:32px;
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff;
}

.pricing-faq-price{
display:flex;
align-items:flex-end;
gap:6px;
margin-bottom:16px;
}

.pricing-faq-price strong{
font-size:54px;
line-height:.95;
font-weight:950;
letter-spacing:-.07em;
}

.pricing-faq-price span{
padding-bottom:7px;
font-size:15px;
font-weight:800;
color:#cbd5e1;
}

.pricing-faq-plan p{
margin:0 0 20px;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.pricing-faq-features{
display:grid;
gap:10px;
margin:0 0 22px;
padding:0;
list-style:none;
}

.pricing-faq-features li{
display:flex;
gap:10px;
align-items:flex-start;
font-size:14px;
line-height:1.55;
font-weight:750;
color:#e2e8f0;
}

.pricing-faq-features li::before{
content:"✓";
display:grid;
place-items:center;
flex:0 0 auto;
width:20px;
height:20px;
border-radius:999px;
background:#22c55e;
color:#ffffff;
font-size:12px;
font-weight:950;
}

.pricing-faq-button{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
border-radius:999px;
background:linear-gradient(135deg,#a855f7,#ec4899);
color:#ffffff;
text-decoration:none;
font-size:15px;
font-weight:950;
box-shadow:0 18px 42px rgba(236,72,153,.24);
}

.pricing-faq-accordion{
padding:26px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.pricing-faq-header{
margin-bottom:22px;
}

.pricing-faq-label{
display:inline-flex;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#f3e8ff;
color:#7e22ce;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.pricing-faq-title{
margin:0 0 10px;
font-size:clamp(30px,4.8vw,50px);
line-height:1.04;
font-weight:950;
letter-spacing:-.055em;
color:#0f172a;
}

.pricing-faq-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.pricing-faq-list{
display:grid;
gap:12px;
}

.pricing-faq-item{
overflow:hidden;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.pricing-faq-item[open]{
background:#ffffff;
border-color:rgba(168,85,247,.32);
box-shadow:0 18px 48px rgba(168,85,247,.12);
}

.pricing-faq-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px 20px;
cursor:pointer;
list-style:none;
font-size:17px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.pricing-faq-item summary::-webkit-details-marker{
display:none;
}

.pricing-faq-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:32px;
height:32px;
border-radius:999px;
background:#f3e8ff;
color:#7e22ce;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.pricing-faq-item[open] summary::after{
content:"−";
background:#9333ea;
color:#ffffff;
transform:rotate(180deg);
}

.pricing-faq-content{
padding:0 20px 20px;
}

.pricing-faq-content p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 900px){
.pricing-faq-layout{
grid-template-columns:1fr;
}

.pricing-faq-plan{
position:relative;
top:auto;
}
}

@media (max-width: 640px){
.pricing-faq-accordion{
padding:20px;
border-radius:24px;
}

.pricing-faq-title{
font-size:34px;
}

.pricing-faq-item summary{
padding:17px;
font-size:16px;
}

.pricing-faq-content{
padding:0 17px 17px;
}
}

This pricing FAQ accordion is useful because it keeps important purchase questions close to the pricing offer. It can reduce uncertainty and help visitors understand cancellation, support, invoices, and plan changes before they take action.

14. Mobile Filter Accordion

A mobile filter accordion helps eCommerce stores, directories, catalog pages, and listing pages keep filter options compact on small screens. Instead of showing every filter group at once, users can open only the category they need.

This example uses filter groups for category, price, color, and size. It is designed like a mobile-friendly sidebar filter, but it can also work inside a product archive page, shop page, directory page, or search results layout.

  • Perfect for eCommerce filters, product category pages, directory pages, and search results
  • Groups filters into expandable sections
  • Includes checkbox options, color swatches, and price choices
  • Built with native <details> and <summary>
  • Works without JavaScript for the accordion behavior
Mobile Filters

Find the right product

Use accordion filters to keep product category pages clean and easy to use on mobile screens.

Category
Price
Color
Size
Compact Greenhouse $299
Premium Garden Kit $449
Starter Accessories $89
Large Grow Tunnel $599

HTML

<section class="mobile-filter-layout">

  <div class="mobile-filter-panel">

    <div class="mobile-filter-header">
      <span class="mobile-filter-label">Mobile Filters</span>
      <h3 class="mobile-filter-title">Find the right product</h3>
      <p class="mobile-filter-text">Use accordion filters to keep product category pages clean and easy to use on mobile screens.</p>
    </div>

    <div class="mobile-filter-list">

      <details class="mobile-filter-item" open>
        <summary>Category</summary>
        <div class="mobile-filter-options">
          <label class="mobile-filter-check"><input type="checkbox" checked> Greenhouses</label>
          <label class="mobile-filter-check"><input type="checkbox"> Accessories</label>
          <label class="mobile-filter-check"><input type="checkbox"> Garden tools</label>
        </div>
      </details>

      <details class="mobile-filter-item">
        <summary>Price</summary>
        <div class="mobile-filter-options">
          <label class="mobile-filter-check"><input type="checkbox"> Under $100</label>
          <label class="mobile-filter-check"><input type="checkbox" checked> $100 – $500</label>
          <label class="mobile-filter-check"><input type="checkbox"> Over $500</label>
        </div>
      </details>

      <details class="mobile-filter-item">
        <summary>Color</summary>
        <div class="mobile-filter-colors">
          <span class="mobile-filter-swatch mobile-filter-swatch-green"></span>
          <span class="mobile-filter-swatch mobile-filter-swatch-blue"></span>
          <span class="mobile-filter-swatch mobile-filter-swatch-orange"></span>
          <span class="mobile-filter-swatch mobile-filter-swatch-pink"></span>
        </div>
      </details>

      <details class="mobile-filter-item">
        <summary>Size</summary>
        <div class="mobile-filter-options">
          <label class="mobile-filter-check"><input type="checkbox"> Small</label>
          <label class="mobile-filter-check"><input type="checkbox"> Medium</label>
          <label class="mobile-filter-check"><input type="checkbox"> Large</label>
        </div>
      </details>

    </div>

  </div>

  <div class="mobile-filter-products">

    <div class="mobile-filter-product-card">
      <strong>Compact Greenhouse</strong>
      <span>$299</span>
    </div>

    <div class="mobile-filter-product-card">
      <strong>Premium Garden Kit</strong>
      <span>$449</span>
    </div>

    <div class="mobile-filter-product-card">
      <strong>Starter Accessories</strong>
      <span>$89</span>
    </div>

    <div class="mobile-filter-product-card">
      <strong>Large Grow Tunnel</strong>
      <span>$599</span>
    </div>

  </div>

</section>

CSS

.mobile-filter-layout{
width:min(100%,1040px);
display:grid;
grid-template-columns:340px minmax(0,1fr);
gap:28px;
align-items:start;
}

.mobile-filter-panel{
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
overflow:hidden;
}

.mobile-filter-header{
padding:24px;
background:
radial-gradient(circle at 15% 10%,rgba(34,197,94,.12),transparent 35%),
linear-gradient(135deg,#ffffff,#f8fafc);
border-bottom:1px solid #e2e8f0;
}

.mobile-filter-label{
display:inline-flex;
margin-bottom:10px;
padding:7px 10px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.mobile-filter-title{
margin:0 0 8px;
font-size:30px;
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.mobile-filter-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.mobile-filter-list{
padding:16px;
display:grid;
gap:12px;
}

.mobile-filter-item{
overflow:hidden;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
}

.mobile-filter-item[open]{
background:#ffffff;
border-color:rgba(34,197,94,.28);
box-shadow:0 16px 40px rgba(34,197,94,.10);
}

.mobile-filter-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:16px;
cursor:pointer;
list-style:none;
font-size:16px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.mobile-filter-item summary::-webkit-details-marker{
display:none;
}

.mobile-filter-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:30px;
height:30px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:20px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.mobile-filter-item[open] summary::after{
content:"−";
background:#16a34a;
color:#ffffff;
transform:rotate(180deg);
}

.mobile-filter-options{
display:grid;
gap:10px;
padding:0 16px 16px;
}

.mobile-filter-check{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:750;
line-height:1.4;
color:#475569;
cursor:pointer;
}

.mobile-filter-check input{
width:17px;
height:17px;
accent-color:#16a34a;
}

.mobile-filter-colors{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:0 16px 16px;
}

.mobile-filter-swatch{
width:34px;
height:34px;
border-radius:999px;
border:3px solid #ffffff;
box-shadow:0 0 0 1px #cbd5e1,0 10px 22px rgba(15,23,42,.10);
cursor:pointer;
}

.mobile-filter-swatch-green{
background:#16a34a;
}

.mobile-filter-swatch-blue{
background:#2563eb;
}

.mobile-filter-swatch-orange{
background:#f97316;
}

.mobile-filter-swatch-pink{
background:#ec4899;
}

.mobile-filter-products{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}

.mobile-filter-product-card{
min-height:210px;
border-radius:26px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
padding:16px;
display:grid;
align-content:end;
position:relative;
overflow:hidden;
}

.mobile-filter-product-card::before{
content:"";
position:absolute;
left:16px;
right:16px;
top:16px;
height:108px;
border-radius:20px;
background:linear-gradient(135deg,#dcfce7,#dbeafe);
}

.mobile-filter-product-card strong{
position:relative;
z-index:2;
display:block;
margin-bottom:6px;
font-size:16px;
font-weight:950;
color:#0f172a;
}

.mobile-filter-product-card span{
position:relative;
z-index:2;
display:block;
font-size:14px;
font-weight:800;
color:#64748b;
}

@media (max-width: 820px){
.mobile-filter-layout{
grid-template-columns:1fr;
}

.mobile-filter-products{
grid-template-columns:1fr 1fr;
}
}

@media (max-width: 560px){
.mobile-filter-products{
grid-template-columns:1fr;
}

.mobile-filter-title{
font-size:28px;
}
}

This mobile filter accordion is especially useful for eCommerce and catalog pages where filter options can quickly take too much space. Grouping filters into expandable sections keeps the interface easier to use on small screens.

15. Sidebar Accordion Menu

A sidebar accordion menu is useful for dashboards, documentation websites, admin panels, course platforms, and help centers where navigation has multiple groups. It keeps the sidebar compact while still allowing users to explore nested links.

This example uses expandable sidebar groups for dashboard, content, settings, and support links. It works well when you need a vertical navigation menu that can handle more links without becoming overwhelming.

  • Perfect for dashboards, documentation, admin panels, and help centers
  • Groups sidebar links into expandable sections
  • Uses a clean active state and compact navigation rows
  • Built with native <details> and <summary>
  • Works without JavaScript
Sidebar Accordion

Compact navigation for complex interfaces

Use a sidebar accordion when your navigation has several groups and you want to keep the menu organized without hiding the main structure completely.

Overview Quick dashboard summary
Reports Grouped navigation links
Settings Account and system options
Support Help and documentation

HTML

<aside class="sidebar-accordion-menu">

  <div class="sidebar-accordion-brand">
    <div class="sidebar-accordion-logo">UI</div>
    <div>
      <strong>Admin Panel</strong>
      <span>Sidebar navigation</span>
    </div>
  </div>

  <nav class="sidebar-accordion-nav">

    <details class="sidebar-accordion-group" open>
      <summary>Dashboard</summary>
      <div class="sidebar-accordion-links">
        <a class="is-active" href="#">Overview</a>
        <a href="#">Analytics</a>
        <a href="#">Reports</a>
      </div>
    </details>

    <details class="sidebar-accordion-group">
      <summary>Content</summary>
      <div class="sidebar-accordion-links">
        <a href="#">Pages</a>
        <a href="#">Posts</a>
        <a href="#">Media Library</a>
      </div>
    </details>

    <details class="sidebar-accordion-group">
      <summary>Settings</summary>
      <div class="sidebar-accordion-links">
        <a href="#">Profile</a>
        <a href="#">Notifications</a>
        <a href="#">Billing</a>
      </div>
    </details>

    <details class="sidebar-accordion-group">
      <summary>Support</summary>
      <div class="sidebar-accordion-links">
        <a href="#">Documentation</a>
        <a href="#">Help Center</a>
        <a href="#">Contact Support</a>
      </div>
    </details>

  </nav>

</aside>

CSS

.sidebar-accordion-menu{
border-radius:30px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 28px 80px rgba(15,23,42,.26);
overflow:hidden;
}

.sidebar-accordion-brand{
display:flex;
align-items:center;
gap:12px;
padding:22px;
border-bottom:1px solid rgba(255,255,255,.10);
}

.sidebar-accordion-logo{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#ffffff;
font-size:18px;
font-weight:950;
}

.sidebar-accordion-brand strong{
display:block;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.sidebar-accordion-brand span{
display:block;
margin-top:3px;
font-size:13px;
font-weight:700;
color:#94a3b8;
}

.sidebar-accordion-nav{
display:grid;
gap:10px;
padding:16px;
}

.sidebar-accordion-group{
overflow:hidden;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}

.sidebar-accordion-group[open]{
background:rgba(255,255,255,.07);
border-color:rgba(147,197,253,.20);
}

.sidebar-accordion-group summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:15px 16px;
cursor:pointer;
list-style:none;
font-size:15px;
line-height:1.35;
font-weight:900;
color:#e2e8f0;
}

.sidebar-accordion-group summary::-webkit-details-marker{
display:none;
}

.sidebar-accordion-group summary::after{
content:"";
width:9px;
height:9px;
border-right:2px solid #93c5fd;
border-bottom:2px solid #93c5fd;
transform:rotate(45deg) translateY(-2px);
transition:transform .22s ease;
}

.sidebar-accordion-group[open] summary::after{
transform:rotate(225deg) translateY(-1px);
}

.sidebar-accordion-links{
display:grid;
gap:6px;
padding:0 10px 12px;
}

.sidebar-accordion-links a{
display:flex;
align-items:center;
gap:10px;
min-height:38px;
padding:8px 10px;
border-radius:13px;
color:#cbd5e1;
text-decoration:none;
font-size:14px;
font-weight:750;
transition:background .2s ease,color .2s ease,transform .2s ease;
}

.sidebar-accordion-links a:hover,
.sidebar-accordion-links a.is-active{
background:rgba(37,99,235,.22);
color:#ffffff;
transform:translateX(2px);
}

.sidebar-accordion-links a::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:#64748b;
}

.sidebar-accordion-links a.is-active::before{
background:#60a5fa;
box-shadow:0 0 0 4px rgba(96,165,250,.14);
}

This sidebar accordion menu is useful when a website or app has many navigation links but still needs a clean vertical structure. It keeps the sidebar readable and helps users find grouped links faster.

16. Documentation Accordion

A documentation accordion is useful for setup guides, plugin documentation, technical tutorials, API notes, and help articles. It lets readers scan topics quickly and open the exact explanation they need.

This example uses a documentation-style layout with version labels, code snippets, notes, and structured expandable sections. It is designed for developer-friendly content while keeping the page easy to read.

  • Perfect for documentation pages, plugin guides, technical tutorials, and setup instructions
  • Includes code-style blocks and clear note sections
  • Useful for installation steps, troubleshooting, and configuration notes
  • Built with native <details> and <summary>
  • Works without JavaScript
Documentation v2.0

Setup guide accordion

Use documentation accordions to group installation steps, configuration notes, code snippets, and troubleshooting answers.

01 Install the component files Add the HTML structure and CSS styles to your project.

Place the accordion markup inside your page template and move the CSS into your stylesheet when using it in production.

<section class="docs-accordion"> <details open> <summary>Install files</summary> </details> </section>
Tip: Keep class names unique when adding multiple accordion demos to the same page.
02 Customize the theme Change colors, spacing, borders, and typography.

You can customize the background color, open state, border radius, icon style, and code block design to match your documentation website.

.docs-accordion-item[open]{ border-color:rgba(14,165,233,.34); }
03 Test keyboard navigation Make sure users can open sections without a mouse.

Native details and summary elements are keyboard accessible by default in modern browsers, but you should still test focus styles and mobile behavior.

Accessibility note: Do not remove visible focus styles from interactive accordion headings.

HTML

<section class="docs-accordion">

  <div class="docs-accordion-top">
    <div class="docs-accordion-meta">
      <span class="docs-accordion-pill docs-accordion-pill-blue">Documentation</span>
      <span class="docs-accordion-pill docs-accordion-pill-dark">v2.0</span>
    </div>
    <h3 class="docs-accordion-title">Setup guide accordion</h3>
    <p class="docs-accordion-text">Use documentation accordions to group installation steps, configuration notes, code snippets, and troubleshooting answers.</p>
  </div>

  <div class="docs-accordion-list">

    <details class="docs-accordion-item" open>
      <summary>
        <span class="docs-accordion-step">01</span>
        <span class="docs-accordion-summary-copy">
          <strong>Install the component files</strong>
          <span>Add the HTML structure and CSS styles to your project.</span>
        </span>
        <span class="docs-accordion-toggle"></span>
      </summary>
      <div class="docs-accordion-content">
        <p>Place the accordion markup inside your page template and move the CSS into your stylesheet when using it in production.</p>
        <code class="docs-accordion-code">&lt;section class="docs-accordion"&gt;
  &lt;details open&gt;
    &lt;summary&gt;Install files&lt;/summary&gt;
  &lt;/details&gt;
&lt;/section&gt;</code>
        <div class="docs-accordion-note">Tip: Keep class names unique when adding multiple accordion demos to the same page.</div>
      </div>
    </details>

    <details class="docs-accordion-item">
      <summary>
        <span class="docs-accordion-step">02</span>
        <span class="docs-accordion-summary-copy">
          <strong>Customize the theme</strong>
          <span>Change colors, spacing, borders, and typography.</span>
        </span>
        <span class="docs-accordion-toggle"></span>
      </summary>
      <div class="docs-accordion-content">
        <p>You can customize the background color, open state, border radius, icon style, and code block design to match your documentation website.</p>
        <code class="docs-accordion-code">.docs-accordion-item[open]{
  border-color:rgba(14,165,233,.34);
}</code>
      </div>
    </details>

    <details class="docs-accordion-item">
      <summary>
        <span class="docs-accordion-step">03</span>
        <span class="docs-accordion-summary-copy">
          <strong>Test keyboard navigation</strong>
          <span>Make sure users can open sections without a mouse.</span>
        </span>
        <span class="docs-accordion-toggle"></span>
      </summary>
      <div class="docs-accordion-content">
        <p>Native details and summary elements are keyboard accessible by default in modern browsers, but you should still test focus styles and mobile behavior.</p>
        <div class="docs-accordion-note">Accessibility note: Do not remove visible focus styles from interactive accordion headings.</div>
      </div>
    </details>

  </div>

</section>

CSS

.docs-accordion{
width:min(100%,900px);
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.12);
overflow:hidden;
}

.docs-accordion-top{
padding:28px;
background:
radial-gradient(circle at 12% 10%,rgba(14,165,233,.12),transparent 34%),
linear-gradient(135deg,#ffffff,#f8fafc);
border-bottom:1px solid #e2e8f0;
}

.docs-accordion-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:14px;
}

.docs-accordion-pill{
display:inline-flex;
align-items:center;
min-height:32px;
padding:0 11px;
border-radius:999px;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.docs-accordion-pill-blue{
background:#e0f2fe;
color:#0369a1;
}

.docs-accordion-pill-dark{
background:#0f172a;
color:#ffffff;
}

.docs-accordion-title{
margin:0 0 10px;
font-size:clamp(32px,5vw,54px);
line-height:1.03;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.docs-accordion-text{
max-width:700px;
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.docs-accordion-list{
display:grid;
gap:14px;
padding:22px;
}

.docs-accordion-item{
overflow:hidden;
border-radius:22px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.docs-accordion-item[open]{
background:#ffffff;
border-color:rgba(14,165,233,.34);
box-shadow:0 20px 54px rgba(14,165,233,.11);
}

.docs-accordion-item summary{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:14px;
align-items:center;
padding:18px 20px;
cursor:pointer;
list-style:none;
}

.docs-accordion-item summary::-webkit-details-marker{
display:none;
}

.docs-accordion-step{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:14px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:950;
}

.docs-accordion-summary-copy strong{
display:block;
margin-bottom:3px;
font-size:17px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.docs-accordion-summary-copy span{
display:block;
font-size:14px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.docs-accordion-toggle{
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:21px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.docs-accordion-toggle::before{
content:"+";
}

.docs-accordion-item[open] .docs-accordion-toggle{
background:#0ea5e9;
color:#ffffff;
transform:rotate(180deg);
}

.docs-accordion-item[open] .docs-accordion-toggle::before{
content:"−";
}

.docs-accordion-content{
padding:0 20px 20px 72px;
}

.docs-accordion-content p{
margin:0 0 14px;
font-size:15px;
line-height:1.75;
color:#475569;
}

.docs-accordion-code{
display:block;
margin:0 0 14px;
padding:14px 16px;
border-radius:16px;
background:#0f172a;
color:#e2e8f0;
font-size:13px;
line-height:1.65;
overflow-x:auto;
white-space:pre;
}

.docs-accordion-note{
padding:14px 16px;
border-radius:16px;
background:#f0f9ff;
border:1px solid #bae6fd;
color:#0369a1;
font-size:14px;
line-height:1.65;
font-weight:750;
}

@media (max-width: 640px){
.docs-accordion-top{
padding:22px;
}

.docs-accordion-title{
font-size:34px;
}

.docs-accordion-list{
padding:18px;
}

.docs-accordion-item summary{
grid-template-columns:auto minmax(0,1fr);
padding:18px;
align-items:flex-start;
}

.docs-accordion-toggle{
grid-column:2;
justify-self:start;
margin-top:4px;
}

.docs-accordion-content{
padding:0 18px 18px;
}
}

This documentation accordion is useful for technical content because it can combine readable explanations, code examples, and important notes in one compact component. It helps readers scan the guide first and then open the exact section they need.

17. Support Center Accordion

A support center accordion is useful for help pages, knowledge bases, customer support portals, and service websites. It helps visitors find answers by topic without scrolling through a very long support page.

This example uses category labels, helpful answer cards, and clear support-style content. It is designed for customer questions, troubleshooting, account help, billing help, and product support pages.

  • Perfect for support centers, help pages, knowledge bases, and customer service pages
  • Groups support questions into clear expandable cards
  • Includes category tags and helpful answer content
  • Built with native <details> and <summary>
  • Works without JavaScript
Support Center

How can we help?

Use support center accordions to organize common questions, troubleshooting steps, and customer help topics in one readable section.

Search help articles or browse topics below
Account How do I update my account information?

You can use this accordion answer to explain profile settings, password updates, email changes, and account preferences in a simple way.

View account guide Contact support
Billing Where can I find my invoices?

Use this answer to explain billing history, invoice downloads, tax details, and how customers can update payment methods.

Billing settings
Troubleshooting What should I do if something is not working?

A troubleshooting accordion can include first steps, links to documentation, and instructions for sending useful details to support.

Troubleshooting guide Open ticket

HTML

<section class="support-center-accordion">

  <div class="support-center-header">
    <div class="support-center-label">Support Center</div>
    <h3 class="support-center-title">How can we help?</h3>
    <p class="support-center-text">Use support center accordions to organize common questions, troubleshooting steps, and customer help topics in one readable section.</p>
  </div>

  <div class="support-center-search">Search help articles or browse topics below</div>

  <div class="support-center-list">

    <details class="support-center-item" open>
      <summary>
        <span class="support-center-question">
          <span class="support-center-tag">Account</span>
          <strong>How do I update my account information?</strong>
        </span>
        <span class="support-center-toggle"></span>
      </summary>
      <div class="support-center-answer">
        <p>You can use this accordion answer to explain profile settings, password updates, email changes, and account preferences in a simple way.</p>
        <div class="support-center-actions">
          <a class="support-center-action" href="#">View account guide</a>
          <a class="support-center-action" href="#">Contact support</a>
        </div>
      </div>
    </details>

    <details class="support-center-item">
      <summary>
        <span class="support-center-question">
          <span class="support-center-tag">Billing</span>
          <strong>Where can I find my invoices?</strong>
        </span>
        <span class="support-center-toggle"></span>
      </summary>
      <div class="support-center-answer">
        <p>Use this answer to explain billing history, invoice downloads, tax details, and how customers can update payment methods.</p>
        <div class="support-center-actions">
          <a class="support-center-action" href="#">Billing settings</a>
        </div>
      </div>
    </details>

    <details class="support-center-item">
      <summary>
        <span class="support-center-question">
          <span class="support-center-tag">Troubleshooting</span>
          <strong>What should I do if something is not working?</strong>
        </span>
        <span class="support-center-toggle"></span>
      </summary>
      <div class="support-center-answer">
        <p>A troubleshooting accordion can include first steps, links to documentation, and instructions for sending useful details to support.</p>
        <div class="support-center-actions">
          <a class="support-center-action" href="#">Troubleshooting guide</a>
          <a class="support-center-action" href="#">Open ticket</a>
        </div>
      </div>
    </details>

  </div>

</section>

CSS

.support-center-accordion{
width:min(100%,920px);
}

.support-center-header{
text-align:center;
margin-bottom:26px;
}

.support-center-label{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.support-center-label::before{
content:"?";
display:grid;
place-items:center;
width:20px;
height:20px;
border-radius:999px;
background:#2563eb;
color:#ffffff;
font-size:12px;
font-weight:950;
}

.support-center-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,56px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.support-center-text{
max-width:680px;
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.support-center-search{
display:flex;
align-items:center;
gap:12px;
margin:0 auto 22px;
width:min(100%,680px);
min-height:56px;
padding:0 18px;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 46px rgba(15,23,42,.08);
color:#64748b;
font-size:15px;
font-weight:750;
}

.support-center-search::before{
content:"⌕";
font-size:24px;
font-weight:900;
color:#2563eb;
}

.support-center-list{
display:grid;
gap:14px;
}

.support-center-item{
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.support-center-item:hover{
transform:translateY(-2px);
border-color:rgba(37,99,235,.26);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.support-center-item[open]{
border-color:rgba(37,99,235,.38);
box-shadow:0 30px 76px rgba(37,99,235,.13);
}

.support-center-item summary{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
padding:22px;
cursor:pointer;
list-style:none;
}

.support-center-item summary::-webkit-details-marker{
display:none;
}

.support-center-question{
min-width:0;
}

.support-center-tag{
display:inline-flex;
margin-bottom:8px;
padding:5px 9px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:11px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.support-center-question strong{
display:block;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.support-center-toggle{
display:grid;
place-items:center;
width:36px;
height:36px;
border-radius:999px;
background:#eff6ff;
color:#2563eb;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.support-center-toggle::before{
content:"+";
}

.support-center-item[open] .support-center-toggle{
background:#2563eb;
color:#ffffff;
transform:rotate(180deg);
}

.support-center-item[open] .support-center-toggle::before{
content:"−";
}

.support-center-answer{
padding:0 22px 22px;
}

.support-center-answer p{
margin:0 0 14px;
font-size:15px;
line-height:1.75;
color:#475569;
}

.support-center-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.support-center-action{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 13px;
border-radius:999px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#0f172a;
text-decoration:none;
font-size:13px;
font-weight:850;
}

@media (max-width: 640px){
.support-center-title{
font-size:36px;
}

.support-center-search{
border-radius:22px;
min-height:52px;
}

.support-center-item summary{
padding:18px;
align-items:flex-start;
}

.support-center-answer{
padding:0 18px 18px;
}
}

This support center accordion is a practical pattern for customer-facing help content. Category tags, clear questions, and optional action buttons help users find the next step faster.

18. Split Layout Accordion

A split layout accordion combines a visual content block on one side and expandable information on the other. This makes the section feel more like a complete landing page block instead of a simple accordion list.

This example uses a left-side visual panel with feature cards and a right-side accordion for explaining services, features, or benefits. It works well for SaaS pages, agency websites, service pages, and homepage sections.

  • Perfect for landing pages, SaaS sections, service pages, and agency websites
  • Combines a visual card area with expandable content
  • Good for explaining benefits, processes, and feature groups
  • Built with native <details> and <summary>
  • Works without JavaScript
Modern website section Combine strong visuals with expandable content to create a complete landing page block.
3x Cleaner content
100% Responsive
CSS Only UI
Split Accordion

Explain features without a long page

Use this split layout when you want the accordion to feel like a designed website section with visual balance and strong content hierarchy.

Why use a split accordion section?

A split layout gives the accordion more context. The visual side can show a product, feature summary, statistics, image, or brand element while the accordion explains details.

Where does this layout work best?

This pattern works well on service pages, SaaS landing pages, agency homepages, product pages, and sections that explain multiple benefits.

How should the content be written?

Keep each accordion title short and make the open text focused. The goal is to support scanning, not to hide a full article inside each item.

HTML

<section class="split-layout-accordion">

  <div class="split-layout-visual">

    <div class="split-layout-visual-inner">

      <div class="split-layout-visual-card">
        <strong>Modern website section</strong>
        <span>Combine strong visuals with expandable content to create a complete landing page block.</span>
      </div>

      <div class="split-layout-visual-stats">
        <div class="split-layout-stat">
          <strong>3x</strong>
          <span>Cleaner content</span>
        </div>
        <div class="split-layout-stat">
          <strong>100%</strong>
          <span>Responsive</span>
        </div>
        <div class="split-layout-stat">
          <strong>CSS</strong>
          <span>Only UI</span>
        </div>
      </div>

    </div>

  </div>

  <div class="split-layout-content">

    <div class="split-layout-label">Split Accordion</div>
    <h3 class="split-layout-title">Explain features without a long page</h3>
    <p class="split-layout-text">Use this split layout when you want the accordion to feel like a designed website section with visual balance and strong content hierarchy.</p>

    <div class="split-layout-list">

      <details class="split-layout-item" open>
        <summary>Why use a split accordion section?</summary>
        <div class="split-layout-answer">
          <p>A split layout gives the accordion more context. The visual side can show a product, feature summary, statistics, image, or brand element while the accordion explains details.</p>
        </div>
      </details>

      <details class="split-layout-item">
        <summary>Where does this layout work best?</summary>
        <div class="split-layout-answer">
          <p>This pattern works well on service pages, SaaS landing pages, agency homepages, product pages, and sections that explain multiple benefits.</p>
        </div>
      </details>

      <details class="split-layout-item">
        <summary>How should the content be written?</summary>
        <div class="split-layout-answer">
          <p>Keep each accordion title short and make the open text focused. The goal is to support scanning, not to hide a full article inside each item.</p>
        </div>
      </details>

    </div>

  </div>

</section>

CSS

.split-layout-accordion{
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:34px;
align-items:center;
}

.split-layout-visual{
position:relative;
min-height:560px;
border-radius:34px;
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.32),transparent 32%),
linear-gradient(135deg,#312e81,#2563eb 48%,#ec4899);
box-shadow:0 32px 90px rgba(37,99,235,.22);
overflow:hidden;
padding:26px;
display:grid;
align-content:end;
}

.split-layout-visual::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-70px;
top:-70px;
border-radius:999px;
background:rgba(255,255,255,.18);
}

.split-layout-visual::after{
content:"";
position:absolute;
width:210px;
height:210px;
left:-54px;
bottom:70px;
border-radius:999px;
background:rgba(255,255,255,.13);
}

.split-layout-visual-inner{
position:relative;
z-index:2;
display:grid;
gap:14px;
}

.split-layout-visual-card{
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(16px);
box-shadow:0 22px 54px rgba(0,0,0,.16);
}

.split-layout-visual-card strong{
display:block;
margin-bottom:5px;
font-size:18px;
font-weight:950;
color:#ffffff;
}

.split-layout-visual-card span{
display:block;
font-size:14px;
line-height:1.55;
font-weight:700;
color:rgba(255,255,255,.78);
}

.split-layout-visual-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.split-layout-stat{
padding:15px;
border-radius:20px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.20);
backdrop-filter:blur(14px);
}

.split-layout-stat strong{
display:block;
font-size:24px;
line-height:1;
font-weight:950;
color:#ffffff;
}

.split-layout-stat span{
display:block;
margin-top:5px;
font-size:12px;
line-height:1.35;
font-weight:750;
color:rgba(255,255,255,.75);
}

.split-layout-content{
min-width:0;
}

.split-layout-label{
display:inline-flex;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.split-layout-title{
margin:0 0 14px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.split-layout-text{
margin:0 0 24px;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.split-layout-list{
display:grid;
gap:14px;
}

.split-layout-item{
overflow:hidden;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 48px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.split-layout-item:hover{
transform:translateY(-2px);
border-color:rgba(124,58,237,.26);
box-shadow:0 26px 64px rgba(15,23,42,.12);
}

.split-layout-item[open]{
border-color:rgba(124,58,237,.40);
box-shadow:0 30px 76px rgba(124,58,237,.14);
}

.split-layout-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px;
cursor:pointer;
list-style:none;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.split-layout-item summary::-webkit-details-marker{
display:none;
}

.split-layout-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#ede9fe;
color:#6d28d9;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.split-layout-item[open] summary::after{
content:"−";
background:#7c3aed;
color:#ffffff;
transform:rotate(180deg);
}

.split-layout-answer{
padding:0 20px 20px;
}

.split-layout-answer p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 900px){
.split-layout-accordion{
grid-template-columns:1fr;
}

.split-layout-visual{
min-height:420px;
}
}

@media (max-width: 640px){
.split-layout-title{
font-size:36px;
}

.split-layout-visual{
padding:20px;
border-radius:26px;
}

.split-layout-visual-stats{
grid-template-columns:1fr;
}

.split-layout-item summary{
padding:18px;
font-size:16px;
}

.split-layout-answer{
padding:0 18px 18px;
}
}

This split layout accordion is useful when you want the accordion to be part of a stronger visual section. It works especially well when the left side can show a product, illustration, statistics, or feature summary while the right side explains the details.

19. Two Column Accordion

A two column accordion is useful when you have many FAQ items or grouped content blocks and want to reduce vertical length on desktop screens. It keeps the section compact while still stacking cleanly on mobile.

This example uses a responsive CSS grid with two accordion columns on wider screens and one column on smaller screens. It works well for large FAQ pages, service pages, pricing help sections, and support content.

  • Perfect for large FAQ sections, service pages, pricing pages, and support pages
  • Uses a two-column CSS grid on desktop
  • Stacks into one column on mobile screens
  • Built with native <details> and <summary>
  • Works without JavaScript
Two Column Accordion

More answers in less space

Use a two-column accordion when you have many questions or content groups and want the section to stay compact on desktop screens.

Can accordions be used for long FAQ pages?

Yes. A two-column accordion can make long FAQ sections easier to scan on desktop while still stacking neatly on mobile.

Should both columns have equal content?

They do not need to be perfectly equal, but balanced content helps the section look more organized and visually stable.

Is this layout mobile-friendly?

Yes. The grid changes to one column on smaller screens so each accordion item has enough horizontal space.

Where does this pattern work best?

Use it for FAQ pages, pricing help sections, service questions, support content, and long landing page answer blocks.

Can I add more than six questions?

Yes. You can add as many items as needed, but keep the questions grouped logically so users do not feel overwhelmed.

Does this need JavaScript?

No. The accordion behavior is handled by native details and summary elements, while CSS controls the layout and style.

HTML

<section class="two-column-accordion">

  <div class="two-column-accordion-header">
    <div class="two-column-accordion-label">Two Column Accordion</div>
    <h3 class="two-column-accordion-title">More answers in less space</h3>
    <p class="two-column-accordion-text">Use a two-column accordion when you have many questions or content groups and want the section to stay compact on desktop screens.</p>
  </div>

  <div class="two-column-accordion-grid">

    <details class="two-column-accordion-item" open>
      <summary>Can accordions be used for long FAQ pages?</summary>
      <div class="two-column-accordion-answer">
        <p>Yes. A two-column accordion can make long FAQ sections easier to scan on desktop while still stacking neatly on mobile.</p>
      </div>
    </details>

    <details class="two-column-accordion-item">
      <summary>Should both columns have equal content?</summary>
      <div class="two-column-accordion-answer">
        <p>They do not need to be perfectly equal, but balanced content helps the section look more organized and visually stable.</p>
      </div>
    </details>

    <details class="two-column-accordion-item">
      <summary>Is this layout mobile-friendly?</summary>
      <div class="two-column-accordion-answer">
        <p>Yes. The grid changes to one column on smaller screens so each accordion item has enough horizontal space.</p>
      </div>
    </details>

    <details class="two-column-accordion-item">
      <summary>Where does this pattern work best?</summary>
      <div class="two-column-accordion-answer">
        <p>Use it for FAQ pages, pricing help sections, service questions, support content, and long landing page answer blocks.</p>
      </div>
    </details>

    <details class="two-column-accordion-item">
      <summary>Can I add more than six questions?</summary>
      <div class="two-column-accordion-answer">
        <p>Yes. You can add as many items as needed, but keep the questions grouped logically so users do not feel overwhelmed.</p>
      </div>
    </details>

    <details class="two-column-accordion-item">
      <summary>Does this need JavaScript?</summary>
      <div class="two-column-accordion-answer">
        <p>No. The accordion behavior is handled by native details and summary elements, while CSS controls the layout and style.</p>
      </div>
    </details>

  </div>

</section>

CSS

.two-column-accordion{
width:min(100%,1040px);
}

.two-column-accordion-header{
max-width:760px;
margin:0 auto 28px;
text-align:center;
}

.two-column-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.two-column-accordion-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.two-column-accordion-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.two-column-accordion-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
align-items:start;
}

.two-column-accordion-item{
overflow:hidden;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 48px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.two-column-accordion-item:hover{
transform:translateY(-2px);
border-color:rgba(14,165,233,.28);
box-shadow:0 26px 64px rgba(15,23,42,.12);
}

.two-column-accordion-item[open]{
border-color:rgba(14,165,233,.42);
box-shadow:0 30px 76px rgba(14,165,233,.14);
}

.two-column-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px;
cursor:pointer;
list-style:none;
font-size:17px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.two-column-accordion-item summary::-webkit-details-marker{
display:none;
}

.two-column-accordion-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:32px;
height:32px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.two-column-accordion-item[open] summary::after{
content:"−";
background:#0ea5e9;
color:#ffffff;
transform:rotate(180deg);
}

.two-column-accordion-answer{
padding:0 20px 20px;
}

.two-column-accordion-answer p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 760px){
.two-column-accordion-grid{
grid-template-columns:1fr;
}

.two-column-accordion-title{
font-size:36px;
}

.two-column-accordion-item summary{
padding:18px;
font-size:16px;
}

.two-column-accordion-answer{
padding:0 18px 18px;
}
}

This two column accordion is a useful pattern when you need to show many questions without making the page feel too long. It works well on desktop, but still becomes a simple single-column accordion on mobile.

20. Image Accordion

An image accordion adds a visual preview to expandable content. This can make the accordion more engaging for product categories, portfolio services, travel sections, feature guides, and visual comparison blocks.

This example uses image-style gradient cards inside the accordion content. The demo does not require external images, but you can replace the visual blocks with real product photos, service images, screenshots, or portfolio thumbnails.

  • Perfect for product categories, visual guides, portfolio services, and landing page feature sections
  • Includes visual preview cards inside accordion panels
  • Can be adapted to real images or screenshots
  • Built with native <details> and <summary>
  • Works without JavaScript
Image Accordion

Expandable content with visual previews

Use image accordions when each item needs extra context, such as a product category, service type, screenshot, or portfolio preview.

Product category preview

Show a visual preview next to category details so users can understand the content faster before clicking through.

View category
Portfolio service preview

Use image accordions to introduce service types, project styles, case study groups, or creative work categories.

View service
Feature screenshot preview

Replace the gradient block with a real screenshot when you want to explain app features or software interface sections.

View feature

HTML

<section class="image-accordion">

  <div class="image-accordion-intro">
    <div class="image-accordion-label">Image Accordion</div>
    <h3 class="image-accordion-title">Expandable content with visual previews</h3>
    <p class="image-accordion-text">Use image accordions when each item needs extra context, such as a product category, service type, screenshot, or portfolio preview.</p>
  </div>

  <div class="image-accordion-list">

    <details class="image-accordion-item" open>
      <summary>Product category preview</summary>
      <div class="image-accordion-content">
        <div class="image-accordion-visual"></div>
        <div class="image-accordion-copy">
          <p>Show a visual preview next to category details so users can understand the content faster before clicking through.</p>
          <a class="image-accordion-link" href="#">View category</a>
        </div>
      </div>
    </details>

    <details class="image-accordion-item">
      <summary>Portfolio service preview</summary>
      <div class="image-accordion-content">
        <div class="image-accordion-visual"></div>
        <div class="image-accordion-copy">
          <p>Use image accordions to introduce service types, project styles, case study groups, or creative work categories.</p>
          <a class="image-accordion-link" href="#">View service</a>
        </div>
      </div>
    </details>

    <details class="image-accordion-item">
      <summary>Feature screenshot preview</summary>
      <div class="image-accordion-content">
        <div class="image-accordion-visual"></div>
        <div class="image-accordion-copy">
          <p>Replace the gradient block with a real screenshot when you want to explain app features or software interface sections.</p>
          <a class="image-accordion-link" href="#">View feature</a>
        </div>
      </div>
    </details>

  </div>

</section>

CSS

.image-accordion{
width:min(100%,920px);
display:grid;
grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
gap:30px;
align-items:center;
}

.image-accordion-intro{
min-width:0;
}

.image-accordion-label{
display:inline-flex;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.image-accordion-title{
margin:0 0 14px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.image-accordion-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.image-accordion-list{
display:grid;
gap:14px;
}

.image-accordion-item{
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.image-accordion-item:hover{
transform:translateY(-2px);
border-color:rgba(249,115,22,.30);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.image-accordion-item[open]{
border-color:rgba(249,115,22,.42);
box-shadow:0 30px 76px rgba(249,115,22,.14);
}

.image-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px;
cursor:pointer;
list-style:none;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.image-accordion-item summary::-webkit-details-marker{
display:none;
}

.image-accordion-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.image-accordion-item[open] summary::after{
content:"−";
background:#f97316;
color:#ffffff;
transform:rotate(180deg);
}

.image-accordion-content{
display:grid;
grid-template-columns:150px minmax(0,1fr);
gap:16px;
padding:0 20px 20px;
align-items:center;
}

.image-accordion-visual{
min-height:118px;
border-radius:20px;
position:relative;
overflow:hidden;
box-shadow:0 18px 42px rgba(15,23,42,.12);
}

.image-accordion-item:nth-child(1) .image-accordion-visual{
background:
radial-gradient(circle at 28% 24%,rgba(255,255,255,.60),transparent 28%),
linear-gradient(135deg,#f97316,#ec4899);
}

.image-accordion-item:nth-child(2) .image-accordion-visual{
background:
radial-gradient(circle at 28% 24%,rgba(255,255,255,.60),transparent 28%),
linear-gradient(135deg,#2563eb,#7c3aed);
}

.image-accordion-item:nth-child(3) .image-accordion-visual{
background:
radial-gradient(circle at 28% 24%,rgba(255,255,255,.60),transparent 28%),
linear-gradient(135deg,#16a34a,#0ea5e9);
}

.image-accordion-visual::before{
content:"";
position:absolute;
left:18px;
right:18px;
bottom:18px;
height:32px;
border-radius:999px;
background:rgba(255,255,255,.22);
border:1px solid rgba(255,255,255,.24);
}

.image-accordion-copy p{
margin:0 0 12px;
font-size:15px;
line-height:1.75;
color:#475569;
}

.image-accordion-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 13px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:850;
}

@media (max-width: 820px){
.image-accordion{
grid-template-columns:1fr;
}

.image-accordion-title{
font-size:36px;
}
}

@media (max-width: 600px){
.image-accordion-item summary{
padding:18px;
font-size:16px;
}

.image-accordion-content{
grid-template-columns:1fr;
padding:0 18px 18px;
}

.image-accordion-visual{
min-height:150px;
}
}

This image accordion makes expandable content more visual and easier to understand. It works best when each accordion item has a strong visual connection, such as a product category, screenshot, service type, or portfolio preview.

21. Comparison Accordion

A comparison accordion is useful when visitors need to compare two or more options without reading a long comparison table. It can help explain plan differences, product choices, service packages, or feature alternatives in a compact format.

This example compares Basic and Pro options inside expandable accordion panels. It works well for pricing pages, product comparison sections, service package pages, SaaS landing pages, and decision-focused content blocks.

  • Perfect for pricing pages, product comparisons, plan differences, and service packages
  • Uses side-by-side comparison cards inside accordion panels
  • Helps users understand differences without a large table
  • Built with native <details> and <summary>
  • Works without JavaScript
Comparison Accordion

Compare options without a huge table

Use comparison accordions when users need to understand differences between plans, products, services, or feature sets.

Basic vs Pro plan
Basic Good for simple websites
  • Essential components
  • Standard support
  • Basic customization
Pro Better for growing websites
  • Advanced components
  • Priority support
  • More customization options
CSS-only vs JavaScript accordion
CSS / HTML Simple and lightweight
  • Great for FAQ sections
  • No extra script needed
  • Fast to reuse
JavaScript More control
  • Single-open behavior
  • Custom animations
  • Advanced state control
Product A vs Product B
Product A Best for small projects
  • Lower starting price
  • Compact feature set
  • Easy setup
Product B Best for advanced needs
  • More capacity
  • Premium materials
  • Long-term flexibility

HTML

<section class="comparison-accordion">

  <div class="comparison-accordion-header">
    <div class="comparison-accordion-label">Comparison Accordion</div>
    <h3 class="comparison-accordion-title">Compare options without a huge table</h3>
    <p class="comparison-accordion-text">Use comparison accordions when users need to understand differences between plans, products, services, or feature sets.</p>
  </div>

  <div class="comparison-accordion-list">

    <details class="comparison-accordion-item" open>
      <summary>Basic vs Pro plan</summary>
      <div class="comparison-accordion-content">

        <div class="comparison-accordion-grid">

          <div class="comparison-accordion-card">
            <span>Basic</span>
            <strong>Good for simple websites</strong>
            <ul>
              <li>Essential components</li>
              <li>Standard support</li>
              <li>Basic customization</li>
            </ul>
          </div>

          <div class="comparison-accordion-card comparison-accordion-card-pro">
            <span>Pro</span>
            <strong>Better for growing websites</strong>
            <ul>
              <li>Advanced components</li>
              <li>Priority support</li>
              <li>More customization options</li>
            </ul>
          </div>

        </div>

      </div>
    </details>

    <details class="comparison-accordion-item">
      <summary>CSS-only vs JavaScript accordion</summary>
      <div class="comparison-accordion-content">

        <div class="comparison-accordion-grid">

          <div class="comparison-accordion-card">
            <span>CSS / HTML</span>
            <strong>Simple and lightweight</strong>
            <ul>
              <li>Great for FAQ sections</li>
              <li>No extra script needed</li>
              <li>Fast to reuse</li>
            </ul>
          </div>

          <div class="comparison-accordion-card comparison-accordion-card-pro">
            <span>JavaScript</span>
            <strong>More control</strong>
            <ul>
              <li>Single-open behavior</li>
              <li>Custom animations</li>
              <li>Advanced state control</li>
            </ul>
          </div>

        </div>

      </div>
    </details>

    <details class="comparison-accordion-item">
      <summary>Product A vs Product B</summary>
      <div class="comparison-accordion-content">

        <div class="comparison-accordion-grid">

          <div class="comparison-accordion-card">
            <span>Product A</span>
            <strong>Best for small projects</strong>
            <ul>
              <li>Lower starting price</li>
              <li>Compact feature set</li>
              <li>Easy setup</li>
            </ul>
          </div>

          <div class="comparison-accordion-card comparison-accordion-card-pro">
            <span>Product B</span>
            <strong>Best for advanced needs</strong>
            <ul>
              <li>More capacity</li>
              <li>Premium materials</li>
              <li>Long-term flexibility</li>
            </ul>
          </div>

        </div>

      </div>
    </details>

  </div>

</section>

CSS

.comparison-accordion{
width:min(100%,920px);
}

.comparison-accordion-header{
max-width:760px;
margin:0 auto 28px;
text-align:center;
}

.comparison-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.comparison-accordion-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.comparison-accordion-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.comparison-accordion-list{
display:grid;
gap:14px;
}

.comparison-accordion-item{
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.comparison-accordion-item:hover{
transform:translateY(-2px);
border-color:rgba(37,99,235,.28);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.comparison-accordion-item[open]{
border-color:rgba(37,99,235,.42);
box-shadow:0 30px 76px rgba(37,99,235,.14);
}

.comparison-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 22px;
cursor:pointer;
list-style:none;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.comparison-accordion-item summary::-webkit-details-marker{
display:none;
}

.comparison-accordion-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.comparison-accordion-item[open] summary::after{
content:"−";
background:#2563eb;
color:#ffffff;
transform:rotate(180deg);
}

.comparison-accordion-content{
padding:0 22px 22px;
}

.comparison-accordion-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.comparison-accordion-card{
padding:18px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.comparison-accordion-card-pro{
background:
radial-gradient(circle at 18% 18%,rgba(37,99,235,.10),transparent 34%),
#eff6ff;
border-color:#bfdbfe;
}

.comparison-accordion-card span{
display:inline-flex;
margin-bottom:10px;
padding:6px 9px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
color:#64748b;
font-size:11px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.comparison-accordion-card-pro span{
background:#2563eb;
border-color:#2563eb;
color:#ffffff;
}

.comparison-accordion-card strong{
display:block;
margin-bottom:10px;
font-size:20px;
font-weight:950;
color:#0f172a;
}

.comparison-accordion-card ul{
display:grid;
gap:8px;
margin:0;
padding:0;
list-style:none;
}

.comparison-accordion-card li{
display:flex;
gap:8px;
font-size:14px;
line-height:1.55;
font-weight:750;
color:#475569;
}

.comparison-accordion-card li::before{
content:"✓";
display:grid;
place-items:center;
flex:0 0 auto;
width:19px;
height:19px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:11px;
font-weight:950;
}

@media (max-width: 720px){
.comparison-accordion-title{
font-size:36px;
}

.comparison-accordion-grid{
grid-template-columns:1fr;
}

.comparison-accordion-item summary{
padding:18px;
font-size:16px;
}

.comparison-accordion-content{
padding:0 18px 18px;
}
}

This comparison accordion is useful when users need structured decision-making content but a full comparison table would feel too large. It keeps the page compact while still showing meaningful differences between options.

22. Timeline Accordion

A timeline accordion is useful for project processes, onboarding flows, company history, roadmap sections, service workflows, and step-by-step guides. It combines chronological structure with expandable detail.

This example uses a vertical timeline line, numbered milestones, and expandable content panels. It works well when you want to show progress or order without making every explanation visible at once.

  • Perfect for project timelines, onboarding flows, roadmaps, service workflows, and process sections
  • Combines timeline visuals with expandable accordion content
  • Uses numbered milestones and a vertical line
  • Built with native <details> and <summary>
  • Works without JavaScript
Timeline Accordion

Show progress with expandable milestones

Use a timeline accordion when your content has a sequence, roadmap, service process, or project history.

Discovery and planning Start with goals, requirements, and the main project direction.

The first accordion item can explain the planning stage, what information is collected, and what decisions are made before design or development begins.

Research Strategy Requirements
Design and structure Create the layout, visual direction, and content hierarchy.

This stage can explain wireframes, UI direction, content structure, prototypes, and design approval steps.

Wireframes UI Design Review
Build and launch Develop, test, optimize, and publish the final result.

The final stage can include implementation, responsive testing, performance optimization, launch preparation, and post-launch support.

Development Testing Launch

HTML

<section class="timeline-accordion">

  <div class="timeline-accordion-header">

    <div>
      <div class="timeline-accordion-label">Timeline Accordion</div>
      <h3 class="timeline-accordion-title">Show progress with expandable milestones</h3>
    </div>

    <p class="timeline-accordion-text">Use a timeline accordion when your content has a sequence, roadmap, service process, or project history.</p>

  </div>

  <div class="timeline-accordion-list">

    <details class="timeline-accordion-item" open>
      <summary>
        <span class="timeline-accordion-summary">
          <strong>Discovery and planning</strong>
          <span>Start with goals, requirements, and the main project direction.</span>
        </span>
        <span class="timeline-accordion-toggle"></span>
      </summary>
      <div class="timeline-accordion-content">
        <p>The first accordion item can explain the planning stage, what information is collected, and what decisions are made before design or development begins.</p>
        <div class="timeline-accordion-meta">
          <span>Research</span>
          <span>Strategy</span>
          <span>Requirements</span>
        </div>
      </div>
    </details>

    <details class="timeline-accordion-item">
      <summary>
        <span class="timeline-accordion-summary">
          <strong>Design and structure</strong>
          <span>Create the layout, visual direction, and content hierarchy.</span>
        </span>
        <span class="timeline-accordion-toggle"></span>
      </summary>
      <div class="timeline-accordion-content">
        <p>This stage can explain wireframes, UI direction, content structure, prototypes, and design approval steps.</p>
        <div class="timeline-accordion-meta">
          <span>Wireframes</span>
          <span>UI Design</span>
          <span>Review</span>
        </div>
      </div>
    </details>

    <details class="timeline-accordion-item">
      <summary>
        <span class="timeline-accordion-summary">
          <strong>Build and launch</strong>
          <span>Develop, test, optimize, and publish the final result.</span>
        </span>
        <span class="timeline-accordion-toggle"></span>
      </summary>
      <div class="timeline-accordion-content">
        <p>The final stage can include implementation, responsive testing, performance optimization, launch preparation, and post-launch support.</p>
        <div class="timeline-accordion-meta">
          <span>Development</span>
          <span>Testing</span>
          <span>Launch</span>
        </div>
      </div>
    </details>

  </div>

</section>

CSS

.timeline-accordion{
width:min(100%,900px);
}

.timeline-accordion-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);
gap:28px;
align-items:end;
margin-bottom:30px;
}

.timeline-accordion-label{
display:inline-flex;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.timeline-accordion-title{
margin:0;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.timeline-accordion-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.timeline-accordion-list{
position:relative;
display:grid;
gap:18px;
padding-left:36px;
counter-reset:timelineAccordion;
}

.timeline-accordion-list::before{
content:"";
position:absolute;
left:17px;
top:8px;
bottom:8px;
width:3px;
border-radius:999px;
background:linear-gradient(180deg,#22c55e,#f97316);
}

.timeline-accordion-item{
position:relative;
counter-increment:timelineAccordion;
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.timeline-accordion-item::before{
content:counter(timelineAccordion);
position:absolute;
left:-36px;
top:20px;
z-index:2;
display:grid;
place-items:center;
width:36px;
height:36px;
border-radius:999px;
background:#ffffff;
border:3px solid #22c55e;
color:#15803d;
font-size:14px;
font-weight:950;
box-shadow:0 12px 30px rgba(15,23,42,.12);
}

.timeline-accordion-item:hover{
transform:translateY(-2px);
border-color:rgba(34,197,94,.30);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.timeline-accordion-item[open]{
border-color:rgba(34,197,94,.42);
box-shadow:0 30px 76px rgba(34,197,94,.14);
}

.timeline-accordion-item summary{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:16px;
align-items:center;
padding:20px 22px;
cursor:pointer;
list-style:none;
}

.timeline-accordion-item summary::-webkit-details-marker{
display:none;
}

.timeline-accordion-summary strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.timeline-accordion-summary span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.timeline-accordion-toggle{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.timeline-accordion-toggle::before{
content:"+";
}

.timeline-accordion-item[open] .timeline-accordion-toggle{
background:#16a34a;
color:#ffffff;
transform:rotate(180deg);
}

.timeline-accordion-item[open] .timeline-accordion-toggle::before{
content:"−";
}

.timeline-accordion-content{
padding:0 22px 22px;
}

.timeline-accordion-content p{
margin:0 0 14px;
font-size:15px;
line-height:1.75;
color:#475569;
}

.timeline-accordion-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.timeline-accordion-meta span{
display:inline-flex;
align-items:center;
min-height:32px;
padding:0 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#475569;
font-size:12px;
font-weight:850;
}

@media (max-width: 760px){
.timeline-accordion-header{
grid-template-columns:1fr;
gap:12px;
}

.timeline-accordion-title{
font-size:36px;
}

.timeline-accordion-list{
padding-left:28px;
}

.timeline-accordion-list::before{
left:13px;
}

.timeline-accordion-item::before{
left:-28px;
width:30px;
height:30px;
font-size:12px;
}

.timeline-accordion-item summary{
padding:18px;
align-items:flex-start;
}

.timeline-accordion-content{
padding:0 18px 18px;
}
}

This timeline accordion is useful when the content should feel sequential but still compact. It gives users the main steps first and lets them open more detail only when they need it.

23. Checklist Accordion

A checklist accordion is useful for launch checklists, setup guides, onboarding steps, project planning, SEO tasks, and quality control sections. It lets users open each checklist group and quickly see what needs to be completed.

This example uses expandable checklist cards with custom checkbox rows. It is useful for tutorials, dashboards, admin panels, onboarding flows, and practical guide pages where users need a clear action list.

  • Perfect for setup guides, launch checklists, onboarding flows, and tutorial pages
  • Includes clean checkbox rows inside accordion panels
  • Useful for SEO, QA, project planning, and admin workflows
  • Built with native <details> and <summary>
  • Works without JavaScript
Checklist Accordion

Organize tasks into clear groups

Use checklist accordions when users need to follow a process, complete setup tasks, or review important items before publishing.

Launch readiness 68% complete
Content checklist Review the text, headings, and page structure.
Design checklist Review spacing, typography, contrast, and responsive behavior.
SEO checklist Review page title, meta description, links, and image text.

HTML

<section class="checklist-accordion">

  <div class="checklist-accordion-intro">
    <div class="checklist-accordion-label">Checklist Accordion</div>
    <h3 class="checklist-accordion-title">Organize tasks into clear groups</h3>
    <p class="checklist-accordion-text">Use checklist accordions when users need to follow a process, complete setup tasks, or review important items before publishing.</p>

    <div class="checklist-accordion-progress">
      <div class="checklist-accordion-progress-top">
        <strong>Launch readiness</strong>
        <span>68% complete</span>
      </div>
      <div class="checklist-accordion-bar"><span></span></div>
    </div>
  </div>

  <div class="checklist-accordion-list">

    <details class="checklist-accordion-item" open>
      <summary>
        <span class="checklist-accordion-summary">
          <strong>Content checklist</strong>
          <span>Review the text, headings, and page structure.</span>
        </span>
        <span class="checklist-accordion-toggle"></span>
      </summary>
      <div class="checklist-accordion-content">
        <div class="checklist-accordion-checks">
          <label class="checklist-accordion-check"><input type="checkbox" checked> <span>Check that the main headline clearly explains the page topic.</span></label>
          <label class="checklist-accordion-check"><input type="checkbox" checked> <span>Make sure each section has a useful heading.</span></label>
          <label class="checklist-accordion-check"><input type="checkbox"> <span>Remove duplicate or unnecessary content before publishing.</span></label>
        </div>
      </div>
    </details>

    <details class="checklist-accordion-item">
      <summary>
        <span class="checklist-accordion-summary">
          <strong>Design checklist</strong>
          <span>Review spacing, typography, contrast, and responsive behavior.</span>
        </span>
        <span class="checklist-accordion-toggle"></span>
      </summary>
      <div class="checklist-accordion-content">
        <div class="checklist-accordion-checks">
          <label class="checklist-accordion-check"><input type="checkbox"> <span>Test the layout on desktop, tablet, and mobile screens.</span></label>
          <label class="checklist-accordion-check"><input type="checkbox"> <span>Check that text contrast is strong enough on every background.</span></label>
          <label class="checklist-accordion-check"><input type="checkbox"> <span>Make buttons and links easy to tap on mobile.</span></label>
        </div>
      </div>
    </details>

    <details class="checklist-accordion-item">
      <summary>
        <span class="checklist-accordion-summary">
          <strong>SEO checklist</strong>
          <span>Review page title, meta description, links, and image text.</span>
        </span>
        <span class="checklist-accordion-toggle"></span>
      </summary>
      <div class="checklist-accordion-content">
        <div class="checklist-accordion-checks">
          <label class="checklist-accordion-check"><input type="checkbox"> <span>Write a clear SEO title and meta description.</span></label>
          <label class="checklist-accordion-check"><input type="checkbox"> <span>Add useful internal links to related pages.</span></label>
          <label class="checklist-accordion-check"><input type="checkbox"> <span>Use descriptive alt text for important images.</span></label>
        </div>
      </div>
    </details>

  </div>

</section>

CSS

.checklist-accordion{
width:min(100%,900px);
display:grid;
grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:30px;
align-items:center;
}

.checklist-accordion-intro{
min-width:0;
}

.checklist-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.checklist-accordion-label::before{
content:"✓";
display:grid;
place-items:center;
width:20px;
height:20px;
border-radius:999px;
background:#16a34a;
color:#ffffff;
font-size:12px;
font-weight:950;
}

.checklist-accordion-title{
margin:0 0 14px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.checklist-accordion-text{
margin:0 0 22px;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.checklist-accordion-progress{
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 48px rgba(15,23,42,.08);
}

.checklist-accordion-progress-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:12px;
}

.checklist-accordion-progress-top strong{
font-size:16px;
font-weight:950;
color:#0f172a;
}

.checklist-accordion-progress-top span{
font-size:13px;
font-weight:850;
color:#16a34a;
}

.checklist-accordion-bar{
height:10px;
border-radius:999px;
background:#e2e8f0;
overflow:hidden;
}

.checklist-accordion-bar span{
display:block;
width:68%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#16a34a,#2563eb);
}

.checklist-accordion-list{
display:grid;
gap:14px;
}

.checklist-accordion-item{
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.checklist-accordion-item:hover{
transform:translateY(-2px);
border-color:rgba(34,197,94,.28);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.checklist-accordion-item[open]{
border-color:rgba(34,197,94,.42);
box-shadow:0 30px 76px rgba(34,197,94,.14);
}

.checklist-accordion-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 22px;
cursor:pointer;
list-style:none;
}

.checklist-accordion-item summary::-webkit-details-marker{
display:none;
}

.checklist-accordion-summary strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.checklist-accordion-summary span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.checklist-accordion-toggle{
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.checklist-accordion-toggle::before{
content:"+";
}

.checklist-accordion-item[open] .checklist-accordion-toggle{
background:#16a34a;
color:#ffffff;
transform:rotate(180deg);
}

.checklist-accordion-item[open] .checklist-accordion-toggle::before{
content:"−";
}

.checklist-accordion-content{
padding:0 22px 22px;
}

.checklist-accordion-checks{
display:grid;
gap:10px;
}

.checklist-accordion-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
cursor:pointer;
}

.checklist-accordion-check input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#16a34a;
}

.checklist-accordion-check span{
font-size:14px;
line-height:1.55;
font-weight:750;
color:#475569;
}

@media (max-width: 860px){
.checklist-accordion{
grid-template-columns:1fr;
}

.checklist-accordion-title{
font-size:36px;
}
}

@media (max-width: 600px){
.checklist-accordion-item summary{
padding:18px;
align-items:flex-start;
}

.checklist-accordion-content{
padding:0 18px 18px;
}
}

This checklist accordion is useful when users need to complete or review several related tasks. It keeps the checklist organized and makes long task lists feel easier to manage.

24. Dashboard Settings Accordion

A dashboard settings accordion is useful for account pages, SaaS dashboards, admin panels, user profiles, and settings screens. It groups related settings into expandable panels so the interface stays clean and easier to navigate.

This example includes account, notifications, privacy, and billing sections. It uses form-like rows inside the accordion panels to demonstrate how settings can be organized without overwhelming the user.

  • Perfect for SaaS dashboards, profile pages, admin panels, and account settings
  • Groups settings into expandable sections
  • Includes form rows, toggles, and action buttons
  • Built with native <details> and <summary>
  • Works without JavaScript for the accordion behavior
Dashboard Settings

Manage account preferences

MH
Mart Herodes Admin account
01 Account settings Update name, email, password, and profile details.
Profile informationName, email address, and display settings. Edit profile
Two-factor authenticationAdd an extra layer of account security.
02 Notifications Control email alerts, reports, and product updates.
Email reportsReceive weekly activity reports.
Product updatesGet notified about new features.
03 Billing and invoices Manage plan, payment method, and invoice history.
Current planPro plan billed monthly. Manage plan
Invoice historyDownload previous invoices. View invoices

HTML

<section class="dashboard-settings-accordion">

  <div class="dashboard-settings-top">

    <div class="dashboard-settings-heading">
      <div class="dashboard-settings-label">Dashboard Settings</div>
      <h3 class="dashboard-settings-title">Manage account preferences</h3>
    </div>

    <div class="dashboard-settings-profile">
      <div class="dashboard-settings-avatar">MH</div>
      <div>
        <strong>Mart Herodes</strong>
        <span>Admin account</span>
      </div>
    </div>

  </div>

  <div class="dashboard-settings-list">

    <details class="dashboard-settings-item" open>
      <summary>
        <span class="dashboard-settings-icon">01</span>
        <span class="dashboard-settings-summary">
          <strong>Account settings</strong>
          <span>Update name, email, password, and profile details.</span>
        </span>
        <span class="dashboard-settings-toggle"></span>
      </summary>
      <div class="dashboard-settings-content">
        <div class="dashboard-settings-form">
          <div class="dashboard-settings-row">
            <span><strong>Profile information</strong><span>Name, email address, and display settings.</span></span>
            <a class="dashboard-settings-button" href="#">Edit profile</a>
          </div>
          <div class="dashboard-settings-row">
            <span><strong>Two-factor authentication</strong><span>Add an extra layer of account security.</span></span>
            <span class="dashboard-settings-switch is-on"></span>
          </div>
        </div>
      </div>
    </details>

    <details class="dashboard-settings-item">
      <summary>
        <span class="dashboard-settings-icon">02</span>
        <span class="dashboard-settings-summary">
          <strong>Notifications</strong>
          <span>Control email alerts, reports, and product updates.</span>
        </span>
        <span class="dashboard-settings-toggle"></span>
      </summary>
      <div class="dashboard-settings-content">
        <div class="dashboard-settings-form">
          <div class="dashboard-settings-row">
            <span><strong>Email reports</strong><span>Receive weekly activity reports.</span></span>
            <span class="dashboard-settings-switch is-on"></span>
          </div>
          <div class="dashboard-settings-row">
            <span><strong>Product updates</strong><span>Get notified about new features.</span></span>
            <span class="dashboard-settings-switch"></span>
          </div>
        </div>
      </div>
    </details>

    <details class="dashboard-settings-item">
      <summary>
        <span class="dashboard-settings-icon">03</span>
        <span class="dashboard-settings-summary">
          <strong>Billing and invoices</strong>
          <span>Manage plan, payment method, and invoice history.</span>
        </span>
        <span class="dashboard-settings-toggle"></span>
      </summary>
      <div class="dashboard-settings-content">
        <div class="dashboard-settings-form">
          <div class="dashboard-settings-row">
            <span><strong>Current plan</strong><span>Pro plan billed monthly.</span></span>
            <a class="dashboard-settings-button" href="#">Manage plan</a>
          </div>
          <div class="dashboard-settings-row">
            <span><strong>Invoice history</strong><span>Download previous invoices.</span></span>
            <a class="dashboard-settings-button" href="#">View invoices</a>
          </div>
        </div>
      </div>
    </details>

  </div>

</section>

CSS

.dashboard-settings-accordion{
width:min(100%,940px);
border-radius:32px;
background:rgba(15,23,42,.82);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 34px 100px rgba(0,0,0,.38);
overflow:hidden;
}

.dashboard-settings-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:26px;
border-bottom:1px solid rgba(255,255,255,.10);
background:
radial-gradient(circle at 14% 18%,rgba(37,99,235,.18),transparent 34%),
rgba(255,255,255,.03);
}

.dashboard-settings-heading{
min-width:0;
}

.dashboard-settings-label{
display:inline-flex;
margin-bottom:10px;
padding:7px 10px;
border-radius:999px;
background:rgba(37,99,235,.18);
border:1px solid rgba(147,197,253,.20);
color:#bfdbfe;
font-size:12px;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
}

.dashboard-settings-title{
margin:0;
font-size:clamp(30px,4.8vw,52px);
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff;
}

.dashboard-settings-profile{
display:flex;
align-items:center;
gap:12px;
padding:12px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.dashboard-settings-avatar{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#a855f7);
color:#ffffff;
font-weight:950;
}

.dashboard-settings-profile strong{
display:block;
font-size:14px;
font-weight:950;
color:#ffffff;
}

.dashboard-settings-profile span{
display:block;
margin-top:3px;
font-size:12px;
font-weight:700;
color:#94a3b8;
}

.dashboard-settings-list{
display:grid;
gap:14px;
padding:22px;
}

.dashboard-settings-item{
overflow:hidden;
border-radius:24px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.dashboard-settings-item[open]{
background:rgba(255,255,255,.08);
border-color:rgba(96,165,250,.36);
box-shadow:0 24px 70px rgba(37,99,235,.14);
}

.dashboard-settings-item summary{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:14px;
align-items:center;
padding:20px 22px;
cursor:pointer;
list-style:none;
}

.dashboard-settings-item summary::-webkit-details-marker{
display:none;
}

.dashboard-settings-icon{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:16px;
background:rgba(37,99,235,.16);
border:1px solid rgba(147,197,253,.20);
color:#93c5fd;
font-size:18px;
font-weight:950;
}

.dashboard-settings-summary strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#ffffff;
}

.dashboard-settings-summary span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:700;
color:#94a3b8;
}

.dashboard-settings-toggle{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#e2e8f0;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.dashboard-settings-toggle::before{
content:"+";
}

.dashboard-settings-item[open] .dashboard-settings-toggle{
background:#2563eb;
color:#ffffff;
transform:rotate(180deg);
}

.dashboard-settings-item[open] .dashboard-settings-toggle::before{
content:"−";
}

.dashboard-settings-content{
padding:0 22px 22px 80px;
}

.dashboard-settings-form{
display:grid;
gap:12px;
}

.dashboard-settings-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:16px;
align-items:center;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}

.dashboard-settings-row strong{
display:block;
margin-bottom:4px;
font-size:14px;
font-weight:950;
color:#ffffff;
}

.dashboard-settings-row span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:700;
color:#94a3b8;
}

.dashboard-settings-switch{
position:relative;
width:48px;
height:28px;
border-radius:999px;
background:#334155;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.dashboard-settings-switch::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#ffffff;
transition:transform .22s ease;
}

.dashboard-settings-switch.is-on{
background:#2563eb;
}

.dashboard-settings-switch.is-on::before{
transform:translateX(20px);
}

.dashboard-settings-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:40px;
padding:0 14px;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#a855f7);
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:900;
}

@media (max-width: 700px){
.dashboard-settings-top{
align-items:flex-start;
flex-direction:column;
padding:22px;
}

.dashboard-settings-title{
font-size:34px;
}

.dashboard-settings-list{
padding:18px;
}

.dashboard-settings-item summary{
grid-template-columns:auto minmax(0,1fr);
padding:18px;
align-items:flex-start;
}

.dashboard-settings-toggle{
grid-column:2;
justify-self:start;
margin-top:4px;
}

.dashboard-settings-content{
padding:0 18px 18px;
}

.dashboard-settings-row{
grid-template-columns:1fr;
}
}

This dashboard settings accordion is useful when a settings page has many related options. Grouping account, notification, privacy, and billing controls into expandable sections keeps the interface cleaner and easier to manage.

25. Multi Open Accordion

A multi open accordion allows several accordion items to stay open at the same time. This is useful when users may want to compare answers, keep multiple notes visible, or read several related sections without closing the previous one.

This example uses native <details> and <summary>, which naturally allows multiple panels to remain open. It is a simple, flexible pattern for FAQ pages, documentation sections, product information, and support content.

  • Perfect for FAQ pages, product details, documentation, and support sections
  • Allows multiple accordion items to stay open at once
  • Good when users may compare several answers
  • Built with native <details> and <summary>
  • Works without JavaScript
Multi Open Accordion

Keep several answers open

Use this accordion when users may want to compare multiple answers or keep several content panels visible.

01 Multiple panels can stay open Users can open more than one section at the same time.

This is the default behavior of native details elements. It works well when users may need to compare information across multiple accordion items.

02 Good for documentation and support Readers can keep useful instructions visible.

Multi open accordions are helpful in guides, help centers, product instructions, and technical documentation where users may need several references at once.

03 Best for flexible reading Do not force users to close one answer before opening another.

This pattern gives users more control. It is less strict than a single open accordion and often feels better for long-form educational content.

HTML

<section class="multi-open-accordion">

  <div class="multi-open-header">

    <div>
      <div class="multi-open-label">Multi Open Accordion</div>
      <h3 class="multi-open-title">Keep several answers open</h3>
    </div>

    <p class="multi-open-text">Use this accordion when users may want to compare multiple answers or keep several content panels visible.</p>

  </div>

  <div class="multi-open-list">

    <details class="multi-open-item" open>
      <summary>
        <span class="multi-open-icon">01</span>
        <span class="multi-open-copy">
          <strong>Multiple panels can stay open</strong>
          <span>Users can open more than one section at the same time.</span>
        </span>
        <span class="multi-open-toggle"></span>
      </summary>
      <div class="multi-open-content">
        <p>This is the default behavior of native details elements. It works well when users may need to compare information across multiple accordion items.</p>
      </div>
    </details>

    <details class="multi-open-item" open>
      <summary>
        <span class="multi-open-icon">02</span>
        <span class="multi-open-copy">
          <strong>Good for documentation and support</strong>
          <span>Readers can keep useful instructions visible.</span>
        </span>
        <span class="multi-open-toggle"></span>
      </summary>
      <div class="multi-open-content">
        <p>Multi open accordions are helpful in guides, help centers, product instructions, and technical documentation where users may need several references at once.</p>
      </div>
    </details>

    <details class="multi-open-item">
      <summary>
        <span class="multi-open-icon">03</span>
        <span class="multi-open-copy">
          <strong>Best for flexible reading</strong>
          <span>Do not force users to close one answer before opening another.</span>
        </span>
        <span class="multi-open-toggle"></span>
      </summary>
      <div class="multi-open-content">
        <p>This pattern gives users more control. It is less strict than a single open accordion and often feels better for long-form educational content.</p>
      </div>
    </details>

  </div>

</section>

CSS

.multi-open-accordion{
width:min(100%,860px);
}

.multi-open-header{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(240px,.72fr);
gap:28px;
align-items:end;
margin-bottom:26px;
}

.multi-open-label{
display:inline-flex;
width:max-content;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.multi-open-title{
margin:0;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.multi-open-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.multi-open-list{
display:grid;
gap:14px;
}

.multi-open-item{
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.multi-open-item:hover{
transform:translateY(-2px);
border-color:rgba(34,197,94,.28);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.multi-open-item[open]{
border-color:rgba(34,197,94,.42);
box-shadow:0 30px 76px rgba(34,197,94,.14);
}

.multi-open-item summary{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:16px;
align-items:center;
padding:20px 22px;
cursor:pointer;
list-style:none;
}

.multi-open-item summary::-webkit-details-marker{
display:none;
}

.multi-open-icon{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:16px;
background:#dcfce7;
color:#15803d;
font-size:18px;
font-weight:950;
}

.multi-open-copy strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.multi-open-copy span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.multi-open-toggle{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.multi-open-toggle::before{
content:"+";
}

.multi-open-item[open] .multi-open-toggle{
background:#16a34a;
color:#ffffff;
transform:rotate(180deg);
}

.multi-open-item[open] .multi-open-toggle::before{
content:"−";
}

.multi-open-content{
padding:0 22px 22px 82px;
}

.multi-open-content p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 760px){
.multi-open-header{
grid-template-columns:1fr;
gap:12px;
}

.multi-open-title{
font-size:36px;
}

.multi-open-item summary{
grid-template-columns:auto minmax(0,1fr);
padding:18px;
align-items:flex-start;
}

.multi-open-toggle{
grid-column:2;
justify-self:start;
margin-top:4px;
}

.multi-open-content{
padding:0 18px 18px;
}
}

This multi open accordion is the simplest and most flexible accordion pattern because users can keep several panels open at once. It is a good choice for FAQ pages, guides, support articles, and documentation where comparison or repeated reading is useful.

26. Single Open Accordion

A single open accordion only allows one accordion item to stay open at a time. When the user opens a new item, the previously open item closes automatically. This keeps the interface compact and controlled.

This example uses a small JavaScript snippet to manage the open state. It is useful for mobile pages, compact FAQ sections, pricing questions, and situations where too many open panels would make the page feel messy.

  • Perfect for compact FAQ sections, mobile pages, pricing pages, and landing pages
  • Only one accordion item stays open at a time
  • Uses a small JavaScript snippet for state control
  • Keeps the layout cleaner when answers are longer
  • Responsive and easy to customize
Single Open Accordion

One answer open at a time

Use this accordion when you want a cleaner experience and do not want multiple panels to stay open at once.

Why use single-open behavior?

Single-open behavior keeps the page shorter and easier to control, especially when accordion answers are long or the component appears on mobile screens.

Does this require JavaScript?

Yes. Native details elements allow multiple panels to stay open by default, so this example uses a small script to close other panels when one opens.

Where does this pattern work best?

Use it for compact FAQ sections, pricing pages, landing pages, checkout help, and mobile layouts where too many open panels would create too much scrolling.

Can I still use native HTML?

Yes. The markup still uses details and summary elements. JavaScript only adds the single-open behavior on top of the native accordion structure.

HTML

<section class="single-open-accordion" data-single-open-accordion>

  <div class="single-open-header">
    <div class="single-open-label">Single Open Accordion</div>
    <h3 class="single-open-title">One answer open at a time</h3>
    <p class="single-open-text">Use this accordion when you want a cleaner experience and do not want multiple panels to stay open at once.</p>
  </div>

  <div class="single-open-list">

    <details class="single-open-item" open>
      <summary>Why use single-open behavior?</summary>
      <div class="single-open-answer">
        <p>Single-open behavior keeps the page shorter and easier to control, especially when accordion answers are long or the component appears on mobile screens.</p>
      </div>
    </details>

    <details class="single-open-item">
      <summary>Does this require JavaScript?</summary>
      <div class="single-open-answer">
        <p>Yes. Native details elements allow multiple panels to stay open by default, so this example uses a small script to close other panels when one opens.</p>
      </div>
    </details>

    <details class="single-open-item">
      <summary>Where does this pattern work best?</summary>
      <div class="single-open-answer">
        <p>Use it for compact FAQ sections, pricing pages, landing pages, checkout help, and mobile layouts where too many open panels would create too much scrolling.</p>
      </div>
    </details>

    <details class="single-open-item">
      <summary>Can I still use native HTML?</summary>
      <div class="single-open-answer">
        <p>Yes. The markup still uses details and summary elements. JavaScript only adds the single-open behavior on top of the native accordion structure.</p>
      </div>
    </details>

  </div>

</section>

CSS

.single-open-accordion{
width:min(100%,820px);
}

.single-open-header{
max-width:720px;
margin:0 auto 26px;
text-align:center;
}

.single-open-label{
display:inline-flex;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#e0e7ff;
color:#4338ca;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.single-open-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.single-open-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.single-open-list{
display:grid;
gap:14px;
}

.single-open-item{
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.single-open-item:hover{
transform:translateY(-2px);
border-color:rgba(99,102,241,.28);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.single-open-item[open]{
border-color:rgba(99,102,241,.42);
box-shadow:0 30px 76px rgba(99,102,241,.14);
}

.single-open-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 22px;
cursor:pointer;
list-style:none;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.single-open-item summary::-webkit-details-marker{
display:none;
}

.single-open-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#e0e7ff;
color:#4338ca;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.single-open-item[open] summary::after{
content:"−";
background:#4f46e5;
color:#ffffff;
transform:rotate(180deg);
}

.single-open-answer{
padding:0 22px 22px;
}

.single-open-answer p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

@media (max-width: 640px){
.single-open-title{
font-size:36px;
}

.single-open-item summary{
padding:18px;
font-size:16px;
}

.single-open-answer{
padding:0 18px 18px;
}
}

JavaScript

document.querySelectorAll('[data-single-open-accordion]').forEach(function(accordion){
  const items = accordion.querySelectorAll('details');

  items.forEach(function(item){
    item.addEventListener('toggle', function(){
      if (!item.open) return;

      items.forEach(function(otherItem){
        if (otherItem !== item) {
          otherItem.removeAttribute('open');
        }
      });
    });
  });
});

This single open accordion is useful when you want a tighter, more controlled interaction. It is especially good for mobile layouts, pricing questions, and compact landing page FAQ sections where only one answer should stay visible at a time.

27. Nested Accordion

A nested accordion places one accordion inside another. This is useful for complex help centers, documentation pages, product guides, learning platforms, and support sections where a topic has multiple subtopics.

This example uses a main accordion for larger topics and smaller nested accordions inside the open panel. It keeps advanced information organized without creating one very long list of questions.

  • Perfect for documentation, help centers, tutorials, and advanced FAQ pages
  • Uses parent accordion items with nested child accordions
  • Good for organizing complex topics into smaller groups
  • Built with native <details> and <summary>
  • Works without JavaScript
Nested Accordion

Organize complex topics into layers

Use nested accordions when one topic has several smaller questions, steps, or subtopics that need their own expandable sections.

01 Getting started Basic setup questions with smaller subtopics inside.
How do I install the component?

Copy the HTML into your page and move the CSS into your stylesheet or custom CSS area.

Can I use this in WordPress?

Yes. You can use it inside a Custom HTML block, theme template, reusable block, or custom plugin output.

02 Customization Style changes, colors, spacing, and layout options.
Can I change the colors?

Yes. Update the background, border, text, and open-state colors in the CSS.

Can I add more child items?

You can add more nested details elements inside each parent panel, but keep the structure readable.

03 Best practices When to use nested accordions and when to avoid them.
When should I avoid nested accordions?

Avoid nesting too deeply. If users need to click through too many layers, a documentation page or table of contents may be clearer.

HTML

<section class="nested-accordion">

  <div class="nested-accordion-header">
    <div class="nested-accordion-label">Nested Accordion</div>
    <h3 class="nested-accordion-title">Organize complex topics into layers</h3>
    <p class="nested-accordion-text">Use nested accordions when one topic has several smaller questions, steps, or subtopics that need their own expandable sections.</p>
  </div>

  <div class="nested-accordion-list">

    <details class="nested-accordion-parent" open>
      <summary>
        <span class="nested-accordion-number">01</span>
        <span class="nested-accordion-parent-copy">
          <strong>Getting started</strong>
          <span>Basic setup questions with smaller subtopics inside.</span>
        </span>
        <span class="nested-accordion-parent-toggle"></span>
      </summary>

      <div class="nested-accordion-child-wrap">

        <details class="nested-accordion-child" open>
          <summary>How do I install the component?</summary>
          <div class="nested-accordion-child-content">
            <p>Copy the HTML into your page and move the CSS into your stylesheet or custom CSS area.</p>
          </div>
        </details>

        <details class="nested-accordion-child">
          <summary>Can I use this in WordPress?</summary>
          <div class="nested-accordion-child-content">
            <p>Yes. You can use it inside a Custom HTML block, theme template, reusable block, or custom plugin output.</p>
          </div>
        </details>

      </div>
    </details>

    <details class="nested-accordion-parent">
      <summary>
        <span class="nested-accordion-number">02</span>
        <span class="nested-accordion-parent-copy">
          <strong>Customization</strong>
          <span>Style changes, colors, spacing, and layout options.</span>
        </span>
        <span class="nested-accordion-parent-toggle"></span>
      </summary>

      <div class="nested-accordion-child-wrap">

        <details class="nested-accordion-child">
          <summary>Can I change the colors?</summary>
          <div class="nested-accordion-child-content">
            <p>Yes. Update the background, border, text, and open-state colors in the CSS.</p>
          </div>
        </details>

        <details class="nested-accordion-child">
          <summary>Can I add more child items?</summary>
          <div class="nested-accordion-child-content">
            <p>You can add more nested details elements inside each parent panel, but keep the structure readable.</p>
          </div>
        </details>

      </div>
    </details>

  </div>

</section>

CSS

.nested-accordion{
width:min(100%,900px);
}

.nested-accordion-header{
max-width:760px;
margin:0 auto 28px;
text-align:center;
}

.nested-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.nested-accordion-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.nested-accordion-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.nested-accordion-list{
display:grid;
gap:14px;
}

.nested-accordion-parent{
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.nested-accordion-parent:hover{
transform:translateY(-2px);
border-color:rgba(37,99,235,.28);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.nested-accordion-parent[open]{
border-color:rgba(37,99,235,.42);
box-shadow:0 30px 76px rgba(37,99,235,.14);
}

.nested-accordion-parent > summary{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:16px;
align-items:center;
padding:20px 22px;
cursor:pointer;
list-style:none;
}

.nested-accordion-parent > summary::-webkit-details-marker{
display:none;
}

.nested-accordion-number{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:16px;
background:#dbeafe;
color:#1d4ed8;
font-size:16px;
font-weight:950;
}

.nested-accordion-parent-copy strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.nested-accordion-parent-copy span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.nested-accordion-parent-toggle{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.nested-accordion-parent-toggle::before{
content:"+";
}

.nested-accordion-parent[open] .nested-accordion-parent-toggle{
background:#2563eb;
color:#ffffff;
transform:rotate(180deg);
}

.nested-accordion-parent[open] .nested-accordion-parent-toggle::before{
content:"−";
}

.nested-accordion-child-wrap{
display:grid;
gap:10px;
padding:0 22px 22px 82px;
}

.nested-accordion-child{
overflow:hidden;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.nested-accordion-child[open]{
background:#ffffff;
border-color:#bfdbfe;
}

.nested-accordion-child summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:15px 16px;
cursor:pointer;
list-style:none;
font-size:15px;
line-height:1.4;
font-weight:900;
color:#0f172a;
}

.nested-accordion-child summary::-webkit-details-marker{
display:none;
}

.nested-accordion-child summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:28px;
height:28px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:18px;
font-weight:800;
}

.nested-accordion-child[open] summary::after{
content:"−";
background:#0ea5e9;
color:#ffffff;
}

.nested-accordion-child-content{
padding:0 16px 16px;
}

.nested-accordion-child-content p{
margin:0;
font-size:14px;
line-height:1.7;
color:#475569;
}

@media (max-width: 700px){
.nested-accordion-title{
font-size:36px;
}

.nested-accordion-parent > summary{
grid-template-columns:auto minmax(0,1fr);
padding:18px;
align-items:flex-start;
}

.nested-accordion-parent-toggle{
grid-column:2;
justify-self:start;
margin-top:4px;
}

.nested-accordion-child-wrap{
padding:0 18px 18px;
}
}

This nested accordion is useful when one accordion level is not enough to organize the content. Use it carefully and avoid too many nested levels, because deeply nested accordions can become harder to scan.

28. Search-Friendly FAQ Accordion

A search-friendly FAQ accordion keeps all important answers directly in the HTML. This is important because FAQ content should be easy for users, browsers, and search engines to access without relying on hidden AJAX-loaded content.

This example uses clean question-style headings, readable answers, and native <details> elements. It is a good pattern for SEO-focused FAQ sections, service pages, blog posts, product pages, and support content.

  • Perfect for SEO FAQ sections, service pages, product pages, blog posts, and support pages
  • Keeps FAQ answers directly in the page HTML
  • Uses clear question-style summary text
  • Built with native <details> and <summary>
  • Works without JavaScript
SEO FAQ Accordion

FAQ content that stays in the HTML

Use this pattern when FAQ answers should remain easy to access, easy to read, and simple for search engines to discover.

Are CSS accordions good for SEO?

Yes, accordions can be good for SEO when the content is present in the HTML and the questions answer real search intent. Avoid loading important answers only after a user clicks.

Should FAQ answers be hidden inside accordions?

FAQ answers can be placed inside accordions if the page remains easy to use. Important sales messages should not be hidden, but supporting answers are often a good fit.

Can I use details and summary for FAQ sections?

Yes. Native details and summary elements are a simple way to create expandable FAQ sections without adding a large JavaScript library.

How many FAQ accordion items should I use?

Use enough questions to answer real user concerns, but avoid adding filler questions. A focused FAQ section is usually better than a very long, repetitive list.

SEO note: keep important FAQ content inside the page HTML, use clear question wording, and avoid hiding the main message of the page behind too many closed accordions.

HTML

<section class="search-friendly-faq">

  <div class="search-friendly-faq-header">
    <div class="search-friendly-faq-label">SEO FAQ Accordion</div>
    <h3 class="search-friendly-faq-title">FAQ content that stays in the HTML</h3>
    <p class="search-friendly-faq-text">Use this pattern when FAQ answers should remain easy to access, easy to read, and simple for search engines to discover.</p>
  </div>

  <div class="search-friendly-faq-list">

    <details class="search-friendly-faq-item" open>
      <summary>Are CSS accordions good for SEO?</summary>
      <div class="search-friendly-faq-answer">
        <p>Yes, accordions can be good for SEO when the content is present in the HTML and the questions answer real search intent. Avoid loading important answers only after a user clicks.</p>
      </div>
    </details>

    <details class="search-friendly-faq-item">
      <summary>Should FAQ answers be hidden inside accordions?</summary>
      <div class="search-friendly-faq-answer">
        <p>FAQ answers can be placed inside accordions if the page remains easy to use. Important sales messages should not be hidden, but supporting answers are often a good fit.</p>
      </div>
    </details>

    <details class="search-friendly-faq-item">
      <summary>Can I use details and summary for FAQ sections?</summary>
      <div class="search-friendly-faq-answer">
        <p>Yes. Native details and summary elements are a simple way to create expandable FAQ sections without adding a large JavaScript library.</p>
      </div>
    </details>

    <details class="search-friendly-faq-item">
      <summary>How many FAQ accordion items should I use?</summary>
      <div class="search-friendly-faq-answer">
        <p>Use enough questions to answer real user concerns, but avoid adding filler questions. A focused FAQ section is usually better than a very long, repetitive list.</p>
      </div>
    </details>

  </div>

  <div class="search-friendly-faq-note">
    SEO note: keep important FAQ content inside the page HTML, use clear question wording, and avoid hiding the main message of the page behind too many closed accordions.
  </div>

</section>

CSS

.search-friendly-faq{
width:min(100%,860px);
padding:30px;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.12);
}

.search-friendly-faq-header{
margin-bottom:24px;
}

.search-friendly-faq-label{
display:inline-flex;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.search-friendly-faq-title{
margin:0 0 12px;
font-size:clamp(32px,5vw,54px);
line-height:1.03;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.search-friendly-faq-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.search-friendly-faq-list{
display:grid;
gap:12px;
}

.search-friendly-faq-item{
overflow:hidden;
border-radius:20px;
background:#f8fafc;
border:1px solid rgba(15,23,42,.08);
transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.search-friendly-faq-item[open]{
background:#ffffff;
border-color:rgba(37,99,235,.34);
box-shadow:0 18px 48px rgba(37,99,235,.10);
}

.search-friendly-faq-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px 20px;
cursor:pointer;
list-style:none;
font-size:17px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.search-friendly-faq-item summary::-webkit-details-marker{
display:none;
}

.search-friendly-faq-item summary::after{
content:"+";
display:grid;
place-items:center;
flex:0 0 auto;
width:32px;
height:32px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.search-friendly-faq-item[open] summary::after{
content:"−";
background:#2563eb;
color:#ffffff;
transform:rotate(180deg);
}

.search-friendly-faq-answer{
padding:0 20px 20px;
}

.search-friendly-faq-answer p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

.search-friendly-faq-note{
margin-top:18px;
padding:16px 18px;
border-radius:20px;
background:#f0fdf4;
border:1px solid #bbf7d0;
color:#166534;
font-size:14px;
line-height:1.7;
font-weight:750;
}

@media (max-width: 640px){
.search-friendly-faq{
padding:22px;
border-radius:24px;
}

.search-friendly-faq-title{
font-size:34px;
}

.search-friendly-faq-item summary{
padding:17px;
font-size:16px;
}

.search-friendly-faq-answer{
padding:0 17px 17px;
}
}

This search-friendly FAQ accordion is a good pattern for SEO-focused pages because the content is available directly in the HTML. Use it for real questions that help users make decisions, solve problems, or understand your content better.

29. Animated Height Accordion

An animated height accordion creates a smoother open-and-close transition than a basic accordion. Instead of content appearing instantly, the panel expands with a controlled animation that feels more polished.

This example uses a small JavaScript snippet to animate dynamic height smoothly. It is useful for premium landing pages, app interfaces, pricing FAQs, product details, and modern content sections where the interaction should feel refined.

  • Perfect for premium landing pages, product pages, app UI, and polished FAQ sections
  • Animates dynamic content height smoothly
  • Uses JavaScript because height: auto is difficult to animate with pure CSS
  • Keeps the markup clean and reusable
  • Responsive and easy to customize
Animated Height Accordion

Smooth expandable content

Use this accordion when you want a more polished animation for opening and closing dynamic content panels.

Height animation helps the user understand that content is expanding from the selected item instead of suddenly appearing on the page.

  • Useful for premium FAQ sections
  • Works well for product details
  • Creates a smoother UI feel

CSS cannot reliably animate from height: 0 to height: auto. JavaScript measures the content height and applies the correct pixel value.

This pattern works well for SaaS landing pages, product feature sections, app dashboards, onboarding screens, pricing FAQs, and polished content blocks.

HTML

<section class="animated-height-accordion" data-animated-height-accordion>

  <div class="animated-height-header">
    <div class="animated-height-label">Animated Height Accordion</div>
    <h3 class="animated-height-title">Smooth expandable content</h3>
    <p class="animated-height-text">Use this accordion when you want a more polished animation for opening and closing dynamic content panels.</p>
  </div>

  <div class="animated-height-list">

    <div class="animated-height-item is-open">
      <button class="animated-height-button" type="button" aria-expanded="true">
        <span>
          <strong>Why animate accordion height?</strong>
          <span>Smoother movement makes the interaction feel more premium.</span>
        </span>
        <span class="animated-height-icon"></span>
      </button>
      <div class="animated-height-panel">
        <div class="animated-height-panel-inner">
          <p>Height animation helps the user understand that content is expanding from the selected item instead of suddenly appearing on the page.</p>
          <ul>
            <li>Useful for premium FAQ sections</li>
            <li>Works well for product details</li>
            <li>Creates a smoother UI feel</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="animated-height-item">
      <button class="animated-height-button" type="button" aria-expanded="false">
        <span>
          <strong>Why use JavaScript for this version?</strong>
          <span>Dynamic height needs a measured value for smooth transitions.</span>
        </span>
        <span class="animated-height-icon"></span>
      </button>
      <div class="animated-height-panel">
        <div class="animated-height-panel-inner">
          <p>CSS cannot reliably animate from <code>height: 0</code> to <code>height: auto</code>. JavaScript measures the content height and applies the correct pixel value.</p>
        </div>
      </div>
    </div>

  </div>

</section>

CSS

.animated-height-accordion{
width:min(100%,840px);
}

.animated-height-header{
max-width:720px;
margin:0 auto 28px;
text-align:center;
}

.animated-height-label{
display:inline-flex;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#f3e8ff;
color:#7e22ce;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.animated-height-title{
margin:0 0 12px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.animated-height-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.animated-height-list{
display:grid;
gap:14px;
}

.animated-height-item{
overflow:hidden;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 20px 54px rgba(15,23,42,.08);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.animated-height-item:hover{
transform:translateY(-2px);
border-color:rgba(168,85,247,.28);
box-shadow:0 28px 70px rgba(15,23,42,.12);
}

.animated-height-item.is-open{
border-color:rgba(168,85,247,.42);
box-shadow:0 30px 76px rgba(168,85,247,.14);
}

.animated-height-button{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 22px;
border:0;
background:transparent;
cursor:pointer;
text-align:left;
font:inherit;
}

.animated-height-button strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.animated-height-button span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.animated-height-icon{
display:grid;
place-items:center;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:#f3e8ff;
color:#7e22ce;
font-size:22px;
font-weight:800;
transition:transform .26s ease,background .26s ease,color .26s ease;
}

.animated-height-icon::before{
content:"+";
}

.animated-height-item.is-open .animated-height-icon{
background:#9333ea;
color:#ffffff;
transform:rotate(180deg);
}

.animated-height-item.is-open .animated-height-icon::before{
content:"−";
}

.animated-height-panel{
height:0;
overflow:hidden;
transition:height .32s ease;
}

.animated-height-panel-inner{
padding:0 22px 22px;
}

.animated-height-panel-inner p{
margin:0;
font-size:15px;
line-height:1.75;
color:#475569;
}

.animated-height-panel-inner ul{
display:grid;
gap:8px;
margin:14px 0 0;
padding-left:20px;
font-size:14px;
line-height:1.65;
font-weight:700;
color:#475569;
}

@media (max-width: 640px){
.animated-height-title{
font-size:36px;
}

.animated-height-button{
padding:18px;
align-items:flex-start;
}

.animated-height-panel-inner{
padding:0 18px 18px;
}
}

JavaScript

document.querySelectorAll('[data-animated-height-accordion]').forEach(function(accordion){
  const items = accordion.querySelectorAll('.animated-height-item');

  function setPanelHeight(item){
    const panel = item.querySelector('.animated-height-panel');
    const inner = item.querySelector('.animated-height-panel-inner');

    if (item.classList.contains('is-open')) {
      panel.style.height = inner.offsetHeight + 'px';
    } else {
      panel.style.height = '0px';
    }
  }

  items.forEach(function(item){
    setPanelHeight(item);

    const button = item.querySelector('.animated-height-button');

    button.addEventListener('click', function(){
      item.classList.toggle('is-open');
      button.setAttribute('aria-expanded', item.classList.contains('is-open') ? 'true' : 'false');
      setPanelHeight(item);
    });
  });

  window.addEventListener('resize', function(){
    items.forEach(setPanelHeight);
  });
});

This animated height accordion is a good choice when the interaction should feel smoother than a basic open-and-close component. It uses a small JavaScript snippet only where it adds real value: measuring and animating dynamic content height.

30. Complete Responsive Accordion Section

A complete responsive accordion section combines a headline, intro text, category badges, expandable FAQ cards, supporting content, and a call-to-action area. It is a full website section rather than a small standalone component.

This example is designed as a ready-to-use section for landing pages, service pages, product pages, homepage FAQ blocks, and WordPress content pages. It uses responsive layout, strong visual hierarchy, and native accordion behavior.

  • Perfect for landing pages, service pages, product pages, and homepage FAQ sections
  • Includes heading, intro text, badges, FAQ cards, and call-to-action content
  • Uses a polished responsive layout
  • Built with native <details> and <summary>
  • Works without JavaScript
Complete Accordion Section

A full FAQ section for modern websites

Use this complete accordion section when you need a polished, responsive FAQ or content block with strong visual hierarchy, useful supporting text, and a clear call to action.

FAQ Product Pages Landing Pages Support
Need a reusable accordion section?

Copy this structure, replace the text, and adjust the colors to match your own website or WordPress theme.

Use this layout
01 What makes this section complete? It includes content, badges, FAQ cards, and a call to action.

This is more than a small accordion component. It is a complete website section that can be placed on a landing page, service page, homepage, or product page.

02 Can I use it without JavaScript? Yes, the accordion uses native details and summary elements.

The open-and-close behavior works without JavaScript. CSS is used for the visual design, spacing, colors, icons, and responsive layout.

03 Where should I place this section? Use it near the bottom of landing pages or product pages.

This section works well after the main content, before the final call to action, or near pricing and product details where users often have final questions.

04 How can I customize the design? Change gradients, borders, shadows, spacing, and text.

You can adapt the colors, border radius, card backgrounds, badges, button style, and typography to match almost any modern website design system.

HTML

<section class="complete-accordion-section">

  <div class="complete-accordion-content">
    <div class="complete-accordion-label">Complete Accordion Section</div>
    <h3 class="complete-accordion-title">A full FAQ section for <span>modern websites</span></h3>
    <p class="complete-accordion-text">Use this complete accordion section when you need a polished, responsive FAQ or content block with strong visual hierarchy, useful supporting text, and a clear call to action.</p>

    <div class="complete-accordion-badges">
      <span class="complete-accordion-badge">FAQ</span>
      <span class="complete-accordion-badge">Product Pages</span>
      <span class="complete-accordion-badge">Landing Pages</span>
      <span class="complete-accordion-badge">Support</span>
    </div>

    <div class="complete-accordion-cta">
      <strong>Need a reusable accordion section?</strong>
      <p>Copy this structure, replace the text, and adjust the colors to match your own website or WordPress theme.</p>
      <a class="complete-accordion-button" href="#">Use this layout</a>
    </div>
  </div>

  <div class="complete-accordion-list">

    <details class="complete-accordion-item" open>
      <summary>
        <span class="complete-accordion-number">01</span>
        <span class="complete-accordion-summary">
          <strong>What makes this section complete?</strong>
          <span>It includes content, badges, FAQ cards, and a call to action.</span>
        </span>
        <span class="complete-accordion-toggle"></span>
      </summary>
      <div class="complete-accordion-answer">
        <p>This is more than a small accordion component. It is a complete website section that can be placed on a landing page, service page, homepage, or product page.</p>
      </div>
    </details>

    <details class="complete-accordion-item">
      <summary>
        <span class="complete-accordion-number">02</span>
        <span class="complete-accordion-summary">
          <strong>Can I use it without JavaScript?</strong>
          <span>Yes, the accordion uses native details and summary elements.</span>
        </span>
        <span class="complete-accordion-toggle"></span>
      </summary>
      <div class="complete-accordion-answer">
        <p>The open-and-close behavior works without JavaScript. CSS is used for the visual design, spacing, colors, icons, and responsive layout.</p>
      </div>
    </details>

    <details class="complete-accordion-item">
      <summary>
        <span class="complete-accordion-number">03</span>
        <span class="complete-accordion-summary">
          <strong>Where should I place this section?</strong>
          <span>Use it near the bottom of landing pages or product pages.</span>
        </span>
        <span class="complete-accordion-toggle"></span>
      </summary>
      <div class="complete-accordion-answer">
        <p>This section works well after the main content, before the final call to action, or near pricing and product details where users often have final questions.</p>
      </div>
    </details>

  </div>

</section>

CSS

.complete-accordion-section{
width:min(100%,1120px);
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:34px;
align-items:center;
}

.complete-accordion-content{
min-width:0;
}

.complete-accordion-label{
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(37,99,235,.18);
border:1px solid rgba(147,197,253,.22);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.complete-accordion-title{
margin:0 0 16px;
font-size:clamp(36px,5.4vw,68px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#ffffff;
}

.complete-accordion-title span{
background:linear-gradient(90deg,#60a5fa,#c084fc,#fb7185);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.complete-accordion-text{
margin:0 0 22px;
font-size:17px;
line-height:1.75;
color:#cbd5e1;
}

.complete-accordion-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:24px;
}

.complete-accordion-badge{
display:inline-flex;
align-items:center;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:13px;
font-weight:850;
}

.complete-accordion-cta{
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.20);
}

.complete-accordion-cta strong{
display:block;
margin-bottom:6px;
font-size:18px;
font-weight:950;
color:#ffffff;
}

.complete-accordion-cta p{
margin:0 0 14px;
font-size:14px;
line-height:1.65;
color:#94a3b8;
}

.complete-accordion-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#a855f7,#ec4899);
color:#ffffff;
text-decoration:none;
font-size:14px;
font-weight:900;
box-shadow:0 18px 44px rgba(37,99,235,.24);
}

.complete-accordion-list{
display:grid;
gap:14px;
}

.complete-accordion-item{
overflow:hidden;
border-radius:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.22);
transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}

.complete-accordion-item:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.09);
border-color:rgba(147,197,253,.26);
box-shadow:0 30px 82px rgba(0,0,0,.30);
}

.complete-accordion-item[open]{
background:rgba(255,255,255,.10);
border-color:rgba(96,165,250,.42);
box-shadow:0 32px 90px rgba(37,99,235,.16);
}

.complete-accordion-item summary{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:16px;
align-items:center;
padding:20px 22px;
cursor:pointer;
list-style:none;
}

.complete-accordion-item summary::-webkit-details-marker{
display:none;
}

.complete-accordion-number{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:16px;
background:rgba(37,99,235,.18);
border:1px solid rgba(147,197,253,.22);
color:#93c5fd;
font-size:15px;
font-weight:950;
}

.complete-accordion-summary strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.35;
font-weight:950;
color:#ffffff;
}

.complete-accordion-summary span{
display:block;
font-size:14px;
line-height:1.5;
font-weight:700;
color:#94a3b8;
}

.complete-accordion-toggle{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#e2e8f0;
font-size:22px;
font-weight:800;
transition:transform .22s ease,background .22s ease,color .22s ease;
}

.complete-accordion-toggle::before{
content:"+";
}

.complete-accordion-item[open] .complete-accordion-toggle{
background:#2563eb;
color:#ffffff;
transform:rotate(180deg);
}

.complete-accordion-item[open] .complete-accordion-toggle::before{
content:"−";
}

.complete-accordion-answer{
padding:0 22px 22px 82px;
}

.complete-accordion-answer p{
margin:0;
font-size:15px;
line-height:1.8;
color:#cbd5e1;
}

@media (max-width: 900px){
.complete-accordion-section{
grid-template-columns:1fr;
}

.complete-accordion-title{
font-size:44px;
}
}

@media (max-width: 640px){
.complete-accordion-title{
font-size:38px;
}

.complete-accordion-item summary{
grid-template-columns:auto minmax(0,1fr);
padding:18px;
align-items:flex-start;
}

.complete-accordion-toggle{
grid-column:2;
justify-self:start;
margin-top:4px;
}

.complete-accordion-answer{
padding:0 18px 18px;
}
}

This complete responsive accordion section is a strong final pattern because it shows how an accordion can become a full website section. It combines content strategy, layout, visual hierarchy, and practical FAQ behavior in one reusable block.

Recommended Tool

Need fast hosting for WordPress accordions, FAQ pages, and code-heavy tutorials?

Accordion pages often include many live demos, visible HTML and CSS code blocks, FAQ sections, images, and reusable UI examples. If you build WordPress websites, client projects, landing pages, or content-heavy blogs, fast managed hosting can help improve performance, security, and long-term maintenance.

Explore Kinsta Hosting
Kinsta managed WordPress hosting

Accordion Accessibility Best Practices

A modern CSS accordion should not only look good. It should also be easy to use with a keyboard, readable on mobile screens, clear for screen readers, and comfortable for visitors who need simple navigation.

The good news is that many accordion examples in this guide use native <details> and <summary> elements. This gives you a strong starting point because the browser already understands the basic open-and-close behavior.

Use Clear Summary Text

The clickable accordion heading should clearly explain what the visitor will find inside. Avoid vague labels such as “More info” or “Details” when a specific question or topic would be more helpful.

For FAQ sections, the summary text should usually be written as a real question. For product accordions, it can be a clear label such as Shipping information, Product specifications, Warranty, or Returns.

Keep Important Content Easy to Find

Accordions are useful for supporting information, but they should not hide the main value of the page. If something is essential for understanding the offer, product, service, or next step, consider showing it directly on the page instead of hiding it inside a closed panel.

Good accordion content usually includes optional details, repeated questions, technical information, documentation notes, product specifications, or extra explanations that users may want after reading the main section.

Make the Open State Obvious

Users should always understand which accordion item is open. You can show the open state with a stronger border, changed background, rotated icon, different shadow, active color, or visible minus symbol.

A clear open state is especially important on mobile screens, where users may scroll after opening an item and need to understand which answer they are reading.

Do Not Remove Focus Styles

Keyboard users need to see where focus is when moving through the page. If you customize the accordion summary or button styles, make sure the focus state remains visible.

You can improve focus visibility with an outline, border color, box shadow, or background change. The important thing is that the focused accordion heading is easy to identify.

Keep Mobile Tap Targets Comfortable

Accordion headings should be easy to tap on phones. Avoid very small icons or narrow clickable areas. A good mobile accordion usually makes the full summary row clickable, not only the plus or chevron icon.

Use enough padding, readable text size, and clear spacing between accordion items. This makes the component feel more professional and reduces accidental taps.

Avoid Too Many Nested Accordions

Nested accordions can be useful for complex documentation or support centers, but too many levels can become confusing. If users need to open multiple layers just to find basic information, a table of contents, tabs, or a dedicated documentation page may work better.

Use nested accordions only when the parent topic clearly contains smaller subtopics. Keep the hierarchy shallow and easy to scan.

SEO Tips for FAQ Accordions

Accordions can work well for SEO when they are used correctly. The most important rule is simple: useful content should be present in the page HTML and written for real users, not only added to make the page longer.

FAQ accordions, product detail accordions, documentation accordions, and support accordions can improve a page when they answer real questions and make the content easier to navigate.

Use Real Search Questions

For FAQ accordions, write questions that match what users actually want to know. Good accordion questions often start with words like how, what, why, can, should, or where.

Instead of writing generic labels, use natural questions such as “Can I use a CSS accordion without JavaScript?” or “Are CSS accordions good for FAQ sections?”

Keep Answers Helpful and Specific

A good FAQ answer should be direct, useful, and easy to understand. Avoid one-word answers when the user needs context, but also avoid writing very long answers that make the accordion feel heavy.

For most FAQ accordions, one or two short paragraphs are enough. For documentation accordions, you can include code snippets, notes, or step lists when they help the reader complete a task.

Do Not Hide the Main Topic of the Page

Accordions should support the page, not replace the main content. If the page is about a service, product, tutorial, or guide, the most important explanation should be visible before the accordion.

Use accordions for additional questions, supporting details, product specifications, comparisons, or troubleshooting. This keeps the page helpful without making the main content harder to find.

Use Internal Links Where They Help

Accordion answers can include internal links when they help the user continue reading. For example, a website design FAQ can link to related guides about forms, navigation menus, layouts, cards, buttons, or hero sections.

Do not add links only for decoration. Use links where they naturally help the reader find a deeper guide or related example.

Keep the Page Fast

Most CSS accordions are lightweight, especially when they use native HTML and CSS. Problems usually happen when a page loads too many large images, unnecessary libraries, or heavy animation scripts.

If you use JavaScript for advanced accordion behavior, keep the script small and focused. A simple single-open accordion or animated-height accordion does not need a large framework.

Common Accordion Design Mistakes

Accordions are simple components, but small design mistakes can make them harder to use. A good accordion should feel obvious, readable, and useful from the first interaction.

Here are common accordion mistakes to avoid when building FAQ sections, product details, mobile filters, documentation panels, or dashboard settings.

Making the Clickable Area Too Small

If only the small plus icon is clickable, the accordion can feel frustrating on mobile. Make the full summary row clickable so users can open the panel easily.

Using Weak Open and Closed States

If the open accordion looks almost the same as the closed accordion, users may not notice what changed. Use an obvious icon change, background shift, stronger border, or active color.

Adding Too Much Text Inside One Panel

An accordion should make content easier to scan. If one panel contains a very long article, it may be better to create a separate section or link to a dedicated page.

Using Accordions for Everything

Not every section needs an accordion. If users should read the content in order, a normal section, timeline, card grid, or step-by-step layout may be clearer.

Forgetting Mobile Layouts

Accordion rows that look clean on desktop can become crowded on mobile. Test long questions, nested content, tables, buttons, and icons on small screens.

Hiding Important Product or Pricing Information

Accordions are good for supporting details, but important buying information should be easy to find. If delivery, pricing, limitations, or compatibility details are critical, make sure users can access them quickly.

FAQ About CSS Accordions

Here are common questions about using CSS accordions in modern websites, WordPress pages, product pages, FAQ sections, and documentation layouts.

Can I create an accordion with only HTML and CSS?

Yes. The easiest way is to use native <details> and <summary> elements. They provide the basic open-and-close behavior without requiring JavaScript.

Are CSS accordions good for FAQ sections?

Yes. Accordions are a strong pattern for FAQ sections because users can scan the questions first and open only the answers they need.

Do accordions need JavaScript?

Basic accordions do not need JavaScript. JavaScript is only needed when you want advanced behavior such as single-open panels, animated dynamic height, saved state, filtering, or custom keyboard logic.

Are accordions mobile-friendly?

Accordions can be very mobile-friendly when the summary rows are easy to tap, the text is readable, the spacing is comfortable, and the open state is clear.

Can I use CSS accordions in WordPress?

Yes. You can use accordion HTML and CSS inside a Custom HTML block, a theme template, a reusable block, a custom shortcode, or a WordPress plugin output.

Should all accordion items be closed by default?

It depends on the page. For FAQs, it often works well to keep the first item open or keep all items closed. For product pages, opening the most important section by default can help users understand the content faster.

Conclusion: Build Better Website Sections With Modern CSS Accordions

Modern CSS accordions are useful because they help organize content without making a page feel too long, crowded, or difficult to scan. They are especially helpful for FAQ sections, product details, pricing questions, documentation, mobile filters, support centers, and dashboard settings.

The best accordion design is not only decorative. It should make content easier to understand. A good accordion has clear headings, readable answers, comfortable spacing, strong open states, mobile-friendly tap areas, and accessible markup.

For most websites, native <details> and <summary> elements are a great starting point. They keep the component lightweight and allow the basic accordion behavior to work without a large JavaScript library. When you need more advanced behavior, such as single-open panels or animated dynamic height, a small focused JavaScript snippet is enough.

Use the examples in this guide as starting points. Copy the structure, change the colors, adjust the spacing, rewrite the content, and adapt each accordion pattern to match your own website, WordPress theme, landing page, product page, support center, or client project.

Next Guides

Continue Building Modern Website UI Components

After creating clean accordion sections, you can build the rest of your website interface with related UI patterns. These guides include navigation menus, forms, layouts, cards, buttons, hero sections, and other reusable HTML and CSS examples.

01 Navigation 25 Modern CSS Navigation Menus for Websites

Build responsive navbars, sticky headers, dropdown menus, mega menus, hamburger menus, sidebars, breadcrumbs, and complete website headers.

Read navigation guide 02 Forms 30 Modern CSS Forms for Websites

Create contact forms, login forms, checkout forms, quote request forms, search forms, newsletter forms, and complete responsive form layouts.

Read forms guide 03 Layouts 25 Modern CSS Layouts for Websites

Explore grid layouts, flexbox sections, bento grids, dashboards, product grids, blog layouts, pricing tables, and responsive landing page structures.

Read layouts guide 04 Hero Sections 30 Modern Website Hero Sections

Build homepage heroes, SaaS heroes, app landing heroes, agency heroes, eCommerce heroes, video heroes, trust badge heroes, and complete responsive hero layouts.

Read hero guide 05 Cards 25 Modern CSS Cards for Websites

Create product cards, profile cards, pricing cards, blog cards, feature cards, dashboard cards, hover cards, and reusable card sections.

Read cards guide 06 Buttons 20 Modern CSS Buttons

Design modern buttons with gradients, hover effects, icons, shadows, outlines, glowing styles, CTA buttons, and responsive button groups.

Read buttons guide
]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-accordions/feed/ 0 30 Modern Website Hero Sections – Responsive HTML & CSS Examples https://veebilehed24.ee/en/blog/css-effects/modern-website-hero-sections/ https://veebilehed24.ee/en/blog/css-effects/modern-website-hero-sections/#respond Fri, 22 May 2026 08:36:13 +0000 https://veebilehed24.ee/?p=1324 Modern website hero sections are one of the most important parts of a professional website. The hero section is usually the first large area visitors see, and it helps them understand what the website offers, why it matters, and what action they should take next.

A strong hero section can make a homepage, landing page, product page, SaaS website, portfolio, agency website, or online store feel more polished and easier to understand. It can guide visitors toward a call-to-action, explain the main value proposition, show a product preview, build trust, and create a strong first impression within seconds.

Modern hero section design is not only about adding a large image, background video, gradient, or button. A good hero layout should combine a clear headline, helpful supporting text, strong visual hierarchy, readable contrast, responsive spacing, mobile-friendly structure, and a focused call-to-action that matches the user’s goal.

In this guide, we showcase 30 modern website hero sections built with HTML and CSS. These examples include business hero sections, SaaS product heroes, app landing page heroes, startup heroes, agency heroes, portfolio heroes, eCommerce heroes, product launch heroes, video background heroes, split screen heroes, dark mode heroes, minimal heroes, trust badge heroes, and complete responsive hero layouts.

Each example includes a live preview and visible code blocks, so you can see exactly how the hero section is built. Most examples use HTML and CSS only, while a few interactive patterns may include a small JavaScript snippet where it improves the user experience.

You can copy, customize, and reuse these hero section examples in real projects, including WordPress themes, business websites, landing pages, SaaS websites, product websites, portfolios, blogs, eCommerce stores, and client websites.

Table of Contents

Kinsta hosting

What Is a Website Hero Section?

A website hero section is the main visual and content area at the top of a web page. It usually appears directly below the navigation menu and is designed to introduce the page, explain the main message, and guide visitors toward the next action.

A hero section can be simple or highly visual. Some hero sections use a clean text-and-button layout, while others include product mockups, background images, videos, gradients, trust badges, statistics, lead forms, app screenshots, or animated UI elements.

The most important job of a hero section is clarity. A visitor should quickly understand what the website or page is about, who it is for, and what they can do next. If the hero section is confusing, crowded, slow, or visually weak, users may leave before exploring the rest of the page.

A modern hero section often includes:

  • A clear headline or H1 that explains the main offer
  • A short subheading that supports the headline
  • One primary call-to-action button
  • An optional secondary button or supporting link
  • A product image, mockup, illustration, video, or background visual
  • Trust badges, review snippets, logos, or statistics
  • Responsive spacing and mobile-friendly layout behavior
  • Readable contrast between text and background

The best hero sections are not just decorative. They combine design, messaging, layout, and conversion strategy into one focused above-the-fold section.

Why Hero Sections Matter for Websites

Hero sections matter because they shape the first impression of a website. When someone lands on a page, the hero section is often the first thing they see. It can make the website feel professional, trustworthy, modern, and easy to understand — or it can make the page feel unclear and unfinished.

A strong hero section helps visitors quickly answer three important questions: what is this website about, why should I care, and what should I do next? If those answers are clear, users are more likely to keep reading, click a button, browse a product, request a quote, sign up, or explore the rest of the website.

For business websites, the hero section can introduce the main service and encourage quote requests. For SaaS websites, it can explain the product and show a dashboard preview. For eCommerce websites, it can promote a collection or product category. For portfolios, it can present the creator’s style and expertise. For landing pages, it can focus attention on one specific conversion goal.

Good hero section design helps with:

  • Clarity: visitors understand the offer quickly.
  • Conversions: strong CTAs can guide users toward action.
  • Trust: reviews, logos, stats, and polished visuals create confidence.
  • Branding: colors, typography, and imagery communicate the website’s style.
  • Navigation: users know where to go next.
  • Mobile experience: a responsive hero keeps the first screen usable on phones.

A hero section should not try to say everything. It should communicate the most important message and make the next step obvious.

Hero Section Design Principles

Modern hero section design should balance visual impact with clarity. A hero can use bold typography, video, gradients, animations, or large images, but the main message still needs to be readable and easy to understand.

Use these principles when designing hero sections for real websites:

Start With a Clear Headline

The headline is usually the most important part of a hero section. It should explain the main value of the page in a direct and simple way. A clever headline can work, but clarity should come first.

For most websites, the headline should tell users what the product, service, or page helps them do. Avoid vague phrases that sound impressive but do not explain the actual offer.

Use One Primary Call-to-Action

A hero section should usually have one primary action. Examples include Get Started, Request a Quote, Book a Demo, Shop Now, View Portfolio, or Start Free Trial.

You can add a secondary link, but the main action should remain visually stronger. Too many buttons can make the hero section feel unfocused.

Make the Visual Support the Message

The image, video, mockup, or illustration should support the main message. A SaaS hero may show a dashboard screenshot. A product hero may show the product. A service business hero may show the result or the type of customer experience the business provides.

A beautiful visual is not enough if it does not help users understand the website. Choose visuals that make the offer clearer.

Keep the Layout Responsive

Hero sections often use large typography, wide spacing, two-column layouts, background images, or product mockups. These elements need to adapt properly on tablets and phones. A hero that looks good on desktop can easily become too tall, crowded, or hard to read on mobile.

On smaller screens, hero sections often work better as a single-column layout with a shorter headline, clear CTA, and simplified visual area.

Avoid Overcrowding Above the Fold

The hero section should not contain every detail about the website. Too much text, too many buttons, too many badges, or too many visual elements can make the first screen feel heavy and confusing.

Use the hero section to introduce the main message. Additional details can appear in the sections below.

Use Readable Contrast

If the hero section uses a background image, video, dark gradient, or colorful design, make sure the text remains readable. Low contrast can make even a beautiful hero section difficult to use.

Use overlays, stronger text colors, darker cards, lighter surfaces, shadows, or background blur when needed. The headline and CTA should always be easy to see.

Add Trust Signals When Useful

Trust signals can make a hero section more convincing. These can include client logos, ratings, review snippets, customer counts, years of experience, security badges, awards, or simple statistics.

Do not overload the hero with trust elements. Add only the signals that support the main message and help users feel more confident.

Keep Mobile Hero Sections Shorter and Clearer

Mobile users see less content at once. A hero section that takes up too much vertical space can delay access to the rest of the page. On mobile, reduce unnecessary decoration, shorten supporting text, stack columns, and keep the main CTA easy to tap.

A mobile hero should still feel visually strong, but it should not block the user from moving forward.

Common Types of Hero Sections

Different websites need different hero section layouts. A SaaS product may need a dashboard preview, while an agency website may need a bold headline and service-focused CTA. An eCommerce website may highlight a product collection, while a portfolio may focus on personal style and selected work.

Before choosing a hero layout, think about the page goal. The design should support the main action you want users to take.

Business Hero Sections

Business hero sections introduce a company, service, or offer. They often include a clear headline, service description, CTA button, trust elements, and a professional visual. These work well for local businesses, service companies, consultants, and B2B websites.

SaaS Hero Sections

SaaS hero sections usually explain a software product and encourage users to start a trial, book a demo, or view features. They often include product screenshots, dashboard mockups, ratings, integration logos, and short benefit-focused copy.

eCommerce Hero Sections

eCommerce hero sections promote a product, collection, category, seasonal offer, or sale campaign. They should make the product or offer visually clear and include a strong shopping-focused CTA such as Shop Now, View Collection, or Explore Deals.

Portfolio Hero Sections

Portfolio hero sections introduce a designer, developer, photographer, studio, or creative professional. They often use bold typography, personal branding, selected work previews, and CTA links to view projects or contact the creator.

Agency Hero Sections

Agency hero sections should communicate expertise, style, and results. They often include strong headlines, service positioning, client logos, case study links, and CTAs for booking a call or requesting a proposal.

App Landing Page Hero Sections

App hero sections focus on app benefits, screenshots, download buttons, device mockups, and social proof. They should quickly explain what the app does and why users should install or try it.

Blog Hero Sections

Blog hero sections can introduce the main topic, highlight featured articles, show newsletter CTAs, or guide users into categories. They should make the content purpose clear and encourage visitors to start reading.

Video Hero Sections

Video hero sections can create strong visual impact, but they need to be optimized carefully. Large background videos can slow down a page, especially on mobile. Use compressed video files, poster images, readable overlays, and simple controls when needed.

Lead Generation Hero Sections

Lead generation hero sections include a form, email signup, quote request block, or booking field directly inside the hero area. This layout can work well when the page has a focused conversion goal and users already understand the offer.

30 Modern Website Hero Section Examples

The following examples show practical hero section patterns for modern websites. Each example includes a live preview and visible HTML/CSS code, so you can copy the structure, adjust the styling, and reuse the pattern in your own website, WordPress theme, landing page, product page, portfolio, or client project.

Most hero sections use only HTML and CSS. If an example needs extra interaction, such as video controls or dynamic behavior, it can include a small JavaScript snippet, but the main focus stays on clean responsive structure and practical design.

1. Modern Homepage Hero Section

A modern homepage hero section is the main introduction area for a website. It should explain the main value of the website, guide visitors toward the next action, and create a strong first impression with clean layout, strong typography, and a clear call-to-action.

This example uses a two-column hero layout with a bold headline, supporting text, CTA buttons, trust indicators, and a modern visual card. It works well for business websites, product websites, SaaS homepages, personal brands, and modern landing pages.

  • Perfect for modern homepages, landing pages, and product websites
  • Uses a responsive two-column hero layout
  • Includes headline, text, CTA buttons, stats, and visual mockup
  • Stacks cleanly on mobile screens
  • Uses HTML and CSS only
Modern Homepage Hero

Build a website that feels clear, modern and fast

Use this homepage hero layout to introduce your main offer, explain the value quickly, and guide visitors toward the most important action.

Start Your Project View Examples
30+ Reusable sections
100% Responsive layout
HTML CSS-only structure
Homepage

HTML

<section class="hero-home-section">

  <div class="hero-home-content">

    <div class="hero-home-kicker">Modern Homepage Hero</div>

    <h3 class="hero-home-title">Build a website that feels <span>clear, modern and fast</span></h3>

    <p class="hero-home-text">Use this homepage hero layout to introduce your main offer, explain the value quickly, and guide visitors toward the most important action.</p>

    <div class="hero-home-actions">
      <a class="hero-home-button-primary" href="#">Start Your Project</a>
      <a class="hero-home-button-secondary" href="#">View Examples</a>
    </div>

    <div class="hero-home-stats">

      <div class="hero-home-stat">
        <strong>30+</strong>
        <span>Reusable sections</span>
      </div>

      <div class="hero-home-stat">
        <strong>100%</strong>
        <span>Responsive layout</span>
      </div>

      <div class="hero-home-stat">
        <strong>HTML</strong>
        <span>CSS-only structure</span>
      </div>

    </div>

  </div>

  <div class="hero-home-visual">

    <div class="hero-home-visual-card">

      <div class="hero-home-browser">

        <div class="hero-home-browser-top">
          <div class="hero-home-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="hero-home-url"></div>
        </div>

        <div class="hero-home-browser-body">

          <div class="hero-home-ui-hero">
            <div class="hero-home-ui-label">Homepage</div>
            <div class="hero-home-ui-title"></div>
            <div class="hero-home-ui-title"></div>
            <div class="hero-home-ui-text"></div>
            <div class="hero-home-ui-buttons">
              <div class="hero-home-ui-button"></div>
              <div class="hero-home-ui-button"></div>
            </div>
          </div>

          <div class="hero-home-ui-grid">
            <div class="hero-home-ui-card"></div>
            <div class="hero-home-ui-card"></div>
          </div>

        </div>

      </div>

    </div>

  </div>

</section>

CSS

.hero-home-section{
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
gap:42px;
align-items:center;
}

.hero-home-content{
min-width:0;
}

.hero-home-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-home-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,72px);
line-height:.98;
font-weight:950;
letter-spacing:-.07em;
color:#0f172a;
}

.hero-home-title span{
background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-home-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-home-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.hero-home-button-primary,
.hero-home-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-home-button-primary{
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.24);
}

.hero-home-button-primary:hover,
.hero-home-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(124,58,237,.26);
outline:none;
}

.hero-home-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-home-button-secondary:hover,
.hero-home-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-home-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:580px;
}

.hero-home-stat{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.86);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.hero-home-stat strong{
display:block;
margin-bottom:4px;
font-size:24px;
line-height:1;
font-weight:950;
color:#0f172a;
}

.hero-home-stat span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-home-visual{
position:relative;
min-width:0;
}

.hero-home-visual::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-52px;
top:-52px;
border-radius:999px;
background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(236,72,153,.22));
filter:blur(4px);
}

.hero-home-visual-card{
position:relative;
z-index:2;
padding:20px;
border-radius:32px;
background:rgba(255,255,255,.82);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
backdrop-filter:blur(18px);
}

.hero-home-browser{
overflow:hidden;
border-radius:24px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(15,23,42,.22);
}

.hero-home-browser-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:14px 16px;
border-bottom:1px solid rgba(255,255,255,.10);
}

.hero-home-dots{
display:flex;
gap:7px;
}

.hero-home-dots span{
width:10px;
height:10px;
border-radius:999px;
background:#64748b;
}

.hero-home-dots span:nth-child(1){
background:#f87171;
}

.hero-home-dots span:nth-child(2){
background:#facc15;
}

.hero-home-dots span:nth-child(3){
background:#22c55e;
}

.hero-home-url{
height:28px;
flex:1;
border-radius:999px;
background:rgba(255,255,255,.08);
}

.hero-home-browser-body{
padding:22px;
display:grid;
gap:18px;
}

.hero-home-ui-hero{
padding:22px;
border-radius:22px;
background:
radial-gradient(circle at 20% 20%,rgba(96,165,250,.28),transparent 32%),
linear-gradient(135deg,#1e293b,#020617);
border:1px solid rgba(255,255,255,.10);
}

.hero-home-ui-label{
display:inline-flex;
margin-bottom:14px;
padding:6px 10px;
border-radius:999px;
background:rgba(59,130,246,.18);
color:#bfdbfe;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-home-ui-title{
height:20px;
width:82%;
border-radius:999px;
background:#ffffff;
margin-bottom:10px;
}

.hero-home-ui-title:nth-of-type(2){
width:58%;
}

.hero-home-ui-text{
height:10px;
width:72%;
border-radius:999px;
background:rgba(226,232,240,.55);
margin-bottom:18px;
}

.hero-home-ui-buttons{
display:flex;
gap:10px;
}

.hero-home-ui-button{
height:36px;
width:118px;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
}

.hero-home-ui-button:nth-child(2){
width:94px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.14);
}

.hero-home-ui-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.hero-home-ui-card{
min-height:104px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
padding:14px;
}

.hero-home-ui-card::before{
content:"";
display:block;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#22c55e,#0ea5e9);
margin-bottom:14px;
}

.hero-home-ui-card::after{
content:"";
display:block;
height:10px;
width:72%;
border-radius:999px;
background:rgba(226,232,240,.50);
}

@media (max-width: 920px){
.hero-home-section{
grid-template-columns:1fr;
}

.hero-home-content{
text-align:left;
}

.hero-home-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-home-title{
font-size:40px;
}

.hero-home-text{
font-size:16px;
}

.hero-home-actions{
align-items:stretch;
flex-direction:column;
}

.hero-home-button-primary,
.hero-home-button-secondary{
width:100%;
}

.hero-home-stats{
grid-template-columns:1fr;
}

.hero-home-visual-card{
padding:14px;
border-radius:24px;
}

.hero-home-browser{
border-radius:20px;
}

.hero-home-ui-grid{
grid-template-columns:1fr;
}
}

This modern homepage hero section is useful when you need a flexible opening layout for many types of websites. The text area explains the offer, the buttons guide visitors toward action, and the visual card makes the section feel more complete without depending on external images.

Use this pattern for homepages, landing pages, product websites, SaaS websites, business websites, portfolio homepages, and WordPress front pages.

2. Responsive Business Hero Section

A responsive business hero section is designed for companies, consultants, agencies, local services, B2B websites, and professional service pages. It should communicate trust, explain the main service, and make it easy for visitors to request a quote, book a call, or learn more.

This example uses a professional business layout with a strong headline, service-focused text, CTA buttons, trust badges, review score, and a clean business card visual. It is built to feel polished, credible, and practical for real service websites.

  • Perfect for business websites, consultants, agencies, and local services
  • Includes trust badges, review score, CTA buttons, and service highlights
  • Uses a clean responsive two-column layout
  • Works well for quote request and booking-focused websites
  • Uses HTML and CSS only
Business Hero Section

Grow your business with a clear digital presence

Use this professional hero section to introduce your service, build trust quickly, and guide visitors toward a quote request or consultation.

Request a Quote View Services
20+ years experience
Trusted by local clients
Fast project response
4.9
★★★★★

Professional service, clear process, and reliable communication from first contact to final delivery.

250+ Projects completed
98% Client satisfaction

HTML

<section class="hero-business-section">

  <div class="hero-business-content">

    <div class="hero-business-kicker">Business Hero Section</div>

    <h3 class="hero-business-title">Grow your business with a <span>clear digital presence</span></h3>

    <p class="hero-business-text">Use this professional hero section to introduce your service, build trust quickly, and guide visitors toward a quote request or consultation.</p>

    <div class="hero-business-actions">
      <a class="hero-business-button-primary" href="#">Request a Quote</a>
      <a class="hero-business-button-secondary" href="#">View Services</a>
    </div>

    <div class="hero-business-trust">

      <div class="hero-business-trust-item">
        <span class="hero-business-trust-dot"></span>
        20+ years experience
      </div>

      <div class="hero-business-trust-item">
        <span class="hero-business-trust-dot"></span>
        Trusted by local clients
      </div>

      <div class="hero-business-trust-item">
        <span class="hero-business-trust-dot"></span>
        Fast project response
      </div>

    </div>

  </div>

  <div class="hero-business-visual">

    <div class="hero-business-card">

      <div class="hero-business-image">

        <div class="hero-business-floating">

          <div class="hero-business-floating-top">
            <div class="hero-business-rating">4.9</div>
            <div class="hero-business-stars">★★★★★</div>
          </div>

          <p>Professional service, clear process, and reliable communication from first contact to final delivery.</p>

        </div>

      </div>

      <div class="hero-business-feature-grid">

        <div class="hero-business-feature">
          <strong>250+</strong>
          <span>Projects completed</span>
        </div>

        <div class="hero-business-feature">
          <strong>98%</strong>
          <span>Client satisfaction</span>
        </div>

      </div>

    </div>

  </div>

</section>

CSS

.hero-business-section{
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);
gap:42px;
align-items:center;
}

.hero-business-content{
min-width:0;
}

.hero-business-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-business-title{
margin:0 0 18px;
font-size:clamp(40px,5.8vw,68px);
line-height:1;
font-weight:950;
letter-spacing:-.065em;
color:#0f172a;
}

.hero-business-title span{
color:#15803d;
}

.hero-business-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-business-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-business-button-primary,
.hero-business-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-business-button-primary{
background:linear-gradient(135deg,#15803d,#22c55e);
color:#ffffff;
box-shadow:0 18px 42px rgba(21,128,61,.22);
}

.hero-business-button-primary:hover,
.hero-business-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
outline:none;
}

.hero-business-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-business-button-secondary:hover,
.hero-business-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-business-trust{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.hero-business-trust-item{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 30px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.hero-business-trust-dot{
width:9px;
height:9px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.hero-business-visual{
position:relative;
min-width:0;
}

.hero-business-visual::before{
content:"";
position:absolute;
width:280px;
height:280px;
left:-60px;
bottom:-55px;
border-radius:999px;
background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(37,99,235,.18));
filter:blur(4px);
}

.hero-business-card{
position:relative;
z-index:2;
display:grid;
gap:16px;
padding:22px;
border-radius:32px;
background:rgba(255,255,255,.92);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
backdrop-filter:blur(18px);
}

.hero-business-image{
position:relative;
min-height:260px;
overflow:hidden;
border-radius:24px;
background:
radial-gradient(circle at 18% 20%,rgba(255,255,255,.55),transparent 28%),
linear-gradient(135deg,#14532d,#15803d 48%,#0f172a);
}

.hero-business-image::before{
content:"";
position:absolute;
width:180px;
height:180px;
right:26px;
top:34px;
border-radius:40px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
transform:rotate(8deg);
}

.hero-business-image::after{
content:"";
position:absolute;
left:28px;
bottom:28px;
width:72%;
height:78px;
border-radius:22px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(12px);
}

.hero-business-floating{
position:absolute;
right:18px;
bottom:18px;
z-index:3;
width:min(230px,70%);
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 22px 48px rgba(15,23,42,.18);
}

.hero-business-floating-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}

.hero-business-rating{
display:flex;
align-items:center;
gap:5px;
font-size:14px;
font-weight:950;
color:#0f172a;
}

.hero-business-stars{
color:#f59e0b;
letter-spacing:1px;
}

.hero-business-floating p{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.hero-business-feature-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.hero-business-feature{
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.hero-business-feature strong{
display:block;
margin-bottom:5px;
font-size:18px;
line-height:1.1;
font-weight:950;
color:#0f172a;
}

.hero-business-feature span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

@media (max-width: 920px){
.hero-business-section{
grid-template-columns:1fr;
}

.hero-business-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-business-title{
font-size:38px;
}

.hero-business-text{
font-size:16px;
}

.hero-business-actions{
align-items:stretch;
flex-direction:column;
}

.hero-business-button-primary,
.hero-business-button-secondary{
width:100%;
}

.hero-business-card{
padding:16px;
border-radius:24px;
}

.hero-business-image{
min-height:230px;
border-radius:20px;
}

.hero-business-floating{
position:relative;
right:auto;
bottom:auto;
width:auto;
margin-top:-44px;
}

.hero-business-feature-grid{
grid-template-columns:1fr;
}
}

This responsive business hero section is useful for websites where trust, clarity, and service positioning are important. The trust badges, rating card, and project statistics help the section feel more credible without making the layout too heavy.

Use this pattern for business websites, local service websites, consulting pages, agency homepages, quote request pages, B2B websites, and professional service landing pages.

3. SaaS Product Hero Section

A SaaS product hero section should quickly explain what the software does, who it helps, and why users should try it. This type of hero section often includes a clear product headline, trial CTA, trust indicators, dashboard preview, and a short list of product benefits.

This example uses a modern SaaS layout with a dark background, gradient headline text, product CTA buttons, feature pills, and a large dashboard-style mockup. It works well for software websites, AI tools, analytics platforms, productivity apps, CRM tools, and startup landing pages.

  • Perfect for SaaS websites, software products, AI tools, and startup landing pages
  • Includes product headline, CTA buttons, feature pills, and dashboard mockup
  • Uses a strong dark mode visual style
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
SaaS Product Hero

Turn product data into clear growth decisions

Use this SaaS hero section to explain your software product, show a dashboard preview, and guide users toward a trial or product demo.

Start Free Trial Book a Demo
No credit card required
Setup in minutes
Real-time reports

HTML

<section class="hero-saas-section">

  <div class="hero-saas-content">

    <div class="hero-saas-kicker">SaaS Product Hero</div>

    <h3 class="hero-saas-title">Turn product data into <span>clear growth decisions</span></h3>

    <p class="hero-saas-text">Use this SaaS hero section to explain your software product, show a dashboard preview, and guide users toward a trial or product demo.</p>

    <div class="hero-saas-actions">
      <a class="hero-saas-button-primary" href="#">Start Free Trial</a>
      <a class="hero-saas-button-secondary" href="#">Book a Demo</a>
    </div>

    <div class="hero-saas-pills">

      <div class="hero-saas-pill">
        <span class="hero-saas-pill-dot"></span>
        No credit card required
      </div>

      <div class="hero-saas-pill">
        <span class="hero-saas-pill-dot"></span>
        Setup in minutes
      </div>

      <div class="hero-saas-pill">
        <span class="hero-saas-pill-dot"></span>
        Real-time reports
      </div>

    </div>

  </div>

  <div class="hero-saas-dashboard-wrap">

    <div class="hero-saas-dashboard">

      <div class="hero-saas-dashboard-top">

        <div class="hero-saas-window-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="hero-saas-dashboard-search"></div>

      </div>

      <div class="hero-saas-dashboard-body">

        <div class="hero-saas-sidebar">

          <div class="hero-saas-logo-row">
            <div class="hero-saas-logo"></div>
            <div class="hero-saas-logo-text"></div>
          </div>

          <div class="hero-saas-menu">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>

        </div>

        <div class="hero-saas-main">

          <div class="hero-saas-metrics">
            <div class="hero-saas-metric"></div>
            <div class="hero-saas-metric"></div>
            <div class="hero-saas-metric"></div>
          </div>

          <div class="hero-saas-chart"></div>

          <div class="hero-saas-table">
            <span></span>
            <span></span>
          </div>

        </div>

      </div>

    </div>

  </div>

</section>

CSS

.hero-saas-section{
width:min(100%,1120px);
display:grid;
gap:34px;
}

.hero-saas-content{
max-width:820px;
margin:0 auto;
text-align:center;
}

.hero-saas-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(37,99,235,.16);
border:1px solid rgba(147,197,253,.22);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-saas-title{
margin:0 0 18px;
font-size:clamp(42px,7vw,78px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.hero-saas-title span{
background:linear-gradient(90deg,#93c5fd,#d8b4fe,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-saas-text{
margin:0 auto 26px;
max-width:700px;
font-size:17px;
line-height:1.8;
color:#cbd5e1;
}

.hero-saas-actions{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:24px;
}

.hero-saas-button-primary,
.hero-saas-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-saas-button-primary{
background:linear-gradient(135deg,#2563eb,#a855f7);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.26);
}

.hero-saas-button-primary:hover,
.hero-saas-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(168,85,247,.28);
outline:none;
}

.hero-saas-button-secondary{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
}

.hero-saas-button-secondary:hover,
.hero-saas-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.11);
outline:none;
}

.hero-saas-pills{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px;
}

.hero-saas-pill{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:13px;
font-weight:850;
}

.hero-saas-pill-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.13);
}

.hero-saas-dashboard-wrap{
position:relative;
}

.hero-saas-dashboard-wrap::before{
content:"";
position:absolute;
width:420px;
height:260px;
left:50%;
top:20px;
transform:translateX(-50%);
border-radius:999px;
background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(168,85,247,.20),rgba(34,197,94,.16));
filter:blur(12px);
}

.hero-saas-dashboard{
position:relative;
z-index:2;
overflow:hidden;
border-radius:30px;
background:#0f172a;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 36px 110px rgba(0,0,0,.42);
}

.hero-saas-dashboard-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.10);
}

.hero-saas-window-dots{
display:flex;
gap:7px;
}

.hero-saas-window-dots span{
width:10px;
height:10px;
border-radius:999px;
background:#64748b;
}

.hero-saas-window-dots span:nth-child(1){
background:#f87171;
}

.hero-saas-window-dots span:nth-child(2){
background:#facc15;
}

.hero-saas-window-dots span:nth-child(3){
background:#22c55e;
}

.hero-saas-dashboard-search{
height:30px;
width:min(100%,420px);
border-radius:999px;
background:rgba(255,255,255,.08);
}

.hero-saas-dashboard-body{
display:grid;
grid-template-columns:220px minmax(0,1fr);
min-height:410px;
}

.hero-saas-sidebar{
padding:18px;
border-right:1px solid rgba(255,255,255,.10);
background:rgba(15,23,42,.66);
}

.hero-saas-logo-row{
display:flex;
align-items:center;
gap:10px;
margin-bottom:22px;
}

.hero-saas-logo{
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#2563eb,#a855f7);
}

.hero-saas-logo-text{
height:13px;
width:110px;
border-radius:999px;
background:rgba(255,255,255,.18);
}

.hero-saas-menu{
display:grid;
gap:10px;
}

.hero-saas-menu span{
height:38px;
border-radius:14px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
}

.hero-saas-menu span:first-child{
background:rgba(37,99,235,.20);
border-color:rgba(147,197,253,.20);
}

.hero-saas-main{
padding:20px;
display:grid;
gap:16px;
}

.hero-saas-metrics{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.hero-saas-metric{
min-height:116px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.hero-saas-metric::before{
content:"";
display:block;
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#22c55e,#0ea5e9);
margin-bottom:16px;
}

.hero-saas-metric::after{
content:"";
display:block;
height:12px;
width:70%;
border-radius:999px;
background:rgba(226,232,240,.48);
}

.hero-saas-chart{
min-height:190px;
border-radius:22px;
background:
linear-gradient(180deg,rgba(37,99,235,.20),transparent),
rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
position:relative;
overflow:hidden;
}

.hero-saas-chart::before{
content:"";
position:absolute;
left:22px;
right:22px;
bottom:32px;
height:90px;
background:
linear-gradient(135deg,transparent 8%,rgba(96,165,250,.80) 9%,rgba(96,165,250,.80) 12%,transparent 13%),
linear-gradient(45deg,transparent 18%,rgba(168,85,247,.82) 19%,rgba(168,85,247,.82) 22%,transparent 23%);
border-radius:18px;
opacity:.95;
}

.hero-saas-table{
display:grid;
gap:10px;
}

.hero-saas-table span{
height:42px;
border-radius:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
}

@media (max-width: 860px){
.hero-saas-dashboard-body{
grid-template-columns:1fr;
}

.hero-saas-sidebar{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.10);
}

.hero-saas-menu{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.hero-saas-metrics{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.hero-saas-title{
font-size:40px;
}

.hero-saas-text{
font-size:16px;
}

.hero-saas-actions{
align-items:stretch;
flex-direction:column;
}

.hero-saas-button-primary,
.hero-saas-button-secondary{
width:100%;
}

.hero-saas-dashboard{
border-radius:22px;
}

.hero-saas-dashboard-top{
align-items:flex-start;
flex-direction:column;
}

.hero-saas-dashboard-search{
width:100%;
}

.hero-saas-menu{
grid-template-columns:1fr;
}
}

This SaaS product hero section is useful when you want to show the product interface directly in the hero area. The dashboard mockup gives visitors a quick visual idea of the software, while the CTA buttons focus attention on trial and demo actions.

Use this pattern for SaaS websites, AI tools, analytics platforms, project management software, CRM products, productivity apps, and startup landing pages.

4. App Landing Page Hero Section

An app landing page hero section is designed to introduce a mobile app, explain its main benefit, and encourage users to download or try it. This type of hero section often includes app store buttons, phone mockups, feature highlights, and social proof.

This example uses a colorful split layout with a clean app pitch on the left and layered phone-style UI mockups on the right. It is suitable for mobile apps, productivity tools, wellness apps, finance apps, learning apps, and app launch pages.

  • Perfect for mobile app landing pages, app launch pages, and startup products
  • Includes app headline, CTA buttons, feature highlights, and phone mockups
  • Uses a colorful modern gradient background
  • Responsive design stacks cleanly on mobile
  • Uses HTML and CSS only
App Landing Page Hero

Plan your day with a smarter mobile app

Use this app hero section to introduce a mobile product, highlight the main benefit, and guide visitors toward downloading or trying the app.

A Download App View App Demo
4.9 App rating
50K+ Active users
24/7 Smart reminders
Smart daily flow Organize tasks, habits, and reminders in one simple mobile dashboard.

HTML

<section class="hero-app-section">

  <div class="hero-app-content">

    <div class="hero-app-kicker">App Landing Page Hero</div>

    <h3 class="hero-app-title">Plan your day with a <span>smarter mobile app</span></h3>

    <p class="hero-app-text">Use this app hero section to introduce a mobile product, highlight the main benefit, and guide visitors toward downloading or trying the app.</p>

    <div class="hero-app-actions">
      <a class="hero-app-store" href="#">
        <span class="hero-app-store-icon">A</span>
        Download App
      </a>
      <a class="hero-app-demo-button" href="#">View App Demo</a>
    </div>

    <div class="hero-app-features">

      <div class="hero-app-feature">
        <strong>4.9</strong>
        <span>App rating</span>
      </div>

      <div class="hero-app-feature">
        <strong>50K+</strong>
        <span>Active users</span>
      </div>

      <div class="hero-app-feature">
        <strong>24/7</strong>
        <span>Smart reminders</span>
      </div>

    </div>

  </div>

  <div class="hero-app-visual">

    <div class="hero-app-phone hero-app-phone-secondary">
      <div class="hero-app-phone-screen">
        <div class="hero-app-phone-top">
          <div class="hero-app-avatar"></div>
          <div class="hero-app-phone-line"></div>
        </div>
        <div class="hero-app-phone-body">
          <div class="hero-app-phone-card hero-app-phone-card-large"></div>
          <div class="hero-app-phone-list">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>

    <div class="hero-app-phone hero-app-phone-primary">
      <div class="hero-app-phone-screen">
        <div class="hero-app-phone-top">
          <div class="hero-app-avatar"></div>
          <div class="hero-app-phone-line"></div>
        </div>
        <div class="hero-app-phone-body">
          <div class="hero-app-phone-card hero-app-phone-card-large"></div>
          <div class="hero-app-phone-list">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>

    <div class="hero-app-floating-badge">
      <strong>Smart daily flow</strong>
      <span>Organize tasks, habits, and reminders in one simple mobile dashboard.</span>
    </div>

  </div>

</section>

CSS

.hero-app-section{
position:relative;
z-index:2;
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.88fr);
gap:42px;
align-items:center;
}

.hero-app-content{
min-width:0;
color:#ffffff;
}

.hero-app-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(12px);
}

.hero-app-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,72px);
line-height:.98;
font-weight:950;
letter-spacing:-.07em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.hero-app-title span{
background:linear-gradient(90deg,#fde68a,#ffffff,#bfdbfe) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-app-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:rgba(255,255,255,.88);
}

.hero-app-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-app-store,
.hero-app-demo-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:0 18px;
border-radius:18px;
font-size:14px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-app-store{
gap:10px;
background:#ffffff;
color:#0f172a;
box-shadow:0 18px 42px rgba(15,23,42,.20);
}

.hero-app-store-icon{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:10px;
background:linear-gradient(135deg,#2563eb,#ec4899);
color:#ffffff;
font-size:13px;
font-weight:950;
}

.hero-app-store:hover,
.hero-app-store:focus,
.hero-app-demo-button:hover,
.hero-app-demo-button:focus{
transform:translateY(-2px);
outline:none;
}

.hero-app-demo-button{
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
backdrop-filter:blur(12px);
}

.hero-app-demo-button:hover,
.hero-app-demo-button:focus{
background:rgba(255,255,255,.18);
}

.hero-app-features{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
max-width:620px;
}

.hero-app-feature{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(14px);
}

.hero-app-feature strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.1;
font-weight:950;
color:#ffffff;
}

.hero-app-feature span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:rgba(255,255,255,.78);
}

.hero-app-visual{
position:relative;
min-height:520px;
}

.hero-app-phone{
position:absolute;
width:250px;
min-height:500px;
padding:14px;
border-radius:38px;
background:#0f172a;
border:1px solid rgba(255,255,255,.18);
box-shadow:0 34px 90px rgba(15,23,42,.34);
}

.hero-app-phone-primary{
right:88px;
top:0;
z-index:3;
transform:rotate(5deg);
}

.hero-app-phone-secondary{
right:0;
top:54px;
z-index:2;
opacity:.78;
transform:rotate(-8deg) scale(.92);
}

.hero-app-phone-screen{
min-height:472px;
overflow:hidden;
border-radius:28px;
background:
radial-gradient(circle at 20% 18%,rgba(255,255,255,.22),transparent 30%),
linear-gradient(180deg,#1e293b,#020617);
border:1px solid rgba(255,255,255,.10);
}

.hero-app-phone-top{
height:74px;
padding:18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
background:rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.08);
}

.hero-app-avatar{
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#facc15,#ec4899);
}

.hero-app-phone-line{
height:12px;
width:96px;
border-radius:999px;
background:rgba(255,255,255,.22);
}

.hero-app-phone-body{
padding:18px;
display:grid;
gap:14px;
}

.hero-app-phone-card{
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.hero-app-phone-card-large{
min-height:150px;
background:
radial-gradient(circle at 22% 20%,rgba(96,165,250,.28),transparent 32%),
rgba(255,255,255,.08);
}

.hero-app-phone-card::before{
content:"";
display:block;
width:48px;
height:48px;
border-radius:16px;
background:linear-gradient(135deg,#22c55e,#0ea5e9);
margin-bottom:14px;
}

.hero-app-phone-card::after{
content:"";
display:block;
height:10px;
width:75%;
border-radius:999px;
background:rgba(226,232,240,.50);
}

.hero-app-phone-list{
display:grid;
gap:10px;
}

.hero-app-phone-list span{
height:44px;
border-radius:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
}

.hero-app-floating-badge{
position:absolute;
left:0;
bottom:56px;
z-index:4;
width:210px;
padding:16px;
border-radius:22px;
background:#ffffff;
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-app-floating-badge strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-app-floating-badge span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

@media (max-width: 920px){
.hero-app-section{
grid-template-columns:1fr;
}

.hero-app-visual{
max-width:560px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-app-title{
font-size:40px;
}

.hero-app-text{
font-size:16px;
}

.hero-app-actions{
align-items:stretch;
flex-direction:column;
}

.hero-app-store,
.hero-app-demo-button{
width:100%;
}

.hero-app-features{
grid-template-columns:1fr;
}

.hero-app-visual{
min-height:560px;
}

.hero-app-phone{
width:220px;
min-height:450px;
}

.hero-app-phone-screen{
min-height:422px;
}

.hero-app-phone-primary{
right:72px;
}

.hero-app-phone-secondary{
right:-12px;
}

.hero-app-floating-badge{
left:0;
right:0;
bottom:0;
width:auto;
}
}

This app landing page hero section is useful when the product experience is visual and mobile-first. The phone mockups help visitors imagine the app interface, while the CTA buttons keep the focus on download or demo actions.

Use this pattern for mobile apps, app launch pages, productivity apps, finance apps, wellness apps, learning apps, startup products, and software landing pages.

5. Startup Hero Section

A startup hero section should make a new product, service, or company feel exciting, clear, and trustworthy. Startups often need a hero section that explains the idea quickly, communicates momentum, and encourages visitors to join early, request access, or explore the product.

This example uses a bold dark hero layout with a startup-style headline, CTA buttons, launch metrics, product cards, and a modern floating interface preview. It is useful for early-stage startups, AI products, beta launches, waiting lists, and product validation pages.

  • Perfect for startup websites, beta launches, AI products, and waitlist pages
  • Includes headline, CTA buttons, launch metrics, and floating product cards
  • Uses a modern dark gradient style
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Startup Hero Section

Launch your next idea with early user momentum

Use this startup hero section to introduce a new product, collect early interest, and make a beta launch feel modern, focused, and trustworthy.

Join the Waitlist See Product Preview
2.4K Early signups
14 Beta partners
Q2 Launch window
Live beta
Fast validation Collect interest before the full product launch.
Product signal Show momentum, clarity, and early traction.

HTML

<section class="hero-startup-section">

  <div class="hero-startup-content">

    <div class="hero-startup-kicker">Startup Hero Section</div>

    <h3 class="hero-startup-title">Launch your next idea with <span>early user momentum</span></h3>

    <p class="hero-startup-text">Use this startup hero section to introduce a new product, collect early interest, and make a beta launch feel modern, focused, and trustworthy.</p>

    <div class="hero-startup-actions">
      <a class="hero-startup-button-primary" href="#">Join the Waitlist</a>
      <a class="hero-startup-button-secondary" href="#">See Product Preview</a>
    </div>

    <div class="hero-startup-metrics">

      <div class="hero-startup-metric">
        <strong>2.4K</strong>
        <span>Early signups</span>
      </div>

      <div class="hero-startup-metric">
        <strong>14</strong>
        <span>Beta partners</span>
      </div>

      <div class="hero-startup-metric">
        <strong>Q2</strong>
        <span>Launch window</span>
      </div>

    </div>

  </div>

  <div class="hero-startup-visual">

    <div class="hero-startup-orbit"></div>

    <div class="hero-startup-product-card">

      <div class="hero-startup-card-top">
        <div class="hero-startup-logo"></div>
        <div class="hero-startup-status">
          <span class="hero-startup-status-dot"></span>
          Live beta
        </div>
      </div>

      <div class="hero-startup-product-title"></div>
      <div class="hero-startup-product-text"></div>
      <div class="hero-startup-product-text"></div>

      <div class="hero-startup-progress">
        <span></span>
      </div>

    </div>

    <div class="hero-startup-float hero-startup-float-one">
      <strong>Fast validation</strong>
      <span>Collect interest before the full product launch.</span>
      <div class="hero-startup-mini-dots">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>

    <div class="hero-startup-float hero-startup-float-two">
      <strong>Product signal</strong>
      <span>Show momentum, clarity, and early traction.</span>
    </div>

  </div>

</section>

CSS

.hero-startup-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
gap:42px;
align-items:center;
}

.hero-startup-content{
min-width:0;
}

.hero-startup-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(236,72,153,.14);
border:1px solid rgba(244,114,182,.24);
color:#f9a8d4;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-startup-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,74px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.hero-startup-title span{
background:linear-gradient(90deg,#f9a8d4,#93c5fd,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-startup-text{
margin:0 0 26px;
max-width:640px;
font-size:17px;
line-height:1.8;
color:#cbd5e1;
}

.hero-startup-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.hero-startup-button-primary,
.hero-startup-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-startup-button-primary{
background:linear-gradient(135deg,#ec4899,#2563eb);
color:#ffffff;
box-shadow:0 18px 42px rgba(236,72,153,.24);
}

.hero-startup-button-primary:hover,
.hero-startup-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(37,99,235,.28);
outline:none;
}

.hero-startup-button-secondary{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
}

.hero-startup-button-secondary:hover,
.hero-startup-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.11);
outline:none;
}

.hero-startup-metrics{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-startup-metric{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.hero-startup-metric strong{
display:block;
margin-bottom:4px;
font-size:24px;
line-height:1;
font-weight:950;
color:#ffffff;
}

.hero-startup-metric span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#94a3b8;
}

.hero-startup-visual{
position:relative;
min-height:520px;
}

.hero-startup-orbit{
position:absolute;
inset:20px;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background:
radial-gradient(circle at 50% 50%,rgba(37,99,235,.16),transparent 45%);
}

.hero-startup-orbit::before,
.hero-startup-orbit::after{
content:"";
position:absolute;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
}

.hero-startup-orbit::before{
inset:46px;
}

.hero-startup-orbit::after{
inset:92px;
}

.hero-startup-product-card{
position:absolute;
z-index:3;
left:50%;
top:50%;
width:min(360px,80%);
padding:22px;
border-radius:30px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 32px 90px rgba(0,0,0,.32);
backdrop-filter:blur(18px);
transform:translate(-50%,-50%);
}

.hero-startup-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
}

.hero-startup-logo{
width:48px;
height:48px;
border-radius:18px;
background:linear-gradient(135deg,#ec4899,#2563eb);
box-shadow:0 18px 38px rgba(236,72,153,.24);
}

.hero-startup-status{
display:inline-flex;
align-items:center;
gap:8px;
min-height:34px;
padding:0 12px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.24);
color:#bbf7d0;
font-size:12px;
font-weight:900;
}

.hero-startup-status-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.hero-startup-product-title{
height:18px;
width:78%;
border-radius:999px;
background:#ffffff;
margin-bottom:10px;
}

.hero-startup-product-text{
height:10px;
width:92%;
border-radius:999px;
background:rgba(226,232,240,.55);
margin-bottom:8px;
}

.hero-startup-product-text:nth-of-type(3){
width:70%;
margin-bottom:18px;
}

.hero-startup-progress{
height:12px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.08);
}

.hero-startup-progress span{
display:block;
width:74%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#ec4899,#2563eb,#22c55e);
}

.hero-startup-float{
position:absolute;
z-index:4;
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 58px rgba(0,0,0,.24);
}

.hero-startup-float strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-startup-float span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.hero-startup-float-one{
left:0;
top:78px;
width:190px;
}

.hero-startup-float-two{
right:0;
bottom:86px;
width:200px;
}

.hero-startup-mini-dots{
display:flex;
gap:8px;
margin-top:14px;
}

.hero-startup-mini-dots i{
width:28px;
height:28px;
display:block;
border-radius:999px;
background:linear-gradient(135deg,#93c5fd,#a855f7);
}

.hero-startup-mini-dots i:nth-child(2){
background:linear-gradient(135deg,#f9a8d4,#fb7185);
}

.hero-startup-mini-dots i:nth-child(3){
background:linear-gradient(135deg,#86efac,#22c55e);
}

@media (max-width: 920px){
.hero-startup-section{
grid-template-columns:1fr;
}

.hero-startup-visual{
max-width:620px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-startup-title{
font-size:40px;
}

.hero-startup-text{
font-size:16px;
}

.hero-startup-actions{
align-items:stretch;
flex-direction:column;
}

.hero-startup-button-primary,
.hero-startup-button-secondary{
width:100%;
}

.hero-startup-metrics{
grid-template-columns:1fr;
}

.hero-startup-visual{
min-height:600px;
}

.hero-startup-product-card{
width:82%;
}

.hero-startup-float-one{
left:0;
top:26px;
}

.hero-startup-float-two{
right:0;
bottom:28px;
}
}

This startup hero section is useful when the goal is to create interest before a full product launch. The layout combines a strong headline, waitlist CTA, launch metrics, and visual product signals that make an early-stage idea feel more credible.

Use this pattern for startup websites, beta product launches, AI tools, waitlist pages, product validation pages, early-access campaigns, and new SaaS products.

6. Agency Hero Section

An agency hero section should show creativity, confidence, and business value at the same time. Agencies often need a hero layout that communicates expertise, showcases style, highlights results, and encourages visitors to book a call or view case studies.

This example uses a bold creative layout with large typography, CTA buttons, service tags, selected project cards, and a visual portfolio-style grid. It works well for design agencies, marketing agencies, web studios, branding studios, creative teams, and digital service companies.

  • Perfect for design agencies, web studios, branding teams, and marketing agencies
  • Includes bold headline, CTA buttons, service tags, and project preview cards
  • Uses a creative editorial-style hero layout
  • Responsive design stacks cleanly on mobile
  • Uses HTML and CSS only
Agency Hero Section

Creative websites built for brands that want to grow

Use this agency hero section to present your creative direction, service value, and selected project style with a strong visual first impression.

Book a Strategy Call View Case Studies
Web Design Branding Landing Pages Conversion UI
Featured work Showcase visual direction and selected project outcomes.
Brand website Premium visual direction and conversion-focused layout.
Landing page Campaign-focused UI.
Product UI Modern interface system.

HTML

<section class="hero-agency-section">

  <div class="hero-agency-content">

    <div class="hero-agency-kicker">Agency Hero Section</div>

    <h3 class="hero-agency-title">Creative websites built for <span>brands that want to grow</span></h3>

    <p class="hero-agency-text">Use this agency hero section to present your creative direction, service value, and selected project style with a strong visual first impression.</p>

    <div class="hero-agency-actions">
      <a class="hero-agency-button-primary" href="#">Book a Strategy Call</a>
      <a class="hero-agency-button-secondary" href="#">View Case Studies</a>
    </div>

    <div class="hero-agency-tags">
      <span class="hero-agency-tag">Web Design</span>
      <span class="hero-agency-tag">Branding</span>
      <span class="hero-agency-tag">Landing Pages</span>
      <span class="hero-agency-tag">Conversion UI</span>
    </div>

  </div>

  <div class="hero-agency-visual">

    <div class="hero-agency-floating">
      <strong>Featured work</strong>
      <span>Showcase visual direction and selected project outcomes.</span>
    </div>

    <div class="hero-agency-grid">

      <div class="hero-agency-project hero-agency-project-large">
        <div class="hero-agency-shape hero-agency-shape-one"></div>
        <div class="hero-agency-shape hero-agency-shape-two"></div>
        <div class="hero-agency-project-content">
          <strong>Brand website</strong>
          <span>Premium visual direction and conversion-focused layout.</span>
        </div>
      </div>

      <div class="hero-agency-project hero-agency-project-small-one">
        <div class="hero-agency-project-content">
          <strong>Landing page</strong>
          <span>Campaign-focused UI.</span>
        </div>
      </div>

      <div class="hero-agency-project hero-agency-project-small-two">
        <div class="hero-agency-project-content">
          <strong>Product UI</strong>
          <span>Modern interface system.</span>
        </div>
      </div>

    </div>

  </div>

</section>

CSS

.hero-agency-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(330px,.94fr);
gap:42px;
align-items:center;
}

.hero-agency-content{
min-width:0;
}

.hero-agency-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-agency-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.078em;
color:#0f172a;
}

.hero-agency-title span{
background:linear-gradient(90deg,#f97316,#ec4899,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-agency-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-agency-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-agency-button-primary,
.hero-agency-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-agency-button-primary{
background:linear-gradient(135deg,#f97316,#ec4899);
color:#ffffff;
box-shadow:0 18px 42px rgba(249,115,22,.22);
}

.hero-agency-button-primary:hover,
.hero-agency-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(236,72,153,.25);
outline:none;
}

.hero-agency-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-agency-button-secondary:hover,
.hero-agency-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-agency-tags{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.hero-agency-tag{
display:inline-flex;
align-items:center;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 30px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.hero-agency-visual{
position:relative;
min-height:540px;
}

.hero-agency-visual::before{
content:"";
position:absolute;
width:320px;
height:320px;
right:-60px;
top:20px;
border-radius:999px;
background:linear-gradient(135deg,rgba(249,115,22,.20),rgba(37,99,235,.18));
filter:blur(6px);
}

.hero-agency-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:16px;
height:100%;
}

.hero-agency-project{
position:relative;
overflow:hidden;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.hero-agency-project-large{
grid-row:span 2;
min-height:520px;
background:
radial-gradient(circle at 24% 22%,rgba(255,255,255,.46),transparent 28%),
linear-gradient(135deg,#0f172a,#1e293b);
}

.hero-agency-project-small-one{
background:
radial-gradient(circle at 24% 22%,rgba(255,255,255,.54),transparent 28%),
linear-gradient(135deg,#f97316,#ec4899);
}

.hero-agency-project-small-two{
background:
radial-gradient(circle at 24% 22%,rgba(255,255,255,.54),transparent 28%),
linear-gradient(135deg,#2563eb,#0ea5e9);
}

.hero-agency-project-content{
position:absolute;
left:18px;
right:18px;
bottom:18px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(16px);
}

.hero-agency-project-large .hero-agency-project-content{
background:rgba(255,255,255,.10);
}

.hero-agency-project-content strong{
display:block;
margin-bottom:6px;
font-size:18px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.hero-agency-project-content span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:rgba(255,255,255,.78);
}

.hero-agency-shape{
position:absolute;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.18);
}

.hero-agency-shape-one{
width:150px;
height:150px;
right:28px;
top:30px;
}

.hero-agency-shape-two{
width:88px;
height:88px;
left:28px;
top:100px;
}

.hero-agency-floating{
position:absolute;
left:-14px;
top:34px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 56px rgba(15,23,42,.20);
}

.hero-agency-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-agency-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

@media (max-width: 920px){
.hero-agency-section{
grid-template-columns:1fr;
}

.hero-agency-visual{
max-width:660px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-agency-title{
font-size:40px;
}

.hero-agency-text{
font-size:16px;
}

.hero-agency-actions{
align-items:stretch;
flex-direction:column;
}

.hero-agency-button-primary,
.hero-agency-button-secondary{
width:100%;
}

.hero-agency-visual{
min-height:auto;
}

.hero-agency-grid{
grid-template-columns:1fr;
height:auto;
}

.hero-agency-project,
.hero-agency-project-large{
min-height:260px;
}

.hero-agency-project-large{
grid-row:auto;
}

.hero-agency-floating{
position:relative;
left:auto;
top:auto;
width:auto;
margin-bottom:16px;
}
}

This agency hero section is useful when the hero needs to communicate both creativity and business value. The visual grid gives the section a portfolio-style feel, while the CTA buttons guide visitors toward booking a call or viewing case studies.

Use this pattern for creative agencies, web design studios, branding agencies, marketing teams, portfolio agencies, digital studios, and service-based landing pages.

7. Portfolio Hero Section

A portfolio hero section introduces a designer, developer, photographer, studio, or creative professional. It should quickly show the creator’s style, explain what they do, and guide visitors toward selected work or contact.

This example uses a modern portfolio layout with bold typography, a short professional intro, CTA buttons, project categories, and a visual project gallery. It is useful for personal portfolios, design portfolios, developer portfolios, photography websites, and creative studio homepages.

  • Perfect for designers, developers, photographers, studios, and creative portfolios
  • Includes portfolio headline, intro text, CTA buttons, and project preview cards
  • Uses a strong visual gallery-style layout
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Portfolio Hero Section

Designing digital work with clarity and character

Use this portfolio hero section to introduce your creative work, show selected project style, and guide visitors toward your case studies or contact page.

View Portfolio Contact Me
UI Design Web Projects Creative Direction
Selected work Show your strongest projects directly in the first screen.
Product Website Visual identity and responsive website design.
App UI Mobile product interface.
Campaign Landing page system.

HTML

<section class="hero-portfolio-section">

  <div class="hero-portfolio-content">

    <div class="hero-portfolio-kicker">Portfolio Hero Section</div>

    <h3 class="hero-portfolio-title">Designing digital work with <span>clarity and character</span></h3>

    <p class="hero-portfolio-text">Use this portfolio hero section to introduce your creative work, show selected project style, and guide visitors toward your case studies or contact page.</p>

    <div class="hero-portfolio-actions">
      <a class="hero-portfolio-button-primary" href="#">View Portfolio</a>
      <a class="hero-portfolio-button-secondary" href="#">Contact Me</a>
    </div>

    <div class="hero-portfolio-meta">
      <span class="hero-portfolio-meta-item"><span class="hero-portfolio-meta-dot"></span> UI Design</span>
      <span class="hero-portfolio-meta-item"><span class="hero-portfolio-meta-dot"></span> Web Projects</span>
      <span class="hero-portfolio-meta-item"><span class="hero-portfolio-meta-dot"></span> Creative Direction</span>
    </div>

  </div>

  <div class="hero-portfolio-visual">

    <div class="hero-portfolio-floating">
      <strong>Selected work</strong>
      <span>Show your strongest projects directly in the first screen.</span>
    </div>

    <div class="hero-portfolio-gallery">

      <div class="hero-portfolio-card hero-portfolio-card-large">
        <div class="hero-portfolio-card-content">
          <strong>Product Website</strong>
          <span>Visual identity and responsive website design.</span>
        </div>
      </div>

      <div class="hero-portfolio-card hero-portfolio-card-small-one">
        <div class="hero-portfolio-card-content">
          <strong>App UI</strong>
          <span>Mobile product interface.</span>
        </div>
      </div>

      <div class="hero-portfolio-card hero-portfolio-card-small-two">
        <div class="hero-portfolio-card-content">
          <strong>Campaign</strong>
          <span>Landing page system.</span>
        </div>
      </div>

    </div>

  </div>

</section>

CSS

.hero-portfolio-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(340px,1.08fr);
gap:42px;
align-items:center;
}

.hero-portfolio-content{
min-width:0;
}

.hero-portfolio-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#f3e8ff;
color:#7e22ce;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-portfolio-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.078em;
color:#0f172a;
}

.hero-portfolio-title span{
background:linear-gradient(90deg,#7c3aed,#0ea5e9,#22c55e);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-portfolio-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-portfolio-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-portfolio-button-primary,
.hero-portfolio-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-portfolio-button-primary{
background:linear-gradient(135deg,#7c3aed,#0ea5e9);
color:#ffffff;
box-shadow:0 18px 42px rgba(124,58,237,.24);
}

.hero-portfolio-button-primary:hover,
.hero-portfolio-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(14,165,233,.25);
outline:none;
}

.hero-portfolio-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-portfolio-button-secondary:hover,
.hero-portfolio-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-portfolio-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.hero-portfolio-meta-item{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 30px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.hero-portfolio-meta-dot{
width:9px;
height:9px;
border-radius:999px;
background:#7c3aed;
box-shadow:0 0 0 4px rgba(124,58,237,.13);
}

.hero-portfolio-visual{
position:relative;
min-height:540px;
}

.hero-portfolio-visual::before{
content:"";
position:absolute;
width:320px;
height:320px;
right:-70px;
top:10px;
border-radius:999px;
background:linear-gradient(135deg,rgba(124,58,237,.20),rgba(14,165,233,.18));
filter:blur(6px);
}

.hero-portfolio-gallery{
position:relative;
z-index:2;
height:100%;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:16px;
}

.hero-portfolio-card{
position:relative;
overflow:hidden;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.hero-portfolio-card-large{
grid-row:span 2;
min-height:520px;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.52),transparent 30%),
linear-gradient(135deg,#111827,#7c3aed);
}

.hero-portfolio-card-small-one{
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.58),transparent 30%),
linear-gradient(135deg,#0ea5e9,#22c55e);
}

.hero-portfolio-card-small-two{
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.58),transparent 30%),
linear-gradient(135deg,#f97316,#ec4899);
}

.hero-portfolio-card::before{
content:"";
position:absolute;
width:140px;
height:140px;
right:24px;
top:28px;
border-radius:40px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.20);
transform:rotate(10deg);
}

.hero-portfolio-card::after{
content:"";
position:absolute;
left:24px;
right:24px;
bottom:94px;
height:14px;
border-radius:999px;
background:rgba(255,255,255,.34);
}

.hero-portfolio-card-content{
position:absolute;
left:18px;
right:18px;
bottom:18px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(16px);
}

.hero-portfolio-card-content strong{
display:block;
margin-bottom:6px;
font-size:18px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.hero-portfolio-card-content span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:rgba(255,255,255,.78);
}

.hero-portfolio-floating{
position:absolute;
left:-18px;
bottom:72px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 56px rgba(15,23,42,.20);
}

.hero-portfolio-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-portfolio-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

@media (max-width: 920px){
.hero-portfolio-section{
grid-template-columns:1fr;
}

.hero-portfolio-visual{
max-width:660px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-portfolio-title{
font-size:40px;
}

.hero-portfolio-text{
font-size:16px;
}

.hero-portfolio-actions{
align-items:stretch;
flex-direction:column;
}

.hero-portfolio-button-primary,
.hero-portfolio-button-secondary{
width:100%;
}

.hero-portfolio-visual{
min-height:auto;
}

.hero-portfolio-gallery{
grid-template-columns:1fr;
height:auto;
}

.hero-portfolio-card,
.hero-portfolio-card-large{
min-height:280px;
}

.hero-portfolio-card-large{
grid-row:auto;
}

.hero-portfolio-floating{
position:relative;
left:auto;
bottom:auto;
width:auto;
margin-bottom:16px;
}
}

This portfolio hero section is useful when visual work is the main selling point. The project gallery gives visitors a fast impression of your style, while the content area explains who you are and where visitors should go next.

Use this pattern for design portfolios, developer portfolios, photography websites, creative studios, personal websites, freelancer homepages, and selected work pages.

8. Personal Brand Hero Section

A personal brand hero section introduces a person, their expertise, and the value they offer. It works well for consultants, creators, coaches, freelancers, authors, speakers, course creators, and professionals who want to build trust around their name.

This example uses a clean personal brand layout with a professional intro, CTA buttons, credibility highlights, social proof, and a profile-style visual card. It is designed to feel approachable, credible, and conversion-focused.

  • Perfect for consultants, coaches, freelancers, creators, and experts
  • Includes intro headline, CTA buttons, credibility badges, and profile visual
  • Uses a clean personal website style
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Personal Brand Hero

Helping founders build better digital products

Use this personal brand hero section to introduce your expertise, build trust around your name, and guide visitors toward booking, reading, or working with you.

Book a Call Read My Work
12+ Years experience
80+ Projects shipped
4.9 Client rating
Trusted advisor Position your personal expertise with strong social proof.

Alex Morgan

Product strategist, designer, and consultant helping teams turn ideas into clear digital experiences.

Strategy UX Web Design

HTML

<section class="hero-personal-section">

  <div class="hero-personal-content">

    <div class="hero-personal-kicker">Personal Brand Hero</div>

    <h3 class="hero-personal-title">Helping founders build <span>better digital products</span></h3>

    <p class="hero-personal-text">Use this personal brand hero section to introduce your expertise, build trust around your name, and guide visitors toward booking, reading, or working with you.</p>

    <div class="hero-personal-actions">
      <a class="hero-personal-button-primary" href="#">Book a Call</a>
      <a class="hero-personal-button-secondary" href="#">Read My Work</a>
    </div>

    <div class="hero-personal-proof">

      <div class="hero-personal-proof-item">
        <strong>12+</strong>
        <span>Years experience</span>
      </div>

      <div class="hero-personal-proof-item">
        <strong>80+</strong>
        <span>Projects shipped</span>
      </div>

      <div class="hero-personal-proof-item">
        <strong>4.9</strong>
        <span>Client rating</span>
      </div>

    </div>

  </div>

  <div class="hero-personal-visual">

    <div class="hero-personal-floating">
      <strong>Trusted advisor</strong>
      <span>Position your personal expertise with strong social proof.</span>
    </div>

    <div class="hero-personal-card">

      <div class="hero-personal-photo"></div>

      <div class="hero-personal-card-body">
        <h3>Alex Morgan</h3>
        <p>Product strategist, designer, and consultant helping teams turn ideas into clear digital experiences.</p>

        <div class="hero-personal-tags">
          <span class="hero-personal-tag">Strategy</span>
          <span class="hero-personal-tag">UX</span>
          <span class="hero-personal-tag">Web Design</span>
        </div>

      </div>

    </div>

  </div>

</section>

CSS

.hero-personal-section{
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.88fr);
gap:42px;
align-items:center;
}

.hero-personal-content{
min-width:0;
}

.hero-personal-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#fef3c7;
color:#b45309;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-personal-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,72px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-personal-title span{
background:linear-gradient(90deg,#f59e0b,#2563eb,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-personal-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-personal-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.hero-personal-button-primary,
.hero-personal-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-personal-button-primary{
background:linear-gradient(135deg,#f59e0b,#2563eb);
color:#ffffff;
box-shadow:0 18px 42px rgba(245,158,11,.22);
}

.hero-personal-button-primary:hover,
.hero-personal-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(37,99,235,.25);
outline:none;
}

.hero-personal-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-personal-button-secondary:hover,
.hero-personal-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-personal-proof{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-personal-proof-item{
padding:16px;
border-radius:20px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.hero-personal-proof-item strong{
display:block;
margin-bottom:4px;
font-size:24px;
line-height:1;
font-weight:950;
color:#0f172a;
}

.hero-personal-proof-item span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-personal-visual{
position:relative;
min-height:520px;
}

.hero-personal-visual::before{
content:"";
position:absolute;
width:330px;
height:330px;
right:10px;
top:40px;
border-radius:999px;
background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(37,99,235,.18));
filter:blur(6px);
}

.hero-personal-card{
position:relative;
z-index:2;
width:min(100%,420px);
margin-left:auto;
padding:22px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
}

.hero-personal-photo{
position:relative;
min-height:350px;
overflow:hidden;
border-radius:28px;
background:
radial-gradient(circle at 28% 20%,rgba(255,255,255,.58),transparent 30%),
linear-gradient(135deg,#f59e0b,#2563eb 58%,#111827);
}

.hero-personal-photo::before{
content:"";
position:absolute;
left:50%;
bottom:-38px;
width:190px;
height:300px;
border-radius:999px 999px 70px 70px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
transform:translateX(-50%);
}

.hero-personal-photo::after{
content:"";
position:absolute;
left:50%;
top:72px;
width:92px;
height:92px;
border-radius:999px;
background:rgba(255,255,255,.24);
border:1px solid rgba(255,255,255,.28);
transform:translateX(-50%);
}

.hero-personal-card-body{
padding:18px 4px 4px;
}

.hero-personal-card-body h3{
margin:0 0 6px;
font-size:24px;
line-height:1.16;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-personal-card-body p{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.hero-personal-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}

.hero-personal-tag{
display:inline-flex;
align-items:center;
min-height:30px;
padding:0 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:12px;
font-weight:900;
}

.hero-personal-floating{
position:absolute;
left:0;
bottom:92px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-personal-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-personal-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

@media (max-width: 920px){
.hero-personal-section{
grid-template-columns:1fr;
}

.hero-personal-visual{
max-width:560px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-personal-title{
font-size:40px;
}

.hero-personal-text{
font-size:16px;
}

.hero-personal-actions{
align-items:stretch;
flex-direction:column;
}

.hero-personal-button-primary,
.hero-personal-button-secondary{
width:100%;
}

.hero-personal-proof{
grid-template-columns:1fr;
}

.hero-personal-visual{
min-height:auto;
}

.hero-personal-card{
width:100%;
margin:0;
padding:16px;
border-radius:26px;
}

.hero-personal-photo{
min-height:300px;
border-radius:22px;
}

.hero-personal-floating{
position:relative;
left:auto;
bottom:auto;
width:auto;
margin-bottom:16px;
}
}

This personal brand hero section is useful when the person is the brand. The layout combines a clear expert positioning statement, strong CTA buttons, credibility numbers, and a profile-style visual that helps visitors connect with the person behind the website.

Use this pattern for consultants, freelancers, coaches, creators, authors, speakers, course creators, expert websites, and personal brand landing pages.

9. eCommerce Hero Section

An eCommerce hero section should highlight a product, collection, category, offer, or seasonal campaign in a clear and visually attractive way. The goal is to help visitors understand what is being promoted and move them toward shopping quickly.

This example uses a modern online store hero layout with a product-focused headline, shopping CTA buttons, offer badge, feature highlights, and a product card grid. It works well for fashion stores, home products, digital products, garden products, beauty brands, and product collection pages.

  • Perfect for online stores, product collections, seasonal campaigns, and shop homepages
  • Includes product headline, CTA buttons, offer badge, and product preview cards
  • Uses a clean responsive eCommerce layout
  • Works well for WooCommerce and product landing pages
  • Uses HTML and CSS only
eCommerce Hero Section

Discover products made for modern everyday living

Use this eCommerce hero section to promote a collection, highlight seasonal products, and guide shoppers toward your best offers.

Shop Collection View Deals
Free Shipping options
New Seasonal arrivals
Easy Returns available
Spring Sale

Modern Product

A clean product card for featured store items.

$89 New

Premium Item

Show a highlighted product with sale messaging.

$129 Sale

Starter Kit

Use product cards to preview key collections.

$59 Popular

Gift Bundle

Promote bundles or product categories.

$99 Bundle

HTML

<section class="hero-ecommerce-section">

  <div class="hero-ecommerce-content">

    <div class="hero-ecommerce-kicker">eCommerce Hero Section</div>

    <h3 class="hero-ecommerce-title">Discover products made for <span>modern everyday living</span></h3>

    <p class="hero-ecommerce-text">Use this eCommerce hero section to promote a collection, highlight seasonal products, and guide shoppers toward your best offers.</p>

    <div class="hero-ecommerce-actions">
      <a class="hero-ecommerce-button-primary" href="#">Shop Collection</a>
      <a class="hero-ecommerce-button-secondary" href="#">View Deals</a>
    </div>

    <div class="hero-ecommerce-benefits">

      <div class="hero-ecommerce-benefit">
        <strong>Free</strong>
        <span>Shipping options</span>
      </div>

      <div class="hero-ecommerce-benefit">
        <strong>New</strong>
        <span>Seasonal arrivals</span>
      </div>

      <div class="hero-ecommerce-benefit">
        <strong>Easy</strong>
        <span>Returns available</span>
      </div>

    </div>

  </div>

  <div class="hero-ecommerce-visual">

    <div class="hero-ecommerce-sale-badge">Spring Sale</div>

    <div class="hero-ecommerce-product-grid">

      <article class="hero-ecommerce-product-card">
        <div class="hero-ecommerce-image"></div>
        <h3>Modern Product</h3>
        <p>A clean product card for featured store items.</p>
        <div class="hero-ecommerce-product-footer">
          <span class="hero-ecommerce-price">$89</span>
          <span class="hero-ecommerce-tag">New</span>
        </div>
      </article>

      <article class="hero-ecommerce-product-card">
        <div class="hero-ecommerce-image"></div>
        <h3>Premium Item</h3>
        <p>Show a highlighted product with sale messaging.</p>
        <div class="hero-ecommerce-product-footer">
          <span class="hero-ecommerce-price">$129</span>
          <span class="hero-ecommerce-tag">Sale</span>
        </div>
      </article>

      <article class="hero-ecommerce-product-card">
        <div class="hero-ecommerce-image"></div>
        <h3>Starter Kit</h3>
        <p>Use product cards to preview key collections.</p>
        <div class="hero-ecommerce-product-footer">
          <span class="hero-ecommerce-price">$59</span>
          <span class="hero-ecommerce-tag">Popular</span>
        </div>
      </article>

      <article class="hero-ecommerce-product-card">
        <div class="hero-ecommerce-image"></div>
        <h3>Gift Bundle</h3>
        <p>Promote bundles or product categories.</p>
        <div class="hero-ecommerce-product-footer">
          <span class="hero-ecommerce-price">$99</span>
          <span class="hero-ecommerce-tag">Bundle</span>
        </div>
      </article>

    </div>

  </div>

</section>

CSS

.hero-ecommerce-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,.96fr);
gap:42px;
align-items:center;
}

.hero-ecommerce-content{
min-width:0;
}

.hero-ecommerce-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-ecommerce-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,74px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-ecommerce-title span{
background:linear-gradient(90deg,#16a34a,#f97316,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-ecommerce-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-ecommerce-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-ecommerce-button-primary,
.hero-ecommerce-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-ecommerce-button-primary{
background:linear-gradient(135deg,#16a34a,#f97316);
color:#ffffff;
box-shadow:0 18px 42px rgba(22,163,74,.22);
}

.hero-ecommerce-button-primary:hover,
.hero-ecommerce-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(249,115,22,.25);
outline:none;
}

.hero-ecommerce-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-ecommerce-button-secondary:hover,
.hero-ecommerce-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-ecommerce-benefits{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-ecommerce-benefit{
padding:15px;
border-radius:20px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.hero-ecommerce-benefit strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.1;
font-weight:950;
color:#0f172a;
}

.hero-ecommerce-benefit span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-ecommerce-visual{
position:relative;
min-height:540px;
}

.hero-ecommerce-visual::before{
content:"";
position:absolute;
width:330px;
height:330px;
right:-60px;
top:44px;
border-radius:999px;
background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(249,115,22,.18));
filter:blur(6px);
}

.hero-ecommerce-product-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
align-items:start;
}

.hero-ecommerce-product-card{
position:relative;
overflow:hidden;
padding:16px;
border-radius:28px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.hero-ecommerce-product-card:nth-child(2){
margin-top:62px;
}

.hero-ecommerce-product-card:nth-child(3){
margin-top:-28px;
}

.hero-ecommerce-image{
height:190px;
border-radius:22px;
margin-bottom:14px;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.60),transparent 30%),
linear-gradient(135deg,#16a34a,#84cc16);
position:relative;
overflow:hidden;
}

.hero-ecommerce-product-card:nth-child(2) .hero-ecommerce-image{
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.60),transparent 30%),
linear-gradient(135deg,#f97316,#ec4899);
}

.hero-ecommerce-product-card:nth-child(3) .hero-ecommerce-image{
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.60),transparent 30%),
linear-gradient(135deg,#2563eb,#0ea5e9);
}

.hero-ecommerce-product-card:nth-child(4) .hero-ecommerce-image{
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.60),transparent 30%),
linear-gradient(135deg,#7c3aed,#ec4899);
}

.hero-ecommerce-image::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:92px;
height:120px;
border-radius:28px;
background:rgba(255,255,255,.20);
border:1px solid rgba(255,255,255,.24);
transform:translate(-50%,-50%) rotate(10deg);
}

.hero-ecommerce-product-card h3{
margin:0 0 6px;
font-size:17px;
line-height:1.3;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.hero-ecommerce-product-card p{
margin:0 0 12px;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.hero-ecommerce-product-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.hero-ecommerce-price{
font-size:18px;
font-weight:950;
color:#15803d;
}

.hero-ecommerce-tag{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:900;
}

.hero-ecommerce-sale-badge{
position:absolute;
right:22px;
top:22px;
z-index:4;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:13px;
font-weight:950;
box-shadow:0 16px 34px rgba(15,23,42,.22);
}

@media (max-width: 920px){
.hero-ecommerce-section{
grid-template-columns:1fr;
}

.hero-ecommerce-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-ecommerce-title{
font-size:40px;
}

.hero-ecommerce-text{
font-size:16px;
}

.hero-ecommerce-actions{
align-items:stretch;
flex-direction:column;
}

.hero-ecommerce-button-primary,
.hero-ecommerce-button-secondary{
width:100%;
}

.hero-ecommerce-benefits{
grid-template-columns:1fr;
}

.hero-ecommerce-visual{
min-height:auto;
}

.hero-ecommerce-product-grid{
grid-template-columns:1fr;
}

.hero-ecommerce-product-card:nth-child(2),
.hero-ecommerce-product-card:nth-child(3){
margin-top:0;
}
}

This eCommerce hero section is useful when you want the first screen to feel like a shopping experience. The product cards make the offer visual, while the headline, CTA buttons, and benefit cards help visitors understand why they should explore the collection.

Use this pattern for online stores, WooCommerce homepages, product category pages, seasonal sales, product collections, shop landing pages, and promotional campaigns.

10. Product Launch Hero Section

A product launch hero section is built to create excitement around a new product, feature, collection, or service. It should make the launch feel important, explain the main benefit, and guide visitors toward early access, pre-order, signup, or product details.

This example uses a dark launch-style layout with a strong headline, countdown-style cards, product preview, CTA buttons, and a highlighted availability badge. It works well for product launches, SaaS feature releases, app launches, digital product releases, and new collection announcements.

  • Perfect for product launches, pre-order pages, new feature releases, and early access campaigns
  • Includes launch headline, CTA buttons, countdown cards, and product preview
  • Uses a premium dark visual style
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Product Launch Hero

A new product built for faster creative workflows

Use this product launch hero section to create excitement, announce availability, and guide visitors toward early access, pre-orders, or launch details.

Get Early Access View Launch Details
12 Days
08 Hours
44 Minutes
29 Seconds
Launching soon

Launch Product

Showcase the new product, feature, or collection with a focused launch card.

Early access Invite visitors to join before the full release.

HTML

<section class="hero-launch-section">

  <div class="hero-launch-content">

    <div class="hero-launch-kicker">Product Launch Hero</div>

    <h3 class="hero-launch-title">A new product built for <span>faster creative workflows</span></h3>

    <p class="hero-launch-text">Use this product launch hero section to create excitement, announce availability, and guide visitors toward early access, pre-orders, or launch details.</p>

    <div class="hero-launch-actions">
      <a class="hero-launch-button-primary" href="#">Get Early Access</a>
      <a class="hero-launch-button-secondary" href="#">View Launch Details</a>
    </div>

    <div class="hero-launch-countdown">

      <div class="hero-launch-time">
        <strong>12</strong>
        <span>Days</span>
      </div>

      <div class="hero-launch-time">
        <strong>08</strong>
        <span>Hours</span>
      </div>

      <div class="hero-launch-time">
        <strong>44</strong>
        <span>Minutes</span>
      </div>

      <div class="hero-launch-time">
        <strong>29</strong>
        <span>Seconds</span>
      </div>

    </div>

  </div>

  <div class="hero-launch-visual">

    <div class="hero-launch-ring"></div>

    <div class="hero-launch-badge">Launching soon</div>

    <div class="hero-launch-product">
      <div class="hero-launch-product-image"></div>
      <h3>Launch Product</h3>
      <p>Showcase the new product, feature, or collection with a focused launch card.</p>
    </div>

    <div class="hero-launch-note">
      <strong>Early access</strong>
      <span>Invite visitors to join before the full release.</span>
    </div>

  </div>

</section>

CSS

.hero-launch-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(330px,.92fr);
gap:42px;
align-items:center;
}

.hero-launch-content{
min-width:0;
}

.hero-launch-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(249,115,22,.14);
border:1px solid rgba(251,146,60,.24);
color:#fed7aa;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-launch-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,74px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.hero-launch-title span{
background:linear-gradient(90deg,#fdba74,#f9a8d4,#93c5fd) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-launch-text{
margin:0 0 26px;
max-width:640px;
font-size:17px;
line-height:1.8;
color:#cbd5e1;
}

.hero-launch-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.hero-launch-button-primary,
.hero-launch-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-launch-button-primary{
background:linear-gradient(135deg,#f97316,#ec4899);
color:#ffffff;
box-shadow:0 18px 42px rgba(249,115,22,.24);
}

.hero-launch-button-primary:hover,
.hero-launch-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(236,72,153,.28);
outline:none;
}

.hero-launch-button-secondary{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
}

.hero-launch-button-secondary:hover,
.hero-launch-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.11);
outline:none;
}

.hero-launch-countdown{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
max-width:620px;
}

.hero-launch-time{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 42px rgba(0,0,0,.18);
text-align:center;
}

.hero-launch-time strong{
display:block;
margin-bottom:4px;
font-size:26px;
line-height:1;
font-weight:950;
color:#ffffff;
}

.hero-launch-time span{
display:block;
font-size:12px;
line-height:1.45;
font-weight:850;
color:#94a3b8;
text-transform:uppercase;
letter-spacing:.06em;
}

.hero-launch-visual{
position:relative;
min-height:540px;
}

.hero-launch-ring{
position:absolute;
inset:30px;
border-radius:999px;
background:
radial-gradient(circle at 50% 50%,rgba(249,115,22,.18),transparent 48%);
border:1px solid rgba(255,255,255,.10);
}

.hero-launch-ring::before,
.hero-launch-ring::after{
content:"";
position:absolute;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
}

.hero-launch-ring::before{
inset:46px;
}

.hero-launch-ring::after{
inset:92px;
}

.hero-launch-product{
position:absolute;
z-index:3;
left:50%;
top:50%;
width:min(360px,78%);
padding:22px;
border-radius:34px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 34px 100px rgba(0,0,0,.38);
backdrop-filter:blur(18px);
transform:translate(-50%,-50%);
}

.hero-launch-product-image{
height:260px;
border-radius:26px;
margin-bottom:18px;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.28),transparent 30%),
linear-gradient(135deg,#f97316,#ec4899 52%,#2563eb);
position:relative;
overflow:hidden;
}

.hero-launch-product-image::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:150px;
height:180px;
border-radius:42px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.22);
transform:translate(-50%,-50%) rotate(8deg);
}

.hero-launch-product-image::after{
content:"";
position:absolute;
left:34px;
right:34px;
bottom:34px;
height:18px;
border-radius:999px;
background:rgba(255,255,255,.28);
}

.hero-launch-product h3{
margin:0 0 7px;
font-size:24px;
line-height:1.16;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
}

.hero-launch-product p{
margin:0;
font-size:14px;
line-height:1.65;
color:#cbd5e1;
}

.hero-launch-badge{
position:absolute;
right:4px;
top:70px;
z-index:4;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 14px;
border-radius:999px;
background:#ffffff;
color:#0f172a;
font-size:13px;
font-weight:950;
box-shadow:0 18px 42px rgba(0,0,0,.28);
}

.hero-launch-note{
position:absolute;
left:0;
bottom:78px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 56px rgba(0,0,0,.24);
}

.hero-launch-note strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-launch-note span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

@media (max-width: 920px){
.hero-launch-section{
grid-template-columns:1fr;
}

.hero-launch-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-launch-title{
font-size:40px;
}

.hero-launch-text{
font-size:16px;
}

.hero-launch-actions{
align-items:stretch;
flex-direction:column;
}

.hero-launch-button-primary,
.hero-launch-button-secondary{
width:100%;
}

.hero-launch-countdown{
grid-template-columns:1fr 1fr;
}

.hero-launch-visual{
min-height:620px;
}

.hero-launch-product{
width:82%;
}

.hero-launch-badge{
right:0;
top:24px;
}

.hero-launch-note{
left:0;
right:0;
bottom:24px;
width:auto;
}
}

This product launch hero section is useful when a page needs to create urgency and anticipation. The countdown-style cards, launch badge, and product preview help visitors understand that something new is coming and encourage them to take action early.

Use this pattern for product launch pages, pre-order pages, SaaS feature releases, app launches, digital product releases, collection announcements, and early access campaigns.

11. Service Business Hero Section

A service business hero section should explain what the company does, who it helps, and how visitors can request help. This type of hero section is useful for local service providers, contractors, repair companies, consultants, agencies, home services, construction businesses, and professional service websites.

This example uses a clear service-focused layout with a strong headline, short value statement, quote CTA, service cards, trust badges, and a visual project panel. It is designed to help visitors understand the offer quickly and take action.

  • Perfect for local services, contractors, consultants, repair companies, and professional businesses
  • Includes service headline, CTA buttons, trust badges, and service cards
  • Uses a clean business-focused responsive layout
  • Works well for quote request and consultation pages
  • Uses HTML and CSS only
Service Business Hero

Reliable service for projects that need expert care

Use this service business hero section to explain your offer, build trust, and guide visitors toward requesting a quote or booking a consultation.

Request a Quote Explore Services
Licensed professionals
Clear project process
Fast response
Quote ready Help visitors understand what to do next with a clear CTA.
01
Consultation Start with a clear service request.
02
Delivery Show a simple and reliable process.

HTML

<section class="hero-service-section">

  <div class="hero-service-content">

    <div class="hero-service-kicker">Service Business Hero</div>

    <h3 class="hero-service-title">Reliable service for <span>projects that need expert care</span></h3>

    <p class="hero-service-text">Use this service business hero section to explain your offer, build trust, and guide visitors toward requesting a quote or booking a consultation.</p>

    <div class="hero-service-actions">
      <a class="hero-service-button-primary" href="#">Request a Quote</a>
      <a class="hero-service-button-secondary" href="#">Explore Services</a>
    </div>

    <div class="hero-service-trust">

      <div class="hero-service-trust-item">
        <span class="hero-service-trust-dot"></span>
        Licensed professionals
      </div>

      <div class="hero-service-trust-item">
        <span class="hero-service-trust-dot"></span>
        Clear project process
      </div>

      <div class="hero-service-trust-item">
        <span class="hero-service-trust-dot"></span>
        Fast response
      </div>

    </div>

  </div>

  <div class="hero-service-visual">

    <div class="hero-service-floating">
      <strong>Quote ready</strong>
      <span>Help visitors understand what to do next with a clear CTA.</span>
    </div>

    <div class="hero-service-card">

      <div class="hero-service-image"></div>

      <div class="hero-service-grid">

        <div class="hero-service-item">
          <div class="hero-service-icon">01</div>
          <strong>Consultation</strong>
          <span>Start with a clear service request.</span>
        </div>

        <div class="hero-service-item">
          <div class="hero-service-icon">02</div>
          <strong>Delivery</strong>
          <span>Show a simple and reliable process.</span>
        </div>

      </div>

    </div>

  </div>

</section>

CSS

.hero-service-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(330px,.92fr);
gap:42px;
align-items:center;
}

.hero-service-content{
min-width:0;
}

.hero-service-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-service-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,72px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-service-title span{
background:linear-gradient(90deg,#2563eb,#16a34a,#0ea5e9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-service-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-service-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-service-button-primary,
.hero-service-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-service-button-primary{
background:linear-gradient(135deg,#2563eb,#16a34a);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.22);
}

.hero-service-button-primary:hover,
.hero-service-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(22,163,74,.25);
outline:none;
}

.hero-service-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-service-button-secondary:hover,
.hero-service-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-service-trust{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.hero-service-trust-item{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 30px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.hero-service-trust-dot{
width:9px;
height:9px;
border-radius:999px;
background:#16a34a;
box-shadow:0 0 0 4px rgba(22,163,74,.13);
}

.hero-service-visual{
position:relative;
min-height:540px;
}

.hero-service-visual::before{
content:"";
position:absolute;
width:340px;
height:340px;
right:-60px;
top:44px;
border-radius:999px;
background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(34,197,94,.18));
filter:blur(6px);
}

.hero-service-card{
position:relative;
z-index:2;
display:grid;
gap:16px;
padding:22px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
}

.hero-service-image{
position:relative;
min-height:300px;
overflow:hidden;
border-radius:26px;
background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.55),transparent 30%),
linear-gradient(135deg,#1d4ed8,#16a34a);
}

.hero-service-image::before{
content:"";
position:absolute;
left:34px;
right:34px;
bottom:34px;
height:86px;
border-radius:24px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(14px);
}

.hero-service-image::after{
content:"";
position:absolute;
right:38px;
top:42px;
width:170px;
height:170px;
border-radius:46px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.20);
transform:rotate(8deg);
}

.hero-service-floating{
position:absolute;
left:-8px;
top:64px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-service-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-service-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

.hero-service-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.hero-service-item{
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.hero-service-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
margin-bottom:12px;
border-radius:15px;
background:linear-gradient(135deg,#2563eb,#16a34a);
color:#ffffff;
font-size:14px;
font-weight:950;
}

.hero-service-item strong{
display:block;
margin-bottom:5px;
font-size:16px;
line-height:1.25;
font-weight:950;
color:#0f172a;
}

.hero-service-item span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

@media (max-width: 920px){
.hero-service-section{
grid-template-columns:1fr;
}

.hero-service-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-service-title{
font-size:40px;
}

.hero-service-text{
font-size:16px;
}

.hero-service-actions{
align-items:stretch;
flex-direction:column;
}

.hero-service-button-primary,
.hero-service-button-secondary{
width:100%;
}

.hero-service-card{
padding:16px;
border-radius:26px;
}

.hero-service-image{
min-height:250px;
border-radius:22px;
}

.hero-service-floating{
position:relative;
left:auto;
top:auto;
width:auto;
margin-bottom:16px;
}

.hero-service-grid{
grid-template-columns:1fr;
}
}

This service business hero section is useful when the website needs to create trust and encourage quote requests. The service cards, trust badges, and clear CTA buttons help visitors understand the process and take the next step.

Use this pattern for local service websites, contractors, consultants, repair services, agencies, construction companies, home service businesses, and professional service pages.

12. Real Estate Hero Section

A real estate hero section should help visitors start searching, understand the property offer, and trust the agent or platform. It often includes a property search form, location field, price range, featured listing, agent trust signals, and a strong visual background.

This example uses a premium real estate layout with a large property-style visual panel, search form, listing card, CTA button, and trust statistics. It works well for real estate agencies, property listing websites, rental platforms, agents, brokers, and property landing pages.

  • Perfect for real estate websites, property listings, rental platforms, agents, and brokers
  • Includes search fields, property CTA, listing card, and trust statistics
  • Uses a premium visual layout with strong conversion focus
  • Responsive design stacks cleanly on mobile
  • Uses HTML and CSS only
Real Estate Hero

Find a home that fits your next chapter

Use this real estate hero section to help visitors search properties, understand your offer, and explore featured listings quickly.

1.2K Active listings
320+ Homes sold
4.9 Agent rating
Featured listing Show a premium property directly in the hero area.

Modern Family Home

$820K

A clean listing preview with location, price, and key property details.

4 Beds
3 Baths
2,400 Sq ft

HTML

<section class="hero-realestate-section">

  <div class="hero-realestate-content">

    <div class="hero-realestate-kicker">Real Estate Hero</div>

    <h3 class="hero-realestate-title">Find a home that fits your <span>next chapter</span></h3>

    <p class="hero-realestate-text">Use this real estate hero section to help visitors search properties, understand your offer, and explore featured listings quickly.</p>

    <form class="hero-realestate-search" action="#" method="get">

      <div class="hero-realestate-field">
        <label class="hero-realestate-label" for="realestate-location">Location</label>
        <input class="hero-realestate-input" id="realestate-location" type="text" name="location" placeholder="City or neighborhood">
      </div>

      <div class="hero-realestate-field">
        <label class="hero-realestate-label" for="realestate-type">Property Type</label>
        <select class="hero-realestate-select" id="realestate-type" name="type">
          <option>Any property</option>
          <option>House</option>
          <option>Apartment</option>
          <option>Condo</option>
        </select>
      </div>

      <button class="hero-realestate-button" type="submit">Search Properties</button>

    </form>

    <div class="hero-realestate-stats">

      <div class="hero-realestate-stat">
        <strong>1.2K</strong>
        <span>Active listings</span>
      </div>

      <div class="hero-realestate-stat">
        <strong>320+</strong>
        <span>Homes sold</span>
      </div>

      <div class="hero-realestate-stat">
        <strong>4.9</strong>
        <span>Agent rating</span>
      </div>

    </div>

  </div>

  <div class="hero-realestate-visual">

    <div class="hero-realestate-badge">
      <strong>Featured listing</strong>
      <span>Show a premium property directly in the hero area.</span>
    </div>

    <div class="hero-realestate-card">

      <div class="hero-realestate-image"></div>

      <div class="hero-realestate-listing">

        <div class="hero-realestate-listing-top">
          <h3>Modern Family Home</h3>
          <span class="hero-realestate-price">$820K</span>
        </div>

        <p>A clean listing preview with location, price, and key property details.</p>

        <div class="hero-realestate-features">

          <div class="hero-realestate-feature">
            <strong>4</strong>
            <span>Beds</span>
          </div>

          <div class="hero-realestate-feature">
            <strong>3</strong>
            <span>Baths</span>
          </div>

          <div class="hero-realestate-feature">
            <strong>2,400</strong>
            <span>Sq ft</span>
          </div>

        </div>

      </div>

    </div>

  </div>

</section>

CSS

.hero-realestate-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,.96fr);
gap:42px;
align-items:center;
}

.hero-realestate-content{
min-width:0;
}

.hero-realestate-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#ecfccb;
color:#3f6212;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-realestate-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,72px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-realestate-title span{
background:linear-gradient(90deg,#3f6212,#b45309,#2563eb);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-realestate-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-realestate-search{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
max-width:680px;
padding:16px;
margin-bottom:24px;
border-radius:24px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 22px 58px rgba(15,23,42,.12);
}

.hero-realestate-field{
display:grid;
gap:7px;
}

.hero-realestate-label{
font-size:12px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
color:#64748b;
}

.hero-realestate-input,
.hero-realestate-select{
width:100%;
min-height:48px;
padding:0 14px;
border:1px solid #dbe3ef;
border-radius:15px;
background:#f8fafc;
color:#0f172a;
font-size:14px;
font-weight:750;
outline:none;
box-sizing:border-box;
}

.hero-realestate-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.hero-realestate-button{
grid-column:1 / -1;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#3f6212,#b45309);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(63,98,18,.20);
transition:transform .22s ease,box-shadow .22s ease;
}

.hero-realestate-button:hover,
.hero-realestate-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(180,83,9,.24);
outline:none;
}

.hero-realestate-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-realestate-stat{
padding:15px;
border-radius:20px;
background:rgba(255,255,255,.86);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.hero-realestate-stat strong{
display:block;
margin-bottom:4px;
font-size:24px;
line-height:1;
font-weight:950;
color:#0f172a;
}

.hero-realestate-stat span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-realestate-visual{
position:relative;
min-height:540px;
}

.hero-realestate-visual::before{
content:"";
position:absolute;
width:340px;
height:340px;
right:-60px;
top:44px;
border-radius:999px;
background:linear-gradient(135deg,rgba(63,98,18,.20),rgba(180,83,9,.18));
filter:blur(6px);
}

.hero-realestate-card{
position:relative;
z-index:2;
overflow:hidden;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
}

.hero-realestate-image{
position:relative;
min-height:360px;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.55),transparent 30%),
linear-gradient(135deg,#365314,#854d0e);
overflow:hidden;
}

.hero-realestate-image::before{
content:"";
position:absolute;
left:50%;
bottom:50px;
width:310px;
height:190px;
border-radius:38px 38px 18px 18px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.24);
transform:translateX(-50%);
}

.hero-realestate-image::after{
content:"";
position:absolute;
left:50%;
bottom:206px;
width:230px;
height:150px;
clip-path:polygon(50% 0,100% 100%,0 100%);
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
transform:translateX(-50%);
}

.hero-realestate-listing{
padding:22px;
}

.hero-realestate-listing-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:12px;
}

.hero-realestate-listing h3{
margin:0;
font-size:24px;
line-height:1.18;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-realestate-price{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:#ecfccb;
color:#3f6212;
font-size:14px;
font-weight:950;
white-space:nowrap;
}

.hero-realestate-listing p{
margin:0 0 16px;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.hero-realestate-features{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.hero-realestate-feature{
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
text-align:center;
}

.hero-realestate-feature strong{
display:block;
font-size:16px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-realestate-feature span{
display:block;
margin-top:3px;
font-size:12px;
line-height:1.35;
font-weight:750;
color:#64748b;
}

.hero-realestate-badge{
position:absolute;
left:-8px;
top:70px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-realestate-badge strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-realestate-badge span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

@media (max-width: 920px){
.hero-realestate-section{
grid-template-columns:1fr;
}

.hero-realestate-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-realestate-title{
font-size:40px;
}

.hero-realestate-text{
font-size:16px;
}

.hero-realestate-search,
.hero-realestate-stats,
.hero-realestate-features{
grid-template-columns:1fr;
}

.hero-realestate-card{
border-radius:26px;
}

.hero-realestate-image{
min-height:300px;
}

.hero-realestate-listing-top{
flex-direction:column;
}

.hero-realestate-badge{
position:relative;
left:auto;
top:auto;
width:auto;
margin-bottom:16px;
}
}

This real estate hero section is useful when users need to search quickly and see a featured listing immediately. The search form makes the section functional, while the property preview card gives the page a premium real estate feel.

Use this pattern for real estate agencies, property listing websites, rental platforms, agents, brokers, property landing pages, and neighborhood-focused real estate websites.

13. Restaurant Hero Section

A restaurant hero section should make visitors feel the atmosphere of the restaurant, understand the food style, and take action quickly. It often includes a strong food-focused headline, reservation button, menu link, opening hours, review rating, and a visual dish or dining card.

This example uses a warm restaurant layout with a bold headline, booking CTA, menu button, review badge, opening hours, and a featured dish visual. It works well for restaurants, cafes, bistros, food delivery brands, bakeries, bars, and hospitality websites.

  • Perfect for restaurants, cafes, bistros, bakeries, bars, and food brands
  • Includes reservation CTA, menu link, review badge, and opening hours
  • Uses a warm premium visual style
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Restaurant Hero Section

Fresh flavors served with warm modern style

Use this restaurant hero section to introduce your food style, highlight a featured dish, and guide visitors toward reservations or your menu.

Reserve a Table View Menu
4.8 Guest rating
Open Today until 10 PM
Fresh Seasonal menu
Guest favorite Highlight a popular dish, special menu, or chef recommendation.
★★★★★

Signature Plate

A featured dish card helps make the restaurant hero more visual and appetizing.

$24

HTML

<section class="hero-restaurant-section">

  <div class="hero-restaurant-content">

    <div class="hero-restaurant-kicker">Restaurant Hero Section</div>

    <h3 class="hero-restaurant-title">Fresh flavors served with <span>warm modern style</span></h3>

    <p class="hero-restaurant-text">Use this restaurant hero section to introduce your food style, highlight a featured dish, and guide visitors toward reservations or your menu.</p>

    <div class="hero-restaurant-actions">
      <a class="hero-restaurant-button-primary" href="#">Reserve a Table</a>
      <a class="hero-restaurant-button-secondary" href="#">View Menu</a>
    </div>

    <div class="hero-restaurant-info">

      <div class="hero-restaurant-info-item">
        <strong>4.8</strong>
        <span>Guest rating</span>
      </div>

      <div class="hero-restaurant-info-item">
        <strong>Open</strong>
        <span>Today until 10 PM</span>
      </div>

      <div class="hero-restaurant-info-item">
        <strong>Fresh</strong>
        <span>Seasonal menu</span>
      </div>

    </div>

  </div>

  <div class="hero-restaurant-visual">

    <div class="hero-restaurant-badge">
      <strong>Guest favorite</strong>
      <span>Highlight a popular dish, special menu, or chef recommendation.</span>
      <div class="hero-restaurant-stars">★★★★★</div>
    </div>

    <div class="hero-restaurant-card">

      <div class="hero-restaurant-dish">
        <div class="hero-restaurant-plate"></div>
        <div class="hero-restaurant-food"></div>
      </div>

      <div class="hero-restaurant-card-body">

        <div>
          <h3>Signature Plate</h3>
          <p>A featured dish card helps make the restaurant hero more visual and appetizing.</p>
        </div>

        <span class="hero-restaurant-price">$24</span>

      </div>

    </div>

  </div>

</section>

CSS

.hero-restaurant-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,.92fr);
gap:42px;
align-items:center;
}

.hero-restaurant-content{
min-width:0;
}

.hero-restaurant-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#fef3c7;
color:#b45309;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-restaurant-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,74px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-restaurant-title span{
background:linear-gradient(90deg,#d97706,#dc2626,#7c2d12);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-restaurant-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-restaurant-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-restaurant-button-primary,
.hero-restaurant-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-restaurant-button-primary{
background:linear-gradient(135deg,#d97706,#dc2626);
color:#ffffff;
box-shadow:0 18px 42px rgba(217,119,6,.22);
}

.hero-restaurant-button-primary:hover,
.hero-restaurant-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(220,38,38,.24);
outline:none;
}

.hero-restaurant-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-restaurant-button-secondary:hover,
.hero-restaurant-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-restaurant-info{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-restaurant-info-item{
padding:16px;
border-radius:20px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.hero-restaurant-info-item strong{
display:block;
margin-bottom:4px;
font-size:20px;
line-height:1.1;
font-weight:950;
color:#0f172a;
}

.hero-restaurant-info-item span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-restaurant-visual{
position:relative;
min-height:540px;
}

.hero-restaurant-visual::before{
content:"";
position:absolute;
width:340px;
height:340px;
right:-60px;
top:44px;
border-radius:999px;
background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(220,38,38,.18));
filter:blur(6px);
}

.hero-restaurant-card{
position:relative;
z-index:2;
padding:22px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
}

.hero-restaurant-dish{
position:relative;
min-height:360px;
overflow:hidden;
border-radius:28px;
background:
radial-gradient(circle at 50% 48%,rgba(255,255,255,.26),transparent 35%),
linear-gradient(135deg,#7c2d12,#d97706 52%,#dc2626);
}

.hero-restaurant-plate{
position:absolute;
left:50%;
top:50%;
width:250px;
height:250px;
border-radius:999px;
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.88) 0 34%,rgba(255,255,255,.28) 35% 53%,rgba(255,255,255,.16) 54% 100%);
border:1px solid rgba(255,255,255,.40);
box-shadow:0 28px 70px rgba(0,0,0,.20);
transform:translate(-50%,-50%);
}

.hero-restaurant-food{
position:absolute;
left:50%;
top:50%;
width:128px;
height:128px;
border-radius:999px;
background:
radial-gradient(circle at 35% 30%,#fde68a 0 16%,transparent 17%),
radial-gradient(circle at 68% 58%,#ef4444 0 14%,transparent 15%),
radial-gradient(circle at 52% 46%,#22c55e 0 11%,transparent 12%),
linear-gradient(135deg,#f97316,#7c2d12);
transform:translate(-50%,-50%);
}

.hero-restaurant-card-body{
padding:18px 4px 4px;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:16px;
align-items:center;
}

.hero-restaurant-card-body h3{
margin:0 0 6px;
font-size:24px;
line-height:1.16;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-restaurant-card-body p{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.hero-restaurant-price{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:72px;
min-height:44px;
border-radius:999px;
background:#fef3c7;
color:#b45309;
font-size:16px;
font-weight:950;
}

.hero-restaurant-badge{
position:absolute;
left:-8px;
top:70px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-restaurant-badge strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-restaurant-badge span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

.hero-restaurant-stars{
display:flex;
gap:2px;
margin-top:12px;
color:#fbbf24;
font-size:14px;
letter-spacing:1px;
}

@media (max-width: 920px){
.hero-restaurant-section{
grid-template-columns:1fr;
}

.hero-restaurant-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-restaurant-title{
font-size:40px;
}

.hero-restaurant-text{
font-size:16px;
}

.hero-restaurant-actions{
align-items:stretch;
flex-direction:column;
}

.hero-restaurant-button-primary,
.hero-restaurant-button-secondary{
width:100%;
}

.hero-restaurant-info{
grid-template-columns:1fr;
}

.hero-restaurant-card{
padding:16px;
border-radius:26px;
}

.hero-restaurant-dish{
min-height:300px;
border-radius:22px;
}

.hero-restaurant-plate{
width:210px;
height:210px;
}

.hero-restaurant-card-body{
grid-template-columns:1fr;
}

.hero-restaurant-badge{
position:relative;
left:auto;
top:auto;
width:auto;
margin-bottom:16px;
}
}

This restaurant hero section is useful when the website needs to create appetite and trust quickly. The warm color palette, reservation CTA, review badge, and featured dish card help make the first screen feel inviting and action-focused.

Use this pattern for restaurants, cafes, bistros, bakeries, bars, food delivery brands, chef websites, hospitality pages, and local dining websites.

14. Travel Website Hero Section

A travel website hero section should inspire visitors while helping them start planning. It often includes a destination-focused headline, search form, trip categories, travel highlights, featured destination card, and a strong call-to-action.

This example uses a bright travel layout with a destination search form, CTA button, trip statistics, and layered destination cards. It works well for travel agencies, tour companies, booking websites, destination guides, travel blogs, and vacation landing pages.

  • Perfect for travel agencies, booking websites, tour companies, and destination guides
  • Includes travel headline, search form, CTA button, and featured destination cards
  • Uses a fresh visual style with strong destination feeling
  • Responsive design stacks cleanly on mobile
  • Uses HTML and CSS only
Travel Website Hero

Plan your next escape to beautiful destinations

Use this travel hero section to inspire visitors, help them search destinations, and guide them toward booking or exploring trips.

120+ Destinations
4.9 Traveler rating
24/7 Trip support

Mountain Retreat

Feature a destination, travel package, or seasonal trip directly in the hero area.

$890 7 days

City Weekend

Show smaller trip cards for extra inspiration.

Featured trips Combine inspiration with search to help users start planning faster.

HTML

<section class="hero-travel-section">

  <div class="hero-travel-content">

    <div class="hero-travel-kicker">Travel Website Hero</div>

    <h3 class="hero-travel-title">Plan your next escape to <span>beautiful destinations</span></h3>

    <p class="hero-travel-text">Use this travel hero section to inspire visitors, help them search destinations, and guide them toward booking or exploring trips.</p>

    <form class="hero-travel-search" action="#" method="get">

      <div class="hero-travel-field">
        <label class="hero-travel-label" for="travel-destination">Destination</label>
        <input class="hero-travel-input" id="travel-destination" type="text" name="destination" placeholder="Where do you want to go?">
      </div>

      <div class="hero-travel-field">
        <label class="hero-travel-label" for="travel-type">Trip Type</label>
        <select class="hero-travel-select" id="travel-type" name="type">
          <option>Adventure</option>
          <option>Beach holiday</option>
          <option>City break</option>
          <option>Family trip</option>
        </select>
      </div>

      <button class="hero-travel-button" type="submit">Search Trips</button>

    </form>

    <div class="hero-travel-stats">

      <div class="hero-travel-stat">
        <strong>120+</strong>
        <span>Destinations</span>
      </div>

      <div class="hero-travel-stat">
        <strong>4.9</strong>
        <span>Traveler rating</span>
      </div>

      <div class="hero-travel-stat">
        <strong>24/7</strong>
        <span>Trip support</span>
      </div>

    </div>

  </div>

  <div class="hero-travel-visual">

    <div class="hero-travel-card-stack">

      <div class="hero-travel-card hero-travel-card-main">

        <div class="hero-travel-image"></div>

        <div class="hero-travel-card-body">
          <h3>Mountain Retreat</h3>
          <p>Feature a destination, travel package, or seasonal trip directly in the hero area.</p>

          <div class="hero-travel-card-meta">
            <span class="hero-travel-price">$890</span>
            <span class="hero-travel-tag">7 days</span>
          </div>

        </div>

      </div>

      <div class="hero-travel-card hero-travel-card-secondary">

        <div class="hero-travel-image"></div>

        <div class="hero-travel-card-body">
          <h3>City Weekend</h3>
          <p>Show smaller trip cards for extra inspiration.</p>
        </div>

      </div>

      <div class="hero-travel-floating">
        <strong>Featured trips</strong>
        <span>Combine inspiration with search to help users start planning faster.</span>
      </div>

    </div>

  </div>

</section>

CSS

.hero-travel-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,.96fr);
gap:42px;
align-items:center;
}

.hero-travel-content{
min-width:0;
}

.hero-travel-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-travel-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,74px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-travel-title span{
background:linear-gradient(90deg,#0284c7,#16a34a,#f59e0b);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-travel-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-travel-search{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
max-width:680px;
padding:16px;
margin-bottom:24px;
border-radius:24px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 22px 58px rgba(15,23,42,.12);
}

.hero-travel-field{
display:grid;
gap:7px;
}

.hero-travel-label{
font-size:12px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
color:#64748b;
}

.hero-travel-input,
.hero-travel-select{
width:100%;
min-height:48px;
padding:0 14px;
border:1px solid #dbe3ef;
border-radius:15px;
background:#f8fafc;
color:#0f172a;
font-size:14px;
font-weight:750;
outline:none;
box-sizing:border-box;
}

.hero-travel-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.hero-travel-button{
grid-column:1 / -1;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#0284c7,#16a34a);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(2,132,199,.20);
transition:transform .22s ease,box-shadow .22s ease;
}

.hero-travel-button:hover,
.hero-travel-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(22,163,74,.24);
outline:none;
}

.hero-travel-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-travel-stat{
padding:15px;
border-radius:20px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.hero-travel-stat strong{
display:block;
margin-bottom:4px;
font-size:24px;
line-height:1;
font-weight:950;
color:#0f172a;
}

.hero-travel-stat span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-travel-visual{
position:relative;
min-height:540px;
}

.hero-travel-visual::before{
content:"";
position:absolute;
width:360px;
height:360px;
right:-70px;
top:36px;
border-radius:999px;
background:linear-gradient(135deg,rgba(14,165,233,.24),rgba(34,197,94,.18));
filter:blur(6px);
}

.hero-travel-card-stack{
position:relative;
z-index:2;
height:100%;
}

.hero-travel-card{
position:absolute;
overflow:hidden;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
}

.hero-travel-card-main{
right:0;
top:0;
width:min(420px,88%);
min-height:500px;
}

.hero-travel-card-secondary{
left:0;
bottom:42px;
width:250px;
min-height:270px;
z-index:3;
}

.hero-travel-image{
position:relative;
min-height:310px;
background:
radial-gradient(circle at 25% 18%,rgba(255,255,255,.58),transparent 30%),
linear-gradient(135deg,#0284c7,#16a34a 62%,#f59e0b);
overflow:hidden;
}

.hero-travel-card-secondary .hero-travel-image{
min-height:170px;
background:
radial-gradient(circle at 25% 18%,rgba(255,255,255,.58),transparent 30%),
linear-gradient(135deg,#7c3aed,#0ea5e9);
}

.hero-travel-image::before{
content:"";
position:absolute;
left:-20px;
right:-20px;
bottom:-40px;
height:150px;
border-radius:50% 50% 0 0;
background:rgba(255,255,255,.22);
}

.hero-travel-image::after{
content:"";
position:absolute;
left:70px;
bottom:62px;
width:160px;
height:120px;
clip-path:polygon(50% 0,100% 100%,0 100%);
background:rgba(255,255,255,.20);
}

.hero-travel-card-body{
padding:22px;
}

.hero-travel-card-body h3{
margin:0 0 8px;
font-size:24px;
line-height:1.16;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-travel-card-secondary .hero-travel-card-body h3{
font-size:18px;
}

.hero-travel-card-body p{
margin:0 0 14px;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.hero-travel-card-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.hero-travel-price{
font-size:18px;
font-weight:950;
color:#0284c7;
}

.hero-travel-tag{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:30px;
padding:0 10px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:12px;
font-weight:900;
}

.hero-travel-floating{
position:absolute;
right:18px;
bottom:22px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-travel-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-travel-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

@media (max-width: 920px){
.hero-travel-section{
grid-template-columns:1fr;
}

.hero-travel-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-travel-title{
font-size:40px;
}

.hero-travel-text{
font-size:16px;
}

.hero-travel-search,
.hero-travel-stats{
grid-template-columns:1fr;
}

.hero-travel-visual{
min-height:auto;
}

.hero-travel-card-stack{
display:grid;
gap:16px;
height:auto;
}

.hero-travel-card,
.hero-travel-card-main,
.hero-travel-card-secondary{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
min-height:auto;
}

.hero-travel-floating{
position:relative;
right:auto;
bottom:auto;
width:auto;
}
}

This travel website hero section is useful when a website needs to combine inspiration with practical search. The destination cards create visual interest, while the form helps users start planning immediately.

Use this pattern for travel agencies, tour companies, booking websites, destination guides, travel blogs, vacation landing pages, and experience-based websites.

15. Fitness Website Hero Section

A fitness website hero section should create energy, motivation, and trust quickly. It can introduce a gym, personal trainer, fitness app, workout program, coaching offer, or online training plan while guiding visitors toward joining, booking, or starting a program.

This example uses a bold fitness layout with a strong headline, CTA buttons, program highlights, progress cards, and a dynamic workout-style visual. It works well for gyms, personal trainers, fitness coaches, online workout platforms, wellness brands, and sports websites.

  • Perfect for gyms, trainers, online workout programs, and fitness brands
  • Includes headline, CTA buttons, fitness stats, and workout visual card
  • Uses a bold high-energy design style
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Fitness Website Hero

Build strength with a smarter training plan

Use this fitness hero section to promote a gym, trainer, coaching program, or workout platform with a strong motivational first impression.

Start Training View Programs
12 Week programs
4.9 Member rating
24/7 Workout access
Personal goals Show progress and motivation directly in the hero layout.

Strength Program

A focused workout card helps visitors understand the main program offer.

Weekly progress 78%
Coach support Highlight guidance, programs, and results.

HTML

<section class="hero-fitness-section">

  <div class="hero-fitness-content">

    <div class="hero-fitness-kicker">Fitness Website Hero</div>

    <h3 class="hero-fitness-title">Build strength with a <span>smarter training plan</span></h3>

    <p class="hero-fitness-text">Use this fitness hero section to promote a gym, trainer, coaching program, or workout platform with a strong motivational first impression.</p>

    <div class="hero-fitness-actions">
      <a class="hero-fitness-button-primary" href="#">Start Training</a>
      <a class="hero-fitness-button-secondary" href="#">View Programs</a>
    </div>

    <div class="hero-fitness-stats">

      <div class="hero-fitness-stat">
        <strong>12</strong>
        <span>Week programs</span>
      </div>

      <div class="hero-fitness-stat">
        <strong>4.9</strong>
        <span>Member rating</span>
      </div>

      <div class="hero-fitness-stat">
        <strong>24/7</strong>
        <span>Workout access</span>
      </div>

    </div>

  </div>

  <div class="hero-fitness-visual">

    <div class="hero-fitness-ring"></div>

    <div class="hero-fitness-floating hero-fitness-floating-one">
      <strong>Personal goals</strong>
      <span>Show progress and motivation directly in the hero layout.</span>
    </div>

    <div class="hero-fitness-card">

      <div class="hero-fitness-card-visual">
        <div class="hero-fitness-bar"></div>
        <div class="hero-fitness-person"></div>
      </div>

      <div class="hero-fitness-card-body">
        <h3>Strength Program</h3>
        <p>A focused workout card helps visitors understand the main program offer.</p>

        <div class="hero-fitness-progress">
          <div class="hero-fitness-progress-top">
            <span>Weekly progress</span>
            <span>78%</span>
          </div>
          <div class="hero-fitness-progress-track">
            <span></span>
          </div>
        </div>

      </div>

    </div>

    <div class="hero-fitness-floating hero-fitness-floating-two">
      <strong>Coach support</strong>
      <span>Highlight guidance, programs, and results.</span>
    </div>

  </div>

</section>

CSS

.hero-fitness-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(330px,.92fr);
gap:42px;
align-items:center;
}

.hero-fitness-content{
min-width:0;
}

.hero-fitness-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(239,68,68,.14);
border:1px solid rgba(248,113,113,.24);
color:#fecaca;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-fitness-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.078em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.hero-fitness-title span{
background:linear-gradient(90deg,#fca5a5,#fdba74,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-fitness-text{
margin:0 0 26px;
max-width:640px;
font-size:17px;
line-height:1.8;
color:#cbd5e1;
}

.hero-fitness-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.hero-fitness-button-primary,
.hero-fitness-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-fitness-button-primary{
background:linear-gradient(135deg,#ef4444,#f97316);
color:#ffffff;
box-shadow:0 18px 42px rgba(239,68,68,.24);
}

.hero-fitness-button-primary:hover,
.hero-fitness-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(249,115,22,.28);
outline:none;
}

.hero-fitness-button-secondary{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
}

.hero-fitness-button-secondary:hover,
.hero-fitness-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.11);
outline:none;
}

.hero-fitness-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-fitness-stat{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.hero-fitness-stat strong{
display:block;
margin-bottom:4px;
font-size:24px;
line-height:1;
font-weight:950;
color:#ffffff;
}

.hero-fitness-stat span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#94a3b8;
}

.hero-fitness-visual{
position:relative;
min-height:540px;
}

.hero-fitness-ring{
position:absolute;
inset:32px;
border-radius:999px;
background:
radial-gradient(circle at 50% 50%,rgba(239,68,68,.18),transparent 48%);
border:1px solid rgba(255,255,255,.10);
}

.hero-fitness-ring::before,
.hero-fitness-ring::after{
content:"";
position:absolute;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
}

.hero-fitness-ring::before{
inset:48px;
}

.hero-fitness-ring::after{
inset:96px;
}

.hero-fitness-card{
position:absolute;
z-index:3;
left:50%;
top:50%;
width:min(380px,82%);
padding:22px;
border-radius:34px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 34px 100px rgba(0,0,0,.38);
backdrop-filter:blur(18px);
transform:translate(-50%,-50%);
}

.hero-fitness-card-visual{
position:relative;
min-height:280px;
overflow:hidden;
border-radius:28px;
margin-bottom:18px;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.26),transparent 30%),
linear-gradient(135deg,#7f1d1d,#ef4444 52%,#f97316);
}

.hero-fitness-person{
position:absolute;
left:50%;
bottom:28px;
width:130px;
height:230px;
transform:translateX(-50%);
}

.hero-fitness-person::before{
content:"";
position:absolute;
left:50%;
top:0;
width:66px;
height:66px;
border-radius:999px;
background:rgba(255,255,255,.26);
border:1px solid rgba(255,255,255,.28);
transform:translateX(-50%);
}

.hero-fitness-person::after{
content:"";
position:absolute;
left:50%;
bottom:0;
width:110px;
height:160px;
border-radius:70px 70px 32px 32px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.24);
transform:translateX(-50%);
}

.hero-fitness-bar{
position:absolute;
left:50%;
top:92px;
width:230px;
height:12px;
border-radius:999px;
background:rgba(255,255,255,.32);
transform:translateX(-50%) rotate(-8deg);
}

.hero-fitness-bar::before,
.hero-fitness-bar::after{
content:"";
position:absolute;
top:50%;
width:34px;
height:58px;
border-radius:12px;
background:rgba(255,255,255,.24);
border:1px solid rgba(255,255,255,.28);
transform:translateY(-50%);
}

.hero-fitness-bar::before{
left:-34px;
}

.hero-fitness-bar::after{
right:-34px;
}

.hero-fitness-card-body h3{
margin:0 0 7px;
font-size:24px;
line-height:1.16;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
}

.hero-fitness-card-body p{
margin:0 0 16px;
font-size:14px;
line-height:1.65;
color:#cbd5e1;
}

.hero-fitness-progress{
display:grid;
gap:8px;
}

.hero-fitness-progress-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
font-size:13px;
font-weight:900;
color:#ffffff;
}

.hero-fitness-progress-track{
height:12px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.08);
}

.hero-fitness-progress-track span{
display:block;
width:78%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#ef4444,#f97316,#22c55e);
}

.hero-fitness-floating{
position:absolute;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 56px rgba(0,0,0,.24);
}

.hero-fitness-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-fitness-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.hero-fitness-floating-one{
left:0;
top:78px;
}

.hero-fitness-floating-two{
right:0;
bottom:78px;
}

@media (max-width: 920px){
.hero-fitness-section{
grid-template-columns:1fr;
}

.hero-fitness-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-fitness-title{
font-size:40px;
}

.hero-fitness-text{
font-size:16px;
}

.hero-fitness-actions{
align-items:stretch;
flex-direction:column;
}

.hero-fitness-button-primary,
.hero-fitness-button-secondary{
width:100%;
}

.hero-fitness-stats{
grid-template-columns:1fr;
}

.hero-fitness-visual{
min-height:650px;
}

.hero-fitness-card{
width:84%;
}

.hero-fitness-card-visual{
min-height:250px;
}

.hero-fitness-floating-one{
left:0;
top:22px;
}

.hero-fitness-floating-two{
right:0;
bottom:22px;
}
}

This fitness website hero section is useful when a brand needs to create motivation immediately. The dark background, strong CTA buttons, training stats, and workout card make the first screen feel energetic and goal-focused.

Use this pattern for gyms, personal trainers, online workout programs, fitness apps, sports coaches, wellness brands, and training-focused landing pages.

16. Online Course Hero Section

An online course hero section should explain what students will learn, why the course is valuable, and what action they should take next. It often includes a course headline, instructor trust signals, lesson count, student rating, enrollment CTA, and a course preview card.

This example uses a polished education layout with course details, CTA buttons, learning outcomes, rating card, and a lesson preview mockup. It works well for online courses, coaching programs, learning platforms, membership lessons, workshops, and digital education products.

  • Perfect for online courses, coaching programs, workshops, and learning platforms
  • Includes course headline, CTA buttons, course highlights, and lesson preview
  • Uses a clean education-focused visual style
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Online Course Hero

Learn practical skills with a clear step-by-step course

Use this online course hero section to promote a course, explain the learning outcome, and guide visitors toward enrolling or previewing lessons.

Enroll Now Preview Lessons
32 Video lessons
4.9 Student rating
6h Course content
Top rated Show course credibility and student trust in the hero area.
★★★★★

Complete Course Preview

A visual lesson preview helps students understand the course format before enrolling.

Module 01: Foundations 12 min
Module 02: Practical Workflow 18 min
Module 03: Final Project 24 min

HTML

<section class="hero-course-section">

  <div class="hero-course-content">

    <div class="hero-course-kicker">Online Course Hero</div>

    <h3 class="hero-course-title">Learn practical skills with a <span>clear step-by-step course</span></h3>

    <p class="hero-course-text">Use this online course hero section to promote a course, explain the learning outcome, and guide visitors toward enrolling or previewing lessons.</p>

    <div class="hero-course-actions">
      <a class="hero-course-button-primary" href="#">Enroll Now</a>
      <a class="hero-course-button-secondary" href="#">Preview Lessons</a>
    </div>

    <div class="hero-course-outcomes">

      <div class="hero-course-outcome">
        <strong>32</strong>
        <span>Video lessons</span>
      </div>

      <div class="hero-course-outcome">
        <strong>4.9</strong>
        <span>Student rating</span>
      </div>

      <div class="hero-course-outcome">
        <strong>6h</strong>
        <span>Course content</span>
      </div>

    </div>

  </div>

  <div class="hero-course-visual">

    <div class="hero-course-floating">
      <strong>Top rated</strong>
      <span>Show course credibility and student trust in the hero area.</span>
      <div class="hero-course-stars">★★★★★</div>
    </div>

    <div class="hero-course-card">

      <div class="hero-course-video"></div>

      <div class="hero-course-card-body">
        <h3>Complete Course Preview</h3>
        <p>A visual lesson preview helps students understand the course format before enrolling.</p>

        <div class="hero-course-modules">

          <div class="hero-course-module">
            <span>Module 01: Foundations</span>
            <strong>12 min</strong>
          </div>

          <div class="hero-course-module">
            <span>Module 02: Practical Workflow</span>
            <strong>18 min</strong>
          </div>

          <div class="hero-course-module">
            <span>Module 03: Final Project</span>
            <strong>24 min</strong>
          </div>

        </div>

      </div>

    </div>

  </div>

</section>

CSS

.hero-course-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,.94fr);
gap:42px;
align-items:center;
}

.hero-course-content{
min-width:0;
}

.hero-course-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#f3e8ff;
color:#7e22ce;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-course-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,74px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-course-title span{
background:linear-gradient(90deg,#7c3aed,#0ea5e9,#16a34a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-course-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-course-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-course-button-primary,
.hero-course-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-course-button-primary{
background:linear-gradient(135deg,#7c3aed,#0ea5e9);
color:#ffffff;
box-shadow:0 18px 42px rgba(124,58,237,.22);
}

.hero-course-button-primary:hover,
.hero-course-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(14,165,233,.25);
outline:none;
}

.hero-course-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-course-button-secondary:hover,
.hero-course-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-course-outcomes{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-course-outcome{
padding:16px;
border-radius:20px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.hero-course-outcome strong{
display:block;
margin-bottom:4px;
font-size:20px;
line-height:1.1;
font-weight:950;
color:#0f172a;
}

.hero-course-outcome span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-course-visual{
position:relative;
min-height:540px;
}

.hero-course-visual::before{
content:"";
position:absolute;
width:350px;
height:350px;
right:-60px;
top:44px;
border-radius:999px;
background:linear-gradient(135deg,rgba(124,58,237,.20),rgba(14,165,233,.18));
filter:blur(6px);
}

.hero-course-card{
position:relative;
z-index:2;
padding:22px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
}

.hero-course-video{
position:relative;
min-height:280px;
overflow:hidden;
border-radius:28px;
margin-bottom:18px;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.50),transparent 30%),
linear-gradient(135deg,#4c1d95,#7c3aed 52%,#0ea5e9);
}

.hero-course-video::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:86px;
height:86px;
border-radius:999px;
background:rgba(255,255,255,.22);
border:1px solid rgba(255,255,255,.28);
box-shadow:0 22px 54px rgba(15,23,42,.20);
transform:translate(-50%,-50%);
}

.hero-course-video::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:0;
height:0;
border-top:16px solid transparent;
border-bottom:16px solid transparent;
border-left:24px solid #ffffff;
transform:translate(-38%,-50%);
}

.hero-course-card-body h3{
margin:0 0 7px;
font-size:24px;
line-height:1.16;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-course-card-body p{
margin:0 0 16px;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.hero-course-modules{
display:grid;
gap:10px;
}

.hero-course-module{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.hero-course-module span{
font-size:13px;
line-height:1.4;
font-weight:850;
color:#475569;
}

.hero-course-module strong{
font-size:13px;
font-weight:950;
color:#7c3aed;
}

.hero-course-floating{
position:absolute;
left:-8px;
top:70px;
z-index:4;
width:220px;
padding:16px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-course-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-course-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

.hero-course-stars{
display:flex;
gap:2px;
margin-top:12px;
color:#fbbf24;
font-size:14px;
letter-spacing:1px;
}

@media (max-width: 920px){
.hero-course-section{
grid-template-columns:1fr;
}

.hero-course-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-course-title{
font-size:40px;
}

.hero-course-text{
font-size:16px;
}

.hero-course-actions{
align-items:stretch;
flex-direction:column;
}

.hero-course-button-primary,
.hero-course-button-secondary{
width:100%;
}

.hero-course-outcomes{
grid-template-columns:1fr;
}

.hero-course-card{
padding:16px;
border-radius:26px;
}

.hero-course-video{
min-height:240px;
border-radius:22px;
}

.hero-course-floating{
position:relative;
left:auto;
top:auto;
width:auto;
margin-bottom:16px;
}
}

This online course hero section is useful when the page needs to explain the learning outcome and create trust before enrollment. The lesson preview, rating badge, course stats, and CTA buttons help visitors understand the course structure quickly.

Use this pattern for online courses, coaching programs, workshops, learning platforms, membership lessons, paid tutorials, education websites, and digital product pages.

17. Blog Homepage Hero Section

A blog homepage hero section should introduce the main topic of the blog, highlight featured content, and help visitors start reading quickly. It can include a strong headline, short description, category links, featured article card, newsletter CTA, and recent post previews.

This example uses a modern editorial blog layout with a large content headline, category pills, featured article preview, author-style meta, and supporting post cards. It works well for personal blogs, business blogs, SEO blogs, magazine websites, tutorial sites, and content-heavy WordPress websites.

  • Perfect for blog homepages, magazine sites, tutorial websites, and content hubs
  • Includes headline, category pills, featured post card, and article previews
  • Uses a clean editorial layout with strong visual hierarchy
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Blog Homepage Hero

Ideas, guides and tutorials for better website design

Use this blog homepage hero section to introduce a content hub, highlight featured articles, and guide visitors into your most important categories.

Read Latest Posts Browse Categories
CSS UI Design WordPress Frontend
Popular topics Guide readers toward the categories that matter most.
Featured Guide 8 min read

How to Build Modern Website Sections

A featured article card helps visitors start reading immediately from the hero area.

Alex Morgan Web design editor

HTML

<section class="hero-blog-section">

  <div class="hero-blog-content">

    <div class="hero-blog-kicker">Blog Homepage Hero</div>

    <h3 class="hero-blog-title">Ideas, guides and tutorials for <span>better website design</span></h3>

    <p class="hero-blog-text">Use this blog homepage hero section to introduce a content hub, highlight featured articles, and guide visitors into your most important categories.</p>

    <div class="hero-blog-actions">
      <a class="hero-blog-button-primary" href="#">Read Latest Posts</a>
      <a class="hero-blog-button-secondary" href="#">Browse Categories</a>
    </div>

    <div class="hero-blog-categories">
      <span class="hero-blog-category">CSS</span>
      <span class="hero-blog-category">UI Design</span>
      <span class="hero-blog-category">WordPress</span>
      <span class="hero-blog-category">Frontend</span>
    </div>

  </div>

  <div class="hero-blog-visual">

    <div class="hero-blog-side-card">
      <strong>Popular topics</strong>
      <span>Guide readers toward the categories that matter most.</span>
      <div class="hero-blog-mini-list">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>

    <article class="hero-blog-featured-card">

      <div class="hero-blog-featured-image"></div>

      <div class="hero-blog-featured-meta">
        <span class="hero-blog-featured-tag">Featured Guide</span>
        <span class="hero-blog-featured-date">8 min read</span>
      </div>

      <h3>How to Build Modern Website Sections</h3>

      <p>A featured article card helps visitors start reading immediately from the hero area.</p>

      <div class="hero-blog-author">
        <div class="hero-blog-avatar"></div>
        <div>
          <strong>Alex Morgan</strong>
          <span>Web design editor</span>
        </div>
      </div>

    </article>

  </div>

</section>

CSS

.hero-blog-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,.96fr);
gap:42px;
align-items:center;
}

.hero-blog-content{
min-width:0;
}

.hero-blog-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-blog-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,74px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-blog-title span{
background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-blog-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-blog-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-blog-button-primary,
.hero-blog-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-blog-button-primary{
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.22);
}

.hero-blog-button-primary:hover,
.hero-blog-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(124,58,237,.25);
outline:none;
}

.hero-blog-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.hero-blog-button-secondary:hover,
.hero-blog-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-blog-categories{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.hero-blog-category{
display:inline-flex;
align-items:center;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 30px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.hero-blog-visual{
position:relative;
min-height:540px;
}

.hero-blog-visual::before{
content:"";
position:absolute;
width:350px;
height:350px;
right:-60px;
top:44px;
border-radius:999px;
background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(168,85,247,.18));
filter:blur(6px);
}

.hero-blog-featured-card{
position:relative;
z-index:2;
padding:22px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
}

.hero-blog-featured-image{
position:relative;
min-height:280px;
overflow:hidden;
border-radius:28px;
margin-bottom:18px;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.52),transparent 30%),
linear-gradient(135deg,#1e3a8a,#7c3aed 54%,#ec4899);
}

.hero-blog-featured-image::before{
content:"";
position:absolute;
left:34px;
right:34px;
bottom:34px;
height:78px;
border-radius:24px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(14px);
}

.hero-blog-featured-image::after{
content:"";
position:absolute;
right:42px;
top:42px;
width:156px;
height:156px;
border-radius:42px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.20);
transform:rotate(8deg);
}

.hero-blog-featured-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:12px;
}

.hero-blog-featured-tag{
display:inline-flex;
align-items:center;
min-height:30px;
padding:0 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:12px;
font-weight:900;
}

.hero-blog-featured-date{
font-size:13px;
font-weight:800;
color:#64748b;
}

.hero-blog-featured-card h3{
margin:0 0 10px;
font-size:28px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-blog-featured-card p{
margin:0 0 16px;
font-size:14px;
line-height:1.7;
color:#64748b;
}

.hero-blog-author{
display:flex;
align-items:center;
gap:12px;
padding-top:16px;
border-top:1px solid #e2e8f0;
}

.hero-blog-avatar{
width:44px;
height:44px;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#ec4899);
}

.hero-blog-author strong{
display:block;
font-size:14px;
line-height:1.25;
font-weight:950;
color:#0f172a;
}

.hero-blog-author span{
display:block;
margin-top:2px;
font-size:13px;
line-height:1.35;
font-weight:750;
color:#64748b;
}

.hero-blog-side-card{
position:absolute;
z-index:4;
right:-8px;
bottom:52px;
width:250px;
padding:16px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-blog-side-card strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-blog-side-card span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

.hero-blog-mini-list{
display:grid;
gap:10px;
margin-top:14px;
}

.hero-blog-mini-list i{
display:block;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.16);
}

.hero-blog-mini-list i:nth-child(1){
width:92%;
}

.hero-blog-mini-list i:nth-child(2){
width:74%;
}

.hero-blog-mini-list i:nth-child(3){
width:58%;
}

@media (max-width: 920px){
.hero-blog-section{
grid-template-columns:1fr;
}

.hero-blog-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-blog-title{
font-size:40px;
}

.hero-blog-text{
font-size:16px;
}

.hero-blog-actions{
align-items:stretch;
flex-direction:column;
}

.hero-blog-button-primary,
.hero-blog-button-secondary{
width:100%;
}

.hero-blog-featured-card{
padding:16px;
border-radius:26px;
}

.hero-blog-featured-image{
min-height:240px;
border-radius:22px;
}

.hero-blog-featured-card h3{
font-size:24px;
}

.hero-blog-side-card{
position:relative;
right:auto;
bottom:auto;
width:auto;
margin-bottom:16px;
}
}

This blog homepage hero section is useful when the website needs to present content as the main product. The featured article card, category pills, and popular topic panel make it easier for visitors to understand what they can read next.

Use this pattern for personal blogs, company blogs, tutorial websites, SEO blogs, WordPress blogs, magazines, newsletters, content hubs, and resource libraries.

18. Newsletter Signup Hero Section

A newsletter signup hero section is designed to turn visitors into subscribers. It should clearly explain what readers will receive, why the newsletter is useful, and make the email signup form easy to complete.

This example uses a clean newsletter-focused hero layout with a strong headline, subscriber benefits, email signup form, trust stats, and a preview of newsletter cards. It works well for creators, blogs, media brands, SaaS newsletters, course creators, consultants, and content marketing websites.

  • Perfect for newsletter landing pages, creator websites, blogs, and content brands
  • Includes headline, email signup form, benefits, subscriber count, and preview cards
  • Uses a clean conversion-focused layout
  • Responsive design stacks cleanly on mobile
  • Uses HTML and CSS only
Newsletter Signup Hero

Get useful web design ideas in your inbox every week

Use this newsletter signup hero section to explain the value of subscribing and collect email signups directly from the first screen.

Weekly Practical tips
12K+ Subscribers
No Spam ever
Weekly issue
Join readers

Show trust with subscriber numbers, topics, or reader profiles.

Content preview Preview the type of value users will get after subscribing.

HTML

<section class="hero-newsletter-section">

  <div class="hero-newsletter-content">

    <div class="hero-newsletter-kicker">Newsletter Signup Hero</div>

    <h3 class="hero-newsletter-title">Get useful web design ideas in your <span>inbox every week</span></h3>

    <p class="hero-newsletter-text">Use this newsletter signup hero section to explain the value of subscribing and collect email signups directly from the first screen.</p>

    <form class="hero-newsletter-form" action="#" method="post">
      <input class="hero-newsletter-input" type="email" name="email" placeholder="Enter your email address">
      <button class="hero-newsletter-button" type="submit">Subscribe Free</button>
    </form>

    <div class="hero-newsletter-benefits">

      <div class="hero-newsletter-benefit">
        <strong>Weekly</strong>
        <span>Practical tips</span>
      </div>

      <div class="hero-newsletter-benefit">
        <strong>12K+</strong>
        <span>Subscribers</span>
      </div>

      <div class="hero-newsletter-benefit">
        <strong>No</strong>
        <span>Spam ever</span>
      </div>

    </div>

  </div>

  <div class="hero-newsletter-visual">

    <div class="hero-newsletter-stack">

      <div class="hero-newsletter-card hero-newsletter-card-main">

        <div class="hero-newsletter-card-top">
          <div class="hero-newsletter-logo"></div>
          <span class="hero-newsletter-send">Weekly issue</span>
        </div>

        <div class="hero-newsletter-preview-title"></div>
        <div class="hero-newsletter-preview-title"></div>
        <div class="hero-newsletter-preview-line"></div>
        <div class="hero-newsletter-preview-line"></div>

        <div class="hero-newsletter-preview-image"></div>

        <div class="hero-newsletter-topic-grid">
          <div class="hero-newsletter-topic"></div>
          <div class="hero-newsletter-topic"></div>
        </div>

      </div>

      <div class="hero-newsletter-card hero-newsletter-card-secondary">
        <strong>Join readers</strong>
        <p>Show trust with subscriber numbers, topics, or reader profiles.</p>

        <div class="hero-newsletter-mini-readers">
          <span class="hero-newsletter-mini-reader"></span>
          <span class="hero-newsletter-mini-reader"></span>
          <span class="hero-newsletter-mini-reader"></span>
          <span class="hero-newsletter-mini-reader"></span>
        </div>
      </div>

      <div class="hero-newsletter-floating">
        <strong>Content preview</strong>
        <span>Preview the type of value users will get after subscribing.</span>
      </div>

    </div>

  </div>

</section>

CSS

.hero-newsletter-section{
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,.92fr);
gap:42px;
align-items:center;
}

.hero-newsletter-content{
min-width:0;
}

.hero-newsletter-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#fce7f3;
color:#be185d;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-newsletter-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,74px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#0f172a;
}

.hero-newsletter-title span{
background:linear-gradient(90deg,#db2777,#2563eb,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-newsletter-text{
margin:0 0 26px;
max-width:620px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-newsletter-form{
display:flex;
align-items:center;
gap:10px;
max-width:620px;
padding:10px;
margin-bottom:24px;
border-radius:24px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 22px 58px rgba(15,23,42,.12);
}

.hero-newsletter-input{
flex:1;
min-width:0;
height:52px;
padding:0 16px;
border:0;
border-radius:16px;
background:#f8fafc;
color:#0f172a;
font-size:15px;
font-weight:750;
outline:none;
box-sizing:border-box;
}

.hero-newsletter-input::placeholder{
color:#94a3b8;
}

.hero-newsletter-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#db2777,#2563eb);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 16px 36px rgba(219,39,119,.22);
transition:transform .22s ease,box-shadow .22s ease;
white-space:nowrap;
}

.hero-newsletter-button:hover,
.hero-newsletter-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(37,99,235,.25);
outline:none;
}

.hero-newsletter-benefits{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
max-width:620px;
}

.hero-newsletter-benefit{
padding:15px;
border-radius:20px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.hero-newsletter-benefit strong{
display:block;
margin-bottom:4px;
font-size:18px;
line-height:1.1;
font-weight:950;
color:#0f172a;
}

.hero-newsletter-benefit span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-newsletter-visual{
position:relative;
min-height:540px;
}

.hero-newsletter-visual::before{
content:"";
position:absolute;
width:350px;
height:350px;
right:-60px;
top:44px;
border-radius:999px;
background:linear-gradient(135deg,rgba(236,72,153,.20),rgba(37,99,235,.18));
filter:blur(6px);
}

.hero-newsletter-stack{
position:relative;
z-index:2;
height:100%;
}

.hero-newsletter-card{
position:absolute;
overflow:hidden;
border-radius:30px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.16);
}

.hero-newsletter-card-main{
right:0;
top:0;
width:min(420px,88%);
padding:22px;
}

.hero-newsletter-card-secondary{
left:0;
bottom:60px;
width:260px;
padding:18px;
z-index:3;
}

.hero-newsletter-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding-bottom:16px;
margin-bottom:16px;
border-bottom:1px solid #e2e8f0;
}

.hero-newsletter-logo{
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#db2777,#2563eb);
}

.hero-newsletter-send{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
padding:0 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:12px;
font-weight:900;
}

.hero-newsletter-preview-title{
height:20px;
width:82%;
border-radius:999px;
background:#0f172a;
margin-bottom:12px;
}

.hero-newsletter-preview-title:nth-of-type(2){
width:62%;
}

.hero-newsletter-preview-line{
height:10px;
width:94%;
border-radius:999px;
background:#cbd5e1;
margin-bottom:9px;
}

.hero-newsletter-preview-line:nth-of-type(4){
width:76%;
}

.hero-newsletter-preview-image{
height:180px;
margin:18px 0;
border-radius:24px;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.46),transparent 30%),
linear-gradient(135deg,#db2777,#7c3aed 56%,#2563eb);
}

.hero-newsletter-topic-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.hero-newsletter-topic{
height:44px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.hero-newsletter-card-secondary strong{
display:block;
margin-bottom:7px;
font-size:20px;
line-height:1.2;
font-weight:950;
letter-spacing:-.035em;
color:#0f172a;
}

.hero-newsletter-card-secondary p{
margin:0 0 14px;
font-size:13px;
line-height:1.6;
color:#64748b;
}

.hero-newsletter-mini-readers{
display:flex;
align-items:center;
}

.hero-newsletter-mini-reader{
width:34px;
height:34px;
border-radius:999px;
background:linear-gradient(135deg,#db2777,#2563eb);
border:2px solid #ffffff;
box-shadow:0 8px 20px rgba(15,23,42,.12);
}

.hero-newsletter-mini-reader + .hero-newsletter-mini-reader{
margin-left:-10px;
}

.hero-newsletter-floating{
position:absolute;
right:20px;
bottom:30px;
z-index:4;
width:230px;
padding:16px;
border-radius:22px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 56px rgba(15,23,42,.24);
}

.hero-newsletter-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-newsletter-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

@media (max-width: 920px){
.hero-newsletter-section{
grid-template-columns:1fr;
}

.hero-newsletter-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-newsletter-title{
font-size:40px;
}

.hero-newsletter-text{
font-size:16px;
}

.hero-newsletter-form{
align-items:stretch;
flex-direction:column;
}

.hero-newsletter-input,
.hero-newsletter-button{
width:100%;
}

.hero-newsletter-benefits{
grid-template-columns:1fr;
}

.hero-newsletter-visual{
min-height:auto;
}

.hero-newsletter-stack{
display:grid;
gap:16px;
height:auto;
}

.hero-newsletter-card,
.hero-newsletter-card-main,
.hero-newsletter-card-secondary,
.hero-newsletter-floating{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
}

.hero-newsletter-card-main{
box-sizing:border-box;
}

.hero-newsletter-topic-grid{
grid-template-columns:1fr;
}
}

This newsletter signup hero section is useful when the main conversion goal is email subscription. The form is visible immediately, while the benefit cards and newsletter preview explain why visitors should join.

Use this pattern for newsletter landing pages, creator websites, blogs, content marketing websites, SaaS newsletters, course creators, media brands, and personal websites.

19. Lead Generation Hero with Form

A lead generation hero section is designed to collect inquiries, quote requests, demo bookings, or consultation requests directly from the first screen. Instead of sending visitors to another page, the form is placed inside the hero layout so users can take action immediately.

This example uses a conversion-focused layout with a compact content column, benefit checklist, trust strip, and a large form card on the right. The structure is different from a standard visual hero because the form is the main conversion element.

  • Perfect for quote requests, consultations, demos, and lead capture pages
  • Includes headline, benefit checklist, trust strip, and contact form
  • Uses a form-first hero layout instead of a mockup or image card
  • Responsive layout stacks the form below the text on mobile
  • Uses HTML and CSS only
Lead Generation Hero

Get more qualified leads with a clear request form

Use this lead generation hero section when the main goal is to collect quote requests, consultation bookings, project inquiries, or demo requests directly from the first screen.

  • ✓Capture visitor details before they leave the page
  • ✓Explain your value and next step in one focused section
  • ✓Use the form for quotes, calls, demos, or service requests
24h Average reply
4.9 Client rating
300+ Requests handled

Request a free consultation

Tell us what you need and we will reply with the next steps.

No spam. Your details are only used to reply to your request.

HTML

<section class="hero-lead-section">

  <div class="hero-lead-content">

    <div class="hero-lead-kicker">Lead Generation Hero</div>

    <h3 class="hero-lead-title">Get more qualified leads with a <span>clear request form</span></h3>

    <p class="hero-lead-text">Use this lead generation hero section when the main goal is to collect quote requests, consultation bookings, project inquiries, or demo requests directly from the first screen.</p>

    <ul class="hero-lead-list">
      <li><span class="hero-lead-check">✓</span>Capture visitor details before they leave the page</li>
      <li><span class="hero-lead-check">✓</span>Explain your value and next step in one focused section</li>
      <li><span class="hero-lead-check">✓</span>Use the form for quotes, calls, demos, or service requests</li>
    </ul>

    <div class="hero-lead-trust">

      <div class="hero-lead-trust-item">
        <strong>24h</strong>
        <span>Average reply</span>
      </div>

      <div class="hero-lead-trust-item">
        <strong>4.9</strong>
        <span>Client rating</span>
      </div>

      <div class="hero-lead-trust-item">
        <strong>300+</strong>
        <span>Requests handled</span>
      </div>

    </div>

  </div>

  <div class="hero-lead-form-wrap">

    <div class="hero-lead-form-card">

      <div class="hero-lead-form-head">
        <h3>Request a free consultation</h3>
        <p>Tell us what you need and we will reply with the next steps.</p>
      </div>

      <form class="hero-lead-form" action="#" method="post">

        <div class="hero-lead-form-row">

          <div class="hero-lead-field">
            <label class="hero-lead-label" for="lead-name">Name</label>
            <input class="hero-lead-input" id="lead-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="hero-lead-field">
            <label class="hero-lead-label" for="lead-email">Email</label>
            <input class="hero-lead-input" id="lead-email" type="email" name="email" placeholder="you@example.com">
          </div>

        </div>

        <div class="hero-lead-field">
          <label class="hero-lead-label" for="lead-service">Service</label>
          <select class="hero-lead-select" id="lead-service" name="service">
            <option>Website design</option>
            <option>Landing page</option>
            <option>SEO content</option>
            <option>Custom development</option>
          </select>
        </div>

        <div class="hero-lead-field">
          <label class="hero-lead-label" for="lead-message">Project details</label>
          <textarea class="hero-lead-textarea" id="lead-message" name="message" placeholder="Briefly describe your project"></textarea>
        </div>

        <button class="hero-lead-submit" type="submit">Send Request</button>

        <p class="hero-lead-privacy">No spam. Your details are only used to reply to your request.</p>

      </form>

    </div>

  </div>

</section>

CSS

.hero-lead-section{
position:relative;
z-index:2;
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(360px,.82fr);
gap:34px;
align-items:center;
}

.hero-lead-content{
min-width:0;
}

.hero-lead-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.24);
color:#bbf7d0;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-lead-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,72px);
line-height:.98;
font-weight:950;
letter-spacing:-.075em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.hero-lead-title span{
background:linear-gradient(90deg,#86efac,#93c5fd,#d8b4fe) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-lead-text{
margin:0 0 26px;
max-width:640px;
font-size:17px;
line-height:1.8;
color:#cbd5e1;
}

.hero-lead-list{
display:grid;
gap:12px;
margin:0 0 28px;
padding:0;
list-style:none;
}

.hero-lead-list li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:15px;
line-height:1.6;
font-weight:800;
color:#e2e8f0;
}

.hero-lead-check{
flex:0 0 auto;
display:grid;
place-items:center;
width:24px;
height:24px;
margin-top:1px;
border-radius:999px;
background:rgba(34,197,94,.16);
border:1px solid rgba(34,197,94,.26);
color:#86efac;
font-size:13px;
font-weight:950;
}

.hero-lead-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
max-width:620px;
}

.hero-lead-trust-item{
padding:15px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 42px rgba(0,0,0,.16);
}

.hero-lead-trust-item strong{
display:block;
margin-bottom:4px;
font-size:22px;
line-height:1;
font-weight:950;
color:#ffffff;
}

.hero-lead-trust-item span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#94a3b8;
}

.hero-lead-form-wrap{
position:relative;
}

.hero-lead-form-wrap::before{
content:"";
position:absolute;
inset:24px -18px -18px 24px;
border-radius:34px;
background:linear-gradient(135deg,rgba(34,197,94,.34),rgba(37,99,235,.26));
filter:blur(2px);
}

.hero-lead-form-card{
position:relative;
z-index:2;
padding:24px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.10);
box-shadow:0 34px 100px rgba(0,0,0,.34);
}

.hero-lead-form-head{
margin-bottom:20px;
padding-bottom:18px;
border-bottom:1px solid #e2e8f0;
}

.hero-lead-form-head h3{
margin:0 0 8px;
font-size:28px;
line-height:1.14;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-lead-form-head p{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.hero-lead-form{
display:grid;
gap:14px;
}

.hero-lead-field{
display:grid;
gap:7px;
}

.hero-lead-label{
font-size:12px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
color:#64748b;
}

.hero-lead-input,
.hero-lead-select,
.hero-lead-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:16px;
background:#f8fafc;
color:#0f172a;
font-size:14px;
font-weight:750;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.hero-lead-input,
.hero-lead-select{
min-height:50px;
padding:0 14px;
}

.hero-lead-textarea{
min-height:112px;
padding:14px;
resize:vertical;
}

.hero-lead-input:focus,
.hero-lead-select:focus,
.hero-lead-textarea:focus{
border-color:#22c55e;
background:#ffffff;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.hero-lead-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.hero-lead-form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.hero-lead-submit{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:54px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#16a34a,#2563eb);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(34,197,94,.22);
transition:transform .22s ease,box-shadow .22s ease;
}

.hero-lead-submit:hover,
.hero-lead-submit:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(37,99,235,.25);
outline:none;
}

.hero-lead-privacy{
margin:0;
font-size:12px;
line-height:1.55;
font-weight:700;
color:#64748b;
}

@media (max-width: 920px){
.hero-lead-section{
grid-template-columns:1fr;
}

.hero-lead-form-wrap{
max-width:620px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-lead-title{
font-size:40px;
}

.hero-lead-text{
font-size:16px;
}

.hero-lead-trust{
grid-template-columns:1fr;
}

.hero-lead-form-card{
padding:18px;
border-radius:26px;
}

.hero-lead-form-row{
grid-template-columns:1fr;
}
}

This lead generation hero section is useful when the form is more important than a large decorative image. The layout gives visitors enough context to trust the offer, then places the request form directly beside the message for faster conversion.

Use this pattern for quote request pages, consultation pages, SaaS demo pages, agency landing pages, service websites, contractor websites, and B2B lead generation campaigns.

20. Video Background Hero Section

A video background hero section can create a strong first impression when the video supports the message and loads quickly. This type of hero section works best when the text remains readable, the video is subtle, and users can pause the motion if needed.

This example uses a cinematic full-width hero layout with a simulated video background, dark overlay, centered headline, CTA buttons, and a small play/pause control. The structure is intentionally different from the card-based examples because it focuses on a full-screen background experience.

  • Perfect for landing pages, brands, hotels, products, portfolios, and campaign pages
  • Includes full background visual, overlay, centered content, CTA buttons, and video control
  • Uses a cinematic layout with strong text contrast
  • Responsive design keeps the hero readable on mobile
  • Includes a small JavaScript snippet for the play/pause control
Video Background Hero

Create a cinematic first impression with a motion hero section

Use this video-style hero section when a visual background can support the message, build atmosphere, and make a landing page feel more immersive.

Explore the Story View Case Study
Optimized background Strong overlay contrast Pause control included

HTML

<section class="hero-video-section" id="hero-video-demo-section">

  <div class="hero-video-bg"></div>
  <div class="hero-video-noise"></div>

  <div class="hero-video-content">

    <div class="hero-video-kicker">Video Background Hero</div>

    <h3 class="hero-video-title">Create a cinematic first impression with a <span>motion hero section</span></h3>

    <p class="hero-video-text">Use this video-style hero section when a visual background can support the message, build atmosphere, and make a landing page feel more immersive.</p>

    <div class="hero-video-actions">
      <a class="hero-video-button-primary" href="#">Explore the Story</a>
      <a class="hero-video-button-secondary" href="#">View Case Study</a>
    </div>

    <div class="hero-video-meta">
      <span class="hero-video-meta-item"><span class="hero-video-meta-dot"></span> Optimized background</span>
      <span class="hero-video-meta-item"><span class="hero-video-meta-dot"></span> Strong overlay contrast</span>
      <span class="hero-video-meta-item"><span class="hero-video-meta-dot"></span> Pause control included</span>
    </div>

  </div>

  <button class="hero-video-control" type="button" aria-pressed="false" aria-label="Pause background motion">
    <span class="hero-video-control-icon"></span>
    <span class="hero-video-control-text">Pause motion</span>
  </button>

</section>

CSS

.hero-video-section{
position:relative;
width:100%;
min-height:720px;
display:grid;
place-items:center;
overflow:hidden;
isolation:isolate;
}

.hero-video-bg{
position:absolute;
inset:0;
z-index:-3;
overflow:hidden;
background:
radial-gradient(circle at 22% 24%,rgba(59,130,246,.58),transparent 26%),
radial-gradient(circle at 76% 34%,rgba(236,72,153,.44),transparent 30%),
radial-gradient(circle at 50% 88%,rgba(34,197,94,.30),transparent 34%),
linear-gradient(135deg,#020617,#111827 46%,#312e81);
}

.hero-video-bg::before{
content:"";
position:absolute;
inset:-20%;
background:
linear-gradient(115deg,transparent 0 32%,rgba(255,255,255,.14) 33%,transparent 42%),
linear-gradient(35deg,transparent 0 52%,rgba(255,255,255,.08) 53%,transparent 62%);
animation:heroVideoMove 12s linear infinite;
}

.hero-video-bg::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(2,6,23,.42),rgba(2,6,23,.72)),
radial-gradient(circle at 50% 50%,transparent 0 26%,rgba(2,6,23,.36) 70%);
}

.hero-video-section.is-paused .hero-video-bg::before{
animation-play-state:paused;
}

@keyframes heroVideoMove{
0%{
transform:translate3d(-3%,0,0) rotate(0deg) scale(1.02);
}
50%{
transform:translate3d(3%,2%,0) rotate(4deg) scale(1.08);
}
100%{
transform:translate3d(-3%,0,0) rotate(0deg) scale(1.02);
}
}

.hero-video-noise{
position:absolute;
inset:0;
z-index:-1;
opacity:.28;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:48px 48px;
mask-image:linear-gradient(180deg,transparent,black 18%,black 82%,transparent);
}

.hero-video-content{
width:min(100%,900px);
padding:42px 24px;
text-align:center;
}

.hero-video-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(14px);
}

.hero-video-title{
margin:0 auto 20px;
max-width:860px;
font-size:clamp(44px,7vw,86px);
line-height:.94;
font-weight:950;
letter-spacing:-.085em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
text-shadow:0 20px 70px rgba(0,0,0,.42);
}

.hero-video-title span{
background:linear-gradient(90deg,#93c5fd,#ffffff,#f9a8d4) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-video-text{
margin:0 auto 28px;
max-width:700px;
font-size:18px;
line-height:1.8;
color:rgba(255,255,255,.86);
text-shadow:0 12px 36px rgba(0,0,0,.36);
}

.hero-video-actions{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:34px;
}

.hero-video-button-primary,
.hero-video-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:0 22px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-video-button-primary{
background:#ffffff;
color:#0f172a;
box-shadow:0 18px 48px rgba(0,0,0,.28);
}

.hero-video-button-primary:hover,
.hero-video-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 58px rgba(0,0,0,.34);
outline:none;
}

.hero-video-button-secondary{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
backdrop-filter:blur(14px);
}

.hero-video-button-secondary:hover,
.hero-video-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.15);
outline:none;
}

.hero-video-meta{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px;
}

.hero-video-meta-item{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:rgba(255,255,255,.82);
font-size:13px;
font-weight:850;
backdrop-filter:blur(14px);
}

.hero-video-meta-dot{
width:9px;
height:9px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.16);
}

.hero-video-control{
position:absolute;
right:24px;
bottom:24px;
z-index:5;
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px;
padding:0 14px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
background:rgba(2,6,23,.44);
color:#ffffff;
font-size:13px;
font-weight:900;
cursor:pointer;
backdrop-filter:blur(16px);
transition:transform .22s ease,background .22s ease,border-color .22s ease;
}

.hero-video-control:hover,
.hero-video-control:focus{
transform:translateY(-2px);
background:rgba(2,6,23,.62);
border-color:rgba(255,255,255,.28);
outline:none;
}

.hero-video-control-icon{
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:999px;
background:rgba(255,255,255,.14);
}

.hero-video-section.is-paused .hero-video-control-icon::before{
content:"▶";
font-size:11px;
line-height:1;
}

.hero-video-control-icon::before{
content:"Ⅱ";
font-size:12px;
line-height:1;
font-weight:950;
}

@media (max-width: 760px){
.hero-video-section{
min-height:660px;
}

.hero-video-content{
padding:34px 16px;
}

.hero-video-title{
font-size:42px;
}

.hero-video-text{
font-size:16px;
}

.hero-video-actions{
align-items:stretch;
flex-direction:column;
}

.hero-video-button-primary,
.hero-video-button-secondary{
width:100%;
}

.hero-video-control{
left:18px;
right:auto;
bottom:18px;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function(){
  var heroVideoSection = document.getElementById("hero-video-demo-section");

  if(!heroVideoSection){
    return;
  }

  var heroVideoButton = heroVideoSection.querySelector(".hero-video-control");
  var heroVideoText = heroVideoSection.querySelector(".hero-video-control-text");

  if(!heroVideoButton || !heroVideoText){
    return;
  }

  heroVideoButton.addEventListener("click", function(){
    var isPaused = heroVideoSection.classList.toggle("is-paused");

    heroVideoButton.setAttribute("aria-pressed", isPaused ? "true" : "false");
    heroVideoButton.setAttribute("aria-label", isPaused ? "Play background motion" : "Pause background motion");
    heroVideoText.textContent = isPaused ? "Play motion" : "Pause motion";
  });
});

This video background hero section is useful when the website needs atmosphere and visual energy. The centered content, strong overlay, and pause control keep the design impressive while still remaining readable and more user-friendly.

Use this pattern for landing pages, brand websites, hotels, events, campaign pages, portfolios, product storytelling pages, and websites where motion supports the main message.

21. Split Screen Hero Section

A split screen hero section divides the first screen into two strong visual areas. This layout works well when you want one side to focus on the main message and the other side to show a product, brand story, portfolio preview, service category, or campaign visual.

This example uses a bold split-screen structure with a dark content panel on the left and a bright visual panel on the right. It feels different from a standard card-based hero because the entire section is built around two equal visual halves.

  • Perfect for landing pages, product pages, portfolios, agencies, and campaign pages
  • Uses two strong side-by-side panels
  • Includes headline, CTA buttons, feature points, and a visual composition
  • Responsive layout stacks the panels on mobile
  • Uses HTML and CSS only
Split Screen Hero

One screen. Two strong sides. Clear visual balance.

Use this split screen hero section when your page needs a strong message on one side and a bold visual area on the other side.

Start Building View Layout
  • ✓Great for product stories and landing pages
  • ✓Creates a strong editorial first impression
  • ✓Stacks cleanly on smaller screens
Content side Use one panel for message and action.
Visual side Use the other panel for impact and context.

HTML

<section class="hero-split-section">

  <div class="hero-split-content-panel">

    <div class="hero-split-content">

      <div class="hero-split-kicker">Split Screen Hero</div>

      <h3 class="hero-split-title">One screen. Two strong sides. <span>Clear visual balance.</span></h3>

      <p class="hero-split-text">Use this split screen hero section when your page needs a strong message on one side and a bold visual area on the other side.</p>

      <div class="hero-split-actions">
        <a class="hero-split-button-primary" href="#">Start Building</a>
        <a class="hero-split-button-secondary" href="#">View Layout</a>
      </div>

      <ul class="hero-split-points">
        <li><span class="hero-split-point-icon">✓</span>Great for product stories and landing pages</li>
        <li><span class="hero-split-point-icon">✓</span>Creates a strong editorial first impression</li>
        <li><span class="hero-split-point-icon">✓</span>Stacks cleanly on smaller screens</li>
      </ul>

    </div>

  </div>

  <div class="hero-split-visual-panel">

    <div class="hero-split-visual">

      <div class="hero-split-float-card hero-split-float-one">
        <strong>Content side</strong>
        <span>Use one panel for message and action.</span>
      </div>

      <div class="hero-split-main-card">

        <div class="hero-split-screen">

          <div class="hero-split-screen-top">
            <div class="hero-split-screen-dots">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="hero-split-screen-line"></div>
          </div>

          <div class="hero-split-screen-hero"></div>

          <div class="hero-split-screen-grid">
            <div class="hero-split-mini-card"></div>
            <div class="hero-split-mini-card"></div>
          </div>

        </div>

      </div>

      <div class="hero-split-float-card hero-split-float-two">
        <strong>Visual side</strong>
        <span>Use the other panel for impact and context.</span>
      </div>

    </div>

  </div>

</section>

CSS

.hero-split-section{
min-height:720px;
display:grid;
grid-template-columns:1fr 1fr;
}

.hero-split-content-panel{
position:relative;
display:flex;
align-items:center;
padding:54px;
overflow:hidden;
background:
radial-gradient(circle at 18% 18%,rgba(37,99,235,.24),transparent 34%),
linear-gradient(135deg,#020617,#111827);
}

.hero-split-content-panel::before{
content:"";
position:absolute;
width:340px;
height:340px;
left:-150px;
bottom:-150px;
border-radius:999px;
background:rgba(124,58,237,.20);
filter:blur(10px);
}

.hero-split-content{
position:relative;
z-index:2;
max-width:560px;
}

.hero-split-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(37,99,235,.16);
border:1px solid rgba(147,197,253,.22);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-split-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.08em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.hero-split-title span{
background:linear-gradient(90deg,#93c5fd,#d8b4fe,#f9a8d4) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-split-text{
margin:0 0 28px;
font-size:17px;
line-height:1.8;
color:#cbd5e1;
}

.hero-split-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:30px;
}

.hero-split-button-primary,
.hero-split-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-split-button-primary{
background:#ffffff;
color:#0f172a;
box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.hero-split-button-primary:hover,
.hero-split-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(0,0,0,.30);
outline:none;
}

.hero-split-button-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#ffffff;
}

.hero-split-button-secondary:hover,
.hero-split-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.12);
outline:none;
}

.hero-split-points{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.hero-split-points li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
line-height:1.5;
font-weight:850;
color:#e2e8f0;
}

.hero-split-point-icon{
display:grid;
place-items:center;
width:26px;
height:26px;
border-radius:999px;
background:rgba(147,197,253,.14);
border:1px solid rgba(147,197,253,.22);
color:#93c5fd;
font-size:13px;
font-weight:950;
}

.hero-split-visual-panel{
position:relative;
display:grid;
place-items:center;
padding:44px;
overflow:hidden;
background:
radial-gradient(circle at 30% 24%,rgba(255,255,255,.36),transparent 30%),
linear-gradient(135deg,#60a5fa,#a855f7 52%,#ec4899);
}

.hero-split-visual-panel::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
background-size:44px 44px;
opacity:.34;
mask-image:linear-gradient(180deg,transparent,black 18%,black 82%,transparent);
}

.hero-split-visual{
position:relative;
z-index:2;
width:min(100%,430px);
min-height:540px;
}

.hero-split-main-card{
position:absolute;
left:50%;
top:50%;
width:330px;
padding:20px;
border-radius:34px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.24);
box-shadow:0 34px 100px rgba(15,23,42,.28);
backdrop-filter:blur(18px);
transform:translate(-50%,-50%) rotate(-4deg);
}

.hero-split-screen{
min-height:360px;
border-radius:26px;
padding:18px;
background:rgba(15,23,42,.86);
border:1px solid rgba(255,255,255,.12);
}

.hero-split-screen-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
}

.hero-split-screen-dots{
display:flex;
gap:7px;
}

.hero-split-screen-dots span{
width:10px;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.30);
}

.hero-split-screen-line{
height:12px;
width:120px;
border-radius:999px;
background:rgba(255,255,255,.18);
}

.hero-split-screen-hero{
min-height:126px;
padding:16px;
border-radius:22px;
background:
radial-gradient(circle at 24% 24%,rgba(96,165,250,.30),transparent 32%),
linear-gradient(135deg,#1e293b,#020617);
border:1px solid rgba(255,255,255,.10);
margin-bottom:14px;
}

.hero-split-screen-hero::before{
content:"";
display:block;
width:72%;
height:16px;
border-radius:999px;
background:#ffffff;
margin-bottom:10px;
}

.hero-split-screen-hero::after{
content:"";
display:block;
width:52%;
height:10px;
border-radius:999px;
background:rgba(226,232,240,.55);
}

.hero-split-screen-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.hero-split-mini-card{
min-height:94px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.hero-split-float-card{
position:absolute;
z-index:4;
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 56px rgba(15,23,42,.22);
}

.hero-split-float-card strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-split-float-card span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.hero-split-float-one{
left:0;
top:52px;
width:190px;
}

.hero-split-float-two{
right:0;
bottom:48px;
width:210px;
}

@media (max-width: 920px){
.hero-split-section{
grid-template-columns:1fr;
}

.hero-split-content-panel{
padding:42px 28px;
}

.hero-split-visual-panel{
padding:34px 20px;
}

.hero-split-visual{
min-height:560px;
}
}

@media (max-width: 640px){
.hero-split-section{
min-height:auto;
}

.hero-split-content-panel{
padding:34px 18px;
}

.hero-split-title{
font-size:40px;
}

.hero-split-text{
font-size:16px;
}

.hero-split-actions{
align-items:stretch;
flex-direction:column;
}

.hero-split-button-primary,
.hero-split-button-secondary{
width:100%;
}

.hero-split-visual-panel{
padding:28px 14px;
}

.hero-split-visual{
min-height:620px;
}

.hero-split-main-card{
width:280px;
}

.hero-split-float-one{
left:0;
top:18px;
}

.hero-split-float-two{
right:0;
bottom:18px;
}
}

This split screen hero section is useful when you want a dramatic two-part layout instead of a normal text-and-card hero. It works especially well when the visual side deserves as much space as the content side.

Use this pattern for product stories, landing pages, creative agencies, portfolio pages, SaaS pages, campaign pages, and homepage hero sections with strong visual direction.

22. Fullscreen Image Hero Section

A fullscreen image hero section uses one large visual as the main background and places the message directly on top of it. This layout is effective when the image carries emotional value, atmosphere, product context, or brand identity.

This example uses a full-bleed hero layout with a background-style visual, dark overlay, bottom-left content block, CTA buttons, and a compact info card. It is different from previous examples because it uses a strong image-first composition instead of a centered card or two-column mockup.

  • Perfect for travel, hotels, portfolios, campaigns, products, and brand pages
  • Uses a fullscreen image-first layout with overlay text
  • Includes CTA buttons, content block, and small supporting info card
  • Responsive design keeps the content readable on mobile
  • Uses HTML and CSS only
Fullscreen Image Hero

A visual first screen with strong atmosphere

Use this fullscreen image hero section when the background visual is the main emotional hook and the content needs to sit clearly on top.

Explore More See Details

HTML

<section class="hero-fullscreen-section">

  <div class="hero-fullscreen-bg"></div>
  <div class="hero-fullscreen-shape-one"></div>
  <div class="hero-fullscreen-shape-two"></div>
  <div class="hero-fullscreen-shape-three"></div>

  <div class="hero-fullscreen-content">

    <div class="hero-fullscreen-copy">

      <div class="hero-fullscreen-kicker">Fullscreen Image Hero</div>

      <h3 class="hero-fullscreen-title">A visual first screen with <span>strong atmosphere</span></h3>

      <p class="hero-fullscreen-text">Use this fullscreen image hero section when the background visual is the main emotional hook and the content needs to sit clearly on top.</p>

      <div class="hero-fullscreen-actions">
        <a class="hero-fullscreen-button-primary" href="#">Explore More</a>
        <a class="hero-fullscreen-button-secondary" href="#">See Details</a>
      </div>

    </div>

    <aside class="hero-fullscreen-info">

      <div class="hero-fullscreen-info-top">
        <span class="hero-fullscreen-info-badge">Featured</span>
        <span class="hero-fullscreen-info-rating">★★★★★</span>
      </div>

      <h3>Image-led hero layout</h3>

      <p>A supporting card can add context without blocking the main fullscreen visual.</p>

      <div class="hero-fullscreen-info-grid">

        <div class="hero-fullscreen-info-item">
          <strong>100%</strong>
          <span>Visual impact</span>
        </div>

        <div class="hero-fullscreen-info-item">
          <strong>Clear</strong>
          <span>Overlay text</span>
        </div>

      </div>

    </aside>

  </div>

</section>

CSS

.hero-fullscreen-section{
position:relative;
min-height:720px;
display:flex;
align-items:flex-end;
overflow:hidden;
isolation:isolate;
}

.hero-fullscreen-bg{
position:absolute;
inset:0;
z-index:-3;
background:
radial-gradient(circle at 18% 24%,rgba(255,255,255,.22),transparent 28%),
linear-gradient(135deg,#0f766e,#2563eb 45%,#111827);
}

.hero-fullscreen-bg::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(2,6,23,.16),rgba(2,6,23,.74)),
linear-gradient(90deg,rgba(2,6,23,.78),rgba(2,6,23,.18) 58%,rgba(2,6,23,.54));
}

.hero-fullscreen-bg::after{
content:"";
position:absolute;
left:-8%;
right:-8%;
bottom:-16%;
height:44%;
border-radius:50% 50% 0 0;
background:
radial-gradient(circle at 24% 18%,rgba(255,255,255,.22),transparent 22%),
linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
border-top:1px solid rgba(255,255,255,.18);
}

.hero-fullscreen-shape-one,
.hero-fullscreen-shape-two,
.hero-fullscreen-shape-three{
position:absolute;
z-index:-1;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.10);
backdrop-filter:blur(8px);
}

.hero-fullscreen-shape-one{
width:250px;
height:250px;
right:12%;
top:14%;
border-radius:56px;
transform:rotate(12deg);
}

.hero-fullscreen-shape-two{
width:150px;
height:150px;
right:26%;
top:42%;
border-radius:42px;
transform:rotate(-18deg);
}

.hero-fullscreen-shape-three{
width:110px;
height:110px;
right:8%;
bottom:22%;
border-radius:999px;
}

.hero-fullscreen-content{
width:min(100%,1120px);
margin:0 auto;
padding:54px 34px;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,360px);
gap:26px;
align-items:end;
}

.hero-fullscreen-copy{
max-width:760px;
}

.hero-fullscreen-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(14px);
}

.hero-fullscreen-title{
margin:0 0 18px;
font-size:clamp(44px,7vw,88px);
line-height:.93;
font-weight:950;
letter-spacing:-.09em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
text-shadow:0 24px 70px rgba(0,0,0,.42);
}

.hero-fullscreen-title span{
background:linear-gradient(90deg,#ffffff,#99f6e4,#bfdbfe) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-fullscreen-text{
margin:0 0 28px;
max-width:680px;
font-size:18px;
line-height:1.8;
color:rgba(255,255,255,.86);
text-shadow:0 14px 38px rgba(0,0,0,.36);
}

.hero-fullscreen-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
}

.hero-fullscreen-button-primary,
.hero-fullscreen-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:0 22px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-fullscreen-button-primary{
background:#ffffff;
color:#0f172a;
box-shadow:0 18px 48px rgba(0,0,0,.28);
}

.hero-fullscreen-button-primary:hover,
.hero-fullscreen-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 58px rgba(0,0,0,.34);
outline:none;
}

.hero-fullscreen-button-secondary{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
backdrop-filter:blur(14px);
}

.hero-fullscreen-button-secondary:hover,
.hero-fullscreen-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.15);
outline:none;
}

.hero-fullscreen-info{
padding:18px;
border-radius:26px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
box-shadow:0 24px 60px rgba(0,0,0,.24);
backdrop-filter:blur(18px);
}

.hero-fullscreen-info-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}

.hero-fullscreen-info-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:30px;
padding:0 10px;
border-radius:999px;
background:rgba(255,255,255,.16);
color:#ffffff;
font-size:12px;
font-weight:900;
}

.hero-fullscreen-info-rating{
font-size:13px;
font-weight:950;
color:#fde68a;
letter-spacing:1px;
}

.hero-fullscreen-info h3{
margin:0 0 8px;
font-size:22px;
line-height:1.18;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
}

.hero-fullscreen-info p{
margin:0 0 16px;
font-size:13px;
line-height:1.6;
font-weight:700;
color:rgba(255,255,255,.78);
}

.hero-fullscreen-info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.hero-fullscreen-info-item{
padding:12px;
border-radius:16px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
}

.hero-fullscreen-info-item strong{
display:block;
font-size:16px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-fullscreen-info-item span{
display:block;
margin-top:3px;
font-size:12px;
line-height:1.35;
font-weight:750;
color:rgba(255,255,255,.70);
}

@media (max-width: 920px){
.hero-fullscreen-content{
grid-template-columns:1fr;
padding:44px 24px;
}

.hero-fullscreen-info{
max-width:460px;
}
}

@media (max-width: 640px){
.hero-fullscreen-section{
min-height:680px;
}

.hero-fullscreen-content{
padding:34px 18px;
}

.hero-fullscreen-title{
font-size:42px;
}

.hero-fullscreen-text{
font-size:16px;
}

.hero-fullscreen-actions{
align-items:stretch;
flex-direction:column;
}

.hero-fullscreen-button-primary,
.hero-fullscreen-button-secondary{
width:100%;
}

.hero-fullscreen-info-grid{
grid-template-columns:1fr;
}

.hero-fullscreen-shape-one{
width:180px;
height:180px;
right:-30px;
top:70px;
}

.hero-fullscreen-shape-two{
display:none;
}
}

This fullscreen image hero section is useful when the background visual is the most important part of the first impression. The overlay keeps the text readable, while the supporting info card adds context without taking over the design.

Use this pattern for travel websites, hotel websites, product campaigns, portfolio websites, brand pages, event pages, landing pages, and visual storytelling pages.

23. Gradient Hero Section

A gradient hero section uses color, depth, and soft transitions to create a modern first impression without relying on photos or external images. This layout works well when you want a clean, flexible, and fast-loading hero section that still feels visually strong.

This example uses a large animated-style gradient background, centered content, CTA buttons, floating feature pills, and a bottom preview strip. It is useful for SaaS websites, creative landing pages, AI tools, product websites, app launches, and modern homepage designs.

  • Perfect for SaaS websites, AI tools, apps, startups, and landing pages
  • Uses a strong gradient-first layout without external images
  • Includes centered headline, CTA buttons, floating feature pills, and bottom preview strip
  • Responsive design keeps the layout clean on mobile
  • Uses HTML and CSS only
Fast loading
No image needed
Modern visual depth
Gradient Hero Section

Design a bold first screen with modern gradient energy

Use this gradient hero section when you want a colorful, flexible, and lightweight layout that still feels premium and visually memorable.

Get Started View Components
Visual hero system Create a strong design without depending on image assets.
Responsive Works across desktop and mobile layouts.
Flexible Easy to adjust colors and content.

HTML

<section class="hero-gradient-section">

  <div class="hero-gradient-bg"></div>
  <div class="hero-gradient-grid"></div>

  <div class="hero-gradient-floating-pills">
    <div class="hero-gradient-pill hero-gradient-pill-one">Fast loading</div>
    <div class="hero-gradient-pill hero-gradient-pill-two">No image needed</div>
    <div class="hero-gradient-pill hero-gradient-pill-three">Modern visual depth</div>
  </div>

  <div class="hero-gradient-content">

    <div class="hero-gradient-kicker">Gradient Hero Section</div>

    <h3 class="hero-gradient-title">Design a bold first screen with <span>modern gradient energy</span></h3>

    <p class="hero-gradient-text">Use this gradient hero section when you want a colorful, flexible, and lightweight layout that still feels premium and visually memorable.</p>

    <div class="hero-gradient-actions">
      <a class="hero-gradient-button-primary" href="#">Get Started</a>
      <a class="hero-gradient-button-secondary" href="#">View Components</a>
    </div>

  </div>

  <div class="hero-gradient-preview-strip">

    <div class="hero-gradient-strip-inner">

      <div class="hero-gradient-strip-card">
        <strong>Visual hero system</strong>
        <span>Create a strong design without depending on image assets.</span>
        <div class="hero-gradient-strip-bars">
          <i></i>
          <i></i>
        </div>
      </div>

      <div class="hero-gradient-strip-card">
        <strong>Responsive</strong>
        <span>Works across desktop and mobile layouts.</span>
      </div>

      <div class="hero-gradient-strip-card">
        <strong>Flexible</strong>
        <span>Easy to adjust colors and content.</span>
      </div>

    </div>

  </div>

</section>

CSS

.hero-gradient-section{
position:relative;
min-height:720px;
display:grid;
place-items:center;
overflow:hidden;
isolation:isolate;
}

.hero-gradient-bg{
position:absolute;
inset:0;
z-index:-4;
background:
radial-gradient(circle at 18% 20%,rgba(59,130,246,.72),transparent 28%),
radial-gradient(circle at 80% 18%,rgba(236,72,153,.64),transparent 30%),
radial-gradient(circle at 52% 84%,rgba(34,197,94,.38),transparent 34%),
linear-gradient(135deg,#020617,#312e81 48%,#831843);
}

.hero-gradient-bg::before{
content:"";
position:absolute;
inset:-25%;
background:
conic-gradient(from 180deg at 50% 50%,rgba(37,99,235,.26),rgba(236,72,153,.28),rgba(34,197,94,.20),rgba(249,115,22,.20),rgba(37,99,235,.26));
filter:blur(28px);
opacity:.82;
}

.hero-gradient-bg::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(2,6,23,.22),rgba(2,6,23,.72)),
radial-gradient(circle at 50% 50%,transparent 0 32%,rgba(2,6,23,.32) 72%);
}

.hero-gradient-grid{
position:absolute;
inset:0;
z-index:-2;
background-image:
linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
background-size:54px 54px;
mask-image:linear-gradient(180deg,transparent,black 18%,black 82%,transparent);
opacity:.38;
}

.hero-gradient-content{
position:relative;
z-index:3;
width:min(100%,980px);
padding:54px 24px 170px;
text-align:center;
}

.hero-gradient-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(14px);
}

.hero-gradient-title{
margin:0 auto 20px;
max-width:880px;
font-size:clamp(44px,7vw,86px);
line-height:.94;
font-weight:950;
letter-spacing:-.085em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
text-shadow:0 20px 70px rgba(0,0,0,.42);
}

.hero-gradient-title span{
background:linear-gradient(90deg,#ffffff,#bfdbfe,#f9a8d4,#bbf7d0) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-gradient-text{
margin:0 auto 30px;
max-width:700px;
font-size:18px;
line-height:1.8;
color:rgba(255,255,255,.86);
text-shadow:0 12px 36px rgba(0,0,0,.34);
}

.hero-gradient-actions{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
}

.hero-gradient-button-primary,
.hero-gradient-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:0 22px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-gradient-button-primary{
background:#ffffff;
color:#0f172a;
box-shadow:0 18px 48px rgba(0,0,0,.28);
}

.hero-gradient-button-primary:hover,
.hero-gradient-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 58px rgba(0,0,0,.34);
outline:none;
}

.hero-gradient-button-secondary{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
backdrop-filter:blur(14px);
}

.hero-gradient-button-secondary:hover,
.hero-gradient-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.15);
outline:none;
}

.hero-gradient-pill{
position:absolute;
z-index:4;
display:inline-flex;
align-items:center;
gap:8px;
min-height:42px;
padding:0 14px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
box-shadow:0 20px 56px rgba(0,0,0,.24);
backdrop-filter:blur(16px);
color:#ffffff;
font-size:13px;
font-weight:900;
}

.hero-gradient-pill::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.16);
}

.hero-gradient-pill-one{
left:7%;
top:22%;
}

.hero-gradient-pill-two{
right:8%;
top:28%;
}

.hero-gradient-pill-three{
left:12%;
bottom:30%;
}

.hero-gradient-preview-strip{
position:absolute;
left:50%;
bottom:30px;
z-index:5;
width:min(920px,calc(100% - 48px));
padding:14px;
border-radius:30px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
box-shadow:0 28px 80px rgba(0,0,0,.30);
backdrop-filter:blur(18px);
transform:translateX(-50%);
}

.hero-gradient-strip-inner{
display:grid;
grid-template-columns:1.2fr .8fr .8fr;
gap:12px;
}

.hero-gradient-strip-card{
min-height:118px;
padding:16px;
border-radius:22px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.14);
}

.hero-gradient-strip-card strong{
display:block;
margin-bottom:6px;
font-size:18px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-gradient-strip-card span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:rgba(255,255,255,.76);
}

.hero-gradient-strip-bars{
display:grid;
gap:8px;
margin-top:14px;
}

.hero-gradient-strip-bars i{
display:block;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.24);
}

.hero-gradient-strip-bars i:nth-child(1){
width:90%;
}

.hero-gradient-strip-bars i:nth-child(2){
width:66%;
}

@media (max-width: 820px){
.hero-gradient-section{
min-height:760px;
}

.hero-gradient-content{
padding:42px 18px 240px;
}

.hero-gradient-pill{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
margin:5px;
}

.hero-gradient-floating-pills{
position:absolute;
left:18px;
right:18px;
top:auto;
bottom:186px;
z-index:6;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
}

.hero-gradient-strip-inner{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.hero-gradient-title{
font-size:42px;
}

.hero-gradient-text{
font-size:16px;
}

.hero-gradient-actions{
align-items:stretch;
flex-direction:column;
}

.hero-gradient-button-primary,
.hero-gradient-button-secondary{
width:100%;
}

.hero-gradient-preview-strip{
width:calc(100% - 28px);
bottom:16px;
}
}

This gradient hero section is useful when you want a strong visual style without using images, videos, or product mockups. The gradient background, floating pills, and preview strip create depth while keeping the structure lightweight and flexible.

Use this pattern for SaaS websites, AI tools, startup pages, creative landing pages, app launches, digital products, personal websites, and modern homepage hero sections.

24. Glassmorphism Hero Section

A glassmorphism hero section uses translucent cards, blurred backgrounds, soft borders, and layered depth to create a modern interface-style design. It works best when the background has enough color and contrast to make the glass panels visible.

This example uses a layered glass layout with a translucent content card, floating UI widgets, soft gradient background, and a compact stats panel. It feels more like a premium app interface than a traditional landing page hero.

  • Perfect for SaaS, fintech, AI tools, dashboards, apps, and modern product pages
  • Uses translucent glass cards with blur and soft borders
  • Includes headline, CTA buttons, stats panel, and floating interface widgets
  • Responsive design keeps the glass cards readable on mobile
  • Uses HTML and CSS only
Glassmorphism Hero

Create a premium interface feel with soft glass layers

Use this glassmorphism hero section when you want a modern app-style layout with translucent panels, blurred backgrounds, and layered visual depth.

Launch Product View Dashboard
UI App-style layout
Blur Glass effects
Fast No image assets
Live metrics Use floating panels for quick feature highlights.
Dashboard
Modern depth Layered glass cards make the hero feel like a real interface.

HTML

<section class="hero-glass-section">

  <div class="hero-glass-bg"></div>
  <div class="hero-glass-orb hero-glass-orb-one"></div>
  <div class="hero-glass-orb hero-glass-orb-two"></div>
  <div class="hero-glass-orb hero-glass-orb-three"></div>

  <div class="hero-glass-layout">

    <div class="hero-glass-main-card">

      <div class="hero-glass-kicker">Glassmorphism Hero</div>

      <h3 class="hero-glass-title">Create a premium interface feel with <span>soft glass layers</span></h3>

      <p class="hero-glass-text">Use this glassmorphism hero section when you want a modern app-style layout with translucent panels, blurred backgrounds, and layered visual depth.</p>

      <div class="hero-glass-actions">
        <a class="hero-glass-button-primary" href="#">Launch Product</a>
        <a class="hero-glass-button-secondary" href="#">View Dashboard</a>
      </div>

      <div class="hero-glass-stats">

        <div class="hero-glass-stat">
          <strong>UI</strong>
          <span>App-style layout</span>
        </div>

        <div class="hero-glass-stat">
          <strong>Blur</strong>
          <span>Glass effects</span>
        </div>

        <div class="hero-glass-stat">
          <strong>Fast</strong>
          <span>No image assets</span>
        </div>

      </div>

    </div>

    <div class="hero-glass-widgets">

      <div class="hero-glass-widget hero-glass-widget-small-one">
        <strong>Live metrics</strong>
        <span>Use floating panels for quick feature highlights.</span>
        <div class="hero-glass-mini-bars">
          <i></i>
          <i></i>
        </div>
      </div>

      <div class="hero-glass-widget hero-glass-widget-primary">

        <div class="hero-glass-widget-top">
          <div class="hero-glass-widget-icon"></div>
          <span class="hero-glass-widget-badge">Dashboard</span>
        </div>

        <div class="hero-glass-chart"></div>

        <div class="hero-glass-widget-title"></div>
        <div class="hero-glass-widget-line"></div>
        <div class="hero-glass-widget-line"></div>

      </div>

      <div class="hero-glass-widget hero-glass-widget-small-two">
        <strong>Modern depth</strong>
        <span>Layered glass cards make the hero feel like a real interface.</span>
      </div>

    </div>

  </div>

</section>

CSS

.hero-glass-section{
position:relative;
min-height:720px;
display:grid;
place-items:center;
overflow:hidden;
isolation:isolate;
padding:44px 24px;
}

.hero-glass-bg{
position:absolute;
inset:0;
z-index:-4;
background:
radial-gradient(circle at 16% 18%,rgba(14,165,233,.54),transparent 30%),
radial-gradient(circle at 82% 16%,rgba(236,72,153,.46),transparent 31%),
radial-gradient(circle at 52% 86%,rgba(124,58,237,.42),transparent 34%),
linear-gradient(135deg,#020617,#111827 52%,#1e1b4b);
}

.hero-glass-bg::before{
content:"";
position:absolute;
left:8%;
top:12%;
width:260px;
height:260px;
border-radius:999px;
background:rgba(34,197,94,.22);
filter:blur(18px);
}

.hero-glass-bg::after{
content:"";
position:absolute;
right:10%;
bottom:12%;
width:320px;
height:320px;
border-radius:999px;
background:rgba(249,115,22,.18);
filter:blur(18px);
}

.hero-glass-orb{
position:absolute;
z-index:-1;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(8px);
}

.hero-glass-orb-one{
width:160px;
height:160px;
left:8%;
bottom:18%;
}

.hero-glass-orb-two{
width:92px;
height:92px;
right:11%;
top:18%;
}

.hero-glass-orb-three{
width:120px;
height:120px;
left:48%;
top:8%;
}

.hero-glass-layout{
position:relative;
z-index:2;
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.86fr);
gap:26px;
align-items:center;
}

.hero-glass-main-card{
padding:34px;
border-radius:36px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
box-shadow:0 34px 100px rgba(0,0,0,.30);
backdrop-filter:blur(22px);
}

.hero-glass-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-glass-title{
margin:0 0 20px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.08em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
text-shadow:0 20px 70px rgba(0,0,0,.34);
}

.hero-glass-title span{
background:linear-gradient(90deg,#ffffff,#bfdbfe,#f9a8d4) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-glass-text{
margin:0 0 28px;
max-width:660px;
font-size:17px;
line-height:1.8;
color:rgba(255,255,255,.82);
}

.hero-glass-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.hero-glass-button-primary,
.hero-glass-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-glass-button-primary{
background:#ffffff;
color:#0f172a;
box-shadow:0 18px 48px rgba(0,0,0,.26);
}

.hero-glass-button-primary:hover,
.hero-glass-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 58px rgba(0,0,0,.32);
outline:none;
}

.hero-glass-button-secondary{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.20);
color:#ffffff;
}

.hero-glass-button-secondary:hover,
.hero-glass-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.15);
outline:none;
}

.hero-glass-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.hero-glass-stat{
padding:15px;
border-radius:20px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
}

.hero-glass-stat strong{
display:block;
margin-bottom:4px;
font-size:22px;
line-height:1;
font-weight:950;
color:#ffffff;
}

.hero-glass-stat span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:rgba(255,255,255,.68);
}

.hero-glass-widgets{
position:relative;
min-height:560px;
}

.hero-glass-widget{
position:absolute;
padding:18px;
border-radius:28px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 28px 80px rgba(0,0,0,.26);
backdrop-filter:blur(22px);
}

.hero-glass-widget-primary{
left:50%;
top:50%;
width:min(360px,82%);
min-height:360px;
transform:translate(-50%,-50%);
}

.hero-glass-widget-small-one{
left:0;
top:48px;
width:210px;
z-index:3;
}

.hero-glass-widget-small-two{
right:0;
bottom:58px;
width:230px;
z-index:3;
}

.hero-glass-widget-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
}

.hero-glass-widget-icon{
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#0ea5e9,#ec4899);
box-shadow:0 16px 36px rgba(14,165,233,.22);
}

.hero-glass-widget-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:30px;
padding:0 10px;
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);
color:#ffffff;
font-size:12px;
font-weight:900;
}

.hero-glass-chart{
height:170px;
border-radius:24px;
background:
linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.12);
position:relative;
overflow:hidden;
margin-bottom:16px;
}

.hero-glass-chart::before{
content:"";
position:absolute;
left:18px;
right:18px;
bottom:28px;
height:92px;
border-radius:22px;
background:
linear-gradient(135deg,transparent 10%,rgba(147,197,253,.80) 11%,rgba(147,197,253,.80) 14%,transparent 15%),
linear-gradient(45deg,transparent 24%,rgba(244,114,182,.82) 25%,rgba(244,114,182,.82) 28%,transparent 29%);
opacity:.95;
}

.hero-glass-widget-title{
height:16px;
width:78%;
border-radius:999px;
background:#ffffff;
margin-bottom:10px;
}

.hero-glass-widget-line{
height:10px;
width:92%;
border-radius:999px;
background:rgba(255,255,255,.30);
margin-bottom:8px;
}

.hero-glass-widget-line:nth-of-type(3){
width:62%;
}

.hero-glass-widget-small-one strong,
.hero-glass-widget-small-two strong{
display:block;
margin-bottom:6px;
font-size:18px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-glass-widget-small-one span,
.hero-glass-widget-small-two span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:rgba(255,255,255,.72);
}

.hero-glass-mini-bars{
display:grid;
gap:8px;
margin-top:14px;
}

.hero-glass-mini-bars i{
display:block;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.24);
}

.hero-glass-mini-bars i:nth-child(1){
width:86%;
}

.hero-glass-mini-bars i:nth-child(2){
width:64%;
}

@media (max-width: 920px){
.hero-glass-section{
padding:34px 16px;
}

.hero-glass-layout{
grid-template-columns:1fr;
}

.hero-glass-widgets{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-glass-section{
padding:28px 14px;
}

.hero-glass-main-card{
padding:22px;
border-radius:28px;
}

.hero-glass-title{
font-size:40px;
}

.hero-glass-text{
font-size:16px;
}

.hero-glass-actions{
align-items:stretch;
flex-direction:column;
}

.hero-glass-button-primary,
.hero-glass-button-secondary{
width:100%;
}

.hero-glass-stats{
grid-template-columns:1fr;
}

.hero-glass-widgets{
min-height:auto;
display:grid;
gap:14px;
}

.hero-glass-widget,
.hero-glass-widget-primary,
.hero-glass-widget-small-one,
.hero-glass-widget-small-two{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
min-height:auto;
box-sizing:border-box;
transform:none;
}
}

This glassmorphism hero section is useful when you want the hero to feel like a modern software interface. The blurred glass cards, layered widgets, and colorful background create depth without using external images.

Use this pattern for SaaS products, fintech websites, AI dashboards, productivity apps, analytics tools, modern portfolios, product pages, and premium landing pages.

25. Dark Mode Hero Section

A dark mode hero section is useful when you want a premium, focused, and high-contrast first impression. Dark hero layouts work especially well for SaaS products, AI tools, developer tools, fintech products, dashboards, cybersecurity websites, and modern app landing pages.

This example uses a dark product-style layout with a strong headline, glowing accent, CTA buttons, feature cards, and a dashboard-inspired visual panel. The design is different from the earlier glassmorphism and gradient examples because it uses a cleaner dark interface style with sharper contrast.

  • Perfect for SaaS products, AI tools, developer tools, fintech, and dashboards
  • Uses a premium dark mode style with strong contrast
  • Includes headline, CTA buttons, feature cards, and interface preview
  • Responsive layout stacks cleanly on mobile
  • Uses HTML and CSS only
Dark Mode Hero

Build a focused product page with premium dark UI

Use this dark mode hero section when your website needs a modern, high-contrast, and product-focused first impression.

Start Free Trial View Demo
01
High contrast Keep important content readable and sharp.
02
Product focus Use dark UI to make the interface stand out.
03
Modern feel Create a premium first impression.
Live dashboard Show product context with a dark interface preview.

HTML

<section class="hero-dark-section">

  <div class="hero-dark-content">

    <div class="hero-dark-kicker">
      <span class="hero-dark-kicker-dot"></span>
      Dark Mode Hero
    </div>

    <h3 class="hero-dark-title">Build a focused product page with <span>premium dark UI</span></h3>

    <p class="hero-dark-text">Use this dark mode hero section when your website needs a modern, high-contrast, and product-focused first impression.</p>

    <div class="hero-dark-actions">
      <a class="hero-dark-button-primary" href="#">Start Free Trial</a>
      <a class="hero-dark-button-secondary" href="#">View Demo</a>
    </div>

    <div class="hero-dark-features">

      <div class="hero-dark-feature">
        <div class="hero-dark-feature-icon">01</div>
        <strong>High contrast</strong>
        <span>Keep important content readable and sharp.</span>
      </div>

      <div class="hero-dark-feature">
        <div class="hero-dark-feature-icon">02</div>
        <strong>Product focus</strong>
        <span>Use dark UI to make the interface stand out.</span>
      </div>

      <div class="hero-dark-feature">
        <div class="hero-dark-feature-icon">03</div>
        <strong>Modern feel</strong>
        <span>Create a premium first impression.</span>
      </div>

    </div>

  </div>

  <div class="hero-dark-visual">

    <div class="hero-dark-floating">
      <strong>Live dashboard</strong>
      <span>Show product context with a dark interface preview.</span>
    </div>

    <div class="hero-dark-dashboard">

      <div class="hero-dark-dashboard-top">

        <div class="hero-dark-window-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="hero-dark-dashboard-label"></div>

      </div>

      <div class="hero-dark-dashboard-body">

        <div class="hero-dark-sidebar">

          <div class="hero-dark-sidebar-logo"></div>

          <div class="hero-dark-sidebar-menu">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>

        </div>

        <div class="hero-dark-main">

          <div class="hero-dark-metrics">
            <div class="hero-dark-metric"></div>
            <div class="hero-dark-metric"></div>
          </div>

          <div class="hero-dark-chart"></div>

          <div class="hero-dark-activity">
            <span></span>
            <span></span>
          </div>

        </div>

      </div>

    </div>

  </div>

</section>

CSS

.hero-dark-section{
position:relative;
z-index:2;
width:min(100%,1100px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(340px,.94fr);
gap:42px;
align-items:center;
}

.hero-dark-content{
min-width:0;
}

.hero-dark-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(37,99,235,.14);
border:1px solid rgba(147,197,253,.22);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-dark-kicker-dot{
width:8px;
height:8px;
border-radius:999px;
background:#38bdf8;
box-shadow:0 0 0 4px rgba(56,189,248,.14);
}

.hero-dark-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.08em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.hero-dark-title span{
background:linear-gradient(90deg,#93c5fd,#67e8f9,#ffffff) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.hero-dark-text{
margin:0 0 28px;
max-width:640px;
font-size:17px;
line-height:1.8;
color:#cbd5e1;
}

.hero-dark-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.hero-dark-button-primary,
.hero-dark-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-dark-button-primary{
background:linear-gradient(135deg,#2563eb,#0ea5e9);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.26);
}

.hero-dark-button-primary:hover,
.hero-dark-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(14,165,233,.28);
outline:none;
}

.hero-dark-button-secondary{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
}

.hero-dark-button-secondary:hover,
.hero-dark-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.11);
outline:none;
}

.hero-dark-features{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
max-width:640px;
}

.hero-dark-feature{
padding:15px;
border-radius:20px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 42px rgba(0,0,0,.16);
}

.hero-dark-feature-icon{
width:38px;
height:38px;
display:grid;
place-items:center;
margin-bottom:12px;
border-radius:14px;
background:rgba(37,99,235,.18);
border:1px solid rgba(147,197,253,.18);
color:#93c5fd;
font-size:13px;
font-weight:950;
}

.hero-dark-feature strong{
display:block;
margin-bottom:4px;
font-size:16px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-dark-feature span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#94a3b8;
}

.hero-dark-visual{
position:relative;
min-height:540px;
}

.hero-dark-visual::before{
content:"";
position:absolute;
width:340px;
height:340px;
right:-60px;
top:44px;
border-radius:999px;
background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(14,165,233,.16));
filter:blur(10px);
}

.hero-dark-dashboard{
position:relative;
z-index:2;
overflow:hidden;
border-radius:34px;
background:#020617;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 34px 100px rgba(0,0,0,.42);
}

.hero-dark-dashboard-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.10);
background:rgba(15,23,42,.86);
}

.hero-dark-window-dots{
display:flex;
gap:7px;
}

.hero-dark-window-dots span{
width:10px;
height:10px;
border-radius:999px;
background:#64748b;
}

.hero-dark-window-dots span:nth-child(1){
background:#ef4444;
}

.hero-dark-window-dots span:nth-child(2){
background:#f59e0b;
}

.hero-dark-window-dots span:nth-child(3){
background:#22c55e;
}

.hero-dark-dashboard-label{
height:12px;
width:160px;
border-radius:999px;
background:rgba(255,255,255,.16);
}

.hero-dark-dashboard-body{
display:grid;
grid-template-columns:190px minmax(0,1fr);
min-height:440px;
}

.hero-dark-sidebar{
padding:18px;
border-right:1px solid rgba(255,255,255,.10);
background:rgba(15,23,42,.66);
}

.hero-dark-sidebar-logo{
width:42px;
height:42px;
border-radius:16px;
margin-bottom:20px;
background:linear-gradient(135deg,#2563eb,#0ea5e9);
box-shadow:0 18px 38px rgba(37,99,235,.24);
}

.hero-dark-sidebar-menu{
display:grid;
gap:10px;
}

.hero-dark-sidebar-menu span{
height:36px;
border-radius:14px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}

.hero-dark-sidebar-menu span:first-child{
background:rgba(37,99,235,.18);
border-color:rgba(147,197,253,.20);
}

.hero-dark-main{
padding:20px;
display:grid;
gap:16px;
}

.hero-dark-metrics{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.hero-dark-metric{
padding:16px;
min-height:112px;
border-radius:20px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
}

.hero-dark-metric::before{
content:"";
display:block;
width:44px;
height:44px;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#38bdf8);
margin-bottom:14px;
}

.hero-dark-metric::after{
content:"";
display:block;
height:12px;
width:74%;
border-radius:999px;
background:rgba(226,232,240,.44);
}

.hero-dark-chart{
position:relative;
min-height:190px;
overflow:hidden;
border-radius:22px;
background:
linear-gradient(180deg,rgba(37,99,235,.20),transparent),
rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
}

.hero-dark-chart::before{
content:"";
position:absolute;
left:22px;
right:22px;
bottom:34px;
height:86px;
border-radius:22px;
background:
linear-gradient(135deg,transparent 8%,rgba(96,165,250,.88) 9%,rgba(96,165,250,.88) 12%,transparent 13%),
linear-gradient(45deg,transparent 28%,rgba(56,189,248,.82) 29%,rgba(56,189,248,.82) 32%,transparent 33%);
}

.hero-dark-activity{
display:grid;
gap:10px;
}

.hero-dark-activity span{
height:40px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}

.hero-dark-floating{
position:absolute;
right:0;
bottom:58px;
z-index:4;
width:230px;
padding:16px;
border-radius:22px;
background:#ffffff;
box-shadow:0 24px 56px rgba(0,0,0,.28);
}

.hero-dark-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-dark-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

@media (max-width: 920px){
.hero-dark-section{
grid-template-columns:1fr;
}

.hero-dark-visual{
max-width:640px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-dark-title{
font-size:40px;
}

.hero-dark-text{
font-size:16px;
}

.hero-dark-actions{
align-items:stretch;
flex-direction:column;
}

.hero-dark-button-primary,
.hero-dark-button-secondary{
width:100%;
}

.hero-dark-features{
grid-template-columns:1fr;
}

.hero-dark-dashboard{
border-radius:26px;
}

.hero-dark-dashboard-body{
grid-template-columns:1fr;
}

.hero-dark-sidebar{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.10);
}

.hero-dark-sidebar-menu{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.hero-dark-metrics{
grid-template-columns:1fr;
}

.hero-dark-floating{
position:relative;
right:auto;
bottom:auto;
width:auto;
margin-bottom:16px;
}
}

This dark mode hero section is useful when the design needs to feel premium, focused, and technical. The dark dashboard preview supports product storytelling, while the feature cards explain why the layout works.

Use this pattern for SaaS websites, AI tools, fintech products, developer tools, cybersecurity websites, dashboard products, analytics tools, and premium app landing pages.

26. Minimal Hero Section

A minimal hero section uses fewer visual elements and puts most of the focus on the message, spacing, and typography. This type of hero works well when you want the website to feel calm, premium, editorial, and easy to understand.

This example uses a clean centered layout with a subtle background, simple CTA buttons, a short proof line, and a minimal content preview below the main headline. It is different from the more visual examples because it avoids heavy mockups and relies on clarity instead.

  • Perfect for personal websites, agencies, SaaS, consultants, portfolios, and editorial brands
  • Uses simple typography, spacing, and a restrained visual style
  • Includes headline, short description, CTA buttons, proof text, and a minimal preview row
  • Responsive design stays clean on mobile
  • Uses HTML and CSS only
Minimal Hero Section

A clean first impression with less visual noise

Use this minimal hero section when your message should feel clear, calm, premium, and easy to understand without heavy visual effects.

Start Project View Examples

Trusted by modern teams Fast loading Responsive design Clean layout

Featured

Clear content structure

Minimal hero sections work best when the message is simple and the page needs a calm, professional tone.

01

Simple

Strong typography and spacing do most of the work.

02

Focused

Fewer elements can make the call-to-action clearer.

HTML

<section class="hero-minimal-section">

  <div class="hero-minimal-content">

    <div class="hero-minimal-kicker">
      <span class="hero-minimal-kicker-dot"></span>
      Minimal Hero Section
    </div>

    <h3 class="hero-minimal-title">A clean first impression with <span>less visual noise</span></h3>

    <p class="hero-minimal-text">Use this minimal hero section when your message should feel clear, calm, premium, and easy to understand without heavy visual effects.</p>

    <div class="hero-minimal-actions">
      <a class="hero-minimal-button-primary" href="#">Start Project</a>
      <a class="hero-minimal-button-secondary" href="#">View Examples</a>
    </div>

    <p class="hero-minimal-proof">
      <strong>Trusted by modern teams</strong>
      <span class="hero-minimal-proof-separator"></span>
      Fast loading
      <span class="hero-minimal-proof-separator"></span>
      Responsive design
      <span class="hero-minimal-proof-separator"></span>
      Clean layout
    </p>

  </div>

  <div class="hero-minimal-preview-row">

    <div class="hero-minimal-card hero-minimal-card-large">
      <span class="hero-minimal-card-label">Featured</span>
      <h3>Clear content structure</h3>
      <p>Minimal hero sections work best when the message is simple and the page needs a calm, professional tone.</p>
      <div class="hero-minimal-lines">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div class="hero-minimal-card">
      <span class="hero-minimal-metric">01</span>
      <h3>Simple</h3>
      <p>Strong typography and spacing do most of the work.</p>
    </div>

    <div class="hero-minimal-card">
      <span class="hero-minimal-metric">02</span>
      <h3>Focused</h3>
      <p>Fewer elements can make the call-to-action clearer.</p>
    </div>

  </div>

</section>

CSS

.hero-minimal-section{
width:min(100%,1040px);
display:grid;
gap:42px;
text-align:center;
}

.hero-minimal-content{
max-width:860px;
margin:0 auto;
}

.hero-minimal-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#475569;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
box-shadow:0 12px 30px rgba(15,23,42,.05);
}

.hero-minimal-kicker-dot{
width:8px;
height:8px;
border-radius:999px;
background:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.hero-minimal-title{
margin:0 auto 20px;
max-width:880px;
font-size:clamp(42px,7vw,84px);
line-height:.94;
font-weight:950;
letter-spacing:-.09em;
color:#0f172a;
}

.hero-minimal-title span{
background:linear-gradient(90deg,#2563eb,#7c3aed,#0f172a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-minimal-text{
margin:0 auto 28px;
max-width:680px;
font-size:18px;
line-height:1.8;
color:#475569;
}

.hero-minimal-actions{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:24px;
}

.hero-minimal-button-primary,
.hero-minimal-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-minimal-button-primary{
background:#0f172a;
color:#ffffff;
box-shadow:0 18px 42px rgba(15,23,42,.18);
}

.hero-minimal-button-primary:hover,
.hero-minimal-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(15,23,42,.24);
outline:none;
}

.hero-minimal-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.hero-minimal-button-secondary:hover,
.hero-minimal-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-minimal-proof{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin:0;
font-size:13px;
line-height:1.5;
font-weight:800;
color:#64748b;
}

.hero-minimal-proof strong{
color:#0f172a;
font-weight:950;
}

.hero-minimal-proof-separator{
width:5px;
height:5px;
border-radius:999px;
background:#cbd5e1;
}

.hero-minimal-preview-row{
display:grid;
grid-template-columns:1.2fr .8fr .8fr;
gap:16px;
}

.hero-minimal-card{
position:relative;
min-height:180px;
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 24px 60px rgba(15,23,42,.08);
text-align:left;
overflow:hidden;
}

.hero-minimal-card::before{
content:"";
position:absolute;
right:-60px;
top:-60px;
width:160px;
height:160px;
border-radius:999px;
background:rgba(37,99,235,.07);
}

.hero-minimal-card-large{
min-height:220px;
}

.hero-minimal-card-label{
display:inline-flex;
align-items:center;
min-height:30px;
padding:0 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:12px;
font-weight:900;
margin-bottom:16px;
}

.hero-minimal-card h3{
position:relative;
z-index:2;
margin:0 0 8px;
font-size:22px;
line-height:1.18;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-minimal-card p{
position:relative;
z-index:2;
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.hero-minimal-lines{
position:relative;
z-index:2;
display:grid;
gap:9px;
margin-top:18px;
}

.hero-minimal-lines span{
display:block;
height:10px;
border-radius:999px;
background:#e2e8f0;
}

.hero-minimal-lines span:nth-child(1){
width:92%;
}

.hero-minimal-lines span:nth-child(2){
width:68%;
}

.hero-minimal-lines span:nth-child(3){
width:46%;
}

.hero-minimal-metric{
position:relative;
z-index:2;
display:block;
margin-bottom:8px;
font-size:34px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

@media (max-width: 820px){
.hero-minimal-preview-row{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.hero-minimal-title{
font-size:42px;
}

.hero-minimal-text{
font-size:16px;
}

.hero-minimal-actions{
align-items:stretch;
flex-direction:column;
}

.hero-minimal-button-primary,
.hero-minimal-button-secondary{
width:100%;
}

.hero-minimal-proof{
flex-direction:column;
}

.hero-minimal-proof-separator{
display:none;
}

.hero-minimal-card{
min-height:auto;
}
}

This minimal hero section is useful when the goal is clarity instead of visual complexity. The headline, short text, simple buttons, and clean preview cards create a calm professional layout that loads quickly and stays easy to scan.

Use this pattern for personal websites, consultants, SaaS homepages, agency websites, editorial brands, portfolios, product pages, and websites that need a premium but simple first impression.

27. Hero Section with Stats

A hero section with stats is useful when numbers can make the message stronger. Instead of relying only on a headline and image, this layout uses metrics such as customers, projects, results, rating, speed, revenue, or growth to create trust quickly.

This example uses a strong content-first layout with a large headline, CTA buttons, a wide statistics bar, and a visual analytics panel. It works well for SaaS websites, agencies, business services, startup websites, case study pages, and landing pages where measurable results matter.

  • Perfect for SaaS, agencies, startups, service businesses, and case study pages
  • Includes headline, CTA buttons, key statistics, and analytics-style visual panel
  • Uses numbers as the main trust-building element
  • Responsive design stacks statistics cleanly on mobile
  • Uses HTML and CSS only
Hero Section with Stats

Show measurable value with numbers that build trust

Use this stats-based hero section when your business, product, or service can prove value with clear metrics, growth numbers, customer results, or performance data.

View Results Book a Demo
240% Average growth after optimization
18K+ Monthly visitors reached
4.9 Average customer rating
72h Typical setup time

Performance dashboard

Use a visual analytics block to support the statistics in the hero section.

Live growth
Clear proof Statistics make the hero section stronger when the numbers are specific and believable.
Fast scanning Visitors can understand the value before reading the full page.

HTML

<section class="hero-stats-section">

  <div class="hero-stats-top">

    <div class="hero-stats-content">

      <div class="hero-stats-kicker">Hero Section with Stats</div>

      <h3 class="hero-stats-title">Show measurable value with <span>numbers that build trust</span></h3>

      <p class="hero-stats-text">Use this stats-based hero section when your business, product, or service can prove value with clear metrics, growth numbers, customer results, or performance data.</p>

    </div>

    <div class="hero-stats-actions">
      <a class="hero-stats-button-primary" href="#">View Results</a>
      <a class="hero-stats-button-secondary" href="#">Book a Demo</a>
    </div>

  </div>

  <div class="hero-stats-bar">

    <div class="hero-stats-item">
      <span class="hero-stats-number">240%</span>
      <span class="hero-stats-label">Average growth after optimization</span>
    </div>

    <div class="hero-stats-item">
      <span class="hero-stats-number">18K+</span>
      <span class="hero-stats-label">Monthly visitors reached</span>
    </div>

    <div class="hero-stats-item">
      <span class="hero-stats-number">4.9</span>
      <span class="hero-stats-label">Average customer rating</span>
    </div>

    <div class="hero-stats-item">
      <span class="hero-stats-number">72h</span>
      <span class="hero-stats-label">Typical setup time</span>
    </div>

  </div>

  <div class="hero-stats-visual">

    <div class="hero-stats-panel">

      <div class="hero-stats-panel-head">

        <div>
          <h3>Performance dashboard</h3>
          <p>Use a visual analytics block to support the statistics in the hero section.</p>
        </div>

        <span class="hero-stats-panel-badge">Live growth</span>

      </div>

      <div class="hero-stats-chart">
        <span class="hero-stats-chart-bar"></span>
        <span class="hero-stats-chart-bar"></span>
        <span class="hero-stats-chart-bar"></span>
        <span class="hero-stats-chart-bar"></span>
        <span class="hero-stats-chart-bar"></span>
        <span class="hero-stats-chart-bar"></span>
      </div>

    </div>

    <div class="hero-stats-side">

      <div class="hero-stats-side-card">
        <strong>Clear proof</strong>
        <span>Statistics make the hero section stronger when the numbers are specific and believable.</span>
        <div class="hero-stats-progress">
          <i></i>
        </div>
      </div>

      <div class="hero-stats-side-card">
        <strong>Fast scanning</strong>
        <span>Visitors can understand the value before reading the full page.</span>
      </div>

    </div>

  </div>

</section>

CSS

.hero-stats-section{
width:min(100%,1120px);
display:grid;
gap:34px;
}

.hero-stats-top{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.78fr);
gap:38px;
align-items:end;
}

.hero-stats-content{
min-width:0;
}

.hero-stats-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-stats-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,78px);
line-height:.96;
font-weight:950;
letter-spacing:-.08em;
color:#0f172a;
}

.hero-stats-title span{
background:linear-gradient(90deg,#2563eb,#16a34a,#0f172a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-stats-text{
margin:0;
max-width:680px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-stats-actions{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:12px;
}

.hero-stats-button-primary,
.hero-stats-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-stats-button-primary{
background:linear-gradient(135deg,#2563eb,#16a34a);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.20);
}

.hero-stats-button-primary:hover,
.hero-stats-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(22,163,74,.23);
outline:none;
}

.hero-stats-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.hero-stats-button-secondary:hover,
.hero-stats-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-stats-bar{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}

.hero-stats-item{
position:relative;
padding:22px;
border-radius:26px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 24px 60px rgba(15,23,42,.09);
overflow:hidden;
}

.hero-stats-item::before{
content:"";
position:absolute;
right:-44px;
top:-44px;
width:120px;
height:120px;
border-radius:999px;
background:rgba(37,99,235,.08);
}

.hero-stats-item:nth-child(2)::before{
background:rgba(22,163,74,.08);
}

.hero-stats-item:nth-child(3)::before{
background:rgba(124,58,237,.08);
}

.hero-stats-item:nth-child(4)::before{
background:rgba(249,115,22,.08);
}

.hero-stats-number{
position:relative;
z-index:2;
display:block;
margin-bottom:8px;
font-size:clamp(32px,4vw,48px);
line-height:1;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.hero-stats-label{
position:relative;
z-index:2;
display:block;
font-size:14px;
line-height:1.5;
font-weight:800;
color:#64748b;
}

.hero-stats-visual{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.54fr);
gap:18px;
align-items:stretch;
}

.hero-stats-panel{
position:relative;
overflow:hidden;
padding:22px;
border-radius:34px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 34px 100px rgba(15,23,42,.22);
}

.hero-stats-panel::before{
content:"";
position:absolute;
width:300px;
height:300px;
right:-120px;
top:-120px;
border-radius:999px;
background:rgba(37,99,235,.24);
filter:blur(10px);
}

.hero-stats-panel-head{
position:relative;
z-index:2;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}

.hero-stats-panel-head h3{
margin:0;
font-size:24px;
line-height:1.16;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
}

.hero-stats-panel-head p{
margin:6px 0 0;
font-size:13px;
line-height:1.55;
font-weight:750;
color:#94a3b8;
}

.hero-stats-panel-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
padding:0 10px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.22);
color:#bbf7d0;
font-size:12px;
font-weight:900;
white-space:nowrap;
}

.hero-stats-chart{
position:relative;
z-index:2;
min-height:250px;
display:flex;
align-items:end;
gap:12px;
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
}

.hero-stats-chart-bar{
flex:1;
min-width:24px;
border-radius:14px 14px 8px 8px;
background:linear-gradient(180deg,#60a5fa,#2563eb);
box-shadow:0 18px 34px rgba(37,99,235,.22);
}

.hero-stats-chart-bar:nth-child(1){
height:34%;
}

.hero-stats-chart-bar:nth-child(2){
height:52%;
}

.hero-stats-chart-bar:nth-child(3){
height:44%;
}

.hero-stats-chart-bar:nth-child(4){
height:72%;
}

.hero-stats-chart-bar:nth-child(5){
height:62%;
}

.hero-stats-chart-bar:nth-child(6){
height:88%;
background:linear-gradient(180deg,#86efac,#16a34a);
box-shadow:0 18px 34px rgba(22,163,74,.22);
}

.hero-stats-side{
display:grid;
gap:18px;
}

.hero-stats-side-card{
padding:20px;
border-radius:28px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 24px 60px rgba(15,23,42,.09);
}

.hero-stats-side-card strong{
display:block;
margin-bottom:8px;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-stats-side-card span{
display:block;
font-size:14px;
line-height:1.6;
font-weight:750;
color:#64748b;
}

.hero-stats-progress{
height:12px;
margin-top:16px;
overflow:hidden;
border-radius:999px;
background:#e2e8f0;
}

.hero-stats-progress i{
display:block;
width:82%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#2563eb,#16a34a);
}

@media (max-width: 920px){
.hero-stats-top,
.hero-stats-visual{
grid-template-columns:1fr;
}

.hero-stats-actions{
justify-content:flex-start;
}

.hero-stats-bar{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width: 640px){
.hero-stats-title{
font-size:40px;
}

.hero-stats-text{
font-size:16px;
}

.hero-stats-actions{
align-items:stretch;
flex-direction:column;
}

.hero-stats-button-primary,
.hero-stats-button-secondary{
width:100%;
}

.hero-stats-bar{
grid-template-columns:1fr;
}

.hero-stats-panel{
padding:18px;
border-radius:26px;
}

.hero-stats-panel-head{
flex-direction:column;
}

.hero-stats-chart{
min-height:220px;
gap:8px;
padding:14px;
}
}

This hero section with stats is useful when credibility depends on measurable results. The large numbers make the value easy to scan, while the analytics panel supports the same message visually.

Use this pattern for SaaS homepages, agency landing pages, business service websites, startup pages, case study pages, B2B websites, and performance-focused product pages.

28. Hero Section with Trust Badges

A hero section with trust badges is designed to reduce doubt and make visitors feel safer before they click, sign up, request a quote, or buy. Trust badges can include customer logos, ratings, guarantees, secure checkout messages, certifications, awards, or review highlights.

This example uses a trust-first layout with a clean headline, CTA buttons, rating card, logo-style badge row, guarantee cards, and a testimonial panel. It works well for service businesses, SaaS, eCommerce, agencies, consultants, financial websites, and any landing page where trust affects conversion.

  • Perfect for service pages, SaaS, eCommerce, agencies, consultants, and landing pages
  • Includes headline, CTA buttons, review score, trust badges, and testimonial panel
  • Uses credibility as the main visual and conversion element
  • Responsive layout stacks cleanly on smaller screens
  • Uses HTML and CSS only
Hero Section with Trust Badges

Build confidence before visitors take the next step

Use this trust-focused hero section when reviews, guarantees, security, awards, customer logos, or proof points can help visitors feel safer before converting.

Get Started Read Reviews
Secure process Verified reviews No hidden fees
4.9 Average customer rating
★★★★★

“The trust signals made the offer feel clear, safe, and easy to understand before we even booked a call.”

Jordan Lee Verified customer
01
Secure checkout
02
Verified reviews
03
Money-back guarantee
04
Award-winning support
05
Trusted by teams
Reduce friction Trust badges help visitors feel more confident before they click or submit a form.
Show proof early Place ratings, reviews, guarantees, and credibility signals directly in the hero.
Support conversion Trust-focused layouts are especially useful for offers that need confidence.

HTML

<section class="hero-trust-section">

  <div class="hero-trust-main">

    <div class="hero-trust-content">

      <div class="hero-trust-kicker">Hero Section with Trust Badges</div>

      <h3 class="hero-trust-title">Build confidence before visitors <span>take the next step</span></h3>

      <p class="hero-trust-text">Use this trust-focused hero section when reviews, guarantees, security, awards, customer logos, or proof points can help visitors feel safer before converting.</p>

      <div class="hero-trust-actions">
        <a class="hero-trust-button-primary" href="#">Get Started</a>
        <a class="hero-trust-button-secondary" href="#">Read Reviews</a>
      </div>

      <div class="hero-trust-mini-proof">
        <span>Secure process</span>
        <span>Verified reviews</span>
        <span>No hidden fees</span>
      </div>

    </div>

    <div class="hero-trust-card">

      <div class="hero-trust-rating">

        <div class="hero-trust-score">
          <strong>4.9</strong>
          <span>Average customer rating</span>
        </div>

        <div class="hero-trust-stars">★★★★★</div>

      </div>

      <p class="hero-trust-quote">“The trust signals made the offer feel clear, safe, and easy to understand before we even booked a call.”</p>

      <div class="hero-trust-person">
        <div class="hero-trust-avatar"></div>
        <div>
          <strong>Jordan Lee</strong>
          <span>Verified customer</span>
        </div>
      </div>

    </div>

  </div>

  <div class="hero-trust-badges">

    <div class="hero-trust-badge">
      <div class="hero-trust-badge-icon">01</div>
      <strong>Secure checkout</strong>
    </div>

    <div class="hero-trust-badge">
      <div class="hero-trust-badge-icon">02</div>
      <strong>Verified reviews</strong>
    </div>

    <div class="hero-trust-badge">
      <div class="hero-trust-badge-icon">03</div>
      <strong>Money-back guarantee</strong>
    </div>

    <div class="hero-trust-badge">
      <div class="hero-trust-badge-icon">04</div>
      <strong>Award-winning support</strong>
    </div>

    <div class="hero-trust-badge">
      <div class="hero-trust-badge-icon">05</div>
      <strong>Trusted by teams</strong>
    </div>

  </div>

  <div class="hero-trust-bottom">

    <div class="hero-trust-guarantee">
      <strong>Reduce friction</strong>
      <span>Trust badges help visitors feel more confident before they click or submit a form.</span>
    </div>

    <div class="hero-trust-guarantee">
      <strong>Show proof early</strong>
      <span>Place ratings, reviews, guarantees, and credibility signals directly in the hero.</span>
    </div>

    <div class="hero-trust-guarantee">
      <strong>Support conversion</strong>
      <span>Trust-focused layouts are especially useful for offers that need confidence.</span>
    </div>

  </div>

</section>

CSS

.hero-trust-section{
width:min(100%,1120px);
display:grid;
gap:34px;
}

.hero-trust-main{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);
gap:42px;
align-items:center;
}

.hero-trust-content{
min-width:0;
}

.hero-trust-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#fef3c7;
color:#b45309;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-trust-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.08em;
color:#0f172a;
}

.hero-trust-title span{
background:linear-gradient(90deg,#b45309,#2563eb,#16a34a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-trust-text{
margin:0 0 28px;
max-width:680px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-trust-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-trust-button-primary,
.hero-trust-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-trust-button-primary{
background:#0f172a;
color:#ffffff;
box-shadow:0 18px 42px rgba(15,23,42,.18);
}

.hero-trust-button-primary:hover,
.hero-trust-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(15,23,42,.24);
outline:none;
}

.hero-trust-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.hero-trust-button-secondary:hover,
.hero-trust-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-trust-mini-proof{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.hero-trust-mini-proof span{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 30px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.hero-trust-mini-proof span::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.hero-trust-card{
position:relative;
padding:24px;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 32px 90px rgba(15,23,42,.14);
overflow:hidden;
}

.hero-trust-card::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(245,158,11,.10);
}

.hero-trust-rating{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding-bottom:18px;
margin-bottom:18px;
border-bottom:1px solid #e2e8f0;
}

.hero-trust-score{
display:grid;
gap:4px;
}

.hero-trust-score strong{
font-size:48px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}

.hero-trust-score span{
font-size:13px;
line-height:1.4;
font-weight:800;
color:#64748b;
}

.hero-trust-stars{
font-size:18px;
letter-spacing:2px;
color:#f59e0b;
white-space:nowrap;
}

.hero-trust-quote{
position:relative;
z-index:2;
margin:0 0 18px;
font-size:18px;
line-height:1.7;
font-weight:800;
color:#0f172a;
}

.hero-trust-person{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:12px;
}

.hero-trust-avatar{
width:48px;
height:48px;
border-radius:999px;
background:linear-gradient(135deg,#f59e0b,#2563eb);
}

.hero-trust-person strong{
display:block;
font-size:14px;
line-height:1.25;
font-weight:950;
color:#0f172a;
}

.hero-trust-person span{
display:block;
margin-top:2px;
font-size:13px;
line-height:1.35;
font-weight:750;
color:#64748b;
}

.hero-trust-badges{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:14px;
}

.hero-trust-badge{
min-height:98px;
display:grid;
place-items:center;
padding:16px;
border-radius:24px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 20px 46px rgba(15,23,42,.07);
text-align:center;
}

.hero-trust-badge-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
margin-bottom:10px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#2563eb;
font-size:13px;
font-weight:950;
}

.hero-trust-badge strong{
display:block;
font-size:13px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.hero-trust-bottom{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.hero-trust-guarantee{
padding:20px;
border-radius:26px;
background:#0f172a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 60px rgba(15,23,42,.16);
}

.hero-trust-guarantee:nth-child(2){
background:#ffffff;
border-color:#e2e8f0;
}

.hero-trust-guarantee:nth-child(3){
background:#ffffff;
border-color:#e2e8f0;
}

.hero-trust-guarantee strong{
display:block;
margin-bottom:8px;
font-size:20px;
line-height:1.2;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff;
}

.hero-trust-guarantee:nth-child(2) strong,
.hero-trust-guarantee:nth-child(3) strong{
color:#0f172a;
}

.hero-trust-guarantee span{
display:block;
font-size:14px;
line-height:1.6;
font-weight:750;
color:#cbd5e1;
}

.hero-trust-guarantee:nth-child(2) span,
.hero-trust-guarantee:nth-child(3) span{
color:#64748b;
}

@media (max-width: 920px){
.hero-trust-main{
grid-template-columns:1fr;
}

.hero-trust-badges{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.hero-trust-bottom{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.hero-trust-title{
font-size:40px;
}

.hero-trust-text{
font-size:16px;
}

.hero-trust-actions{
align-items:stretch;
flex-direction:column;
}

.hero-trust-button-primary,
.hero-trust-button-secondary{
width:100%;
}

.hero-trust-card{
padding:18px;
border-radius:26px;
}

.hero-trust-rating{
align-items:flex-start;
flex-direction:column;
}

.hero-trust-badges{
grid-template-columns:1fr;
}
}

This hero section with trust badges is useful when visitors need reassurance before taking action. The rating card, trust badges, guarantee cards, and proof points all support the main CTA without making the layout feel too sales-heavy.

Use this pattern for service websites, SaaS landing pages, eCommerce homepages, consultant pages, agency websites, financial websites, quote request pages, and any page where credibility affects conversion.

29. Hero Section with Product Mockup

A hero section with a product mockup is one of the most useful layouts for SaaS websites, apps, dashboards, digital products, and software landing pages. It shows the product context immediately and helps visitors understand what they are being asked to try, buy, or explore.

This example uses a product-first layout with a clean content column, CTA buttons, feature chips, and a large layered product mockup. The mockup is built with pure HTML and CSS, so it can be replaced with a real screenshot, app preview, dashboard image, or product UI later.

  • Perfect for SaaS websites, apps, dashboards, AI tools, and digital products
  • Includes headline, CTA buttons, feature chips, and a large product mockup
  • Uses a strong product-preview layout
  • Responsive design stacks cleanly on smaller screens
  • Uses HTML and CSS only
Hero Section with Product Mockup

Show your product clearly with a large interface preview

Use this product mockup hero section when the visitor should immediately understand what the app, dashboard, SaaS product, or digital tool looks like.

Start Free Trial Watch Demo
Dashboard preview Fast onboarding No credit card
Product context Use a mockup to show what users will get.
Replace later You can replace the CSS mockup with a real screenshot.

HTML

<section class="hero-mockup-section">

  <div class="hero-mockup-content">

    <div class="hero-mockup-kicker">Hero Section with Product Mockup</div>

    <h3 class="hero-mockup-title">Show your product clearly with a <span>large interface preview</span></h3>

    <p class="hero-mockup-text">Use this product mockup hero section when the visitor should immediately understand what the app, dashboard, SaaS product, or digital tool looks like.</p>

    <div class="hero-mockup-actions">
      <a class="hero-mockup-button-primary" href="#">Start Free Trial</a>
      <a class="hero-mockup-button-secondary" href="#">Watch Demo</a>
    </div>

    <div class="hero-mockup-chips">
      <span class="hero-mockup-chip">Dashboard preview</span>
      <span class="hero-mockup-chip">Fast onboarding</span>
      <span class="hero-mockup-chip">No credit card</span>
    </div>

  </div>

  <div class="hero-mockup-visual">

    <div class="hero-mockup-floating hero-mockup-floating-one">
      <strong>Product context</strong>
      <span>Use a mockup to show what users will get.</span>
    </div>

    <div class="hero-mockup-browser">

      <div class="hero-mockup-browser-top">

        <div class="hero-mockup-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="hero-mockup-address"></div>

      </div>

      <div class="hero-mockup-browser-body">

        <div class="hero-mockup-sidebar">

          <div class="hero-mockup-logo"></div>

          <div class="hero-mockup-menu">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>

        </div>

        <div class="hero-mockup-app">

          <div class="hero-mockup-app-head">

            <div class="hero-mockup-app-title">
              <span></span>
              <span></span>
            </div>

            <div class="hero-mockup-app-button"></div>

          </div>

          <div class="hero-mockup-metrics">
            <div class="hero-mockup-metric"></div>
            <div class="hero-mockup-metric"></div>
            <div class="hero-mockup-metric"></div>
          </div>

          <div class="hero-mockup-chart"></div>

          <div class="hero-mockup-list">
            <span></span>
            <span></span>
          </div>

        </div>

      </div>

    </div>

    <div class="hero-mockup-floating hero-mockup-floating-two">
      <strong>Replace later</strong>
      <span>You can replace the CSS mockup with a real screenshot.</span>
    </div>

  </div>

</section>

CSS

.hero-mockup-section{
width:min(100%,1120px);
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
gap:42px;
align-items:center;
}

.hero-mockup-content{
min-width:0;
}

.hero-mockup-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-mockup-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.08em;
color:#0f172a;
}

.hero-mockup-title span{
background:linear-gradient(90deg,#2563eb,#7c3aed,#0ea5e9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-mockup-text{
margin:0 0 28px;
max-width:650px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-mockup-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-mockup-button-primary,
.hero-mockup-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-mockup-button-primary{
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.22);
}

.hero-mockup-button-primary:hover,
.hero-mockup-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(124,58,237,.25);
outline:none;
}

.hero-mockup-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.hero-mockup-button-secondary:hover,
.hero-mockup-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-mockup-chips{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.hero-mockup-chip{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 30px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.hero-mockup-chip::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.hero-mockup-visual{
position:relative;
min-height:560px;
}

.hero-mockup-visual::before{
content:"";
position:absolute;
width:380px;
height:380px;
right:-70px;
top:40px;
border-radius:999px;
background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(124,58,237,.18));
filter:blur(8px);
}

.hero-mockup-browser{
position:absolute;
z-index:2;
right:0;
top:50%;
width:min(620px,100%);
overflow:hidden;
border-radius:34px;
background:#0f172a;
border:1px solid rgba(15,23,42,.16);
box-shadow:0 34px 100px rgba(15,23,42,.24);
transform:translateY(-50%);
}

.hero-mockup-browser-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px 18px;
background:#111827;
border-bottom:1px solid rgba(255,255,255,.10);
}

.hero-mockup-dots{
display:flex;
gap:7px;
}

.hero-mockup-dots span{
width:10px;
height:10px;
border-radius:999px;
background:#64748b;
}

.hero-mockup-dots span:nth-child(1){
background:#ef4444;
}

.hero-mockup-dots span:nth-child(2){
background:#f59e0b;
}

.hero-mockup-dots span:nth-child(3){
background:#22c55e;
}

.hero-mockup-address{
height:14px;
width:220px;
border-radius:999px;
background:rgba(255,255,255,.14);
}

.hero-mockup-browser-body{
display:grid;
grid-template-columns:190px minmax(0,1fr);
min-height:430px;
background:#020617;
}

.hero-mockup-sidebar{
padding:18px;
border-right:1px solid rgba(255,255,255,.10);
background:#0f172a;
}

.hero-mockup-logo{
width:44px;
height:44px;
border-radius:16px;
margin-bottom:20px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
box-shadow:0 16px 34px rgba(37,99,235,.24);
}

.hero-mockup-menu{
display:grid;
gap:10px;
}

.hero-mockup-menu span{
height:36px;
border-radius:14px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
}

.hero-mockup-menu span:first-child{
background:rgba(37,99,235,.20);
border-color:rgba(147,197,253,.24);
}

.hero-mockup-app{
padding:20px;
display:grid;
gap:16px;
}

.hero-mockup-app-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}

.hero-mockup-app-title{
display:grid;
gap:9px;
}

.hero-mockup-app-title span{
display:block;
height:12px;
border-radius:999px;
background:rgba(255,255,255,.20);
}

.hero-mockup-app-title span:nth-child(1){
width:190px;
}

.hero-mockup-app-title span:nth-child(2){
width:130px;
background:rgba(255,255,255,.12);
}

.hero-mockup-app-button{
width:118px;
height:38px;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
box-shadow:0 16px 34px rgba(37,99,235,.24);
}

.hero-mockup-metrics{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.hero-mockup-metric{
min-height:108px;
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.hero-mockup-metric::before{
content:"";
display:block;
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#38bdf8,#2563eb);
margin-bottom:14px;
}

.hero-mockup-metric::after{
content:"";
display:block;
height:10px;
width:70%;
border-radius:999px;
background:rgba(255,255,255,.28);
}

.hero-mockup-chart{
position:relative;
min-height:180px;
overflow:hidden;
border-radius:22px;
background:
linear-gradient(180deg,rgba(37,99,235,.20),transparent),
rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.hero-mockup-chart::before{
content:"";
position:absolute;
left:22px;
right:22px;
bottom:34px;
height:84px;
border-radius:24px;
background:
linear-gradient(135deg,transparent 8%,rgba(96,165,250,.88) 9%,rgba(96,165,250,.88) 12%,transparent 13%),
linear-gradient(45deg,transparent 30%,rgba(168,85,247,.82) 31%,rgba(168,85,247,.82) 34%,transparent 35%);
}

.hero-mockup-list{
display:grid;
gap:10px;
}

.hero-mockup-list span{
height:40px;
border-radius:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
}

.hero-mockup-floating{
position:absolute;
z-index:4;
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 56px rgba(15,23,42,.20);
}

.hero-mockup-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0f172a;
}

.hero-mockup-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#64748b;
}

.hero-mockup-floating-one{
left:0;
top:70px;
width:210px;
}

.hero-mockup-floating-two{
left:36px;
bottom:64px;
width:230px;
}

@media (max-width: 980px){
.hero-mockup-section{
grid-template-columns:1fr;
}

.hero-mockup-visual{
max-width:720px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.hero-mockup-title{
font-size:40px;
}

.hero-mockup-text{
font-size:16px;
}

.hero-mockup-actions{
align-items:stretch;
flex-direction:column;
}

.hero-mockup-button-primary,
.hero-mockup-button-secondary{
width:100%;
}

.hero-mockup-visual{
min-height:auto;
display:grid;
gap:16px;
}

.hero-mockup-browser,
.hero-mockup-floating,
.hero-mockup-floating-one,
.hero-mockup-floating-two{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
box-sizing:border-box;
transform:none;
}

.hero-mockup-browser{
border-radius:26px;
}

.hero-mockup-browser-body{
grid-template-columns:1fr;
}

.hero-mockup-sidebar{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.10);
}

.hero-mockup-menu{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.hero-mockup-app-head{
align-items:flex-start;
flex-direction:column;
}

.hero-mockup-metrics{
grid-template-columns:1fr;
}
}

This hero section with product mockup is useful when the product interface is one of the strongest selling points. Visitors can see the product context immediately, while the text and CTA buttons explain what action to take next.

Use this pattern for SaaS websites, app landing pages, dashboard tools, AI tools, analytics platforms, digital products, software homepages, and product launch pages.

30. Complete Responsive Hero Layout

A complete responsive hero layout combines the most useful hero section elements into one flexible pattern: clear headline, short supporting text, CTA buttons, trust signals, feature highlights, visual preview, and mobile-friendly structure.

This final example is designed as a complete all-purpose hero section that can be adapted for SaaS, agency websites, service businesses, product pages, portfolios, and modern homepages. It uses a balanced layout with content, proof, cards, and a visual dashboard area.

  • Perfect as a reusable homepage or landing page hero layout
  • Includes headline, CTA buttons, trust signals, features, and visual preview
  • Combines several best practices from the previous examples
  • Responsive structure works well across desktop, tablet, and mobile
  • Uses HTML and CSS only
Complete Responsive Hero Layout

A complete hero layout for modern responsive websites

Use this complete responsive hero layout as a reusable starting point for homepages, SaaS pages, agencies, service businesses, portfolios, and product landing pages.

Start Building View Full Layout
Responsive structure Conversion focused Reusable design
All-in-one layout Combine headline, proof, CTA, features, and visual context.
Website System Responsive hero preview
Live layout
Main section
Growth
Performance
100% Responsive
3 CTA areas
Fast HTML and CSS
01
Clear hierarchy The headline, text, CTA buttons, and proof elements are easy to scan.
02
Visual context The dashboard-style preview gives the hero section a clear product or service feeling.
03
Mobile ready The layout stacks cleanly so visitors can understand the message on any screen.

HTML

<section class="hero-complete-section">

  <div class="hero-complete-top">

    <div class="hero-complete-content">

      <div class="hero-complete-kicker">
        <span class="hero-complete-kicker-dot"></span>
        Complete Responsive Hero Layout
      </div>

      <h3 class="hero-complete-title">A complete hero layout for <span>modern responsive websites</span></h3>

      <p class="hero-complete-text">Use this complete responsive hero layout as a reusable starting point for homepages, SaaS pages, agencies, service businesses, portfolios, and product landing pages.</p>

      <div class="hero-complete-actions">
        <a class="hero-complete-button-primary" href="#">Start Building</a>
        <a class="hero-complete-button-secondary" href="#">View Full Layout</a>
      </div>

      <div class="hero-complete-proof">
        <span class="hero-complete-proof-item">Responsive structure</span>
        <span class="hero-complete-proof-item">Conversion focused</span>
        <span class="hero-complete-proof-item">Reusable design</span>
      </div>

    </div>

    <div class="hero-complete-visual">

      <div class="hero-complete-floating">
        <strong>All-in-one layout</strong>
        <span>Combine headline, proof, CTA, features, and visual context.</span>
      </div>

      <div class="hero-complete-dashboard">

        <div class="hero-complete-dashboard-head">

          <div class="hero-complete-dashboard-brand">
            <div class="hero-complete-dashboard-logo"></div>
            <div>
              <strong>Website System</strong>
              <span>Responsive hero preview</span>
            </div>
          </div>

          <span class="hero-complete-dashboard-pill">Live layout</span>

        </div>

        <div class="hero-complete-dashboard-body">

          <div class="hero-complete-dashboard-hero">

            <div class="hero-complete-dashboard-card hero-complete-dashboard-card-dark">
              <span class="hero-complete-card-label">Main section</span>
              <div class="hero-complete-card-title"></div>
              <div class="hero-complete-card-line"></div>
              <div class="hero-complete-card-line"></div>
            </div>

            <div class="hero-complete-dashboard-card">
              <span class="hero-complete-card-label">Growth</span>
              <div class="hero-complete-card-title"></div>
              <div class="hero-complete-card-line"></div>
              <div class="hero-complete-card-line"></div>
            </div>

          </div>

          <div class="hero-complete-dashboard-card">
            <span class="hero-complete-card-label">Performance</span>
            <div class="hero-complete-chart">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>

          <div class="hero-complete-metrics">

            <div class="hero-complete-metric">
              <strong>100%</strong>
              <span>Responsive</span>
            </div>

            <div class="hero-complete-metric">
              <strong>3</strong>
              <span>CTA areas</span>
            </div>

            <div class="hero-complete-metric">
              <strong>Fast</strong>
              <span>HTML and CSS</span>
            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <div class="hero-complete-bottom">

    <div class="hero-complete-feature">
      <div class="hero-complete-feature-icon">01</div>
      <strong>Clear hierarchy</strong>
      <span>The headline, text, CTA buttons, and proof elements are easy to scan.</span>
    </div>

    <div class="hero-complete-feature">
      <div class="hero-complete-feature-icon">02</div>
      <strong>Visual context</strong>
      <span>The dashboard-style preview gives the hero section a clear product or service feeling.</span>
    </div>

    <div class="hero-complete-feature">
      <div class="hero-complete-feature-icon">03</div>
      <strong>Mobile ready</strong>
      <span>The layout stacks cleanly so visitors can understand the message on any screen.</span>
    </div>

  </div>

</section>

CSS

.hero-complete-section{
width:min(100%,1120px);
display:grid;
gap:28px;
}

.hero-complete-top{
display:grid;
grid-template-columns:minmax(0,.94fr) minmax(360px,1.06fr);
gap:42px;
align-items:center;
}

.hero-complete-content{
min-width:0;
}

.hero-complete-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:#ecfdf5;
color:#047857;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.hero-complete-kicker-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.hero-complete-title{
margin:0 0 18px;
font-size:clamp(42px,6vw,76px);
line-height:.96;
font-weight:950;
letter-spacing:-.08em;
color:#0f172a;
}

.hero-complete-title span{
background:linear-gradient(90deg,#2563eb,#16a34a,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-complete-text{
margin:0 0 28px;
max-width:660px;
font-size:17px;
line-height:1.8;
color:#475569;
}

.hero-complete-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:26px;
}

.hero-complete-button-primary,
.hero-complete-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border-radius:999px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.hero-complete-button-primary{
background:linear-gradient(135deg,#2563eb,#16a34a);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.20);
}

.hero-complete-button-primary:hover,
.hero-complete-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(22,163,74,.23);
outline:none;
}

.hero-complete-button-secondary{
background:#ffffff;
border:1px solid #dbe3ef;
color:#0f172a;
box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.hero-complete-button-secondary:hover,
.hero-complete-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
border-color:#cbd5e1;
outline:none;
}

.hero-complete-proof{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.hero-complete-proof-item{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
padding:0 12px;
border-radius:999px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 30px rgba(15,23,42,.06);
color:#475569;
font-size:13px;
font-weight:850;
}

.hero-complete-proof-item::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.hero-complete-visual{
position:relative;
min-height:560px;
}

.hero-complete-visual::before{
content:"";
position:absolute;
width:380px;
height:380px;
right:-70px;
top:48px;
border-radius:999px;
background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(34,197,94,.14));
filter:blur(8px);
}

.hero-complete-dashboard{
position:relative;
z-index:2;
overflow:hidden;
border-radius:34px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 34px 100px rgba(15,23,42,.16);
}

.hero-complete-dashboard-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px;
border-bottom:1px solid #e2e8f0;
background:#ffffff;
}

.hero-complete-dashboard-brand{
display:flex;
align-items:center;
gap:12px;
}

.hero-complete-dashboard-logo{
width:42px;
height:42px;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#16a34a);
}

.hero-complete-dashboard-brand strong{
display:block;
font-size:14px;
line-height:1.25;
font-weight:950;
color:#0f172a;
}

.hero-complete-dashboard-brand span{
display:block;
margin-top:2px;
font-size:12px;
line-height:1.35;
font-weight:750;
color:#64748b;
}

.hero-complete-dashboard-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:0 12px;
border-radius:999px;
background:#ecfdf5;
color:#047857;
font-size:12px;
font-weight:900;
}

.hero-complete-dashboard-body{
padding:20px;
display:grid;
gap:16px;
background:#f8fafc;
}

.hero-complete-dashboard-hero{
display:grid;
grid-template-columns:1fr .72fr;
gap:16px;
}

.hero-complete-dashboard-card{
padding:18px;
border-radius:24px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 18px 42px rgba(15,23,42,.06);
}

.hero-complete-dashboard-card-dark{
background:#0f172a;
border-color:rgba(255,255,255,.10);
}

.hero-complete-card-label{
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:#eff6ff;
color:#1d4ed8;
font-size:12px;
font-weight:900;
margin-bottom:14px;
}

.hero-complete-dashboard-card-dark .hero-complete-card-label{
background:rgba(37,99,235,.18);
color:#bfdbfe;
}

.hero-complete-card-title{
height:18px;
width:78%;
border-radius:999px;
background:#0f172a;
margin-bottom:10px;
}

.hero-complete-dashboard-card-dark .hero-complete-card-title{
background:#ffffff;
}

.hero-complete-card-line{
height:10px;
width:92%;
border-radius:999px;
background:#cbd5e1;
margin-bottom:8px;
}

.hero-complete-dashboard-card-dark .hero-complete-card-line{
background:rgba(255,255,255,.24);
}

.hero-complete-card-line:nth-of-type(3){
width:62%;
}

.hero-complete-chart{
height:150px;
display:flex;
align-items:end;
gap:10px;
padding:14px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
margin-top:16px;
}

.hero-complete-chart span{
flex:1;
border-radius:12px 12px 7px 7px;
background:linear-gradient(180deg,#60a5fa,#2563eb);
}

.hero-complete-chart span:nth-child(1){
height:38%;
}

.hero-complete-chart span:nth-child(2){
height:58%;
}

.hero-complete-chart span:nth-child(3){
height:46%;
}

.hero-complete-chart span:nth-child(4){
height:82%;
background:linear-gradient(180deg,#86efac,#16a34a);
}

.hero-complete-metrics{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.hero-complete-metric{
padding:16px;
border-radius:22px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 18px 42px rgba(15,23,42,.06);
}

.hero-complete-metric strong{
display:block;
margin-bottom:4px;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.hero-complete-metric span{
display:block;
font-size:13px;
line-height:1.45;
font-weight:750;
color:#64748b;
}

.hero-complete-floating{
position:absolute;
left:0;
bottom:58px;
z-index:4;
width:230px;
padding:16px;
border-radius:22px;
background:#0f172a;
box-shadow:0 24px 56px rgba(15,23,42,.22);
}

.hero-complete-floating strong{
display:block;
margin-bottom:5px;
font-size:17px;
line-height:1.2;
font-weight:950;
color:#ffffff;
}

.hero-complete-floating span{
display:block;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#cbd5e1;
}

.hero-complete-bottom{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.hero-complete-feature{
padding:20px;
border-radius:26px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 24px 60px rgba(15,23,42,.07);
}

.hero-complete-feature-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
margin-bottom:14px;
border-radius:16px;
background:#eff6ff;
color:#1d4ed8;
font-size:13px;
font-weight:950;
}

.hero-complete-feature strong{
display:block;
margin-bottom:7px;
font-size:19px;
line-height:1.2;
font-weight:950;
letter-spacing:-.035em;
color:#0f172a;
}

.hero-complete-feature span{
display:block;
font-size:14px;
line-height:1.6;
font-weight:750;
color:#64748b;
}

@media (max-width: 980px){
.hero-complete-top{
grid-template-columns:1fr;
}

.hero-complete-visual{
max-width:720px;
width:100%;
margin:0 auto;
}

.hero-complete-bottom{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.hero-complete-title{
font-size:40px;
}

.hero-complete-text{
font-size:16px;
}

.hero-complete-actions{
align-items:stretch;
flex-direction:column;
}

.hero-complete-button-primary,
.hero-complete-button-secondary{
width:100%;
}

.hero-complete-visual{
min-height:auto;
display:grid;
gap:16px;
}

.hero-complete-dashboard{
border-radius:26px;
}

.hero-complete-dashboard-head{
align-items:flex-start;
flex-direction:column;
}

.hero-complete-dashboard-hero,
.hero-complete-metrics{
grid-template-columns:1fr;
}

.hero-complete-floating{
position:relative;
left:auto;
bottom:auto;
width:auto;
box-sizing:border-box;
}

.hero-complete-chart{
height:130px;
}
}

This complete responsive hero layout is useful as a final reusable pattern because it combines the most important hero section elements: clear headline, short explanation, CTA buttons, proof signals, visual context, and feature cards.

Use this pattern for modern homepages, SaaS landing pages, service business websites, agency websites, product pages, portfolio websites, startup pages, and reusable website section libraries.

Hero Section Best Practices

A modern hero section should do more than look attractive. It should help visitors understand the page quickly, trust the website, and know what to do next. The best hero sections combine strong visual design with clear messaging, responsive structure, fast loading, and a focused call-to-action.

Use these best practices when adapting the hero section examples from this guide into real websites, WordPress themes, landing pages, SaaS pages, portfolios, service websites, and client projects.

Keep the Main Message Clear

The headline should explain the main value of the page as quickly as possible. A hero section has only a few seconds to make sense, so avoid vague headlines that sound stylish but do not tell visitors what the website actually offers.

A strong hero headline usually answers one of these questions:

  • What does this product or service help users do?
  • Who is this website for?
  • What problem does this page solve?
  • Why should the visitor continue reading?

For example, a SaaS hero section should explain the software benefit, a business hero section should explain the service, and an eCommerce hero section should make the product or offer clear.

Use One Strong Primary CTA

Most hero sections should have one primary call-to-action. This button should be visually stronger than secondary links and should match the main goal of the page.

Good hero section CTA examples include Start Free Trial, Request a Quote, Book a Demo, Shop Collection, View Portfolio, Read Latest Posts, or Get Started.

A secondary button can be useful, but it should support the main action. For example, a SaaS hero may use Start Free Trial as the main button and Watch Demo as the secondary button.

Make the Visual Match the Offer

The hero visual should support the message. A beautiful design is helpful, but the image, mockup, video, illustration, card layout, or background should also make the page easier to understand.

For example, a dashboard product can use a product mockup, a travel website can use an inspiring destination-style visual, a restaurant can show food or atmosphere, and a lead generation page can put the form directly inside the hero section.

If the visual does not support the message, the hero section may look polished but still feel confusing.

Use Trust Signals Carefully

Trust signals can make a hero section more convincing, especially on service pages, SaaS landing pages, product pages, quote request pages, and eCommerce websites. These signals can include ratings, customer counts, review snippets, guarantees, secure checkout badges, years of experience, client logos, or performance numbers.

However, trust signals should not overload the hero. Add only the proof points that help visitors feel more confident. A small rating card, short review line, or compact badge row is often enough.

Design for Mobile First

Hero sections often look impressive on desktop, but mobile is where many problems appear. Large headings, big images, mockups, videos, floating cards, and wide two-column layouts can become too tall or crowded on smaller screens.

On mobile, hero sections usually work better when:

  • The layout stacks into one column
  • The headline is shorter or reduced in size
  • CTA buttons become full-width and easy to tap
  • Decorative floating cards are simplified
  • The visual area does not push important content too far down
  • Background images or videos keep enough contrast behind text

A mobile hero section should still feel modern, but it should not block users from reaching the rest of the page.

Keep Hero Sections Fast

Hero sections often contain the largest visual elements on a page. If the hero uses large images, background videos, animation libraries, heavy fonts, or unoptimized assets, it can slow down the first screen.

For faster hero sections, compress images, use modern formats like WebP where possible, avoid unnecessary JavaScript, keep video backgrounds short and optimized, and avoid loading huge design assets above the fold.

Many of the examples in this guide use CSS-based visuals so the layout can feel modern without depending on large image files.

Check Text Contrast

Text contrast is one of the most important hero section details. If visitors cannot read the headline and CTA clearly, the hero section fails even if the design looks beautiful.

When using image backgrounds, video backgrounds, gradients, or dark layouts, add overlays, shadows, cards, blur layers, or stronger text colors. The headline, supporting text, and main button should always be easy to read.

Match the Hero to the Page Goal

A homepage hero, SaaS hero, portfolio hero, product hero, blog hero, and lead generation hero should not all use the same structure. The layout should match the goal of the page.

If the goal is email signup, place the signup form in the hero. If the goal is product understanding, show a product mockup. If the goal is trust, use ratings and badges. If the goal is reading content, highlight the main article or categories.

Common Hero Section Mistakes

Even a small hero section mistake can make a website feel less professional or harder to understand. The hero area is often the first impression, so clarity, spacing, performance, and responsive behavior matter a lot.

Here are common mistakes to avoid when designing modern website hero sections.

Using a Vague Headline

A vague headline may look stylish, but it can leave visitors confused. Phrases like “Build the Future” or “Experience Innovation” may sound modern, but they do not explain what the website offers.

Instead, write a headline that clearly explains the benefit, service, product, or outcome. Visitors should not need to scroll to understand what the page is about.

Adding Too Many CTAs

Too many buttons can make a hero section feel unfocused. If every button looks important, users may not know what to click first.

Use one primary CTA and one optional secondary action. Make the main button visually stronger and keep the secondary button quieter.

Using a Background That Makes Text Hard to Read

Hero sections with large images, video backgrounds, and colorful gradients can look impressive, but they often create contrast problems. If the text blends into the background, visitors may skip the message.

Use overlays, dark gradients, light cards, text shadows, or stronger color contrast to keep the headline readable.

Making the Hero Too Tall on Mobile

A desktop hero can be large and spacious, but on mobile it should not become a long wall of content. If visitors need to scroll too much before they see the next section, the page can feel slow and heavy.

Reduce decorative elements on mobile, stack columns cleanly, make buttons easier to tap, and keep the first screen focused.

Using Heavy Video Without Optimization

Video background hero sections can create atmosphere, but they can also slow down the page. Large videos are especially risky on mobile connections.

If you use video, keep it short, compressed, muted, and subtle. Add a poster image, make sure text remains readable, and consider disabling or replacing video on mobile if performance becomes a problem.

Putting Too Much Information Above the Fold

The hero section should introduce the page, not explain everything. Too many badges, cards, paragraphs, stats, icons, and buttons can make the first screen feel crowded.

Move detailed explanations, feature lists, FAQs, testimonials, and comparisons into sections below the hero. Keep the hero focused on the main message and next action.

Forgetting Accessibility

A hero section should be usable by keyboard users, screen reader users, mobile users, and people with low vision. Use readable contrast, proper heading structure, accessible button labels, and avoid motion that cannot be paused when it may distract users.

If the hero includes a video or animated background, a pause control can make the section more user-friendly.

FAQ: Website Hero Sections

What is a hero section on a website?

A hero section is the main top area of a web page, usually placed below the navigation menu. It introduces the page, explains the main message, and guides visitors toward an action such as signing up, requesting a quote, shopping, reading, or exploring more content.

What should a hero section include?

A strong hero section usually includes a clear headline, short supporting text, one primary CTA button, an optional secondary link, and a visual element such as an image, product mockup, illustration, background video, gradient, or card layout. Depending on the page, it can also include trust badges, ratings, statistics, or a form.

How tall should a hero section be?

There is no single correct height for every hero section. Many desktop hero sections use a large first screen, while mobile hero sections should often be shorter and more focused. The hero should be tall enough to create impact, but not so tall that it hides the rest of the page or makes users scroll unnecessarily.

Are video background hero sections good?

Video background hero sections can work well when the video supports the message, loads quickly, and does not make the text hard to read. They are best for brands, hotels, portfolios, events, campaigns, and storytelling pages. Use compressed video, a poster image, a readable overlay, and a pause option when possible.

Should a hero section have one or two buttons?

Most hero sections work best with one primary button and one optional secondary button. The primary button should match the most important page goal, while the secondary button can support users who need more information before taking action.

What is the best hero section layout for SaaS websites?

SaaS hero sections often work well with a clear product headline, trial or demo CTA, short benefit-focused text, trust signals, and a dashboard or product mockup. The visual should help users understand what the software does before they scroll further.

What is the best hero section layout for business websites?

Business websites usually need a clear service headline, trust-building text, a quote or consultation CTA, and credibility signals such as years of experience, customer reviews, project numbers, or service highlights. The layout should feel professional and easy to understand.

Can I use these hero section examples in WordPress?

Yes. These hero section examples can be adapted for WordPress themes, custom blocks, Gutenberg HTML blocks, page templates, landing pages, and client websites. You can copy the HTML and CSS, then adjust the class names, colors, spacing, content, images, and CTA links to match your website.

How do I make a hero section responsive?

Use flexible layouts, CSS Grid or Flexbox, fluid widths, media queries, readable font sizes, and mobile-friendly button sizes. On smaller screens, two-column hero sections should usually stack into one column, and large visual elements should be simplified or resized.

Do hero sections help with SEO?

A hero section can support SEO indirectly by improving clarity, user experience, engagement, and page structure. The main SEO value comes from a clear H1, relevant page copy, fast loading, internal links, readable content, and a page that satisfies the search intent. A visually strong hero should support the content, not replace it.

Conclusion: Build Hero Sections That Are Clear, Responsive, and Conversion-Focused

Modern website hero sections are one of the most important parts of a professional web page. They shape the first impression, introduce the main message, guide users toward the next action, and help the website feel more polished and trustworthy.

In this guide, we covered 30 practical hero section examples, including homepage heroes, business heroes, SaaS product heroes, app landing page heroes, startup heroes, agency heroes, portfolio heroes, eCommerce heroes, restaurant heroes, travel heroes, lead generation heroes, video background heroes, split screen heroes, fullscreen image heroes, gradient heroes, glassmorphism heroes, dark mode heroes, minimal heroes, stats heroes, trust badge heroes, product mockup heroes, and a complete responsive hero layout.

You can use these examples as starting points for real projects. Copy the structure, adjust the text, replace the visual elements, change the colors, connect the CTA buttons, and adapt the layout to your own website, WordPress theme, landing page, product page, service page, portfolio, or client project.

The most important thing is not to make the hero section complicated. A strong hero section should be clear, fast, responsive, readable, and connected to the goal of the page. When the headline, supporting text, visual, trust signals, and CTA all work together, the first screen becomes much more effective.

For best results, combine these hero section examples with reusable navigation menus, modern CSS forms, layout patterns, and other website UI components. That way, the hero section becomes part of a complete and consistent website design system.

Recommended Tool

Need fast hosting for WordPress hero sections, landing pages, and code-heavy tutorials?

Modern hero sections often use large visuals, CSS effects, responsive layouts, and many code examples. If you build WordPress websites, client projects, landing pages, or content-heavy blogs, fast managed hosting can help improve performance, security, and long-term maintenance.

Explore Kinsta Hosting
Kinsta managed WordPress hosting
Next Guides

Continue Building Modern Website Sections

After designing a strong hero section, the next step is to build the rest of the page around it. These related guides help you create navigation, forms, layouts, and reusable UI patterns for modern websites.

01 Navigation 25 Modern CSS Navigation Menus for Websites

Build responsive navbars, sticky headers, dropdown menus, mega menus, hamburger menus, sidebars, breadcrumbs, and complete website headers.

Read navigation guide 02 Forms 30 Modern CSS Forms for Websites

Create contact forms, login forms, signup forms, quote request forms, checkout forms, booking forms, newsletter forms, and complete responsive form layouts.

Read forms guide 03 Layouts 25 Modern CSS Layouts for Websites

Explore Grid, Flexbox, product grids, pricing tables, comparison layouts, bento grids, dashboard layouts, landing page sections, and container queries.

Read layouts guide 04 More Guides More Website Design Tutorials

Browse more practical CSS, UI design, WordPress, frontend, layout, navigation, and website building tutorials for modern website projects.

View all tutorials
]]> https://veebilehed24.ee/en/blog/css-effects/modern-website-hero-sections/feed/ 0 30 Modern CSS Forms for Websites – Contact, Login, Checkout & UI Form Examples https://veebilehed24.ee/en/blog/css-effects/modern-css-forms/ https://veebilehed24.ee/en/blog/css-effects/modern-css-forms/#respond Thu, 21 May 2026 04:59:12 +0000 https://veebilehed24.ee/?p=1301 Modern CSS forms are one of the most important UI elements on any professional website. A good form helps visitors contact a business, create an account, sign in, subscribe to a newsletter, request a quote, book an appointment, complete checkout, submit feedback, or filter products with less friction.

Forms may look simple at first, but they have a direct impact on user experience, trust, conversions, and accessibility. A form that is hard to read, crowded, confusing, or difficult to use on mobile can stop visitors from taking action. A clean and responsive CSS form makes the website feel more polished, easier to use, and more professional.

Modern form design is not only about adding rounded corners, shadows, gradients, or nice buttons. A strong form layout should also use clear labels, readable input fields, helpful spacing, visible focus states, mobile-friendly tap targets, and a logical structure that guides the user from the first field to the final submit button.

In this guide, we showcase 30 modern CSS forms for websites. These examples include contact forms, login forms, signup forms, newsletter forms, search forms, quote request forms, checkout forms, booking forms, support ticket forms, feedback forms, file upload forms, floating label forms, dark mode forms, glassmorphism forms, product filter forms, payment card forms, and complete responsive form layouts.

Each example includes a live preview and visible code blocks, so you can see exactly how the form is built. Most examples use HTML and CSS only, while interactive patterns such as multi-step forms or star ratings include small JavaScript snippets where needed.

These form examples are designed as practical UI patterns that you can copy, customize, and reuse in real projects, including business websites, WordPress themes, landing pages, SaaS websites, eCommerce stores, dashboards, portfolios, blogs, and client websites.

Table of Contents

Kinsta hosting

What Are Modern CSS Forms?

Modern CSS forms are website forms that use HTML for structure and CSS for layout, spacing, colors, typography, borders, buttons, focus states, responsive behavior, and visual design. They help users enter information clearly and submit it through a clean, easy-to-use interface.

A form can be as simple as a single newsletter email field or as advanced as a multi-step checkout flow with grouped inputs, radio buttons, checkboxes, dropdowns, file uploads, validation messages, and progress indicators.

The HTML creates the form fields, labels, buttons, and input types. CSS controls how everything looks and responds across different screen sizes. JavaScript is only needed when the form requires extra interaction, such as opening steps, updating selected ratings, previewing uploaded files, or showing dynamic validation feedback.

A well-designed CSS form should be easy to understand before the user starts typing. Labels should be clear, fields should be large enough to use on mobile, buttons should stand out, and the layout should guide the user naturally through the form.

Common CSS form elements include:

  • Text inputs for names, titles, and short answers
  • Email, phone, password, date, number, and search fields
  • Textarea fields for longer messages or descriptions
  • Select dropdowns, checkboxes, radio buttons, and toggles
  • Submit buttons, secondary buttons, and call-to-action buttons
  • Floating labels, helper text, error messages, and success states
  • File upload areas, payment card fields, and filter controls

The best modern forms are not only attractive. They are also readable, accessible, responsive, fast to complete, and easy to maintain.

Why Form Design Matters for Websites

Form design matters because forms are often the point where a visitor becomes a lead, customer, subscriber, member, or active user. A website can have strong content and beautiful visuals, but if the form is hard to complete, many users will stop before submitting it.

A contact form can decide whether a business receives a new inquiry. A checkout form can affect online sales. A signup form can influence account creation. A newsletter form can grow an email list. A quote request form can turn a visitor into a potential client.

Good CSS form design helps users understand what information is needed, where to enter it, and what action they are about to take. Clear spacing, consistent input styles, strong button hierarchy, and helpful labels make the form feel easier and more trustworthy.

Modern form design helps with:

  • User experience: forms are easier to read, complete, and submit.
  • Conversions: better forms can encourage more inquiries, signups, bookings, and purchases.
  • Mobile usability: fields and buttons remain easy to tap on smaller screens.
  • Accessibility: labels, focus states, and readable contrast help more people use the form.
  • Trust: a polished form makes the website feel more professional and reliable.
  • Clarity: users can quickly understand what each field is asking for.

A form should never feel like an obstacle. It should feel like a simple and natural step in the user journey.

Common Types of Website Forms

Different websites need different form patterns. A blog may only need a search form and newsletter signup form, while a business website may need contact forms, quote request forms, booking forms, and support forms. An eCommerce website may need checkout forms, product filters, login forms, account forms, and payment UI layouts.

Before designing a form, think about the user’s goal. A short newsletter form should be fast and minimal. A checkout form should feel secure and organized. A quote request form may need grouped fields and enough space for project details. A multi-step form can help when the form contains many questions.

Contact Forms

Contact forms are used on business websites, portfolios, agency websites, service pages, blogs, and landing pages. They usually collect a name, email address, subject, and message. A good contact form should be short, clear, and easy to submit.

Login and Signup Forms

Login and signup forms are common in SaaS websites, dashboards, membership websites, web apps, online stores, and account areas. These forms should be simple, secure-looking, and easy to understand, with clear password fields, helper links, and strong call-to-action buttons.

Newsletter Forms

Newsletter forms are often placed inside blog posts, footers, popups, sidebars, landing pages, and call-to-action sections. They should usually be short, because the goal is to collect an email address with as little friction as possible.

Checkout and Payment Forms

Checkout forms need to feel organized and trustworthy. They may include contact details, shipping information, billing fields, payment card UI, order notes, coupon fields, and an order summary. A clean checkout layout can make the buying process feel easier and more reliable.

Booking and Appointment Forms

Booking forms are useful for salons, clinics, consultants, agencies, hotels, restaurants, event websites, and service businesses. They often include date fields, time fields, service selection, contact details, and optional message fields.

Feedback, Survey, and Review Forms

Feedback forms help collect user opinions, ratings, reviews, and suggestions. These forms may include star ratings, radio buttons, textareas, satisfaction scales, or multiple-choice questions. They should feel lightweight and quick to complete.

Search and Filter Forms

Search and filter forms help users narrow down content, products, blog posts, listings, services, categories, or resources. These forms are especially useful for eCommerce websites, directories, real estate websites, job boards, documentation pages, and large blogs.

CSS Form Design Principles

Modern CSS form design should balance visual style with usability. A form can look impressive, but it still needs to be easy to read, easy to complete, and clear on every device. The best forms usually feel simple, even when the design is carefully crafted.

Use these principles when designing forms for real websites:

Use Clear Labels

Every important field should have a clear label. Placeholder text can help, but it should not replace labels in forms where clarity and accessibility matter. Labels help users understand what information is required, even after they start typing.

Keep Enough Spacing Between Fields

Forms need breathing room. Good spacing makes fields easier to scan and reduces mistakes. Inputs, labels, helper text, and buttons should not feel cramped, especially on mobile screens.

Make Inputs Easy to Tap on Mobile

Mobile users need larger tap targets and comfortable field heights. Small inputs, tiny checkboxes, and narrow buttons make forms harder to complete on phones. A responsive form should stay readable and touch-friendly at every screen size.

Use Visible Focus States

Focus states show which field is currently active. This is important for keyboard users, accessibility, and general usability. A modern form should make active fields obvious with a border, outline, glow, background change, or another clear visual cue.

Group Related Fields

If a form has many fields, group related information together. For example, checkout forms can separate contact details, shipping details, billing details, and payment information. Grouping makes long forms easier to understand.

Make the Submit Button Clear

The main button should clearly explain the action. Labels like “Send Message”, “Create Account”, “Request Quote”, “Book Appointment”, or “Complete Order” are usually better than a generic “Submit”.

Design Helpful Error and Success States

Users should understand what went wrong and how to fix it. Error messages should be clear, specific, and placed close to the relevant field. Success states should confirm that the form was submitted or that the next step is complete.

Do Not Add Unnecessary Fields

Every extra field adds friction. Ask only for information that is truly needed. Shorter forms are usually easier to complete, while longer forms should be split into sections or steps when it improves clarity.

With these basics in mind, let’s look at practical form examples that you can use as starting points for real website projects.

30 Modern CSS Form Examples

The following examples show practical CSS form patterns for modern websites. Each example includes a live preview and visible HTML/CSS code, so you can copy the structure, adjust the styling, and reuse the pattern in your own website, WordPress theme, landing page, dashboard, or client project.

Some forms are simple and use only HTML and CSS. More interactive examples include a small JavaScript snippet when it improves the user experience, such as multi-step navigation or clickable rating behavior.

1. Modern Contact Form

A modern contact form is one of the most useful form patterns for business websites, landing pages, portfolios, agencies, freelancers, and service pages. It gives visitors a simple way to send a message, request information, or start a conversation with the website owner.

This example uses a clean card layout, clear labels, large input fields, soft shadows, rounded corners, and a strong call-to-action button. The form is designed to feel professional without becoming complicated or visually heavy.

  • Perfect for business websites, portfolios, agencies, and service pages
  • Uses clear labels instead of relying only on placeholder text
  • Includes responsive spacing and mobile-friendly input sizes
  • Works with HTML and CSS only
  • Easy to customize with your own colors, fields, and button text
Contact Form

Let’s talk about your project

Send a short message and we will get back to you with the next steps, answers, or a custom quote.

i Keep your message short and clear. Add your project goal, timeline, and any important details.

HTML

<div class="form-contact-card">

  <div class="form-contact-header">
    <div class="form-contact-kicker">Contact Form</div>
    <h3 class="form-contact-title">Let’s talk about your project</h3>
    <p class="form-contact-text">Send a short message and we will get back to you with the next steps, answers, or a custom quote.</p>
  </div>

  <form class="form-contact-form" action="#" method="post">

    <div class="form-contact-grid">

      <div class="form-contact-field">
        <label class="form-contact-label" for="contact-name">Full name</label>
        <input class="form-contact-input" id="contact-name" type="text" name="name" placeholder="Jane Cooper">
      </div>

      <div class="form-contact-field">
        <label class="form-contact-label" for="contact-email">Email address</label>
        <input class="form-contact-input" id="contact-email" type="email" name="email" placeholder="jane@example.com">
      </div>

    </div>

    <div class="form-contact-field">
      <label class="form-contact-label" for="contact-subject">Subject</label>
      <input class="form-contact-input" id="contact-subject" type="text" name="subject" placeholder="Website design project">
    </div>

    <div class="form-contact-field">
      <label class="form-contact-label" for="contact-message">Message</label>
      <textarea class="form-contact-textarea" id="contact-message" name="message" placeholder="Tell us what you need help with..."></textarea>
    </div>

    <div class="form-contact-note">
      <span class="form-contact-note-icon">i</span>
      <span>Keep your message short and clear. Add your project goal, timeline, and any important details.</span>
    </div>

    <button class="form-contact-button" type="submit">Send Message</button>

  </form>

</div>

CSS

.form-contact-card{
width:min(100%,620px);
padding:30px;
border-radius:26px;
background:rgba(255,255,255,.92);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.16);
backdrop-filter:blur(16px);
}

.form-contact-header{
margin-bottom:24px;
text-align:left;
}

.form-contact-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:7px 11px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}

.form-contact-title{
margin:0 0 10px;
font-size:clamp(28px,4vw,42px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-contact-text{
margin:0;
font-size:16px;
line-height:1.7;
color:#64748b;
max-width:520px;
}

.form-contact-form{
display:grid;
gap:18px;
}

.form-contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.form-contact-field{
display:grid;
gap:8px;
}

.form-contact-label{
font-size:14px;
font-weight:800;
color:#0f172a;
}

.form-contact-input,
.form-contact-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
box-sizing:border-box;
}

.form-contact-input{
min-height:52px;
padding:0 16px;
}

.form-contact-textarea{
min-height:132px;
resize:vertical;
padding:15px 16px;
}

.form-contact-input::placeholder,
.form-contact-textarea::placeholder{
color:#94a3b8;
}

.form-contact-input:focus,
.form-contact-textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-contact-note{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px 15px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#64748b;
font-size:14px;
line-height:1.55;
}

.form-contact-note-icon{
flex:0 0 auto;
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
}

.form-contact-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#0ea5e9);
color:#ffffff;
font-size:15px;
font-weight:900;
cursor:pointer;
box-shadow:0 16px 36px rgba(37,99,235,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-contact-button:hover,
.form-contact-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(37,99,235,.30);
filter:saturate(1.05);
outline:none;
}

@media (max-width: 720px){
.form-contact-card{
padding:22px;
border-radius:22px;
}

.form-contact-grid{
grid-template-columns:1fr;
}

.form-contact-title{
font-size:31px;
}

.form-contact-text{
font-size:15px;
}
}

This modern contact form is a strong starting point for service websites, agency websites, landing pages, portfolios, and WordPress contact pages. It keeps the structure simple, but the spacing, labels, focus states, and button styling make the form feel polished and easy to use.

You can customize this form by adding phone number fields, service dropdowns, project budget fields, privacy checkboxes, or a real backend integration for sending messages.

2. Responsive Contact Form with Image

A responsive contact form with an image is useful when you want the form section to feel more visual and branded. Instead of showing only fields, this layout combines a contact form with an image panel, feature list, support message, or brand-focused visual area.

This pattern works well on homepages, landing pages, contact pages, agency websites, SaaS websites, and service websites. On desktop, the image and form sit side by side. On mobile, the layout stacks into a single column so the form remains easy to read and complete.

  • Perfect for contact pages, landing pages, and service websites
  • Uses a two-column desktop layout with a visual image-style panel
  • Stacks cleanly on mobile screens
  • Includes a professional contact card and trust-focused side content
  • Works with HTML and CSS only
C Contactly
Fast Response

Start a better conversation today

Use this visual contact form layout when you want a professional contact section with more trust, context, and brand personality.

  • ✓ Clear project details
  • ✓ Mobile-friendly layout
  • ✓ Clean form structure
Contact Us

Tell us what you need

Fill in the form and choose the type of project you want to discuss.

HTML

<div class="form-image-layout">

  <div class="form-image-panel">

    <div class="form-image-brand">
      <span class="form-image-brand-icon">C</span>
      <span>Contactly</span>
    </div>

    <div class="form-image-info">

      <div class="form-image-badge">Fast Response</div>

      <h3 class="form-image-heading">Start a better conversation today</h3>

      <p class="form-image-copy">Use this visual contact form layout when you want a professional contact section with more trust, context, and brand personality.</p>

      <ul class="form-image-points">
        <li><span class="form-image-check">✓</span> Clear project details</li>
        <li><span class="form-image-check">✓</span> Mobile-friendly layout</li>
        <li><span class="form-image-check">✓</span> Clean form structure</li>
      </ul>

    </div>

  </div>

  <div class="form-image-form-wrap">

    <div class="form-image-form-header">
      <div class="form-image-kicker">Contact Us</div>
      <h3 class="form-image-title">Tell us what you need</h3>
      <p class="form-image-text">Fill in the form and choose the type of project you want to discuss.</p>
    </div>

    <form class="form-image-form" action="#" method="post">

      <div class="form-image-grid">

        <div class="form-image-field">
          <label class="form-image-label" for="image-name">Name</label>
          <input class="form-image-input" id="image-name" type="text" name="name" placeholder="Alex Morgan">
        </div>

        <div class="form-image-field">
          <label class="form-image-label" for="image-email">Email</label>
          <input class="form-image-input" id="image-email" type="email" name="email" placeholder="alex@example.com">
        </div>

      </div>

      <div class="form-image-field">
        <label class="form-image-label" for="image-service">Project type</label>
        <select class="form-image-select" id="image-service" name="service">
          <option>Website design</option>
          <option>Landing page</option>
          <option>Online store</option>
          <option>Custom UI project</option>
        </select>
      </div>

      <div class="form-image-field">
        <label class="form-image-label" for="image-message">Project details</label>
        <textarea class="form-image-textarea" id="image-message" name="message" placeholder="Write a short summary of your project..."></textarea>
      </div>

      <label class="form-image-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this request.</span>
      </label>

      <button class="form-image-button" type="submit">Request a Free Quote</button>

    </form>

  </div>

</div>

CSS

.form-image-layout{
width:min(100%,980px);
display:grid;
grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);
gap:0;
border-radius:28px;
overflow:hidden;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 28px 90px rgba(0,0,0,.42);
}

.form-image-panel{
position:relative;
min-height:620px;
padding:34px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
background:
linear-gradient(180deg,rgba(14,165,233,.10),rgba(168,85,247,.12)),
linear-gradient(135deg,#0f172a,#111827);
}

.form-image-panel::before{
content:"";
position:absolute;
inset:22px;
border-radius:24px;
background:
linear-gradient(135deg,rgba(34,211,238,.22),rgba(168,85,247,.22)),
url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80");
background-size:cover;
background-position:center;
opacity:.72;
filter:saturate(1.05);
}

.form-image-panel::after{
content:"";
position:absolute;
inset:22px;
border-radius:24px;
background:linear-gradient(180deg,rgba(2,6,23,.08),rgba(2,6,23,.72));
}

.form-image-brand,
.form-image-info{
position:relative;
z-index:2;
}

.form-image-brand{
display:inline-flex;
align-items:center;
gap:10px;
color:#ffffff;
font-size:18px;
font-weight:900;
letter-spacing:-.03em;
}

.form-image-brand-icon{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:14px;
background:linear-gradient(135deg,#22d3ee,#a855f7);
box-shadow:0 14px 34px rgba(34,211,238,.26);
}

.form-image-info{
max-width:360px;
}

.form-image-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
backdrop-filter:blur(12px);
margin-bottom:16px;
}

.form-image-heading{
margin:0 0 14px;
font-size:clamp(28px,4vw,42px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-image-copy{
margin:0 0 20px;
font-size:15px;
line-height:1.75;
color:#dbeafe;
}

.form-image-points{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-image-points li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:750;
color:#ffffff;
}

.form-image-check{
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(34,211,238,.18);
border:1px solid rgba(34,211,238,.32);
color:#67e8f9;
font-size:13px;
font-weight:900;
}

.form-image-form-wrap{
padding:34px;
background:rgba(255,255,255,.96);
}

.form-image-form-header{
margin-bottom:24px;
}

.form-image-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:7px 11px;
border-radius:999px;
background:#f1f5f9;
color:#334155;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}

.form-image-title{
margin:0 0 10px;
font-size:clamp(28px,4vw,40px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-image-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-image-form{
display:grid;
gap:16px;
}

.form-image-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-image-field{
display:grid;
gap:8px;
}

.form-image-label{
font-size:14px;
font-weight:850;
color:#0f172a;
}

.form-image-input,
.form-image-select,
.form-image-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-image-input,
.form-image-select{
min-height:50px;
padding:0 15px;
}

.form-image-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}

.form-image-textarea{
min-height:120px;
resize:vertical;
padding:14px 15px;
}

.form-image-input::placeholder,
.form-image-textarea::placeholder{
color:#94a3b8;
}

.form-image-input:focus,
.form-image-select:focus,
.form-image-textarea:focus{
border-color:#7c3aed;
box-shadow:0 0 0 4px rgba(124,58,237,.12);
background:#ffffff;
}

.form-image-consent{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-image-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#7c3aed;
}

.form-image-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:15px;
background:linear-gradient(135deg,#7c3aed,#0ea5e9);
color:#ffffff;
font-size:15px;
font-weight:900;
cursor:pointer;
box-shadow:0 16px 36px rgba(124,58,237,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-image-button:hover,
.form-image-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(124,58,237,.30);
filter:saturate(1.05);
outline:none;
}

@media (max-width: 900px){
.form-image-layout{
grid-template-columns:1fr;
}

.form-image-panel{
min-height:360px;
}

.form-image-form-wrap{
padding:26px;
}

.form-image-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 520px){
.form-image-panel{
min-height:330px;
padding:24px;
}

.form-image-panel::before,
.form-image-panel::after{
inset:14px;
border-radius:20px;
}

.form-image-form-wrap{
padding:22px;
}

.form-image-title{
font-size:30px;
}

.form-image-heading{
font-size:30px;
}
}

This responsive contact form with image is a good choice when a plain contact form feels too simple. The image panel adds visual weight, while the form remains clear, structured, and easy to complete.

Use this layout for contact pages, quote request sections, landing pages, agency websites, SaaS websites, and service pages where the form should feel like a complete section instead of a small standalone card.

3. Minimal Contact Form

A minimal contact form is a clean and lightweight form pattern for websites that do not need heavy visuals, large backgrounds, or complex decorative elements. It focuses on clarity, readable spacing, simple fields, and a direct submit action.

This type of form works especially well for blogs, personal websites, portfolios, documentation websites, small business pages, and clean landing pages. The design is intentionally simple so the form feels easy to complete and does not distract from the main content.

  • Perfect for blogs, portfolios, personal websites, and simple contact pages
  • Uses a clean single-column layout
  • Works without JavaScript
  • Includes clear labels and subtle focus states
  • Easy to place inside content sections, sidebars, or contact pages

Minimal Contact

Send a simple message

A clean contact form for websites that need a lightweight and distraction-free design.

We usually reply within one business day.

HTML

<div class="form-minimal-card">

  <div class="form-minimal-header">
    <p class="form-minimal-kicker">Minimal Contact</p>
    <h3 class="form-minimal-title">Send a simple message</h3>
    <p class="form-minimal-text">A clean contact form for websites that need a lightweight and distraction-free design.</p>
  </div>

  <form class="form-minimal-form" action="#" method="post">

    <div class="form-minimal-field">
      <label class="form-minimal-label" for="minimal-name">Name</label>
      <input class="form-minimal-input" id="minimal-name" type="text" name="name" placeholder="Your name">
    </div>

    <div class="form-minimal-field">
      <label class="form-minimal-label" for="minimal-email">Email</label>
      <input class="form-minimal-input" id="minimal-email" type="email" name="email" placeholder="your@email.com">
    </div>

    <div class="form-minimal-field">
      <label class="form-minimal-label" for="minimal-message">Message</label>
      <textarea class="form-minimal-textarea" id="minimal-message" name="message" placeholder="Write your message..."></textarea>
    </div>

    <div class="form-minimal-row">
      <p class="form-minimal-note">We usually reply within one business day.</p>
      <button class="form-minimal-button" type="submit">Send Message</button>
    </div>

  </form>

</div>

CSS

.form-minimal-card{
width:min(100%,560px);
padding:34px;
border-radius:24px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.form-minimal-header{
margin-bottom:26px;
}

.form-minimal-kicker{
margin:0 0 10px;
font-size:13px;
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
color:#64748b;
}

.form-minimal-title{
margin:0 0 12px;
font-size:clamp(28px,4vw,40px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-minimal-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.form-minimal-form{
display:grid;
gap:18px;
}

.form-minimal-field{
display:grid;
gap:8px;
}

.form-minimal-label{
font-size:14px;
font-weight:800;
color:#0f172a;
}

.form-minimal-input,
.form-minimal-textarea{
width:100%;
border:0;
border-bottom:2px solid #cbd5e1;
border-radius:0;
background:transparent;
color:#0f172a;
font-size:16px;
line-height:1.45;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,background .22s ease;
}

.form-minimal-input{
min-height:48px;
padding:8px 0;
}

.form-minimal-textarea{
min-height:128px;
resize:vertical;
padding:10px 0;
}

.form-minimal-input::placeholder,
.form-minimal-textarea::placeholder{
color:#94a3b8;
}

.form-minimal-input:focus,
.form-minimal-textarea:focus{
border-color:#0f172a;
}

.form-minimal-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:4px;
}

.form-minimal-note{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-minimal-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 22px;
border:0;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:14px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-minimal-button:hover,
.form-minimal-button:focus{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(15,23,42,.18);
background:#111827;
outline:none;
}

@media (max-width: 640px){
.form-minimal-card{
padding:24px;
border-radius:22px;
}

.form-minimal-row{
align-items:stretch;
flex-direction:column;
}

.form-minimal-button{
width:100%;
}

.form-minimal-title{
font-size:31px;
}
}

This minimal contact form is useful when you want a clean form that blends into the website instead of becoming a large visual feature. It is simple, fast, readable, and easy to reuse in many content layouts.

Use this form pattern for blogs, personal websites, portfolio contact pages, small service websites, documentation pages, and any design where a lightweight contact form is enough.

4. Login Form UI

A modern login form UI helps users sign in quickly while making the account area feel secure, professional, and easy to use. Login forms are common in SaaS products, dashboards, membership websites, online stores, web apps, learning platforms, and customer portals.

This example uses a centered authentication card with a strong heading, email and password fields, remember-me option, forgot-password link, and a clear sign-in button. The layout is compact, responsive, and designed to work well on both desktop and mobile screens.

  • Perfect for SaaS websites, dashboards, memberships, and account pages
  • Includes email and password fields with clear labels
  • Uses a remember-me checkbox and forgot-password link
  • Includes a secondary signup prompt
  • Works with HTML and CSS only

HTML

<div class="form-login-shell">

  <div class="form-login-logo">
    <span class="form-login-logo-icon">L</span>
    <span>LoginPro</span>
  </div>

  <div class="form-login-card">

    <div class="form-login-header">
      <h3 class="form-login-title">Welcome back</h3>
      <p class="form-login-text">Sign in to continue to your dashboard and manage your account.</p>
    </div>

    <form class="form-login-form" action="#" method="post">

      <div class="form-login-field">
        <label class="form-login-label" for="login-email">Email address</label>
        <input class="form-login-input" id="login-email" type="email" name="email" placeholder="you@example.com">
      </div>

      <div class="form-login-field">
        <label class="form-login-label" for="login-password">Password</label>
        <input class="form-login-input" id="login-password" type="password" name="password" placeholder="Enter your password">
      </div>

      <div class="form-login-options">
        <label class="form-login-check">
          <input type="checkbox" name="remember">
          <span>Remember me</span>
        </label>
        <a class="form-login-link" href="#">Forgot password?</a>
      </div>

      <button class="form-login-button" type="submit">Sign In</button>

      <div class="form-login-divider">or</div>

      <a class="form-login-secondary" href="#">Continue with Google</a>

    </form>

    <p class="form-login-signup">Don’t have an account? <a href="#">Create one</a></p>

  </div>

</div>

CSS

.form-login-shell{
width:min(100%,440px);
}

.form-login-logo{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:20px;
color:#ffffff;
font-size:19px;
font-weight:900;
letter-spacing:-.03em;
}

.form-login-logo-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:16px;
background:linear-gradient(135deg,#6366f1,#22d3ee);
box-shadow:0 16px 38px rgba(99,102,241,.28);
color:#ffffff;
font-size:18px;
font-weight:900;
}

.form-login-card{
padding:30px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 90px rgba(0,0,0,.44);
backdrop-filter:blur(18px);
}

.form-login-header{
text-align:center;
margin-bottom:24px;
}

.form-login-title{
margin:0 0 10px;
font-size:clamp(28px,4vw,40px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-login-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.form-login-form{
display:grid;
gap:16px;
}

.form-login-field{
display:grid;
gap:8px;
}

.form-login-label{
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-login-input{
width:100%;
min-height:52px;
padding:0 15px;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(15,23,42,.74);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-login-input::placeholder{
color:#94a3b8;
}

.form-login-input:focus{
border-color:#22d3ee;
box-shadow:0 0 0 4px rgba(34,211,238,.14);
background:rgba(15,23,42,.94);
}

.form-login-options{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:2px;
}

.form-login-check{
display:inline-flex;
align-items:center;
gap:9px;
font-size:14px;
line-height:1.4;
color:#cbd5e1;
cursor:pointer;
}

.form-login-check input{
width:17px;
height:17px;
margin:0;
accent-color:#22d3ee;
}

.form-login-link{
font-size:14px;
font-weight:800;
color:#67e8f9;
text-decoration:none;
}

.form-login-link:hover,
.form-login-link:focus{
color:#ffffff;
text-decoration:underline;
outline:none;
}

.form-login-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#6366f1,#22d3ee);
color:#ffffff;
font-size:15px;
font-weight:900;
cursor:pointer;
box-shadow:0 18px 42px rgba(34,211,238,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-login-button:hover,
.form-login-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.28);
filter:saturate(1.08);
outline:none;
}

.form-login-divider{
display:flex;
align-items:center;
gap:12px;
margin:4px 0;
color:#94a3b8;
font-size:13px;
font-weight:800;
}

.form-login-divider::before,
.form-login-divider::after{
content:"";
height:1px;
flex:1;
background:rgba(255,255,255,.12);
}

.form-login-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(255,255,255,.06);
color:#ffffff;
font-size:15px;
font-weight:900;
text-decoration:none;
transition:background .22s ease,border-color .22s ease,transform .22s ease;
}

.form-login-secondary:hover,
.form-login-secondary:focus{
background:rgba(255,255,255,.10);
border-color:rgba(255,255,255,.22);
transform:translateY(-1px);
outline:none;
}

.form-login-signup{
margin:18px 0 0;
text-align:center;
font-size:14px;
line-height:1.6;
color:#cbd5e1;
}

.form-login-signup a{
font-weight:900;
color:#67e8f9;
text-decoration:none;
}

.form-login-signup a:hover,
.form-login-signup a:focus{
color:#ffffff;
text-decoration:underline;
outline:none;
}

@media (max-width: 640px){
.form-login-card{
padding:24px;
border-radius:24px;
}

.form-login-options{
align-items:flex-start;
flex-direction:column;
gap:10px;
}

.form-login-title{
font-size:31px;
}
}

This login form UI is a practical pattern for account-based websites and web apps. It keeps the login flow compact while still including the small details users expect, such as a remember-me option, forgot-password link, and secondary signup prompt.

Use this form for SaaS login pages, dashboard sign-in screens, WordPress membership areas, customer portals, course platforms, eCommerce account pages, and private client areas.

5. Signup / Registration Form

A signup or registration form helps new users create an account, join a platform, start a free trial, register for a service, or become a member. It is one of the most important forms for SaaS websites, membership websites, online courses, dashboards, communities, and eCommerce stores.

This example uses a clean registration card with grouped fields, a password input, a terms checkbox, and a strong account creation button. The layout is modern, responsive, and designed to feel trustworthy without overwhelming the user.

  • Perfect for SaaS websites, memberships, courses, apps, and account areas
  • Includes name, email, password, and terms agreement fields
  • Uses clear labels and mobile-friendly input sizes
  • Includes a secondary login prompt for existing users
  • Works with HTML and CSS only

HTML

<div class="form-signup-card">

  <div class="form-signup-top">
    <div class="form-signup-logo">
      <span class="form-signup-logo-icon">S</span>
      <span>SignupFlow</span>
    </div>
    <span class="form-signup-pill">Free Trial</span>
  </div>

  <div class="form-signup-header">
    <h3 class="form-signup-title">Create your account</h3>
    <p class="form-signup-text">Start your free account and access your dashboard in just a few seconds.</p>
  </div>

  <form class="form-signup-form" action="#" method="post">

    <div class="form-signup-grid">

      <div class="form-signup-field">
        <label class="form-signup-label" for="signup-first">First name</label>
        <input class="form-signup-input" id="signup-first" type="text" name="first_name" placeholder="Alex">
      </div>

      <div class="form-signup-field">
        <label class="form-signup-label" for="signup-last">Last name</label>
        <input class="form-signup-input" id="signup-last" type="text" name="last_name" placeholder="Morgan">
      </div>

    </div>

    <div class="form-signup-field">
      <label class="form-signup-label" for="signup-email">Email address</label>
      <input class="form-signup-input" id="signup-email" type="email" name="email" placeholder="alex@example.com">
    </div>

    <div class="form-signup-field">
      <label class="form-signup-label" for="signup-password">Password</label>
      <input class="form-signup-input" id="signup-password" type="password" name="password" placeholder="Create a strong password">
      <p class="form-signup-help">Use at least 8 characters with letters and numbers.</p>
    </div>

    <label class="form-signup-terms">
      <input type="checkbox" name="terms">
      <span>I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.</span>
    </label>

    <button class="form-signup-button" type="submit">Create Account</button>

  </form>

  <p class="form-signup-login">Already have an account? <a href="#">Sign in</a></p>

</div>

CSS

.form-signup-card{
width:min(100%,520px);
padding:30px;
border-radius:28px;
background:rgba(255,255,255,.94);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
backdrop-filter:blur(16px);
}

.form-signup-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:24px;
}

.form-signup-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#0f172a;
}

.form-signup-logo-icon{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:15px;
background:linear-gradient(135deg,#22c55e,#2563eb);
box-shadow:0 14px 34px rgba(34,197,94,.22);
color:#ffffff;
font-size:17px;
font-weight:900;
}

.form-signup-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
padding:0 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap;
}

.form-signup-header{
margin-bottom:24px;
}

.form-signup-title{
margin:0 0 10px;
font-size:clamp(28px,4vw,42px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-signup-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-signup-form{
display:grid;
gap:16px;
}

.form-signup-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-signup-field{
display:grid;
gap:8px;
}

.form-signup-label{
font-size:14px;
font-weight:850;
color:#0f172a;
}

.form-signup-input{
width:100%;
min-height:52px;
padding:0 15px;
border:1px solid #dbe3ef;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-signup-input::placeholder{
color:#94a3b8;
}

.form-signup-input:focus{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.13);
background:#ffffff;
}

.form-signup-help{
margin:-2px 0 0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-signup-terms{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-signup-terms input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#22c55e;
}

.form-signup-terms a{
color:#2563eb;
font-weight:850;
text-decoration:none;
}

.form-signup-terms a:hover,
.form-signup-terms a:focus{
text-decoration:underline;
outline:none;
}

.form-signup-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#22c55e,#2563eb);
color:#ffffff;
font-size:15px;
font-weight:900;
cursor:pointer;
box-shadow:0 16px 36px rgba(34,197,94,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-signup-button:hover,
.form-signup-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(37,99,235,.25);
filter:saturate(1.06);
outline:none;
}

.form-signup-login{
margin:18px 0 0;
text-align:center;
font-size:14px;
line-height:1.6;
color:#64748b;
}

.form-signup-login a{
font-weight:900;
color:#2563eb;
text-decoration:none;
}

.form-signup-login a:hover,
.form-signup-login a:focus{
text-decoration:underline;
outline:none;
}

@media (max-width: 640px){
.form-signup-card{
padding:24px;
border-radius:24px;
}

.form-signup-top{
align-items:flex-start;
flex-direction:column;
}

.form-signup-grid{
grid-template-columns:1fr;
}

.form-signup-title{
font-size:31px;
}
}

This signup form is useful when you need a clean account creation layout that feels professional and trustworthy. The grouped name fields keep the form compact on desktop, while the mobile layout stacks everything into a single column.

Use this form for SaaS websites, membership pages, online courses, customer portals, web apps, dashboards, and eCommerce account registration pages.

6. Newsletter Signup Form

A newsletter signup form is a simple but powerful form pattern for growing an email list, promoting updates, sharing new articles, sending product news, or building a direct audience outside social media. It usually needs fewer fields than a contact form because the goal is quick subscription.

This example uses a modern newsletter card with a clear headline, benefit-focused copy, an email input, a strong subscribe button, and a small privacy note. The layout is designed to work well inside blog posts, homepages, landing pages, footers, and content sections.

  • Perfect for blogs, landing pages, SaaS websites, and content websites
  • Uses a compact email signup layout
  • Includes a clear benefit-driven headline
  • Works well inside article content or footer sections
  • Uses HTML and CSS only

HTML

<div class="form-newsletter-card">

  <div class="form-newsletter-inner">

    <div class="form-newsletter-content">

      <div class="form-newsletter-kicker">Newsletter</div>

      <h3 class="form-newsletter-title">Get better <span>web design ideas</span></h3>

      <p class="form-newsletter-text">Join our newsletter and receive practical UI ideas, CSS examples, design tips, and website inspiration directly in your inbox.</p>

      <div class="form-newsletter-stats">
        <div class="form-newsletter-stat">
          <strong>12k+</strong>
          <span>Readers</span>
        </div>
        <div class="form-newsletter-stat">
          <strong>Weekly</strong>
          <span>Fresh tips</span>
        </div>
      </div>

    </div>

    <form class="form-newsletter-form" action="#" method="post">

      <label class="form-newsletter-label" for="newsletter-email">Email address</label>

      <div class="form-newsletter-row">
        <input class="form-newsletter-input" id="newsletter-email" type="email" name="email" placeholder="you@example.com">
        <button class="form-newsletter-button" type="submit">Subscribe</button>
      </div>

      <p class="form-newsletter-note">No spam. Unsubscribe anytime. We only send useful website design content.</p>

    </form>

  </div>

</div>

CSS

.form-newsletter-card{
width:min(100%,760px);
position:relative;
overflow:hidden;
padding:38px;
border-radius:30px;
background:
linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 28px 90px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}

.form-newsletter-card::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-90px;
top:-100px;
border-radius:999px;
background:radial-gradient(circle,rgba(245,158,11,.34),transparent 68%);
pointer-events:none;
}

.form-newsletter-card::after{
content:"";
position:absolute;
width:300px;
height:300px;
left:-130px;
bottom:-150px;
border-radius:999px;
background:radial-gradient(circle,rgba(236,72,153,.24),transparent 70%);
pointer-events:none;
}

.form-newsletter-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
gap:28px;
align-items:center;
}

.form-newsletter-content{
max-width:460px;
}

.form-newsletter-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(245,158,11,.14);
border:1px solid rgba(245,158,11,.26);
color:#fbbf24;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-newsletter-title{
margin:0 0 14px;
font-size:clamp(30px,5vw,48px);
line-height:1.04;
font-weight:900;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-newsletter-title span{
background:linear-gradient(90deg,#fbbf24,#f472b6,#60a5fa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-newsletter-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.form-newsletter-form{
display:grid;
gap:12px;
padding:18px;
border-radius:24px;
background:rgba(15,23,42,.68);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 20px 60px rgba(0,0,0,.28);
}

.form-newsletter-label{
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-newsletter-row{
display:flex;
gap:10px;
}

.form-newsletter-input{
width:100%;
min-height:52px;
padding:0 15px;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(255,255,255,.08);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-newsletter-input::placeholder{
color:#94a3b8;
}

.form-newsletter-input:focus{
border-color:#fbbf24;
box-shadow:0 0 0 4px rgba(251,191,36,.14);
background:rgba(255,255,255,.11);
}

.form-newsletter-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#f59e0b,#ec4899);
color:#ffffff;
font-size:14px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
box-shadow:0 16px 36px rgba(236,72,153,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-newsletter-button:hover,
.form-newsletter-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(236,72,153,.30);
filter:saturate(1.08);
outline:none;
}

.form-newsletter-note{
margin:2px 0 0;
font-size:13px;
line-height:1.55;
color:#94a3b8;
}

.form-newsletter-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:18px;
}

.form-newsletter-stat{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.form-newsletter-stat strong{
display:block;
font-size:20px;
line-height:1;
font-weight:900;
color:#ffffff;
margin-bottom:6px;
}

.form-newsletter-stat span{
display:block;
font-size:13px;
line-height:1.45;
color:#cbd5e1;
}

@media (max-width: 820px){
.form-newsletter-card{
padding:26px;
border-radius:26px;
}

.form-newsletter-inner{
grid-template-columns:1fr;
}

.form-newsletter-row{
flex-direction:column;
}

.form-newsletter-button{
width:100%;
}

.form-newsletter-title{
font-size:34px;
}
}

@media (max-width: 520px){
.form-newsletter-card{
padding:22px;
}

.form-newsletter-stats{
grid-template-columns:1fr;
}

.form-newsletter-title{
font-size:31px;
}
}

This newsletter signup form works well when you want a form that feels more like a complete call-to-action section. The copy explains the benefit, the input stays simple, and the button makes the subscription action clear.

Use this form inside blog posts, landing pages, SaaS pages, website footers, lead generation sections, and content marketing pages where email signup is an important goal.

7. Inline Newsletter Form

An inline newsletter form is a compact email signup pattern that fits naturally inside blog posts, article sections, resource pages, footers, sidebars, and landing page content. Unlike a large newsletter block, this version is designed to stay small, focused, and easy to place between paragraphs or after a useful section.

This example uses a horizontal layout on desktop and stacks cleanly on mobile. It includes a short headline, supporting text, an email input, and a clear subscribe button. The design is simple enough to reuse in many parts of a website without taking too much space.

  • Perfect for blog posts, article sections, sidebars, and footers
  • Uses a compact inline layout on desktop
  • Stacks into a clean single-column form on mobile
  • Includes a clear email label and privacy note
  • Works with HTML and CSS only
Design Tips

Get weekly CSS ideas

Join the newsletter for practical UI patterns, CSS examples, and modern website design inspiration.

No spam. You can unsubscribe anytime. Read our privacy policy.

HTML

<div class="form-inline-newsletter-box">

  <div class="form-inline-newsletter-content">

    <div class="form-inline-newsletter-kicker">Design Tips</div>

    <h3 class="form-inline-newsletter-title">Get weekly CSS ideas</h3>

    <p class="form-inline-newsletter-text">Join the newsletter for practical UI patterns, CSS examples, and modern website design inspiration.</p>

  </div>

  <form class="form-inline-newsletter-form" action="#" method="post">

    <label class="form-inline-newsletter-label" for="inline-newsletter-email">Email address</label>

    <div class="form-inline-newsletter-row">
      <input class="form-inline-newsletter-input" id="inline-newsletter-email" type="email" name="email" placeholder="you@example.com">
      <button class="form-inline-newsletter-button" type="submit">Subscribe</button>
    </div>

    <p class="form-inline-newsletter-note">No spam. You can unsubscribe anytime. Read our <a href="#">privacy policy</a>.</p>

  </form>

</div>

CSS

.form-inline-newsletter-box{
width:min(100%,880px);
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);
gap:26px;
align-items:center;
padding:26px;
border-radius:26px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 20px 60px rgba(15,23,42,.10);
}

.form-inline-newsletter-content{
min-width:0;
}

.form-inline-newsletter-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:10px;
padding:7px 11px;
border-radius:999px;
background:#ecfeff;
color:#0891b2;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-inline-newsletter-title{
margin:0 0 9px;
font-size:clamp(24px,3.5vw,34px);
line-height:1.1;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-inline-newsletter-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-inline-newsletter-form{
display:grid;
gap:10px;
min-width:0;
}

.form-inline-newsletter-label{
font-size:14px;
font-weight:850;
color:#0f172a;
}

.form-inline-newsletter-row{
display:flex;
gap:10px;
align-items:center;
min-width:0;
}

.form-inline-newsletter-input{
width:100%;
min-width:0;
min-height:52px;
padding:0 16px;
border:1px solid #dbe3ef;
border-radius:16px;
background:#f8fafc;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-inline-newsletter-input::placeholder{
color:#94a3b8;
}

.form-inline-newsletter-input:focus{
border-color:#0891b2;
box-shadow:0 0 0 4px rgba(8,145,178,.12);
background:#ffffff;
}

.form-inline-newsletter-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border:0;
border-radius:16px;
background:#0f172a;
color:#ffffff;
font-size:14px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-inline-newsletter-button:hover,
.form-inline-newsletter-button:focus{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(15,23,42,.18);
background:#111827;
outline:none;
}

.form-inline-newsletter-note{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-inline-newsletter-note a{
color:#0891b2;
font-weight:850;
text-decoration:none;
}

.form-inline-newsletter-note a:hover,
.form-inline-newsletter-note a:focus{
text-decoration:underline;
outline:none;
}

@media (max-width: 820px){
.form-inline-newsletter-box{
grid-template-columns:1fr;
padding:22px;
border-radius:24px;
}

.form-inline-newsletter-row{
flex-direction:column;
align-items:stretch;
}

.form-inline-newsletter-button{
width:100%;
}

.form-inline-newsletter-title{
font-size:30px;
}
}

@media (max-width: 520px){
.form-inline-newsletter-box{
padding:20px;
}

.form-inline-newsletter-title{
font-size:28px;
}
}

This inline newsletter form is a strong choice when you want a compact signup area that does not interrupt the reading experience. It can be placed between article sections, after a tutorial, inside a blog sidebar, or near the end of a landing page.

Use this pattern for blogs, resource libraries, content websites, SaaS marketing pages, personal websites, and WordPress posts where email list growth is important but the form should stay lightweight.

8. Search Form Design

A modern search form helps users quickly find content, products, services, documentation, articles, listings, or resources. Search forms are especially useful for blogs, eCommerce websites, directories, help centers, knowledge bases, marketplaces, dashboards, and large content websites.

This example uses a large search input, a category selector, a clear search button, and quick suggestion chips. The form is designed as a reusable search section that can be placed near the top of a page, inside a hero section, or above a listing grid.

  • Perfect for blogs, eCommerce stores, directories, and documentation websites
  • Includes a search input, category selector, and search button
  • Uses suggestion chips for common searches
  • Stacks cleanly on mobile screens
  • Works with HTML and CSS only
Search Form

Find the right website resource

Use this modern search form to help visitors find articles, products, documentation, services, or resources faster.

⌕
Contact forms Login UI Checkout forms Newsletter forms
CSS Form Examples Reusable layouts for contact, login, signup, and checkout forms.
Modern UI Patterns Clean components for landing pages, dashboards, and websites.
Responsive Design Mobile-friendly form layouts that adapt to smaller screens.

HTML

<div class="form-search-panel">

  <div class="form-search-kicker">Search Form</div>

  <h3 class="form-search-title">Find the right <span>website resource</span></h3>

  <p class="form-search-text">Use this modern search form to help visitors find articles, products, documentation, services, or resources faster.</p>

  <form class="form-search-box" action="#" method="get">

    <div class="form-search-field">
      <span class="form-search-icon">⌕</span>
      <input class="form-search-input" type="search" name="query" placeholder="Search CSS forms, layouts, components...">
    </div>

    <select class="form-search-select" name="category" aria-label="Select category">
      <option value="">All categories</option>
      <option value="css">CSS</option>
      <option value="ui">UI Design</option>
      <option value="wordpress">WordPress</option>
      <option value="templates">Templates</option>
    </select>

    <button class="form-search-button" type="submit">Search</button>

  </form>

  <div class="form-search-suggestions" aria-label="Popular searches">
    <a class="form-search-chip" href="#">Contact forms</a>
    <a class="form-search-chip" href="#">Login UI</a>
    <a class="form-search-chip" href="#">Checkout forms</a>
    <a class="form-search-chip" href="#">Newsletter forms</a>
  </div>

  <div class="form-search-results">

    <div class="form-search-result">
      <strong>CSS Form Examples</strong>
      <span>Reusable layouts for contact, login, signup, and checkout forms.</span>
    </div>

    <div class="form-search-result">
      <strong>Modern UI Patterns</strong>
      <span>Clean components for landing pages, dashboards, and websites.</span>
    </div>

    <div class="form-search-result">
      <strong>Responsive Design</strong>
      <span>Mobile-friendly form layouts that adapt to smaller screens.</span>
    </div>

  </div>

</div>

CSS

.form-search-panel{
width:min(100%,900px);
text-align:center;
}

.form-search-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.12);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-search-title{
margin:0 auto 14px;
max-width:720px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:900;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-search-title span{
background:linear-gradient(90deg,#22d3ee,#818cf8,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-search-text{
margin:0 auto 26px;
max-width:650px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.form-search-box{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(170px,.36fr) auto;
gap:10px;
align-items:center;
padding:12px;
border-radius:24px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 28px 90px rgba(0,0,0,.38);
backdrop-filter:blur(18px);
}

.form-search-field{
position:relative;
min-width:0;
}

.form-search-icon{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(34,211,238,.14);
color:#67e8f9;
font-size:13px;
font-weight:900;
pointer-events:none;
}

.form-search-input{
width:100%;
min-width:0;
min-height:56px;
padding:0 16px 0 48px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:rgba(15,23,42,.72);
color:#ffffff;
font-size:16px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-search-input::placeholder{
color:#94a3b8;
}

.form-search-input:focus{
border-color:#22d3ee;
box-shadow:0 0 0 4px rgba(34,211,238,.14);
background:rgba(15,23,42,.94);
}

.form-search-select{
width:100%;
min-height:56px;
padding:0 40px 0 15px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:rgba(15,23,42,.72);
color:#ffffff;
font-size:15px;
font-weight:750;
line-height:1.4;
outline:none;
box-sizing:border-box;
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 24px,calc(100% - 13px) 24px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}

.form-search-select:focus{
border-color:#818cf8;
box-shadow:0 0 0 4px rgba(129,140,248,.14);
background-color:rgba(15,23,42,.94);
}

.form-search-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:56px;
padding:0 22px;
border:0;
border-radius:18px;
background:linear-gradient(135deg,#22d3ee,#818cf8);
color:#020617;
font-size:15px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
box-shadow:0 18px 42px rgba(34,211,238,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-search-button:hover,
.form-search-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.30);
filter:saturate(1.08);
outline:none;
}

.form-search-suggestions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-top:18px;
}

.form-search-chip{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:0 13px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:13px;
font-weight:800;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease;
}

.form-search-chip:hover,
.form-search-chip:focus{
background:rgba(255,255,255,.13);
border-color:rgba(34,211,238,.28);
color:#ffffff;
transform:translateY(-1px);
outline:none;
}

.form-search-results{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:28px;
}

.form-search-result{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
text-align:left;
}

.form-search-result strong{
display:block;
margin-bottom:7px;
font-size:15px;
line-height:1.3;
color:#ffffff;
}

.form-search-result span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

@media (max-width: 860px){
.form-search-box{
grid-template-columns:1fr;
}

.form-search-button{
width:100%;
}

.form-search-results{
grid-template-columns:1fr;
}

.form-search-title{
font-size:36px;
}
}

@media (max-width: 520px){
.form-search-box{
padding:10px;
border-radius:22px;
}

.form-search-title{
font-size:31px;
}

.form-search-text{
font-size:15px;
}
}

This search form design works well when users need to find something quickly. The category selector helps narrow the search, while suggestion chips give users a faster path to popular topics or common searches.

Use this pattern for blogs, documentation websites, product catalogs, help centers, directories, marketplaces, resource libraries, and WordPress websites with large content collections.

9. Hero Section Lead Form

A hero section lead form is a high-conversion form pattern used at the top of landing pages, SaaS websites, service websites, agency pages, and campaign pages. It combines a strong headline with a short form so visitors can take action immediately without scrolling.

This example uses a modern split hero layout with content on the left and a lead capture form on the right. The form includes essential fields, a service selector, a clear CTA button, and a small trust note. It is designed to collect qualified leads without making the first step feel too long.

  • Perfect for landing pages, SaaS websites, agencies, and service businesses
  • Combines hero content with a lead capture form
  • Includes name, email, service type, and message fields
  • Uses responsive two-column layout on desktop
  • Works with HTML and CSS only
Lead Generation Form

Turn visitors into qualified leads

Use this hero section lead form to capture project requests, demo bookings, service inquiries, or consultation requests directly from the top of a landing page.

Free consultation Fast response No obligation
Short Form Only asks for the most important first-step information.
Hero Placement Visitors can take action immediately after reading the headline.
Conversion Focused The form supports service leads, demos, and quote requests.

Get a free estimate

Tell us what you need and we will send the next steps.

No spam. We only use your details to reply to this request.

HTML

<div class="form-hero-lead-layout">

  <div class="form-hero-lead-content">

    <div class="form-hero-lead-kicker">Lead Generation Form</div>

    <h3 class="form-hero-lead-title">Turn visitors into <span>qualified leads</span></h3>

    <p class="form-hero-lead-text">Use this hero section lead form to capture project requests, demo bookings, service inquiries, or consultation requests directly from the top of a landing page.</p>

    <div class="form-hero-lead-actions">
      <span class="form-hero-lead-pill"><span class="form-hero-lead-dot"></span> Free consultation</span>
      <span class="form-hero-lead-pill"><span class="form-hero-lead-dot"></span> Fast response</span>
      <span class="form-hero-lead-pill"><span class="form-hero-lead-dot"></span> No obligation</span>
    </div>

    <div class="form-hero-lead-features">

      <div class="form-hero-lead-feature">
        <strong>Short Form</strong>
        <span>Only asks for the most important first-step information.</span>
      </div>

      <div class="form-hero-lead-feature">
        <strong>Hero Placement</strong>
        <span>Visitors can take action immediately after reading the headline.</span>
      </div>

      <div class="form-hero-lead-feature">
        <strong>Conversion Focused</strong>
        <span>The form supports service leads, demos, and quote requests.</span>
      </div>

    </div>

  </div>

  <div class="form-hero-lead-card">

    <div class="form-hero-lead-card-header">
      <h3 class="form-hero-lead-card-title">Get a free estimate</h3>
      <p class="form-hero-lead-card-text">Tell us what you need and we will send the next steps.</p>
    </div>

    <form class="form-hero-lead-form" action="#" method="post">

      <div class="form-hero-lead-grid">

        <div class="form-hero-lead-field">
          <label class="form-hero-lead-label" for="hero-lead-name">Name</label>
          <input class="form-hero-lead-input" id="hero-lead-name" type="text" name="name" placeholder="Your name">
        </div>

        <div class="form-hero-lead-field">
          <label class="form-hero-lead-label" for="hero-lead-email">Email</label>
          <input class="form-hero-lead-input" id="hero-lead-email" type="email" name="email" placeholder="you@example.com">
        </div>

      </div>

      <div class="form-hero-lead-field">
        <label class="form-hero-lead-label" for="hero-lead-service">Service type</label>
        <select class="form-hero-lead-select" id="hero-lead-service" name="service">
          <option>Website design</option>
          <option>Landing page</option>
          <option>Online store</option>
          <option>UI redesign</option>
        </select>
      </div>

      <div class="form-hero-lead-field">
        <label class="form-hero-lead-label" for="hero-lead-message">Project details</label>
        <textarea class="form-hero-lead-textarea" id="hero-lead-message" name="message" placeholder="Write a short summary of your project..."></textarea>
      </div>

      <button class="form-hero-lead-submit" type="submit">Request Free Estimate</button>

      <p class="form-hero-lead-small">No spam. We only use your details to reply to this request.</p>

    </form>

  </div>

</div>

CSS

.form-hero-lead-layout{
width:min(100%,1040px);
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
gap:34px;
align-items:center;
}

.form-hero-lead-content{
min-width:0;
}

.form-hero-lead-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.26);
color:#86efac;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-hero-lead-title{
margin:0 0 16px;
max-width:650px;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-hero-lead-title span{
background:linear-gradient(90deg,#86efac,#22d3ee,#818cf8) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-hero-lead-text{
margin:0 0 26px;
max-width:600px;
font-size:17px;
line-height:1.78;
color:#cbd5e1;
}

.form-hero-lead-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.form-hero-lead-pill{
display:inline-flex;
align-items:center;
gap:9px;
min-height:40px;
padding:0 14px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:13px;
font-weight:850;
}

.form-hero-lead-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.16);
}

.form-hero-lead-features{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
max-width:650px;
}

.form-hero-lead-feature{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.form-hero-lead-feature strong{
display:block;
margin-bottom:6px;
font-size:15px;
line-height:1.25;
color:#ffffff;
}

.form-hero-lead-feature span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-hero-lead-card{
position:relative;
padding:26px;
border-radius:28px;
background:rgba(255,255,255,.95);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.form-hero-lead-card::before{
content:"";
position:absolute;
inset:-1px;
border-radius:28px;
padding:1px;
background:linear-gradient(135deg,rgba(34,197,94,.6),rgba(34,211,238,.45),rgba(129,140,248,.5));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
}

.form-hero-lead-card-header{
margin-bottom:20px;
}

.form-hero-lead-card-title{
margin:0 0 8px;
font-size:28px;
line-height:1.1;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-hero-lead-card-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.form-hero-lead-form{
display:grid;
gap:14px;
}

.form-hero-lead-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.form-hero-lead-field{
display:grid;
gap:7px;
}

.form-hero-lead-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-hero-lead-input,
.form-hero-lead-select,
.form-hero-lead-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-hero-lead-input,
.form-hero-lead-select{
min-height:50px;
padding:0 14px;
}

.form-hero-lead-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-hero-lead-textarea{
min-height:106px;
resize:vertical;
padding:13px 14px;
}

.form-hero-lead-input::placeholder,
.form-hero-lead-textarea::placeholder{
color:#94a3b8;
}

.form-hero-lead-input:focus,
.form-hero-lead-select:focus,
.form-hero-lead-textarea:focus{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.13);
background:#ffffff;
}

.form-hero-lead-submit{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(34,197,94,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-hero-lead-submit:hover,
.form-hero-lead-submit:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.28);
filter:saturate(1.08);
outline:none;
}

.form-hero-lead-small{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
text-align:center;
}

@media (max-width: 940px){
.form-hero-lead-layout{
grid-template-columns:1fr;
}

.form-hero-lead-features{
grid-template-columns:1fr;
}

.form-hero-lead-card{
max-width:560px;
width:100%;
margin:0 auto;
}

.form-hero-lead-title{
font-size:38px;
}
}

@media (max-width: 560px){
.form-hero-lead-card{
padding:22px;
border-radius:24px;
}

.form-hero-lead-card::before{
border-radius:24px;
}

.form-hero-lead-grid{
grid-template-columns:1fr;
}

.form-hero-lead-title{
font-size:32px;
}

.form-hero-lead-text{
font-size:15px;
}
}

This hero section lead form is useful when the main goal of a landing page is to collect inquiries, demo requests, consultations, or project leads. The form stays visible next to the main value proposition, which makes the page more action-focused.

Use this pattern for agency landing pages, service pages, SaaS demo pages, quote request pages, marketing campaigns, consultation pages, and lead generation websites.

10. Quote Request Form

A quote request form helps businesses collect structured project details from potential customers. It is especially useful for service websites, contractors, agencies, web design companies, construction companies, home improvement businesses, B2B services, and custom product inquiries.

This example uses a modern multi-section quote form with contact details, project type, budget range, timeline, and message fields. It keeps the layout organized while still being simple enough for users to complete quickly.

  • Perfect for agencies, contractors, consultants, and service businesses
  • Collects structured quote request details
  • Includes contact fields, project type, budget, timeline, and message
  • Uses grouped sections for better readability
  • Works with HTML and CSS only

Tell us about your project

Fill in the details below and we will prepare the next steps for your request.

1 Contact details

2 Project information

HTML

<div class="form-quote-wrap">

  <aside class="form-quote-sidebar">

    <div class="form-quote-sidebar-inner">

      <div class="form-quote-kicker">Quote Request</div>

      <h3 class="form-quote-title">Request a custom project quote</h3>

      <p class="form-quote-text">Collect better project details with a structured form that helps users explain what they need before the first call.</p>

      <ul class="form-quote-steps">
        <li>
          <span class="form-quote-step-number">1</span>
          <span class="form-quote-step-content">
            <strong>Share contact details</strong>
            <span>Collect the basic information needed to reply.</span>
          </span>
        </li>
        <li>
          <span class="form-quote-step-number">2</span>
          <span class="form-quote-step-content">
            <strong>Choose project type</strong>
            <span>Let users tell you what kind of work they need.</span>
          </span>
        </li>
        <li>
          <span class="form-quote-step-number">3</span>
          <span class="form-quote-step-content">
            <strong>Send the request</strong>
            <span>Use the details to prepare a useful quote.</span>
          </span>
        </li>
      </ul>

      <p class="form-quote-help">Tip: keep quote forms focused. Ask for enough information to qualify the request, but avoid making the first step too long.</p>

    </div>

  </aside>

  <div class="form-quote-card">

    <div class="form-quote-card-header">
      <h3 class="form-quote-card-title">Tell us about your project</h3>
      <p class="form-quote-card-text">Fill in the details below and we will prepare the next steps for your request.</p>
    </div>

    <form class="form-quote-form" action="#" method="post">

      <div class="form-quote-section">

        <h4 class="form-quote-section-title">
          <span class="form-quote-section-icon">1</span>
          Contact details
        </h4>

        <div class="form-quote-grid">

          <div class="form-quote-field">
            <label class="form-quote-label" for="quote-name">Full name</label>
            <input class="form-quote-input" id="quote-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="form-quote-field">
            <label class="form-quote-label" for="quote-email">Email address</label>
            <input class="form-quote-input" id="quote-email" type="email" name="email" placeholder="you@example.com">
          </div>

        </div>

      </div>

      <div class="form-quote-section">

        <h4 class="form-quote-section-title">
          <span class="form-quote-section-icon">2</span>
          Project information
        </h4>

        <div class="form-quote-grid">

          <div class="form-quote-field">
            <label class="form-quote-label" for="quote-type">Project type</label>
            <select class="form-quote-select" id="quote-type" name="project_type">
              <option>Website design</option>
              <option>Online store</option>
              <option>Landing page</option>
              <option>Custom development</option>
            </select>
          </div>

          <div class="form-quote-field">
            <label class="form-quote-label" for="quote-budget">Budget range</label>
            <select class="form-quote-select" id="quote-budget" name="budget">
              <option>$1,000 - $3,000</option>
              <option>$3,000 - $5,000</option>
              <option>$5,000 - $10,000</option>
              <option>$10,000+</option>
            </select>
          </div>

        </div>

        <div class="form-quote-field">
          <label class="form-quote-label">Timeline</label>
          <div class="form-quote-options">
            <label class="form-quote-option">
              <input type="radio" name="timeline" value="asap">
              <span>ASAP</span>
            </label>
            <label class="form-quote-option">
              <input type="radio" name="timeline" value="1-2-months" checked>
              <span>1-2 months</span>
            </label>
            <label class="form-quote-option">
              <input type="radio" name="timeline" value="flexible">
              <span>Flexible</span>
            </label>
          </div>
        </div>

        <div class="form-quote-field">
          <label class="form-quote-label" for="quote-message">Project details</label>
          <textarea class="form-quote-textarea" id="quote-message" name="message" placeholder="Describe your project, goals, pages, features, and any important requirements..."></textarea>
        </div>

      </div>

      <label class="form-quote-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this quote request.</span>
      </label>

      <button class="form-quote-submit" type="submit">Send Quote Request</button>

    </form>

  </div>

</div>

CSS

.form-quote-wrap{
width:min(100%,980px);
display:grid;
grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
gap:20px;
align-items:stretch;
}

.form-quote-sidebar{
padding:28px;
border-radius:28px;
background:#0f172a;
color:#ffffff;
position:relative;
overflow:hidden;
box-shadow:0 24px 70px rgba(15,23,42,.22);
}

.form-quote-sidebar::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-120px;
top:-110px;
border-radius:999px;
background:radial-gradient(circle,rgba(245,158,11,.34),transparent 70%);
pointer-events:none;
}

.form-quote-sidebar::after{
content:"";
position:absolute;
width:260px;
height:260px;
left:-130px;
bottom:-130px;
border-radius:999px;
background:radial-gradient(circle,rgba(34,197,94,.28),transparent 70%);
pointer-events:none;
}

.form-quote-sidebar-inner{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
height:100%;
}

.form-quote-kicker{
display:inline-flex;
align-items:center;
width:max-content;
gap:8px;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(245,158,11,.14);
border:1px solid rgba(245,158,11,.28);
color:#fbbf24;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-quote-title{
margin:0 0 14px;
font-size:clamp(30px,4vw,44px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-quote-text{
margin:0 0 24px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-quote-steps{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.form-quote-steps li{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.form-quote-step-number{
flex:0 0 auto;
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:999px;
background:linear-gradient(135deg,#f59e0b,#22c55e);
color:#0f172a;
font-size:13px;
font-weight:950;
}

.form-quote-step-content strong{
display:block;
margin-bottom:4px;
font-size:14px;
line-height:1.3;
color:#ffffff;
}

.form-quote-step-content span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-quote-help{
margin-top:auto;
padding-top:24px;
font-size:13px;
line-height:1.65;
color:#94a3b8;
}

.form-quote-card{
padding:28px;
border-radius:28px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-quote-card-header{
margin-bottom:22px;
}

.form-quote-card-title{
margin:0 0 8px;
font-size:30px;
line-height:1.1;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-quote-card-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-quote-form{
display:grid;
gap:20px;
}

.form-quote-section{
display:grid;
gap:14px;
padding:18px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-quote-section-title{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-quote-section-icon{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:10px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:950;
}

.form-quote-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-quote-field{
display:grid;
gap:8px;
}

.form-quote-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-quote-input,
.form-quote-select,
.form-quote-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-quote-input,
.form-quote-select{
min-height:50px;
padding:0 14px;
}

.form-quote-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-quote-textarea{
min-height:128px;
resize:vertical;
padding:13px 14px;
}

.form-quote-input::placeholder,
.form-quote-textarea::placeholder{
color:#94a3b8;
}

.form-quote-input:focus,
.form-quote-select:focus,
.form-quote-textarea:focus{
border-color:#f59e0b;
box-shadow:0 0 0 4px rgba(245,158,11,.13);
background:#ffffff;
}

.form-quote-options{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.form-quote-option{
position:relative;
cursor:pointer;
}

.form-quote-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-quote-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 12px;
border-radius:15px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-quote-option input:checked + span{
border-color:#f59e0b;
box-shadow:0 0 0 4px rgba(245,158,11,.12);
background:#fff7ed;
color:#9a3412;
}

.form-quote-consent{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-quote-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#f59e0b;
}

.form-quote-submit{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#f59e0b,#22c55e);
color:#0f172a;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(245,158,11,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-quote-submit:hover,
.form-quote-submit:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.06);
outline:none;
}

@media (max-width: 940px){
.form-quote-wrap{
grid-template-columns:1fr;
}

.form-quote-sidebar{
min-height:auto;
}

.form-quote-help{
margin-top:24px;
}

.form-quote-card-title{
font-size:28px;
}
}

@media (max-width: 640px){
.form-quote-sidebar,
.form-quote-card{
padding:22px;
border-radius:24px;
}

.form-quote-grid,
.form-quote-options{
grid-template-columns:1fr;
}

.form-quote-title{
font-size:32px;
}
}

This quote request form is a practical pattern for collecting structured project inquiries. The grouped sections help users understand what information is needed, while the sidebar explains the process and makes the form feel more trustworthy.

Use this pattern for web design quote forms, contractor inquiry forms, home service requests, B2B project forms, custom product requests, consultation forms, and service business websites.

11. Multi-Step Form

A multi-step form is useful when a form has too many fields to show all at once. Instead of overwhelming the user with one long form, the fields are divided into smaller steps. This can make quote requests, onboarding forms, signup flows, surveys, booking forms, and checkout flows feel easier to complete.

This example uses three simple steps: contact details, project details, and confirmation. The form includes a progress indicator, previous and next buttons, visible step states, and a small JavaScript snippet that controls the form navigation.

  • Perfect for onboarding, quotes, surveys, checkout, and booking forms
  • Splits longer forms into smaller steps
  • Includes progress indicator and step labels
  • Uses JavaScript for next and previous step behavior
  • Stacks cleanly on mobile screens
Multi-Step Form

Complete your request in 3 steps

Break a longer form into smaller steps so users can focus on one group of fields at a time.

1 Contact Your details
2 Project Request info
3 Review Confirm details

Contact details

Start with basic details so we know who to contact.

Project details

Choose a project type and add a short message.

Review and submit

Confirm the request and submit the form.

Step 1: Contact details The user enters their name and email address.
Step 2: Project details The user selects a project type and writes a short message.
Step 3: Submit request The final button sends the form data to your backend or form plugin.

HTML

<div class="form-multistep-card" data-multistep-form>

  <div class="form-multistep-header">
    <div class="form-multistep-kicker">Multi-Step Form</div>
    <h3 class="form-multistep-title">Complete your request in 3 steps</h3>
    <p class="form-multistep-text">Break a longer form into smaller steps so users can focus on one group of fields at a time.</p>
  </div>

  <div class="form-multistep-progress" aria-label="Form progress">

    <div class="form-multistep-progress-item is-active" data-multistep-progress="0">
      <span class="form-multistep-number">1</span>
      <span class="form-multistep-progress-text">
        <strong>Contact</strong>
        <span>Your details</span>
      </span>
    </div>

    <div class="form-multistep-progress-item" data-multistep-progress="1">
      <span class="form-multistep-number">2</span>
      <span class="form-multistep-progress-text">
        <strong>Project</strong>
        <span>Request info</span>
      </span>
    </div>

    <div class="form-multistep-progress-item" data-multistep-progress="2">
      <span class="form-multistep-number">3</span>
      <span class="form-multistep-progress-text">
        <strong>Review</strong>
        <span>Confirm details</span>
      </span>
    </div>

  </div>

  <form action="#" method="post">

    <div class="form-multistep-step is-active" data-multistep-step>

      <div class="form-multistep-panel">

        <h4 class="form-multistep-step-title">Contact details</h4>
        <p class="form-multistep-step-text">Start with basic details so we know who to contact.</p>

        <div class="form-multistep-form-grid">

          <div class="form-multistep-field">
            <label class="form-multistep-label" for="multi-name">Full name</label>
            <input class="form-multistep-input" id="multi-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="form-multistep-field">
            <label class="form-multistep-label" for="multi-email">Email address</label>
            <input class="form-multistep-input" id="multi-email" type="email" name="email" placeholder="you@example.com">
          </div>

        </div>

        <div class="form-multistep-actions">
          <button class="form-multistep-button form-multistep-button-secondary" type="button" disabled>Previous</button>
          <button class="form-multistep-button form-multistep-button-primary" type="button" data-multistep-next>Next Step</button>
        </div>

      </div>

    </div>

    <div class="form-multistep-step" data-multistep-step>

      <div class="form-multistep-panel">

        <h4 class="form-multistep-step-title">Project details</h4>
        <p class="form-multistep-step-text">Choose a project type and add a short message.</p>

        <div class="form-multistep-field">
          <label class="form-multistep-label" for="multi-service">Project type</label>
          <select class="form-multistep-select" id="multi-service" name="service">
            <option>Website design</option>
            <option>Landing page</option>
            <option>Online store</option>
            <option>Custom UI project</option>
          </select>
        </div>

        <div class="form-multistep-field">
          <label class="form-multistep-label" for="multi-message">Project message</label>
          <textarea class="form-multistep-textarea" id="multi-message" name="message" placeholder="Write a short project summary..."></textarea>
        </div>

        <div class="form-multistep-actions">
          <button class="form-multistep-button form-multistep-button-secondary" type="button" data-multistep-prev>Previous</button>
          <button class="form-multistep-button form-multistep-button-primary" type="button" data-multistep-next>Next Step</button>
        </div>

      </div>

    </div>

    <div class="form-multistep-step" data-multistep-step>

      <div class="form-multistep-panel">

        <h4 class="form-multistep-step-title">Review and submit</h4>
        <p class="form-multistep-step-text">Confirm the request and submit the form.</p>

        <div class="form-multistep-summary">

          <div class="form-multistep-summary-item">
            <strong>Step 1: Contact details</strong>
            <span>The user enters their name and email address.</span>
          </div>

          <div class="form-multistep-summary-item">
            <strong>Step 2: Project details</strong>
            <span>The user selects a project type and writes a short message.</span>
          </div>

          <div class="form-multistep-summary-item">
            <strong>Step 3: Submit request</strong>
            <span>The final button sends the form data to your backend or form plugin.</span>
          </div>

        </div>

        <div class="form-multistep-actions">
          <button class="form-multistep-button form-multistep-button-secondary" type="button" data-multistep-prev>Previous</button>
          <button class="form-multistep-button form-multistep-button-submit" type="submit">Submit Request</button>
        </div>

      </div>

    </div>

  </form>

</div>

CSS

.form-multistep-card{
width:min(100%,760px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.44);
backdrop-filter:blur(18px);
}

.form-multistep-header{
text-align:center;
margin-bottom:26px;
}

.form-multistep-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.14);
border:1px solid rgba(168,85,247,.28);
color:#d8b4fe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-multistep-title{
margin:0 0 10px;
font-size:clamp(30px,4.5vw,46px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-multistep-text{
margin:0 auto;
max-width:590px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-multistep-progress{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-bottom:24px;
}

.form-multistep-progress-item{
position:relative;
display:flex;
align-items:center;
gap:10px;
padding:13px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
color:#94a3b8;
transition:background .22s ease,border-color .22s ease,color .22s ease;
}

.form-multistep-progress-item.is-active{
background:rgba(168,85,247,.16);
border-color:rgba(168,85,247,.34);
color:#ffffff;
}

.form-multistep-progress-item.is-complete{
background:rgba(34,197,94,.12);
border-color:rgba(34,197,94,.28);
color:#ffffff;
}

.form-multistep-number{
flex:0 0 auto;
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(255,255,255,.10);
color:#ffffff;
font-size:13px;
font-weight:950;
}

.form-multistep-progress-item.is-active .form-multistep-number{
background:linear-gradient(135deg,#a855f7,#22d3ee);
}

.form-multistep-progress-item.is-complete .form-multistep-number{
background:#22c55e;
color:#052e16;
}

.form-multistep-progress-text{
display:grid;
gap:2px;
min-width:0;
}

.form-multistep-progress-text strong{
font-size:13px;
line-height:1.25;
font-weight:900;
color:inherit;
}

.form-multistep-progress-text span{
font-size:12px;
line-height:1.35;
color:#94a3b8;
}

.form-multistep-step{
display:none;
}

.form-multistep-step.is-active{
display:block;
}

.form-multistep-panel{
padding:24px;
border-radius:24px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 20px 60px rgba(0,0,0,.24);
}

.form-multistep-step-title{
margin:0 0 8px;
font-size:24px;
line-height:1.15;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
}

.form-multistep-step-text{
margin:0 0 18px;
font-size:14px;
line-height:1.7;
color:#cbd5e1;
}

.form-multistep-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-multistep-field{
display:grid;
gap:8px;
margin-bottom:14px;
}

.form-multistep-form-grid .form-multistep-field{
margin-bottom:0;
}

.form-multistep-label{
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-multistep-input,
.form-multistep-select,
.form-multistep-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(255,255,255,.07);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-multistep-input,
.form-multistep-select{
min-height:52px;
padding:0 15px;
}

.form-multistep-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-multistep-textarea{
min-height:128px;
resize:vertical;
padding:14px 15px;
}

.form-multistep-input::placeholder,
.form-multistep-textarea::placeholder{
color:#94a3b8;
}

.form-multistep-input:focus,
.form-multistep-select:focus,
.form-multistep-textarea:focus{
border-color:#a855f7;
box-shadow:0 0 0 4px rgba(168,85,247,.14);
background:rgba(255,255,255,.10);
}

.form-multistep-summary{
display:grid;
gap:12px;
}

.form-multistep-summary-item{
padding:15px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.form-multistep-summary-item strong{
display:block;
margin-bottom:5px;
font-size:14px;
line-height:1.3;
color:#ffffff;
}

.form-multistep-summary-item span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-multistep-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:20px;
}

.form-multistep-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border:0;
border-radius:16px;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,filter .22s ease;
}

.form-multistep-button:hover,
.form-multistep-button:focus{
transform:translateY(-2px);
outline:none;
}

.form-multistep-button-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
}

.form-multistep-button-secondary:hover,
.form-multistep-button-secondary:focus{
background:rgba(255,255,255,.12);
}

.form-multistep-button-primary{
background:linear-gradient(135deg,#a855f7,#22d3ee);
color:#ffffff;
box-shadow:0 18px 42px rgba(168,85,247,.24);
}

.form-multistep-button-primary:hover,
.form-multistep-button-primary:focus{
box-shadow:0 24px 52px rgba(34,211,238,.26);
filter:saturate(1.08);
}

.form-multistep-button-submit{
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
box-shadow:0 18px 42px rgba(34,197,94,.22);
}

.form-multistep-button-submit:hover,
.form-multistep-button-submit:focus{
box-shadow:0 24px 52px rgba(34,211,238,.26);
filter:saturate(1.08);
}

@media (max-width: 760px){
.form-multistep-card{
padding:22px;
border-radius:24px;
}

.form-multistep-progress{
grid-template-columns:1fr;
}

.form-multistep-form-grid{
grid-template-columns:1fr;
}

.form-multistep-actions{
align-items:stretch;
flex-direction:column-reverse;
}

.form-multistep-button{
width:100%;
}

.form-multistep-title{
font-size:32px;
}
}

@media (max-width: 520px){
.form-multistep-panel{
padding:18px;
border-radius:20px;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[data-multistep-form]").forEach(function (formWrap) {
    const steps = Array.from(formWrap.querySelectorAll("[data-multistep-step]"));
    const progressItems = Array.from(formWrap.querySelectorAll("[data-multistep-progress]"));
    const nextButtons = Array.from(formWrap.querySelectorAll("[data-multistep-next]"));
    const prevButtons = Array.from(formWrap.querySelectorAll("[data-multistep-prev]"));
    let currentStep = 0;

    function updateSteps() {
      steps.forEach(function (step, index) {
        step.classList.toggle("is-active", index === currentStep);
      });

      progressItems.forEach(function (item, index) {
        item.classList.toggle("is-active", index === currentStep);
        item.classList.toggle("is-complete", index < currentStep);
      });
    }

    nextButtons.forEach(function (button) {
      button.addEventListener("click", function () {
        if (currentStep < steps.length - 1) {
          currentStep += 1;
          updateSteps();
        }
      });
    });

    prevButtons.forEach(function (button) {
      button.addEventListener("click", function () {
        if (currentStep > 0) {
          currentStep -= 1;
          updateSteps();
        }
      });
    });

    updateSteps();
  });
});

This multi-step form is useful when you need more information from users but do not want to show a long form immediately. Each step reduces visual pressure and helps users focus on one part of the process at a time.

Use this pattern for quote request forms, onboarding flows, booking forms, surveys, checkout steps, account setup forms, and lead qualification forms.

12. Checkout Form UI

A checkout form UI is one of the most important form patterns for eCommerce websites. A clear checkout layout helps customers enter contact details, shipping information, and payment details without confusion. The design should feel organized, secure, and easy to complete.

This example uses a two-column checkout layout with customer fields on the left and an order summary on the right. The form includes contact information, shipping address fields, payment card UI fields, and a clear order button. It is a visual UI example and does not process real payments.

  • Perfect for eCommerce checkout pages and product order flows
  • Includes contact, shipping, and payment UI sections
  • Uses an order summary sidebar for clarity
  • Stacks into one column on mobile screens
  • Works with HTML and CSS only
Checkout Form

Complete your order

A clean checkout UI with contact details, shipping address, payment fields, and an order summary.

1 Contact information

● Secure checkout

2 Shipping address

3 Payment method

HTML

<div class="form-checkout-layout">

  <div class="form-checkout-main">

    <div class="form-checkout-header">
      <div class="form-checkout-kicker">Checkout Form</div>
      <h3 class="form-checkout-title">Complete your order</h3>
      <p class="form-checkout-text">A clean checkout UI with contact details, shipping address, payment fields, and an order summary.</p>
    </div>

    <form class="form-checkout-form" action="#" method="post">

      <div class="form-checkout-section">

        <div class="form-checkout-section-head">
          <h4 class="form-checkout-section-title">
            <span class="form-checkout-section-icon">1</span>
            Contact information
          </h4>
          <span class="form-checkout-secure">● Secure checkout</span>
        </div>

        <div class="form-checkout-grid">

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-email">Email address</label>
            <input class="form-checkout-input" id="checkout-email" type="email" name="email" placeholder="you@example.com">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-phone">Phone number</label>
            <input class="form-checkout-input" id="checkout-phone" type="tel" name="phone" placeholder="+1 555 123 4567">
          </div>

        </div>

      </div>

      <div class="form-checkout-section">

        <h4 class="form-checkout-section-title">
          <span class="form-checkout-section-icon">2</span>
          Shipping address
        </h4>

        <div class="form-checkout-grid">

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-first">First name</label>
            <input class="form-checkout-input" id="checkout-first" type="text" name="first_name" placeholder="Alex">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-last">Last name</label>
            <input class="form-checkout-input" id="checkout-last" type="text" name="last_name" placeholder="Morgan">
          </div>

          <div class="form-checkout-field form-checkout-field-full">
            <label class="form-checkout-label" for="checkout-address">Address</label>
            <input class="form-checkout-input" id="checkout-address" type="text" name="address" placeholder="123 Main Street">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-city">City</label>
            <input class="form-checkout-input" id="checkout-city" type="text" name="city" placeholder="New York">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-country">Country</label>
            <select class="form-checkout-select" id="checkout-country" name="country">
              <option>United States</option>
              <option>Canada</option>
              <option>United Kingdom</option>
              <option>Australia</option>
            </select>
          </div>

        </div>

      </div>

      <div class="form-checkout-section">

        <h4 class="form-checkout-section-title">
          <span class="form-checkout-section-icon">3</span>
          Payment method
        </h4>

        <div class="form-checkout-radio-group">

          <label class="form-checkout-radio">
            <input type="radio" name="payment" value="card" checked>
            <span>Credit Card</span>
          </label>

          <label class="form-checkout-radio">
            <input type="radio" name="payment" value="paypal">
            <span>PayPal</span>
          </label>

        </div>

        <div class="form-checkout-field">
          <label class="form-checkout-label" for="checkout-card">Card number</label>
          <input class="form-checkout-input" id="checkout-card" type="text" name="card_number" placeholder="1234 5678 9012 3456">
        </div>

        <div class="form-checkout-card-row">

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-name-card">Name on card</label>
            <input class="form-checkout-input" id="checkout-name-card" type="text" name="card_name" placeholder="Alex Morgan">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-expiry">Expiry</label>
            <input class="form-checkout-input" id="checkout-expiry" type="text" name="expiry" placeholder="MM/YY">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-cvc">CVC</label>
            <input class="form-checkout-input" id="checkout-cvc" type="text" name="cvc" placeholder="123">
          </div>

        </div>

      </div>

      <button class="form-checkout-button" type="submit">Place Order</button>

    </form>

  </div>

  <aside class="form-checkout-summary">

    <h4 class="form-checkout-summary-title">Order Summary</h4>

    <div class="form-checkout-items">

      <div class="form-checkout-item">
        <div class="form-checkout-thumb"></div>
        <div>
          <span class="form-checkout-item-name">Premium UI Kit</span>
          <span class="form-checkout-item-meta">Digital product × 1</span>
        </div>
        <span class="form-checkout-price">$49</span>
      </div>

      <div class="form-checkout-item">
        <div class="form-checkout-thumb"></div>
        <div>
          <span class="form-checkout-item-name">Form Templates</span>
          <span class="form-checkout-item-meta">Digital product × 1</span>
        </div>
        <span class="form-checkout-price">$29</span>
      </div>

    </div>

    <div class="form-checkout-coupon">
      <input type="text" placeholder="Coupon code">
      <button type="button">Apply</button>
    </div>

    <div class="form-checkout-totals">

      <div class="form-checkout-total-row">
        <span>Subtotal</span>
        <span>$78</span>
      </div>

      <div class="form-checkout-total-row">
        <span>Shipping</span>
        <span>Free</span>
      </div>

      <div class="form-checkout-total-row">
        <span>Tax</span>
        <span>$6</span>
      </div>

      <div class="form-checkout-total-row">
        <strong>Total</strong>
        <strong>$84</strong>
      </div>

    </div>

    <p class="form-checkout-note">This is a checkout UI demo. Connect it to your own payment gateway or eCommerce platform for real payments.</p>

  </aside>

</div>

CSS

.form-checkout-layout{
width:min(100%,1040px);
display:grid;
grid-template-columns:minmax(0,1.24fr) minmax(300px,.76fr);
gap:22px;
align-items:start;
}

.form-checkout-main,
.form-checkout-summary{
border-radius:28px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-checkout-main{
padding:28px;
}

.form-checkout-header{
margin-bottom:24px;
}

.form-checkout-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-checkout-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-checkout-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-checkout-form{
display:grid;
gap:20px;
}

.form-checkout-section{
display:grid;
gap:14px;
padding:18px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-checkout-section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.form-checkout-section-title{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-checkout-section-icon{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:11px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
}

.form-checkout-secure{
display:inline-flex;
align-items:center;
gap:7px;
font-size:12px;
font-weight:900;
color:#15803d;
}

.form-checkout-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-checkout-field{
display:grid;
gap:8px;
}

.form-checkout-field-full{
grid-column:1 / -1;
}

.form-checkout-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-checkout-input,
.form-checkout-select{
width:100%;
min-height:50px;
padding:0 14px;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-checkout-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-checkout-input::placeholder{
color:#94a3b8;
}

.form-checkout-input:focus,
.form-checkout-select:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-checkout-card-row{
display:grid;
grid-template-columns:1fr .45fr .35fr;
gap:14px;
}

.form-checkout-radio-group{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-checkout-radio{
position:relative;
cursor:pointer;
}

.form-checkout-radio input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-checkout-radio span{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 12px;
border-radius:15px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-checkout-radio input:checked + span{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#eff6ff;
color:#1d4ed8;
}

.form-checkout-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-checkout-button:hover,
.form-checkout-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.06);
outline:none;
}

.form-checkout-summary{
padding:24px;
position:sticky;
top:20px;
}

.form-checkout-summary-title{
margin:0 0 18px;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.form-checkout-items{
display:grid;
gap:14px;
margin-bottom:18px;
}

.form-checkout-item{
display:grid;
grid-template-columns:54px minmax(0,1fr) auto;
gap:12px;
align-items:center;
}

.form-checkout-thumb{
width:54px;
height:54px;
border-radius:16px;
background:
linear-gradient(135deg,rgba(37,99,235,.18),rgba(34,197,94,.18)),
#f1f5f9;
border:1px solid #e2e8f0;
}

.form-checkout-item-name{
display:block;
font-size:14px;
line-height:1.35;
font-weight:900;
color:#0f172a;
}

.form-checkout-item-meta{
display:block;
margin-top:3px;
font-size:12px;
line-height:1.35;
color:#64748b;
}

.form-checkout-price{
font-size:14px;
font-weight:950;
color:#0f172a;
}

.form-checkout-totals{
display:grid;
gap:10px;
padding-top:18px;
border-top:1px solid #e2e8f0;
}

.form-checkout-total-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
font-size:14px;
line-height:1.4;
color:#64748b;
}

.form-checkout-total-row strong{
font-size:18px;
color:#0f172a;
}

.form-checkout-coupon{
display:flex;
gap:8px;
margin:18px 0;
}

.form-checkout-coupon input{
width:100%;
min-height:46px;
padding:0 13px;
border:1px solid #dbe3ef;
border-radius:14px;
background:#f8fafc;
color:#0f172a;
font-size:14px;
outline:none;
box-sizing:border-box;
}

.form-checkout-coupon button{
min-height:46px;
padding:0 14px;
border:0;
border-radius:14px;
background:#0f172a;
color:#ffffff;
font-size:13px;
font-weight:900;
cursor:pointer;
}

.form-checkout-note{
margin:16px 0 0;
padding:14px;
border-radius:16px;
background:#f0fdf4;
border:1px solid #bbf7d0;
color:#166534;
font-size:13px;
line-height:1.55;
}

@media (max-width: 940px){
.form-checkout-layout{
grid-template-columns:1fr;
}

.form-checkout-summary{
position:relative;
top:auto;
}
}

@media (max-width: 640px){
.form-checkout-main,
.form-checkout-summary{
padding:22px;
border-radius:24px;
}

.form-checkout-grid,
.form-checkout-card-row,
.form-checkout-radio-group{
grid-template-columns:1fr;
}

.form-checkout-section-head{
align-items:flex-start;
flex-direction:column;
}

.form-checkout-title{
font-size:32px;
}
}

This checkout form UI is useful for showing how a modern eCommerce checkout can be structured. The main form is divided into clear sections, while the order summary keeps pricing, products, coupons, and totals visible.

Use this pattern for online stores, digital product checkout pages, WooCommerce-inspired layouts, order forms, payment UI demos, and eCommerce landing pages. For real payments, connect the form to a secure payment gateway or eCommerce platform.

13. Booking Form

A booking form helps users reserve a service, schedule a visit, book a room, request a consultation, or choose a time slot. It is useful for hotels, restaurants, event websites, agencies, consultants, salons, clinics, rental websites, and service-based businesses.

This example uses a modern booking card with service selection, date, time, number of guests, contact details, and a short message field. The layout is structured, responsive, and designed to make the booking process feel clear and professional.

  • Perfect for hotels, restaurants, events, consultants, and service businesses
  • Includes service, date, time, guests, and contact fields
  • Uses a clean two-column form layout on desktop
  • Stacks into a single column on mobile screens
  • Works with HTML and CSS only
B Bookly
Easy Booking

Reserve your perfect time

Use this booking form layout to help visitors choose a service, date, time, and contact details in one clean flow.

  • ✓ Fast booking request
  • ✓ Clear date and time fields
  • ✓ Mobile-friendly layout

Book your visit

Choose a service, select your preferred date and time, and send your booking request.

Flexible Choose a time
Simple Short request
Fast Quick reply

HTML

<div class="form-booking-layout">

  <div class="form-booking-info">

    <div class="form-booking-info-inner">

      <div class="form-booking-brand">
        <span class="form-booking-brand-icon">B</span>
        <span>Bookly</span>
      </div>

      <div class="form-booking-info-content">

        <div class="form-booking-kicker">Easy Booking</div>

        <h3 class="form-booking-heading">Reserve your perfect time</h3>

        <p class="form-booking-copy">Use this booking form layout to help visitors choose a service, date, time, and contact details in one clean flow.</p>

        <ul class="form-booking-benefits">
          <li><span class="form-booking-check">✓</span> Fast booking request</li>
          <li><span class="form-booking-check">✓</span> Clear date and time fields</li>
          <li><span class="form-booking-check">✓</span> Mobile-friendly layout</li>
        </ul>

      </div>

    </div>

  </div>

  <div class="form-booking-card">

    <div class="form-booking-card-header">
      <h3 class="form-booking-card-title">Book your visit</h3>
      <p class="form-booking-card-text">Choose a service, select your preferred date and time, and send your booking request.</p>
    </div>

    <form class="form-booking-form" action="#" method="post">

      <div class="form-booking-grid">

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-service">Service</label>
          <select class="form-booking-select" id="booking-service" name="service">
            <option>Private consultation</option>
            <option>Room reservation</option>
            <option>Event booking</option>
            <option>Guided tour</option>
          </select>
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-guests">Guests</label>
          <select class="form-booking-select" id="booking-guests" name="guests">
            <option>1 guest</option>
            <option>2 guests</option>
            <option>3 guests</option>
            <option>4+ guests</option>
          </select>
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-date">Date</label>
          <input class="form-booking-input" id="booking-date" type="date" name="date">
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-time">Time</label>
          <input class="form-booking-input" id="booking-time" type="time" name="time">
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-name">Full name</label>
          <input class="form-booking-input" id="booking-name" type="text" name="name" placeholder="Your name">
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-email">Email address</label>
          <input class="form-booking-input" id="booking-email" type="email" name="email" placeholder="you@example.com">
        </div>

        <div class="form-booking-field form-booking-field-full">
          <label class="form-booking-label" for="booking-message">Notes</label>
          <textarea class="form-booking-textarea" id="booking-message" name="message" placeholder="Add any special requests or important details..."></textarea>
        </div>

      </div>

      <div class="form-booking-summary">

        <div class="form-booking-summary-item">
          <strong>Flexible</strong>
          <span>Choose a time</span>
        </div>

        <div class="form-booking-summary-item">
          <strong>Simple</strong>
          <span>Short request</span>
        </div>

        <div class="form-booking-summary-item">
          <strong>Fast</strong>
          <span>Quick reply</span>
        </div>

      </div>

      <button class="form-booking-button" type="submit">Send Booking Request</button>

    </form>

  </div>

</div>

CSS

.form-booking-layout{
width:min(100%,980px);
display:grid;
grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
gap:22px;
align-items:stretch;
}

.form-booking-info{
position:relative;
overflow:hidden;
padding:30px;
border-radius:30px;
background:
linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.form-booking-info::before{
content:"";
position:absolute;
inset:20px;
border-radius:24px;
background:
linear-gradient(180deg,rgba(2,6,23,.10),rgba(2,6,23,.78)),
url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80");
background-size:cover;
background-position:center;
opacity:.76;
}

.form-booking-info-inner{
position:relative;
z-index:2;
min-height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:28px;
}

.form-booking-brand{
display:inline-flex;
align-items:center;
gap:10px;
color:#ffffff;
font-size:18px;
font-weight:950;
letter-spacing:-.03em;
}

.form-booking-brand-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:16px;
background:linear-gradient(135deg,#0ea5e9,#f59e0b);
box-shadow:0 14px 34px rgba(14,165,233,.24);
color:#ffffff;
font-size:17px;
font-weight:950;
}

.form-booking-info-content{
max-width:360px;
}

.form-booking-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(12px);
}

.form-booking-heading{
margin:0 0 14px;
font-size:clamp(30px,4vw,44px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-booking-copy{
margin:0 0 20px;
font-size:15px;
line-height:1.75;
color:#e2e8f0;
}

.form-booking-benefits{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-booking-benefits li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:800;
color:#ffffff;
}

.form-booking-check{
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(14,165,233,.18);
border:1px solid rgba(14,165,233,.34);
color:#7dd3fc;
font-size:13px;
font-weight:950;
}

.form-booking-card{
padding:28px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.form-booking-card-header{
margin-bottom:22px;
}

.form-booking-card-title{
margin:0 0 8px;
font-size:30px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.form-booking-card-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-booking-form{
display:grid;
gap:16px;
}

.form-booking-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-booking-field{
display:grid;
gap:8px;
}

.form-booking-field-full{
grid-column:1 / -1;
}

.form-booking-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-booking-input,
.form-booking-select,
.form-booking-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-booking-input,
.form-booking-select{
min-height:50px;
padding:0 14px;
}

.form-booking-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-booking-textarea{
min-height:118px;
resize:vertical;
padding:13px 14px;
}

.form-booking-input::placeholder,
.form-booking-textarea::placeholder{
color:#94a3b8;
}

.form-booking-input:focus,
.form-booking-select:focus,
.form-booking-textarea:focus{
border-color:#0ea5e9;
box-shadow:0 0 0 4px rgba(14,165,233,.13);
background:#ffffff;
}

.form-booking-summary{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
padding:14px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-booking-summary-item{
text-align:center;
}

.form-booking-summary-item strong{
display:block;
margin-bottom:4px;
font-size:14px;
line-height:1.25;
color:#0f172a;
}

.form-booking-summary-item span{
display:block;
font-size:12px;
line-height:1.35;
color:#64748b;
}

.form-booking-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#0ea5e9,#f59e0b);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(14,165,233,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-booking-button:hover,
.form-booking-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(245,158,11,.24);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 940px){
.form-booking-layout{
grid-template-columns:1fr;
}

.form-booking-info{
min-height:360px;
}

.form-booking-info-inner{
min-height:310px;
}

.form-booking-card-title{
font-size:28px;
}
}

@media (max-width: 640px){
.form-booking-info,
.form-booking-card{
padding:22px;
border-radius:24px;
}

.form-booking-info::before{
inset:14px;
border-radius:20px;
}

.form-booking-grid,
.form-booking-summary{
grid-template-columns:1fr;
}

.form-booking-heading{
font-size:32px;
}
}

This booking form is useful when visitors need to choose a service, date, time, and contact details in one place. The image panel gives the section a more premium feeling, while the form remains clear and practical.

Use this pattern for hotels, restaurants, event websites, consultants, clinics, salons, travel websites, rental services, and service businesses that need a simple booking request flow.

14. Appointment Form

An appointment form helps users schedule a meeting, consultation, service visit, medical appointment, salon session, coaching call, or support appointment. It is similar to a booking form, but usually focuses more on choosing a professional, appointment type, date, and preferred time.

This example uses a clean appointment scheduling layout with appointment type cards, personal details, date and time fields, and a clear confirmation button. The design works well for service providers that want a structured and professional scheduling form.

  • Perfect for clinics, salons, consultants, coaches, and service providers
  • Includes appointment type, date, time, and contact details
  • Uses visual appointment type cards
  • Includes a clean confirmation panel
  • Works with HTML and CSS only
Appointment Form

Schedule your appointment

A professional appointment form for clinics, salons, consultants, coaches, and service businesses.

30 min Average appointment request time slot

Choose appointment type

Appointment details

What happens next?

  • 1We receive your appointment request.
  • 2Our team checks availability.
  • 3You receive a confirmation by email or phone.
Please note that this form sends an appointment request. The appointment is confirmed only after the service provider replies.

HTML

<div class="form-appointment-shell">

  <div class="form-appointment-header">

    <div class="form-appointment-header-content">

      <div class="form-appointment-kicker">Appointment Form</div>

      <h3 class="form-appointment-title">Schedule your appointment</h3>

      <p class="form-appointment-text">A professional appointment form for clinics, salons, consultants, coaches, and service businesses.</p>

    </div>

    <div class="form-appointment-status">
      <strong>30 min</strong>
      <span>Average appointment request time slot</span>
    </div>

  </div>

  <div class="form-appointment-card">

    <form class="form-appointment-form" action="#" method="post">

      <div class="form-appointment-section">

        <h4 class="form-appointment-section-title">Choose appointment type</h4>

        <div class="form-appointment-types">

          <label class="form-appointment-type">
            <input type="radio" name="appointment_type" value="consultation" checked>
            <span>
              <strong>Consultation</strong>
              <small>Talk with a specialist</small>
            </span>
          </label>

          <label class="form-appointment-type">
            <input type="radio" name="appointment_type" value="service">
            <span>
              <strong>Service Visit</strong>
              <small>Book a service time</small>
            </span>
          </label>

          <label class="form-appointment-type">
            <input type="radio" name="appointment_type" value="follow-up">
            <span>
              <strong>Follow-Up</strong>
              <small>Continue an existing case</small>
            </span>
          </label>

        </div>

      </div>

      <div class="form-appointment-section">

        <h4 class="form-appointment-section-title">Appointment details</h4>

        <div class="form-appointment-grid">

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-date">Preferred date</label>
            <input class="form-appointment-input" id="appointment-date" type="date" name="date">
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-time">Preferred time</label>
            <input class="form-appointment-input" id="appointment-time" type="time" name="time">
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-provider">Specialist</label>
            <select class="form-appointment-select" id="appointment-provider" name="provider">
              <option>Any available specialist</option>
              <option>Emma Wilson</option>
              <option>James Carter</option>
              <option>Sophia Miller</option>
            </select>
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-phone">Phone number</label>
            <input class="form-appointment-input" id="appointment-phone" type="tel" name="phone" placeholder="+1 555 123 4567">
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-name">Full name</label>
            <input class="form-appointment-input" id="appointment-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-email">Email address</label>
            <input class="form-appointment-input" id="appointment-email" type="email" name="email" placeholder="you@example.com">
          </div>

          <div class="form-appointment-field form-appointment-field-full">
            <label class="form-appointment-label" for="appointment-message">Notes</label>
            <textarea class="form-appointment-textarea" id="appointment-message" name="message" placeholder="Add any details that help us prepare for your appointment..."></textarea>
          </div>

        </div>

      </div>

      <button class="form-appointment-button" type="submit">Request Appointment</button>

    </form>

    <div class="form-appointment-side">

      <div class="form-appointment-preview-card">

        <h4>What happens next?</h4>

        <ul class="form-appointment-preview-list">
          <li><span class="form-appointment-preview-dot">1</span>We receive your appointment request.</li>
          <li><span class="form-appointment-preview-dot">2</span>Our team checks availability.</li>
          <li><span class="form-appointment-preview-dot">3</span>You receive a confirmation by email or phone.</li>
        </ul>

      </div>

      <div class="form-appointment-note">
        Please note that this form sends an appointment request. The appointment is confirmed only after the service provider replies.
      </div>

    </div>

  </div>

</div>

CSS

.form-appointment-shell{
width:min(100%,940px);
display:grid;
gap:22px;
}

.form-appointment-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:20px;
align-items:end;
padding:26px;
border-radius:28px;
background:#0f172a;
position:relative;
overflow:hidden;
box-shadow:0 24px 70px rgba(15,23,42,.20);
}

.form-appointment-header::before{
content:"";
position:absolute;
width:280px;
height:280px;
right:-120px;
top:-120px;
border-radius:999px;
background:radial-gradient(circle,rgba(168,85,247,.38),transparent 70%);
pointer-events:none;
}

.form-appointment-header::after{
content:"";
position:absolute;
width:240px;
height:240px;
left:-120px;
bottom:-130px;
border-radius:999px;
background:radial-gradient(circle,rgba(14,165,233,.30),transparent 70%);
pointer-events:none;
}

.form-appointment-header-content,
.form-appointment-status{
position:relative;
z-index:2;
}

.form-appointment-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.16);
border:1px solid rgba(168,85,247,.30);
color:#d8b4fe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-appointment-title{
margin:0 0 10px;
font-size:clamp(30px,4.5vw,48px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-appointment-text{
margin:0;
max-width:620px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-appointment-status{
display:grid;
gap:8px;
min-width:180px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.form-appointment-status strong{
display:block;
font-size:22px;
line-height:1;
font-weight:950;
color:#ffffff;
}

.form-appointment-status span{
display:block;
font-size:13px;
line-height:1.45;
color:#cbd5e1;
}

.form-appointment-card{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.58fr);
gap:22px;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-appointment-form{
display:grid;
gap:20px;
}

.form-appointment-section{
display:grid;
gap:14px;
}

.form-appointment-section-title{
margin:0;
font-size:16px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-appointment-types{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.form-appointment-type{
position:relative;
cursor:pointer;
}

.form-appointment-type input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-appointment-type span{
display:grid;
gap:6px;
min-height:96px;
padding:15px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#475569;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease;
}

.form-appointment-type strong{
display:block;
font-size:14px;
line-height:1.25;
font-weight:950;
color:#0f172a;
}

.form-appointment-type small{
display:block;
font-size:12px;
line-height:1.45;
color:#64748b;
}

.form-appointment-type input:checked + span{
border-color:#8b5cf6;
box-shadow:0 0 0 4px rgba(139,92,246,.12);
background:#faf5ff;
transform:translateY(-1px);
}

.form-appointment-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-appointment-field{
display:grid;
gap:8px;
}

.form-appointment-field-full{
grid-column:1 / -1;
}

.form-appointment-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-appointment-input,
.form-appointment-select,
.form-appointment-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-appointment-input,
.form-appointment-select{
min-height:50px;
padding:0 14px;
}

.form-appointment-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-appointment-textarea{
min-height:110px;
resize:vertical;
padding:13px 14px;
}

.form-appointment-input::placeholder,
.form-appointment-textarea::placeholder{
color:#94a3b8;
}

.form-appointment-input:focus,
.form-appointment-select:focus,
.form-appointment-textarea:focus{
border-color:#8b5cf6;
box-shadow:0 0 0 4px rgba(139,92,246,.12);
background:#ffffff;
}

.form-appointment-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#8b5cf6,#0ea5e9);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(139,92,246,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-appointment-button:hover,
.form-appointment-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(14,165,233,.25);
filter:saturate(1.08);
outline:none;
}

.form-appointment-side{
display:grid;
gap:14px;
align-content:start;
}

.form-appointment-preview-card{
padding:20px;
border-radius:24px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-appointment-preview-card h4{
margin:0 0 12px;
font-size:19px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.form-appointment-preview-list{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-appointment-preview-list li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
color:#475569;
}

.form-appointment-preview-dot{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:#ede9fe;
color:#7c3aed;
font-size:12px;
font-weight:950;
}

.form-appointment-note{
padding:18px;
border-radius:22px;
background:#eff6ff;
border:1px solid #bfdbfe;
color:#1e40af;
font-size:14px;
line-height:1.65;
}

@media (max-width: 920px){
.form-appointment-header{
grid-template-columns:1fr;
}

.form-appointment-card{
grid-template-columns:1fr;
}

.form-appointment-status{
max-width:260px;
}
}

@media (max-width: 640px){
.form-appointment-header,
.form-appointment-card{
padding:22px;
border-radius:24px;
}

.form-appointment-types,
.form-appointment-grid{
grid-template-columns:1fr;
}

.form-appointment-title{
font-size:32px;
}
}

This appointment form is useful when the user needs to choose a specific appointment type, date, time, and provider. The visual appointment cards make the first choice easier, while the side panel explains what happens after submitting the request.

Use this pattern for clinics, salons, consultants, coaches, service providers, repair companies, onboarding calls, support sessions, and professional appointment scheduling pages.

15. Support Ticket Form

A support ticket form helps users report a problem, request help, ask a technical question, or contact a customer support team with structured information. It is useful for SaaS products, hosting companies, software dashboards, WordPress plugins, online stores, customer portals, and help centers.

This example uses a clean support ticket layout with category selection, priority level, contact details, subject, message, and file attachment field. The structure helps users provide enough information for the support team to understand and solve the issue faster.

  • Perfect for SaaS products, customer portals, help centers, and support pages
  • Includes category, priority, subject, message, and attachment fields
  • Uses a clear support ticket layout with helpful side information
  • Works well for technical support and customer service workflows
  • Uses HTML and CSS only
Support Ticket

Submit a support request

Use this support ticket form to collect issue details, priority, contact information, and optional attachments.

1 Ticket details

2 Contact and issue

Upload a screenshot, PDF, or log file if it helps explain the issue.

HTML

<div class="form-support-layout">

  <div class="form-support-card">

    <div class="form-support-header">
      <div class="form-support-kicker">Support Ticket</div>
      <h3 class="form-support-title">Submit a support request</h3>
      <p class="form-support-text">Use this support ticket form to collect issue details, priority, contact information, and optional attachments.</p>
    </div>

    <form class="form-support-form" action="#" method="post">

      <div class="form-support-section">

        <h4 class="form-support-section-title">
          <span class="form-support-section-icon">1</span>
          Ticket details
        </h4>

        <div class="form-support-grid">

          <div class="form-support-field">
            <label class="form-support-label" for="support-category">Category</label>
            <select class="form-support-select" id="support-category" name="category">
              <option>Technical issue</option>
              <option>Billing question</option>
              <option>Account access</option>
              <option>Feature request</option>
            </select>
          </div>

          <div class="form-support-field">
            <label class="form-support-label" for="support-product">Product</label>
            <select class="form-support-select" id="support-product" name="product">
              <option>Website dashboard</option>
              <option>WordPress plugin</option>
              <option>Hosting account</option>
              <option>API integration</option>
            </select>
          </div>

          <div class="form-support-field form-support-field-full">
            <label class="form-support-label">Priority</label>
            <div class="form-support-priority">
              <label class="form-support-priority-option">
                <input type="radio" name="priority" value="low">
                <span>Low</span>
              </label>
              <label class="form-support-priority-option">
                <input type="radio" name="priority" value="normal" checked>
                <span>Normal</span>
              </label>
              <label class="form-support-priority-option">
                <input type="radio" name="priority" value="urgent">
                <span>Urgent</span>
              </label>
            </div>
          </div>

        </div>

      </div>

      <div class="form-support-section">

        <h4 class="form-support-section-title">
          <span class="form-support-section-icon">2</span>
          Contact and issue
        </h4>

        <div class="form-support-grid">

          <div class="form-support-field">
            <label class="form-support-label" for="support-name">Full name</label>
            <input class="form-support-input" id="support-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="form-support-field">
            <label class="form-support-label" for="support-email">Email address</label>
            <input class="form-support-input" id="support-email" type="email" name="email" placeholder="you@example.com">
          </div>

          <div class="form-support-field form-support-field-full">
            <label class="form-support-label" for="support-subject">Subject</label>
            <input class="form-support-input" id="support-subject" type="text" name="subject" placeholder="Briefly describe the problem">
          </div>

          <div class="form-support-field form-support-field-full">
            <label class="form-support-label" for="support-message">Issue description</label>
            <textarea class="form-support-textarea" id="support-message" name="message" placeholder="Explain what happened, what you expected, and any error messages you saw..."></textarea>
          </div>

          <div class="form-support-field form-support-field-full">
            <label class="form-support-label" for="support-file">Attachment</label>
            <div class="form-support-file">
              <input id="support-file" type="file" name="attachment">
              <p class="form-support-help">Upload a screenshot, PDF, or log file if it helps explain the issue.</p>
            </div>
          </div>

        </div>

      </div>

      <button class="form-support-button" type="submit">Submit Ticket</button>

    </form>

  </div>

  <aside class="form-support-aside">

    <h4 class="form-support-aside-title">Before you submit</h4>

    <p class="form-support-aside-text">A better support ticket helps the team solve the problem faster. Include useful details whenever possible.</p>

    <ul class="form-support-info-list">

      <li>
        <span class="form-support-info-icon">1</span>
        <span class="form-support-info-content">
          <strong>Describe the issue</strong>
          <span>Explain what happened and where it happened.</span>
        </span>
      </li>

      <li>
        <span class="form-support-info-icon">2</span>
        <span class="form-support-info-content">
          <strong>Add screenshots</strong>
          <span>Visual proof can make technical issues easier to understand.</span>
        </span>
      </li>

      <li>
        <span class="form-support-info-icon">3</span>
        <span class="form-support-info-content">
          <strong>Choose priority</strong>
          <span>Use urgent only when something important is blocked.</span>
        </span>
      </li>

    </ul>

    <div class="form-support-status">
      <strong>Average response time</strong>
      Most normal tickets receive a first reply within one business day.
    </div>

  </aside>

</div>

CSS

.form-support-layout{
width:min(100%,1000px);
display:grid;
grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);
gap:22px;
align-items:start;
}

.form-support-card,
.form-support-aside{
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 90px rgba(0,0,0,.36);
backdrop-filter:blur(18px);
}

.form-support-card{
padding:30px;
}

.form-support-header{
margin-bottom:24px;
}

.form-support-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(59,130,246,.14);
border:1px solid rgba(59,130,246,.28);
color:#93c5fd;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-support-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-support-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-support-form{
display:grid;
gap:18px;
}

.form-support-section{
display:grid;
gap:14px;
padding:18px;
border-radius:22px;
background:rgba(15,23,42,.68);
border:1px solid rgba(255,255,255,.10);
}

.form-support-section-title{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-support-section-icon{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:11px;
background:rgba(59,130,246,.18);
color:#93c5fd;
font-size:13px;
font-weight:950;
}

.form-support-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-support-field{
display:grid;
gap:8px;
}

.form-support-field-full{
grid-column:1 / -1;
}

.form-support-label{
font-size:13px;
font-weight:850;
color:#ffffff;
}

.form-support-input,
.form-support-select,
.form-support-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:15px;
background:rgba(255,255,255,.07);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-support-input,
.form-support-select{
min-height:50px;
padding:0 14px;
}

.form-support-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-support-textarea{
min-height:132px;
resize:vertical;
padding:13px 14px;
}

.form-support-input::placeholder,
.form-support-textarea::placeholder{
color:#94a3b8;
}

.form-support-input:focus,
.form-support-select:focus,
.form-support-textarea:focus{
border-color:#60a5fa;
box-shadow:0 0 0 4px rgba(96,165,250,.14);
background:rgba(255,255,255,.10);
}

.form-support-priority{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.form-support-priority-option{
position:relative;
cursor:pointer;
}

.form-support-priority-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-support-priority-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 12px;
border-radius:15px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-support-priority-option input:checked + span{
border-color:#60a5fa;
box-shadow:0 0 0 4px rgba(96,165,250,.14);
background:rgba(59,130,246,.16);
color:#ffffff;
}

.form-support-file{
position:relative;
display:grid;
gap:8px;
}

.form-support-file input{
width:100%;
min-height:54px;
padding:13px;
border:1px dashed rgba(147,197,253,.36);
border-radius:16px;
background:rgba(59,130,246,.08);
color:#cbd5e1;
font-size:14px;
box-sizing:border-box;
}

.form-support-help{
margin:0;
font-size:13px;
line-height:1.55;
color:#94a3b8;
}

.form-support-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22d3ee);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-support-button:hover,
.form-support-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.28);
filter:saturate(1.08);
outline:none;
}

.form-support-aside{
padding:24px;
position:sticky;
top:20px;
}

.form-support-aside-title{
margin:0 0 14px;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.form-support-aside-text{
margin:0 0 18px;
font-size:14px;
line-height:1.7;
color:#cbd5e1;
}

.form-support-info-list{
display:grid;
gap:12px;
margin:0 0 18px;
padding:0;
list-style:none;
}

.form-support-info-list li{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
border-radius:18px;
background:rgba(15,23,42,.62);
border:1px solid rgba(255,255,255,.10);
}

.form-support-info-icon{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(34,211,238,.14);
color:#67e8f9;
font-size:13px;
font-weight:950;
flex:0 0 auto;
}

.form-support-info-content strong{
display:block;
margin-bottom:4px;
font-size:14px;
line-height:1.3;
color:#ffffff;
}

.form-support-info-content span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-support-status{
padding:16px;
border-radius:20px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.26);
color:#bbf7d0;
font-size:13px;
line-height:1.6;
}

.form-support-status strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:14px;
}

@media (max-width: 920px){
.form-support-layout{
grid-template-columns:1fr;
}

.form-support-aside{
position:relative;
top:auto;
}
}

@media (max-width: 640px){
.form-support-card,
.form-support-aside{
padding:22px;
border-radius:24px;
}

.form-support-grid,
.form-support-priority{
grid-template-columns:1fr;
}

.form-support-title{
font-size:32px;
}
}

This support ticket form is useful when users need to send structured issue reports instead of a simple contact message. The category, product, priority, subject, message, and attachment fields help support teams understand the request faster.

Use this pattern for SaaS dashboards, hosting support pages, WordPress plugin support forms, customer portals, help centers, eCommerce support pages, and technical service websites.

16. Feedback Form

A feedback form helps collect opinions, suggestions, satisfaction levels, and improvement ideas from users. It can be used after a purchase, after a support interaction, inside a dashboard, at the end of a service, or on a website feedback page.

This example uses a modern feedback card with satisfaction options, topic selection, contact details, and an open message field. The layout is friendly, compact, and designed to make users feel comfortable sharing quick feedback.

  • Perfect for product feedback, service feedback, website feedback, and customer satisfaction forms
  • Includes visual satisfaction choices
  • Uses topic selection and optional contact details
  • Works well inside dashboards, support pages, and post-purchase screens
  • Uses HTML and CSS only

HTML

<div class="form-feedback-card">

  <div class="form-feedback-top">

    <div class="form-feedback-top-inner">

      <div class="form-feedback-kicker">Feedback Form</div>

      <h3 class="form-feedback-title">How was your experience?</h3>

      <p class="form-feedback-text">Use this feedback form to collect user satisfaction, suggestions, and improvement ideas in a friendly way.</p>

    </div>

  </div>

  <div class="form-feedback-body">

    <form class="form-feedback-form" action="#" method="post">

      <div class="form-feedback-section">

        <h4 class="form-feedback-section-title">Choose your satisfaction level</h4>

        <div class="form-feedback-rating">

          <label class="form-feedback-rating-option">
            <input type="radio" name="satisfaction" value="great" checked>
            <span>
              <span class="form-feedback-emoji">😍</span>
              <span class="form-feedback-label-text">Great</span>
            </span>
          </label>

          <label class="form-feedback-rating-option">
            <input type="radio" name="satisfaction" value="good">
            <span>
              <span class="form-feedback-emoji">🙂</span>
              <span class="form-feedback-label-text">Good</span>
            </span>
          </label>

          <label class="form-feedback-rating-option">
            <input type="radio" name="satisfaction" value="okay">
            <span>
              <span class="form-feedback-emoji">😐</span>
              <span class="form-feedback-label-text">Okay</span>
            </span>
          </label>

          <label class="form-feedback-rating-option">
            <input type="radio" name="satisfaction" value="bad">
            <span>
              <span class="form-feedback-emoji">🙁</span>
              <span class="form-feedback-label-text">Bad</span>
            </span>
          </label>

        </div>

      </div>

      <div class="form-feedback-section">

        <h4 class="form-feedback-section-title">Tell us more</h4>

        <div class="form-feedback-grid">

          <div class="form-feedback-field">
            <label class="form-feedback-label" for="feedback-topic">Feedback topic</label>
            <select class="form-feedback-select" id="feedback-topic" name="topic">
              <option>Website experience</option>
              <option>Product quality</option>
              <option>Customer support</option>
              <option>Checkout process</option>
            </select>
          </div>

          <div class="form-feedback-field">
            <label class="form-feedback-label" for="feedback-email">Email address</label>
            <input class="form-feedback-input" id="feedback-email" type="email" name="email" placeholder="Optional email">
          </div>

          <div class="form-feedback-field form-feedback-field-full">
            <label class="form-feedback-label" for="feedback-message">Your feedback</label>
            <textarea class="form-feedback-textarea" id="feedback-message" name="message" placeholder="Share your thoughts, suggestions, or anything we can improve..."></textarea>
          </div>

        </div>

      </div>

      <label class="form-feedback-check">
        <input type="checkbox" name="followup">
        <span>You may contact me about this feedback if more details are needed.</span>
      </label>

      <button class="form-feedback-button" type="submit">Send Feedback</button>

    </form>

  </div>

</div>

CSS

.form-feedback-card{
width:min(100%,720px);
overflow:hidden;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.form-feedback-top{
position:relative;
padding:30px;
background:#0f172a;
overflow:hidden;
}

.form-feedback-top::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-120px;
top:-120px;
border-radius:999px;
background:radial-gradient(circle,rgba(244,114,182,.36),transparent 70%);
pointer-events:none;
}

.form-feedback-top::after{
content:"";
position:absolute;
width:260px;
height:260px;
left:-130px;
bottom:-150px;
border-radius:999px;
background:radial-gradient(circle,rgba(250,204,21,.26),transparent 70%);
pointer-events:none;
}

.form-feedback-top-inner{
position:relative;
z-index:2;
}

.form-feedback-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(244,114,182,.16);
border:1px solid rgba(244,114,182,.30);
color:#f9a8d4;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-feedback-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-feedback-text{
margin:0;
max-width:600px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-feedback-body{
padding:30px;
}

.form-feedback-form{
display:grid;
gap:20px;
}

.form-feedback-section{
display:grid;
gap:14px;
}

.form-feedback-section-title{
margin:0;
font-size:16px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-feedback-rating{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}

.form-feedback-rating-option{
position:relative;
cursor:pointer;
}

.form-feedback-rating-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-feedback-rating-option span{
display:grid;
place-items:center;
gap:8px;
min-height:96px;
padding:14px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#475569;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease;
}

.form-feedback-emoji{
font-size:28px;
line-height:1;
}

.form-feedback-label-text{
font-size:13px;
font-weight:900;
line-height:1.25;
color:#0f172a;
}

.form-feedback-rating-option input:checked + span{
border-color:#ec4899;
box-shadow:0 0 0 4px rgba(236,72,153,.12);
background:#fdf2f8;
transform:translateY(-1px);
}

.form-feedback-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-feedback-field{
display:grid;
gap:8px;
}

.form-feedback-field-full{
grid-column:1 / -1;
}

.form-feedback-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-feedback-input,
.form-feedback-select,
.form-feedback-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-feedback-input,
.form-feedback-select{
min-height:50px;
padding:0 14px;
}

.form-feedback-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-feedback-textarea{
min-height:130px;
resize:vertical;
padding:13px 14px;
}

.form-feedback-input::placeholder,
.form-feedback-textarea::placeholder{
color:#94a3b8;
}

.form-feedback-input:focus,
.form-feedback-select:focus,
.form-feedback-textarea:focus{
border-color:#ec4899;
box-shadow:0 0 0 4px rgba(236,72,153,.12);
background:#ffffff;
}

.form-feedback-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-feedback-check input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#ec4899;
}

.form-feedback-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#ec4899,#f59e0b);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(236,72,153,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-feedback-button:hover,
.form-feedback-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(245,158,11,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-feedback-top,
.form-feedback-body{
padding:24px;
}

.form-feedback-card{
border-radius:24px;
}

.form-feedback-rating{
grid-template-columns:1fr 1fr;
}

.form-feedback-grid{
grid-template-columns:1fr;
}

.form-feedback-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-feedback-rating{
grid-template-columns:1fr;
}
}

This feedback form is useful when you want to collect quick user opinions without making the form feel too formal. The satisfaction options make the form easier to start, while the open message field lets users explain their experience in their own words.

Use this pattern for customer feedback pages, dashboard feedback forms, post-purchase feedback, support follow-ups, product improvement surveys, and website experience feedback sections.

17. Review Form with Star Rating

A review form with star rating is useful when you want users to rate a product, service, article, booking, support experience, or website interaction. Star ratings make the form more visual and easier to complete because users can quickly select a score before writing their review.

This example includes an interactive 5-star rating, review title, review message, name field, email field, and a submit button. The stars are controlled with a small JavaScript snippet that updates the selected rating and keeps the UI clear.

  • Perfect for product reviews, service reviews, testimonials, and feedback pages
  • Includes clickable 5-star rating behavior
  • Uses clear review title and message fields
  • Includes optional reviewer details
  • Uses HTML, CSS, and a small JavaScript snippet
Review Form

Leave a product review

Rate your experience and share a short review to help other customers make a better decision.

5.0 Rating

Excellent — you selected 5 stars.

HTML

<div class="form-review-card" data-review-form>

  <div class="form-review-header">

    <div>

      <div class="form-review-kicker">Review Form</div>

      <h3 class="form-review-title">Leave a product review</h3>

      <p class="form-review-text">Rate your experience and share a short review to help other customers make a better decision.</p>

    </div>

    <div class="form-review-score">
      <strong data-review-score>5.0</strong>
      <span>Rating</span>
    </div>

  </div>

  <form class="form-review-form" action="#" method="post">

    <div class="form-review-rating-block">

      <label class="form-review-rating-label">Your rating</label>

      <div class="form-review-stars" role="radiogroup" aria-label="Choose star rating">

        <button class="form-review-star is-active" type="button" data-review-star="1" aria-label="1 star">★</button>
        <button class="form-review-star is-active" type="button" data-review-star="2" aria-label="2 stars">★</button>
        <button class="form-review-star is-active" type="button" data-review-star="3" aria-label="3 stars">★</button>
        <button class="form-review-star is-active" type="button" data-review-star="4" aria-label="4 stars">★</button>
        <button class="form-review-star is-active" type="button" data-review-star="5" aria-label="5 stars">★</button>

      </div>

      <input type="hidden" name="rating" value="5" data-review-input>

      <p class="form-review-rating-text" data-review-text>Excellent — you selected 5 stars.</p>

    </div>

    <div class="form-review-grid">

      <div class="form-review-field">
        <label class="form-review-label" for="review-name">Your name</label>
        <input class="form-review-input" id="review-name" type="text" name="name" placeholder="Alex Morgan">
      </div>

      <div class="form-review-field">
        <label class="form-review-label" for="review-email">Email address</label>
        <input class="form-review-input" id="review-email" type="email" name="email" placeholder="you@example.com">
      </div>

      <div class="form-review-field form-review-field-full">
        <label class="form-review-label" for="review-title">Review title</label>
        <input class="form-review-input" id="review-title" type="text" name="review_title" placeholder="Great product and fast delivery">
      </div>

      <div class="form-review-field form-review-field-full">
        <label class="form-review-label" for="review-message">Your review</label>
        <textarea class="form-review-textarea" id="review-message" name="review" placeholder="Write your honest review here..."></textarea>
      </div>

    </div>

    <label class="form-review-check">
      <input type="checkbox" name="permission">
      <span>I allow this review to be displayed publicly on the website.</span>
    </label>

    <button class="form-review-button" type="submit">Submit Review</button>

  </form>

</div>

CSS

.form-review-card{
width:min(100%,720px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}

.form-review-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:start;
margin-bottom:24px;
}

.form-review-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(250,204,21,.14);
border:1px solid rgba(250,204,21,.28);
color:#fde68a;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-review-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-review-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-review-score{
display:grid;
place-items:center;
min-width:112px;
min-height:112px;
padding:16px;
border-radius:26px;
background:rgba(250,204,21,.12);
border:1px solid rgba(250,204,21,.24);
text-align:center;
}

.form-review-score strong{
display:block;
font-size:34px;
line-height:1;
font-weight:950;
color:#facc15;
}

.form-review-score span{
display:block;
margin-top:6px;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
color:#fde68a;
}

.form-review-form{
display:grid;
gap:18px;
}

.form-review-rating-block{
padding:18px;
border-radius:22px;
background:rgba(15,23,42,.68);
border:1px solid rgba(255,255,255,.10);
}

.form-review-rating-label{
display:block;
margin-bottom:12px;
font-size:14px;
font-weight:900;
color:#ffffff;
}

.form-review-stars{
display:flex;
align-items:center;
gap:8px;
}

.form-review-star{
width:46px;
height:46px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.12);
border-radius:15px;
background:rgba(255,255,255,.07);
color:#64748b;
font-size:25px;
line-height:1;
cursor:pointer;
transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.form-review-star:hover,
.form-review-star:focus{
transform:translateY(-2px);
border-color:rgba(250,204,21,.42);
color:#facc15;
outline:none;
}

.form-review-star.is-active{
background:rgba(250,204,21,.16);
border-color:rgba(250,204,21,.38);
color:#facc15;
box-shadow:0 0 0 4px rgba(250,204,21,.10);
}

.form-review-rating-text{
margin:12px 0 0;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-review-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-review-field{
display:grid;
gap:8px;
}

.form-review-field-full{
grid-column:1 / -1;
}

.form-review-label{
font-size:13px;
font-weight:850;
color:#ffffff;
}

.form-review-input,
.form-review-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:15px;
background:rgba(255,255,255,.07);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-review-input{
min-height:50px;
padding:0 14px;
}

.form-review-textarea{
min-height:132px;
resize:vertical;
padding:13px 14px;
}

.form-review-input::placeholder,
.form-review-textarea::placeholder{
color:#94a3b8;
}

.form-review-input:focus,
.form-review-textarea:focus{
border-color:#facc15;
box-shadow:0 0 0 4px rgba(250,204,21,.14);
background:rgba(255,255,255,.10);
}

.form-review-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:rgba(15,23,42,.68);
border:1px solid rgba(255,255,255,.10);
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.form-review-check input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#facc15;
}

.form-review-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#facc15,#ec4899);
color:#111827;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(250,204,21,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-review-button:hover,
.form-review-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(236,72,153,.26);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-review-card{
padding:24px;
border-radius:24px;
}

.form-review-header{
grid-template-columns:1fr;
}

.form-review-score{
min-width:0;
width:100%;
}

.form-review-grid{
grid-template-columns:1fr;
}

.form-review-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-review-stars{
gap:6px;
}

.form-review-star{
width:40px;
height:40px;
border-radius:13px;
font-size:22px;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[data-review-form]").forEach(function (form) {
    const stars = Array.from(form.querySelectorAll("[data-review-star]"));
    const score = form.querySelector("[data-review-score]");
    const input = form.querySelector("[data-review-input]");
    const text = form.querySelector("[data-review-text]");

    const labels = {
      1: "Poor — you selected 1 star.",
      2: "Fair — you selected 2 stars.",
      3: "Good — you selected 3 stars.",
      4: "Very good — you selected 4 stars.",
      5: "Excellent — you selected 5 stars."
    };

    function setRating(value) {
      stars.forEach(function (star) {
        const starValue = Number(star.getAttribute("data-review-star"));
        star.classList.toggle("is-active", starValue <= value);
      });

      if (score) {
        score.textContent = value + ".0";
      }

      if (input) {
        input.value = value;
      }

      if (text) {
        text.textContent = labels[value];
      }
    }

    stars.forEach(function (star) {
      star.addEventListener("click", function () {
        const value = Number(star.getAttribute("data-review-star"));
        setRating(value);
      });
    });

    setRating(5);
  });
});

This review form with star rating is useful when you want the review process to feel more interactive and visual. The selected star state makes the rating clear, while the hidden input stores the chosen rating value for form submission.

Use this pattern for product reviews, service testimonials, booking feedback, course reviews, software ratings, eCommerce reviews, and customer experience pages.

18. Survey Form

A survey form helps collect structured answers from users, customers, readers, employees, or website visitors. It is useful when you need to understand preferences, satisfaction, goals, problems, buying intent, product feedback, or audience behavior.

This example uses a modern survey card with multiple-choice questions, checkbox options, a dropdown field, and an open comment area. The layout is designed to be clear, scannable, and easy to complete without feeling like a long questionnaire.

  • Perfect for customer surveys, audience research, product feedback, and website questionnaires
  • Includes radio buttons, checkboxes, select dropdown, and textarea field
  • Uses grouped question cards for readability
  • Stacks cleanly on mobile screens
  • Works with HTML and CSS only
Survey Form

Help us improve your experience

Answer a few quick questions so we can understand what users need and improve the website experience.

68%

1 How often do you use this website?

2 What are you most interested in?

3 Tell us more

Your answers help us create better examples, guides, and website resources.

HTML

<div class="form-survey-card">

  <div class="form-survey-header">

    <div>

      <div class="form-survey-kicker">Survey Form</div>

      <h3 class="form-survey-title">Help us improve your experience</h3>

      <p class="form-survey-text">Answer a few quick questions so we can understand what users need and improve the website experience.</p>

    </div>

    <div class="form-survey-progress">
      <strong>68%</strong>
      <div class="form-survey-bar">
        <span></span>
      </div>
    </div>

  </div>

  <form class="form-survey-form" action="#" method="post">

    <div class="form-survey-question">

      <h4 class="form-survey-question-title">
        <span class="form-survey-question-number">1</span>
        How often do you use this website?
      </h4>

      <div class="form-survey-options">

        <label class="form-survey-option">
          <input type="radio" name="usage" value="daily" checked>
          <span>Daily</span>
        </label>

        <label class="form-survey-option">
          <input type="radio" name="usage" value="weekly">
          <span>Weekly</span>
        </label>

        <label class="form-survey-option">
          <input type="radio" name="usage" value="monthly">
          <span>Monthly</span>
        </label>

        <label class="form-survey-option">
          <input type="radio" name="usage" value="first-time">
          <span>First time</span>
        </label>

      </div>

    </div>

    <div class="form-survey-question">

      <h4 class="form-survey-question-title">
        <span class="form-survey-question-number">2</span>
        What are you most interested in?
      </h4>

      <div class="form-survey-checklist">

        <label class="form-survey-check">
          <input type="checkbox" name="interest[]" value="css">
          <span>CSS examples</span>
        </label>

        <label class="form-survey-check">
          <input type="checkbox" name="interest[]" value="ui">
          <span>UI components</span>
        </label>

        <label class="form-survey-check">
          <input type="checkbox" name="interest[]" value="wordpress">
          <span>WordPress tutorials</span>
        </label>

        <label class="form-survey-check">
          <input type="checkbox" name="interest[]" value="templates">
          <span>Website templates</span>
        </label>

      </div>

    </div>

    <div class="form-survey-question">

      <h4 class="form-survey-question-title">
        <span class="form-survey-question-number">3</span>
        Tell us more
      </h4>

      <div class="form-survey-field">
        <label class="form-survey-label" for="survey-goal">Main goal</label>
        <select class="form-survey-select" id="survey-goal" name="goal">
          <option>Learn modern CSS</option>
          <option>Find ready-to-use examples</option>
          <option>Improve a client website</option>
          <option>Build a new project</option>
        </select>
      </div>

      <div class="form-survey-field">
        <label class="form-survey-label" for="survey-message">Additional comments</label>
        <textarea class="form-survey-textarea" id="survey-message" name="message" placeholder="Share any ideas, problems, or topics you want to see next..."></textarea>
      </div>

    </div>

    <div class="form-survey-footer">

      <p class="form-survey-footer-text">Your answers help us create better examples, guides, and website resources.</p>

      <button class="form-survey-button" type="submit">Submit Survey</button>

    </div>

  </form>

</div>

CSS

.form-survey-card{
width:min(100%,820px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.form-survey-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:start;
margin-bottom:24px;
}

.form-survey-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-survey-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-survey-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#64748b;
}

.form-survey-progress{
min-width:150px;
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-survey-progress strong{
display:block;
margin-bottom:8px;
font-size:20px;
line-height:1;
font-weight:950;
color:#0f172a;
}

.form-survey-bar{
height:8px;
border-radius:999px;
background:#e2e8f0;
overflow:hidden;
}

.form-survey-bar span{
display:block;
width:68%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#2563eb,#22c55e);
}

.form-survey-form{
display:grid;
gap:18px;
}

.form-survey-question{
display:grid;
gap:14px;
padding:20px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-survey-question-title{
display:flex;
align-items:flex-start;
gap:10px;
margin:0;
font-size:16px;
line-height:1.4;
font-weight:950;
color:#0f172a;
}

.form-survey-question-number{
width:28px;
height:28px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:10px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
}

.form-survey-options{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.form-survey-option{
position:relative;
cursor:pointer;
}

.form-survey-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-survey-option span{
display:flex;
align-items:center;
min-height:48px;
padding:0 14px;
border-radius:15px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:14px;
font-weight:850;
line-height:1.35;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,transform .22s ease;
}

.form-survey-option input:checked + span{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#eff6ff;
color:#1d4ed8;
transform:translateY(-1px);
}

.form-survey-checklist{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.form-survey-check{
display:flex;
align-items:center;
gap:10px;
min-height:48px;
padding:0 14px;
border-radius:15px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:14px;
font-weight:850;
line-height:1.35;
cursor:pointer;
box-sizing:border-box;
}

.form-survey-check input{
width:18px;
height:18px;
margin:0;
accent-color:#2563eb;
}

.form-survey-field{
display:grid;
gap:8px;
}

.form-survey-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-survey-select,
.form-survey-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-survey-select{
min-height:50px;
padding:0 38px 0 14px;
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}

.form-survey-textarea{
min-height:126px;
resize:vertical;
padding:13px 14px;
}

.form-survey-textarea::placeholder{
color:#94a3b8;
}

.form-survey-select:focus,
.form-survey-textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-survey-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:18px;
border-radius:22px;
background:#0f172a;
}

.form-survey-footer-text{
margin:0;
font-size:14px;
line-height:1.6;
color:#cbd5e1;
}

.form-survey-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:14px;
font-weight:950;
cursor:pointer;
white-space:nowrap;
box-shadow:0 18px 42px rgba(37,99,235,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-survey-button:hover,
.form-survey-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.06);
outline:none;
}

@media (max-width: 760px){
.form-survey-card{
padding:24px;
border-radius:24px;
}

.form-survey-header{
grid-template-columns:1fr;
}

.form-survey-progress{
min-width:0;
width:100%;
}

.form-survey-options,
.form-survey-checklist{
grid-template-columns:1fr;
}

.form-survey-footer{
align-items:stretch;
flex-direction:column;
}

.form-survey-button{
width:100%;
}

.form-survey-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-survey-question{
padding:16px;
border-radius:20px;
}
}

This survey form is useful when you need more structured answers than a simple feedback form can provide. The grouped questions make the form easier to scan, while the mix of radio buttons, checkboxes, dropdowns, and open comments gives users different ways to respond.

Use this pattern for customer surveys, user research, product feedback, website improvement forms, audience research, onboarding questionnaires, and internal company surveys.

19. File Upload Form

A file upload form is useful when users need to send documents, images, screenshots, resumes, invoices, project files, design assets, support attachments, or custom request files. It is commonly used on support pages, job application forms, quote request forms, client portals, order forms, and service websites.

This example uses a modern upload card with contact fields, a message area, and a styled file upload zone. The upload area is designed to feel clear and inviting, while the rest of the form stays simple and easy to complete.

  • Perfect for support forms, job applications, quote requests, and client portals
  • Includes name, email, project type, message, and file upload fields
  • Uses a modern dashed upload area
  • Stacks cleanly on mobile screens
  • Works with HTML and CSS only
File Upload Form

Send files with your request

Use this form when users need to upload documents, screenshots, project files, or other attachments.

25MB Max file
↑

Upload your file

Choose a PDF, image, document, ZIP file, or screenshot from your device.

i For real websites, validate file type and size on the server before saving or sending uploaded files.

HTML

<div class="form-upload-card">

  <div class="form-upload-header">

    <div>

      <div class="form-upload-kicker">File Upload Form</div>

      <h3 class="form-upload-title">Send files with your request</h3>

      <p class="form-upload-text">Use this form when users need to upload documents, screenshots, project files, or other attachments.</p>

    </div>

    <div class="form-upload-badge">
      <strong>25MB</strong>
      <span>Max file</span>
    </div>

  </div>

  <form class="form-upload-form" action="#" method="post" enctype="multipart/form-data">

    <div class="form-upload-grid">

      <div class="form-upload-field">
        <label class="form-upload-label" for="upload-name">Full name</label>
        <input class="form-upload-input" id="upload-name" type="text" name="name" placeholder="Your name">
      </div>

      <div class="form-upload-field">
        <label class="form-upload-label" for="upload-email">Email address</label>
        <input class="form-upload-input" id="upload-email" type="email" name="email" placeholder="you@example.com">
      </div>

      <div class="form-upload-field form-upload-field-full">
        <label class="form-upload-label" for="upload-type">Request type</label>
        <select class="form-upload-select" id="upload-type" name="request_type">
          <option>Support attachment</option>
          <option>Project files</option>
          <option>Job application</option>
          <option>Invoice or document</option>
        </select>
      </div>

      <div class="form-upload-field form-upload-field-full">
        <label class="form-upload-label" for="upload-message">Message</label>
        <textarea class="form-upload-textarea" id="upload-message" name="message" placeholder="Write a short message about the uploaded file..."></textarea>
      </div>

    </div>

    <div class="form-upload-zone">

      <div class="form-upload-icon">↑</div>

      <p class="form-upload-zone-title">Upload your file</p>

      <p class="form-upload-zone-text">Choose a PDF, image, document, ZIP file, or screenshot from your device.</p>

      <input class="form-upload-file" type="file" name="attachment" id="upload-file">

    </div>

    <div class="form-upload-help">
      <span class="form-upload-help-icon">i</span>
      <span>For real websites, validate file type and size on the server before saving or sending uploaded files.</span>
    </div>

    <button class="form-upload-button" type="submit">Submit File Request</button>

  </form>

</div>

CSS

.form-upload-card{
width:min(100%,780px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.form-upload-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:start;
margin-bottom:24px;
}

.form-upload-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-upload-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-upload-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#64748b;
}

.form-upload-badge{
display:grid;
place-items:center;
min-width:112px;
min-height:92px;
padding:14px;
border-radius:24px;
background:#f8fafc;
border:1px solid #e2e8f0;
text-align:center;
}

.form-upload-badge strong{
display:block;
font-size:24px;
line-height:1;
font-weight:950;
color:#0ea5e9;
}

.form-upload-badge span{
display:block;
margin-top:7px;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
color:#64748b;
}

.form-upload-form{
display:grid;
gap:20px;
}

.form-upload-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-upload-field{
display:grid;
gap:8px;
}

.form-upload-field-full{
grid-column:1 / -1;
}

.form-upload-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-upload-input,
.form-upload-select,
.form-upload-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-upload-input,
.form-upload-select{
min-height:50px;
padding:0 14px;
}

.form-upload-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-upload-textarea{
min-height:118px;
resize:vertical;
padding:13px 14px;
}

.form-upload-input::placeholder,
.form-upload-textarea::placeholder{
color:#94a3b8;
}

.form-upload-input:focus,
.form-upload-select:focus,
.form-upload-textarea:focus{
border-color:#0ea5e9;
box-shadow:0 0 0 4px rgba(14,165,233,.13);
background:#ffffff;
}

.form-upload-zone{
display:grid;
place-items:center;
gap:12px;
padding:28px;
border-radius:22px;
border:2px dashed #bae6fd;
background:
linear-gradient(180deg,rgba(240,249,255,.92),rgba(255,255,255,.92));
text-align:center;
transition:border-color .22s ease,background .22s ease,box-shadow .22s ease;
}

.form-upload-zone:hover{
border-color:#0ea5e9;
box-shadow:0 18px 46px rgba(14,165,233,.12);
}

.form-upload-icon{
width:54px;
height:54px;
display:grid;
place-items:center;
border-radius:20px;
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
color:#ffffff;
font-size:24px;
font-weight:950;
box-shadow:0 16px 34px rgba(14,165,233,.22);
}

.form-upload-zone-title{
margin:0;
font-size:18px;
line-height:1.25;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.form-upload-zone-text{
margin:0;
font-size:14px;
line-height:1.6;
color:#64748b;
}

.form-upload-file{
width:100%;
max-width:360px;
padding:12px;
border-radius:14px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:14px;
box-sizing:border-box;
}

.form-upload-help{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-upload-help-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:950;
}

.form-upload-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(14,165,233,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-upload-button:hover,
.form-upload-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(139,92,246,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-upload-card{
padding:24px;
border-radius:24px;
}

.form-upload-header{
grid-template-columns:1fr;
}

.form-upload-badge{
width:100%;
}

.form-upload-grid{
grid-template-columns:1fr;
}

.form-upload-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-upload-zone{
padding:22px;
}
}

This file upload form is useful when a normal contact form is not enough and users need to attach supporting files. The upload zone makes the attachment field easier to notice, while the rest of the form collects the context needed to understand the file.

Use this pattern for job application forms, support request forms, project inquiry forms, client portals, order customization forms, invoice submissions, and document upload pages.

20. Floating Label Form

A floating label form is a modern form pattern where the label moves above the input text when the user focuses the field or enters content. It creates a clean interface while still keeping labels visible, which is better than relying only on placeholder text.

This example uses floating labels for name, email, phone, subject, and message fields. The layout is compact, polished, and useful for contact forms, signup forms, quote request forms, app forms, and modern landing page forms.

  • Perfect for modern contact forms, signup forms, and quote forms
  • Uses CSS-only floating label behavior
  • Keeps labels visible after users start typing
  • Includes focus states and responsive spacing
  • Works with HTML and CSS only
Floating Labels

A cleaner form interaction

Floating labels keep the form compact while still showing users what each field means after they start typing.

i Floating labels work best when inputs still have enough vertical space and the label remains easy to read.

HTML

<div class="form-floating-card">

  <div class="form-floating-header">

    <div class="form-floating-kicker">Floating Labels</div>

    <h3 class="form-floating-title">A cleaner <span>form interaction</span></h3>

    <p class="form-floating-text">Floating labels keep the form compact while still showing users what each field means after they start typing.</p>

  </div>

  <form class="form-floating-form" action="#" method="post">

    <div class="form-floating-grid">

      <div class="form-floating-field">
        <input class="form-floating-input" id="floating-name" type="text" name="name" placeholder=" ">
        <label class="form-floating-label" for="floating-name">Full name</label>
      </div>

      <div class="form-floating-field">
        <input class="form-floating-input" id="floating-email" type="email" name="email" placeholder=" ">
        <label class="form-floating-label" for="floating-email">Email address</label>
      </div>

      <div class="form-floating-field">
        <input class="form-floating-input" id="floating-phone" type="tel" name="phone" placeholder=" ">
        <label class="form-floating-label" for="floating-phone">Phone number</label>
      </div>

      <div class="form-floating-field">
        <input class="form-floating-input" id="floating-subject" type="text" name="subject" placeholder=" ">
        <label class="form-floating-label" for="floating-subject">Subject</label>
      </div>

      <div class="form-floating-field form-floating-field-full">
        <textarea class="form-floating-textarea" id="floating-message" name="message" placeholder=" "></textarea>
        <label class="form-floating-label" for="floating-message">Your message</label>
      </div>

    </div>

    <div class="form-floating-helper">
      <span class="form-floating-helper-icon">i</span>
      <span>Floating labels work best when inputs still have enough vertical space and the label remains easy to read.</span>
    </div>

    <label class="form-floating-consent">
      <input type="checkbox" name="consent">
      <span>I agree to be contacted about this request.</span>
    </label>

    <button class="form-floating-button" type="submit">Send Message</button>

  </form>

</div>

CSS

.form-floating-card{
width:min(100%,700px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}

.form-floating-header{
text-align:center;
margin-bottom:26px;
}

.form-floating-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.14);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-floating-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,46px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-floating-title span{
background:linear-gradient(90deg,#22d3ee,#a855f7,#f472b6) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-floating-text{
margin:0 auto;
max-width:560px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-floating-form{
display:grid;
gap:18px;
}

.form-floating-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-floating-field{
position:relative;
}

.form-floating-field-full{
grid-column:1 / -1;
}

.form-floating-input,
.form-floating-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(15,23,42,.70);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-floating-input{
height:58px;
padding:22px 15px 8px;
}

.form-floating-textarea{
min-height:142px;
resize:vertical;
padding:24px 15px 12px;
}

.form-floating-label{
position:absolute;
left:15px;
top:18px;
font-size:15px;
line-height:1;
font-weight:750;
color:#94a3b8;
pointer-events:none;
transition:transform .18s ease,font-size .18s ease,color .18s ease,top .18s ease;
}

.form-floating-input:focus,
.form-floating-textarea:focus{
border-color:#22d3ee;
box-shadow:0 0 0 4px rgba(34,211,238,.14);
background:rgba(15,23,42,.94);
}

.form-floating-input:focus + .form-floating-label,
.form-floating-input:not(:placeholder-shown) + .form-floating-label,
.form-floating-textarea:focus + .form-floating-label,
.form-floating-textarea:not(:placeholder-shown) + .form-floating-label{
top:9px;
font-size:11px;
color:#67e8f9;
letter-spacing:.04em;
text-transform:uppercase;
}

.form-floating-helper{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.form-floating-helper-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(34,211,238,.14);
color:#67e8f9;
font-size:13px;
font-weight:950;
}

.form-floating-consent{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.form-floating-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#22d3ee;
}

.form-floating-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#22d3ee,#a855f7);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(34,211,238,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-floating-button:hover,
.form-floating-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(168,85,247,.28);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-floating-card{
padding:24px;
border-radius:24px;
}

.form-floating-grid{
grid-template-columns:1fr;
}

.form-floating-title{
font-size:32px;
}
}

This floating label form is useful when you want a modern input style without hiding field meaning after users start typing. The labels move above the typed value, which keeps the form compact while preserving clarity.

Use this pattern for contact forms, login forms, signup forms, quote forms, SaaS forms, app interfaces, and landing page lead forms where a polished input interaction can improve the user experience.

21. Glassmorphism Form

A glassmorphism form uses translucent backgrounds, soft blur, subtle borders, and layered gradients to create a modern glass-like interface. This style is popular in landing pages, SaaS websites, login screens, app interfaces, portfolio websites, and futuristic UI designs.

This example uses a blurred glass card with a colorful background, modern input fields, a service selector, message field, consent checkbox, and a strong gradient button. The form is decorative but still keeps labels, spacing, and focus states clear.

  • Perfect for modern landing pages, SaaS websites, portfolios, and app interfaces
  • Uses translucent glass card styling with blur
  • Includes labels, focus states, and responsive layout
  • Works well on colorful gradient backgrounds
  • Uses HTML and CSS only
Glassmorphism Form

Start a modern project

A translucent glass-style form with soft blur, subtle borders, and a colorful modern background.

Glassmorphism works best when the background has enough contrast and the form text remains readable.

HTML

<div class="form-glass-card">

  <div class="form-glass-inner">

    <div class="form-glass-header">

      <div class="form-glass-kicker">Glassmorphism Form</div>

      <h3 class="form-glass-title">Start a <span>modern project</span></h3>

      <p class="form-glass-text">A translucent glass-style form with soft blur, subtle borders, and a colorful modern background.</p>

    </div>

    <form class="form-glass-form" action="#" method="post">

      <div class="form-glass-grid">

        <div class="form-glass-field">
          <label class="form-glass-label" for="glass-name">Full name</label>
          <input class="form-glass-input" id="glass-name" type="text" name="name" placeholder="Your name">
        </div>

        <div class="form-glass-field">
          <label class="form-glass-label" for="glass-email">Email address</label>
          <input class="form-glass-input" id="glass-email" type="email" name="email" placeholder="you@example.com">
        </div>

        <div class="form-glass-field">
          <label class="form-glass-label" for="glass-service">Project type</label>
          <select class="form-glass-select" id="glass-service" name="service">
            <option>Website design</option>
            <option>Landing page</option>
            <option>Dashboard UI</option>
            <option>Mobile app UI</option>
          </select>
        </div>

        <div class="form-glass-field">
          <label class="form-glass-label" for="glass-budget">Budget range</label>
          <select class="form-glass-select" id="glass-budget" name="budget">
            <option>$1,000 - $3,000</option>
            <option>$3,000 - $5,000</option>
            <option>$5,000 - $10,000</option>
            <option>$10,000+</option>
          </select>
        </div>

        <div class="form-glass-field form-glass-field-full">
          <label class="form-glass-label" for="glass-message">Project message</label>
          <textarea class="form-glass-textarea" id="glass-message" name="message" placeholder="Tell us about your project idea..."></textarea>
        </div>

      </div>

      <label class="form-glass-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this project request.</span>
      </label>

      <button class="form-glass-button" type="submit">Send Project Request</button>

      <p class="form-glass-note">Glassmorphism works best when the background has enough contrast and the form text remains readable.</p>

    </form>

  </div>

</div>

CSS

.form-glass-card{
position:relative;
z-index:2;
width:min(100%,720px);
padding:32px;
border-radius:32px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 32px 100px rgba(0,0,0,.42);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
}

.form-glass-card::before{
content:"";
position:absolute;
inset:1px;
border-radius:31px;
background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
pointer-events:none;
}

.form-glass-inner{
position:relative;
z-index:2;
}

.form-glass-header{
text-align:center;
margin-bottom:26px;
}

.form-glass-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-glass-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,48px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-glass-title span{
background:linear-gradient(90deg,#67e8f9,#f9a8d4,#fde68a) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-glass-text{
margin:0 auto;
max-width:560px;
font-size:15px;
line-height:1.75;
color:#e2e8f0;
}

.form-glass-form{
display:grid;
gap:18px;
}

.form-glass-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-glass-field{
display:grid;
gap:8px;
}

.form-glass-field-full{
grid-column:1 / -1;
}

.form-glass-label{
font-size:13px;
font-weight:850;
color:#ffffff;
}

.form-glass-input,
.form-glass-select,
.form-glass-textarea{
width:100%;
border:1px solid rgba(255,255,255,.22);
border-radius:16px;
background:rgba(255,255,255,.12);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-glass-input,
.form-glass-select{
min-height:52px;
padding:0 15px;
}

.form-glass-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#ffffff 50%),linear-gradient(135deg,#ffffff 50%,transparent 50%);
background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-glass-select option{
color:#0f172a;
}

.form-glass-textarea{
min-height:130px;
resize:vertical;
padding:13px 15px;
}

.form-glass-input::placeholder,
.form-glass-textarea::placeholder{
color:rgba(226,232,240,.76);
}

.form-glass-input:focus,
.form-glass-select:focus,
.form-glass-textarea:focus{
border-color:#67e8f9;
box-shadow:0 0 0 4px rgba(103,232,249,.14);
background:rgba(255,255,255,.16);
}

.form-glass-consent{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
font-size:14px;
line-height:1.55;
color:#e2e8f0;
}

.form-glass-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#22d3ee;
}

.form-glass-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#22d3ee,#ec4899,#f59e0b);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(236,72,153,.28);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-glass-button:hover,
.form-glass-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.30);
filter:saturate(1.08);
outline:none;
}

.form-glass-note{
margin:0;
font-size:13px;
line-height:1.55;
text-align:center;
color:#cbd5e1;
}

@media (max-width: 720px){
.form-glass-card{
padding:24px;
border-radius:26px;
}

.form-glass-card::before{
border-radius:25px;
}

.form-glass-grid{
grid-template-columns:1fr;
}

.form-glass-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-glass-card{
padding:22px;
}
}

This glassmorphism form is useful when you want a modern, premium, and visually rich design. The translucent form card works best on colorful backgrounds, but the labels, input contrast, and focus states should always remain readable.

Use this pattern for SaaS landing pages, app interfaces, startup websites, portfolio contact sections, login screens, lead forms, and futuristic website designs.

22. Dark Mode Form

A dark mode form is designed for websites, dashboards, apps, and landing pages that use a dark interface. A good dark form should not simply invert colors. It needs readable contrast, clear labels, visible borders, accessible focus states, and a button that stands out from the background.

This example uses a dark card layout with clean input fields, subtle borders, a plan selector, message textarea, notification preference toggle, and a bright call-to-action button. It is practical for SaaS dashboards, app settings, login screens, and dark landing page forms.

  • Perfect for dashboards, SaaS apps, dark landing pages, and account interfaces
  • Uses high-contrast labels and readable dark inputs
  • Includes select field, textarea, checkbox, and toggle-style options
  • Includes strong focus states for usability
  • Works with HTML and CSS only
D DarkForm Modern dashboard form UI
Online
Dark Mode Form

Update your account details

A clean dark mode form with readable labels, strong contrast, and clear focus states.

HTML

<div class="form-dark-shell">

  <div class="form-dark-header">

    <div class="form-dark-brand">
      <span class="form-dark-brand-icon">D</span>
      <span class="form-dark-brand-text">
        <strong>DarkForm</strong>
        <span>Modern dashboard form UI</span>
      </span>
    </div>

    <div class="form-dark-status">
      <span class="form-dark-status-dot"></span>
      Online
    </div>

  </div>

  <div class="form-dark-card">

    <div class="form-dark-card-header">

      <div class="form-dark-kicker">Dark Mode Form</div>

      <h3 class="form-dark-title">Update your account details</h3>

      <p class="form-dark-text">A clean dark mode form with readable labels, strong contrast, and clear focus states.</p>

    </div>

    <form class="form-dark-form" action="#" method="post">

      <div class="form-dark-grid">

        <div class="form-dark-field">
          <label class="form-dark-label" for="dark-name">Full name</label>
          <input class="form-dark-input" id="dark-name" type="text" name="name" placeholder="Alex Morgan">
        </div>

        <div class="form-dark-field">
          <label class="form-dark-label" for="dark-email">Email address</label>
          <input class="form-dark-input" id="dark-email" type="email" name="email" placeholder="alex@example.com">
        </div>

        <div class="form-dark-field">
          <label class="form-dark-label" for="dark-role">Role</label>
          <select class="form-dark-select" id="dark-role" name="role">
            <option>Designer</option>
            <option>Developer</option>
            <option>Founder</option>
            <option>Marketing manager</option>
          </select>
        </div>

        <div class="form-dark-field">
          <label class="form-dark-label" for="dark-plan">Plan</label>
          <select class="form-dark-select" id="dark-plan" name="plan">
            <option>Starter</option>
            <option>Professional</option>
            <option>Business</option>
            <option>Enterprise</option>
          </select>
        </div>

        <div class="form-dark-field form-dark-field-full">
          <label class="form-dark-label" for="dark-message">Bio or message</label>
          <textarea class="form-dark-textarea" id="dark-message" name="message" placeholder="Write a short account bio or message..."></textarea>
        </div>

      </div>

      <div class="form-dark-field">
        <label class="form-dark-label">Notifications</label>

        <div class="form-dark-options">

          <label class="form-dark-option">
            <input type="radio" name="notifications" value="email" checked>
            <span>Email updates</span>
          </label>

          <label class="form-dark-option">
            <input type="radio" name="notifications" value="none">
            <span>No notifications</span>
          </label>

        </div>

      </div>

      <label class="form-dark-check">
        <input type="checkbox" name="terms">
        <span>I agree to receive important account updates and security notifications.</span>
      </label>

      <button class="form-dark-button" type="submit">Save Changes</button>

    </form>

  </div>

</div>

CSS

.form-dark-shell{
width:min(100%,760px);
display:grid;
gap:20px;
}

.form-dark-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px;
border-radius:26px;
background:rgba(15,23,42,.72);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 20px 60px rgba(0,0,0,.26);
}

.form-dark-brand{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}

.form-dark-brand-icon{
width:46px;
height:46px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 16px 34px rgba(37,99,235,.24);
}

.form-dark-brand-text{
min-width:0;
}

.form-dark-brand-text strong{
display:block;
font-size:18px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.form-dark-brand-text span{
display:block;
margin-top:3px;
font-size:13px;
line-height:1.45;
color:#94a3b8;
}

.form-dark-status{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.26);
color:#86efac;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.form-dark-status-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.form-dark-card{
padding:30px;
border-radius:30px;
background:rgba(15,23,42,.88);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.form-dark-card-header{
margin-bottom:24px;
}

.form-dark-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(37,99,235,.14);
border:1px solid rgba(37,99,235,.28);
color:#93c5fd;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-dark-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-dark-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-dark-form{
display:grid;
gap:18px;
}

.form-dark-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-dark-field{
display:grid;
gap:8px;
}

.form-dark-field-full{
grid-column:1 / -1;
}

.form-dark-label{
font-size:13px;
font-weight:850;
color:#e2e8f0;
}

.form-dark-input,
.form-dark-select,
.form-dark-textarea{
width:100%;
border:1px solid rgba(148,163,184,.24);
border-radius:15px;
background:#020617;
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-dark-input,
.form-dark-select{
min-height:50px;
padding:0 14px;
}

.form-dark-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-dark-select option{
color:#0f172a;
}

.form-dark-textarea{
min-height:120px;
resize:vertical;
padding:13px 14px;
}

.form-dark-input::placeholder,
.form-dark-textarea::placeholder{
color:#64748b;
}

.form-dark-input:focus,
.form-dark-select:focus,
.form-dark-textarea:focus{
border-color:#60a5fa;
box-shadow:0 0 0 4px rgba(96,165,250,.14);
background:#020617;
}

.form-dark-options{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-dark-option{
position:relative;
cursor:pointer;
}

.form-dark-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-dark-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 12px;
border-radius:15px;
background:#020617;
border:1px solid rgba(148,163,184,.24);
color:#94a3b8;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-dark-option input:checked + span{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
background:rgba(34,197,94,.10);
color:#bbf7d0;
}

.form-dark-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#020617;
border:1px solid rgba(148,163,184,.18);
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.form-dark-check input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#22c55e;
}

.form-dark-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-dark-button:hover,
.form-dark-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-dark-header{
align-items:flex-start;
flex-direction:column;
}

.form-dark-card{
padding:24px;
border-radius:24px;
}

.form-dark-grid,
.form-dark-options{
grid-template-columns:1fr;
}

.form-dark-title{
font-size:32px;
}
}

This dark mode form is useful when the surrounding interface already uses a dark visual style. The key is to keep enough contrast between labels, inputs, borders, placeholder text, and buttons so the form remains easy to use.

Use this pattern for dashboards, SaaS settings pages, account forms, dark landing pages, app interfaces, admin panels, profile forms, and modern login or signup screens.

23. Gradient Form Design

A gradient form design uses modern color transitions to make a form section feel more energetic, branded, and visually memorable. Gradients are useful for landing pages, SaaS websites, lead forms, signup forms, contact sections, product pages, and marketing campaigns.

This example combines a bright gradient background with a clean white form card. The form includes name, email, company, project type, message, and consent fields. The layout stays professional while the surrounding gradient gives the section a stronger visual impact.

  • Perfect for landing pages, SaaS websites, lead forms, and marketing campaigns
  • Uses a colorful gradient background with a clean form card
  • Includes clear labels, focus states, and responsive spacing
  • Works well for contact, quote, and signup forms
  • Uses HTML and CSS only
Gradient Form

Build a brighter lead form

Use a strong gradient section when you want your form to stand out on a landing page, service page, or marketing campaign.

  • ✓ Strong visual impact
  • ✓ Clear white form card
  • ✓ Responsive two-column layout

Request project details

Tell us what you want to build and we will send the next steps.

HTML

<div class="form-gradient-wrap">

  <div class="form-gradient-content">

    <div class="form-gradient-kicker">Gradient Form</div>

    <h3 class="form-gradient-title">Build a brighter lead form</h3>

    <p class="form-gradient-text">Use a strong gradient section when you want your form to stand out on a landing page, service page, or marketing campaign.</p>

    <ul class="form-gradient-points">
      <li><span class="form-gradient-check">✓</span> Strong visual impact</li>
      <li><span class="form-gradient-check">✓</span> Clear white form card</li>
      <li><span class="form-gradient-check">✓</span> Responsive two-column layout</li>
    </ul>

  </div>

  <div class="form-gradient-card">

    <div class="form-gradient-card-header">
      <h3 class="form-gradient-card-title">Request project details</h3>
      <p class="form-gradient-card-text">Tell us what you want to build and we will send the next steps.</p>
    </div>

    <form class="form-gradient-form" action="#" method="post">

      <div class="form-gradient-grid">

        <div class="form-gradient-field">
          <label class="form-gradient-label" for="gradient-name">Full name</label>
          <input class="form-gradient-input" id="gradient-name" type="text" name="name" placeholder="Alex Morgan">
        </div>

        <div class="form-gradient-field">
          <label class="form-gradient-label" for="gradient-email">Email address</label>
          <input class="form-gradient-input" id="gradient-email" type="email" name="email" placeholder="alex@example.com">
        </div>

        <div class="form-gradient-field">
          <label class="form-gradient-label" for="gradient-company">Company</label>
          <input class="form-gradient-input" id="gradient-company" type="text" name="company" placeholder="Your company">
        </div>

        <div class="form-gradient-field">
          <label class="form-gradient-label" for="gradient-type">Project type</label>
          <select class="form-gradient-select" id="gradient-type" name="project_type">
            <option>Landing page</option>
            <option>Website redesign</option>
            <option>Online store</option>
            <option>Custom UI project</option>
          </select>
        </div>

        <div class="form-gradient-field form-gradient-field-full">
          <label class="form-gradient-label" for="gradient-message">Project message</label>
          <textarea class="form-gradient-textarea" id="gradient-message" name="message" placeholder="Describe your project, goals, timeline, and main requirements..."></textarea>
        </div>

      </div>

      <label class="form-gradient-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this project request.</span>
      </label>

      <button class="form-gradient-button" type="submit">Send Request</button>

    </form>

  </div>

</div>

CSS

.form-gradient-wrap{
position:relative;
z-index:2;
width:min(100%,960px);
display:grid;
grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
gap:24px;
align-items:center;
}

.form-gradient-content{
color:#ffffff;
}

.form-gradient-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(12px);
}

.form-gradient-title{
margin:0 0 16px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-gradient-text{
margin:0 0 24px;
max-width:520px;
font-size:16px;
line-height:1.8;
color:rgba(255,255,255,.86);
}

.form-gradient-points{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.form-gradient-points li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-gradient-check{
width:24px;
height:24px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.28);
font-size:13px;
font-weight:950;
}

.form-gradient-card{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(255,255,255,.28);
box-shadow:0 30px 90px rgba(15,23,42,.24);
}

.form-gradient-card-header{
margin-bottom:24px;
}

.form-gradient-card-title{
margin:0 0 9px;
font-size:30px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.form-gradient-card-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-gradient-form{
display:grid;
gap:18px;
}

.form-gradient-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-gradient-field{
display:grid;
gap:8px;
}

.form-gradient-field-full{
grid-column:1 / -1;
}

.form-gradient-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-gradient-input,
.form-gradient-select,
.form-gradient-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-gradient-input,
.form-gradient-select{
min-height:50px;
padding:0 14px;
}

.form-gradient-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-gradient-textarea{
min-height:126px;
resize:vertical;
padding:13px 14px;
}

.form-gradient-input::placeholder,
.form-gradient-textarea::placeholder{
color:#94a3b8;
}

.form-gradient-input:focus,
.form-gradient-select:focus,
.form-gradient-textarea:focus{
border-color:#7c3aed;
box-shadow:0 0 0 4px rgba(124,58,237,.12);
background:#ffffff;
}

.form-gradient-consent{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-gradient-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#7c3aed;
}

.form-gradient-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#7c3aed,#ec4899);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(124,58,237,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-gradient-button:hover,
.form-gradient-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(236,72,153,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 900px){
.form-gradient-wrap{
grid-template-columns:1fr;
}

.form-gradient-card{
max-width:620px;
width:100%;
margin:0 auto;
}

.form-gradient-title{
font-size:38px;
}
}

@media (max-width: 640px){
.form-gradient-card{
padding:24px;
border-radius:24px;
}

.form-gradient-grid{
grid-template-columns:1fr;
}

.form-gradient-title{
font-size:32px;
}

.form-gradient-card-title{
font-size:28px;
}
}

This gradient form design is useful when you want a form section to feel more like a landing page block instead of a plain form card. The gradient creates visual energy, while the white card keeps the fields readable and practical.

Use this pattern for lead generation pages, SaaS landing pages, marketing campaigns, service websites, quote request sections, contact pages, and modern homepage call-to-action areas.

24. Split Screen Login Form

A split screen login form combines an authentication form with a visual or marketing panel. This layout works well when the login page should do more than show fields. It can reinforce brand identity, explain product benefits, show a short message, or create a more premium first impression.

This example uses a two-column layout with a dark visual panel on the left and a clean login card on the right. On mobile, the layout stacks into a single column so the login form stays easy to use.

  • Perfect for SaaS login pages, dashboards, web apps, and account portals
  • Combines a visual brand panel with a login form
  • Includes email, password, remember-me, and forgot-password options
  • Stacks cleanly on mobile screens
  • Uses HTML and CSS only

HTML

<div class="form-split-login-layout">

  <div class="form-split-login-panel">

    <div class="form-split-login-panel-inner">

      <div class="form-split-login-brand">
        <span class="form-split-login-brand-icon">S</span>
        <span>SecureSuite</span>
      </div>

      <div class="form-split-login-panel-content">

        <div class="form-split-login-kicker">Welcome Back</div>

        <h3 class="form-split-login-heading">Access your dashboard with confidence</h3>

        <p class="form-split-login-copy">A split screen login layout gives the sign-in page more brand presence and helps explain the product value.</p>

        <ul class="form-split-login-list">
          <li><span class="form-split-login-check">✓</span> Secure account access</li>
          <li><span class="form-split-login-check">✓</span> Fast dashboard login</li>
          <li><span class="form-split-login-check">✓</span> Clean responsive layout</li>
        </ul>

      </div>

      <div class="form-split-login-testimonial">
        <p>“This dashboard helps our team manage projects, clients, and reports from one place.”</p>
        <strong>Product Team</strong>
      </div>

    </div>

  </div>

  <div class="form-split-login-form-side">

    <div class="form-split-login-card">

      <div class="form-split-login-form-header">
        <h3 class="form-split-login-form-title">Sign in</h3>
        <p class="form-split-login-form-text">Enter your details to continue to your account.</p>
      </div>

      <form class="form-split-login-form" action="#" method="post">

        <div class="form-split-login-field">
          <label class="form-split-login-label" for="split-login-email">Email address</label>
          <input class="form-split-login-input" id="split-login-email" type="email" name="email" placeholder="you@example.com">
        </div>

        <div class="form-split-login-field">
          <label class="form-split-login-label" for="split-login-password">Password</label>
          <input class="form-split-login-input" id="split-login-password" type="password" name="password" placeholder="Enter your password">
        </div>

        <div class="form-split-login-options">

          <label class="form-split-login-check-label">
            <input type="checkbox" name="remember">
            <span>Remember me</span>
          </label>

          <a class="form-split-login-link" href="#">Forgot password?</a>

        </div>

        <button class="form-split-login-button" type="submit">Sign In</button>

        <div class="form-split-login-divider">or</div>

        <a class="form-split-login-secondary" href="#">Continue with Google</a>

      </form>

      <p class="form-split-login-signup">New here? <a href="#">Create an account</a></p>

    </div>

  </div>

</div>

CSS

.form-split-login-layout{
width:min(100%,980px);
display:grid;
grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);
overflow:hidden;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 90px rgba(15,23,42,.16);
}

.form-split-login-panel{
position:relative;
min-height:620px;
padding:34px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
background:#0f172a;
}

.form-split-login-panel::before{
content:"";
position:absolute;
width:360px;
height:360px;
right:-150px;
top:-140px;
border-radius:999px;
background:radial-gradient(circle,rgba(37,99,235,.56),transparent 68%);
pointer-events:none;
}

.form-split-login-panel::after{
content:"";
position:absolute;
width:340px;
height:340px;
left:-150px;
bottom:-150px;
border-radius:999px;
background:radial-gradient(circle,rgba(34,197,94,.38),transparent 70%);
pointer-events:none;
}

.form-split-login-panel-inner{
position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:28px;
}

.form-split-login-brand{
display:flex;
align-items:center;
gap:12px;
color:#ffffff;
font-size:19px;
font-weight:950;
letter-spacing:-.03em;
}

.form-split-login-brand-icon{
width:46px;
height:46px;
display:grid;
place-items:center;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
box-shadow:0 16px 36px rgba(37,99,235,.26);
color:#ffffff;
font-size:18px;
font-weight:950;
}

.form-split-login-panel-content{
max-width:380px;
}

.form-split-login-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-split-login-heading{
margin:0 0 14px;
font-size:clamp(32px,4vw,48px);
line-height:1.04;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-split-login-copy{
margin:0 0 20px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-split-login-list{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-split-login-list li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-split-login-check{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(34,197,94,.16);
border:1px solid rgba(34,197,94,.30);
color:#86efac;
font-size:13px;
font-weight:950;
}

.form-split-login-testimonial{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.form-split-login-testimonial p{
margin:0 0 12px;
font-size:14px;
line-height:1.7;
color:#e2e8f0;
}

.form-split-login-testimonial strong{
display:block;
font-size:13px;
line-height:1.4;
font-weight:950;
color:#ffffff;
}

.form-split-login-form-side{
display:grid;
place-items:center;
padding:42px;
background:#ffffff;
}

.form-split-login-card{
width:min(100%,420px);
}

.form-split-login-form-header{
margin-bottom:24px;
}

.form-split-login-form-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,42px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-split-login-form-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-split-login-form{
display:grid;
gap:16px;
}

.form-split-login-field{
display:grid;
gap:8px;
}

.form-split-login-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-split-login-input{
width:100%;
min-height:52px;
padding:0 15px;
border:1px solid #dbe3ef;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-split-login-input::placeholder{
color:#94a3b8;
}

.form-split-login-input:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-split-login-options{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.form-split-login-check-label{
display:flex;
align-items:center;
gap:9px;
font-size:14px;
line-height:1.4;
color:#64748b;
cursor:pointer;
}

.form-split-login-check-label input{
width:17px;
height:17px;
margin:0;
accent-color:#2563eb;
}

.form-split-login-link{
font-size:14px;
font-weight:850;
color:#2563eb;
text-decoration:none;
}

.form-split-login-link:hover,
.form-split-login-link:focus{
text-decoration:underline;
outline:none;
}

.form-split-login-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-split-login-button:hover,
.form-split-login-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.24);
filter:saturate(1.06);
outline:none;
}

.form-split-login-divider{
display:flex;
align-items:center;
gap:12px;
color:#94a3b8;
font-size:13px;
font-weight:850;
}

.form-split-login-divider::before,
.form-split-login-divider::after{
content:"";
height:1px;
flex:1;
background:#e2e8f0;
}

.form-split-login-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border:1px solid #dbe3ef;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:15px;
font-weight:900;
text-decoration:none;
transition:background .22s ease,border-color .22s ease,transform .22s ease;
}

.form-split-login-secondary:hover,
.form-split-login-secondary:focus{
background:#f8fafc;
border-color:#cbd5e1;
transform:translateY(-1px);
outline:none;
}

.form-split-login-signup{
margin:18px 0 0;
text-align:center;
font-size:14px;
line-height:1.6;
color:#64748b;
}

.form-split-login-signup a{
font-weight:950;
color:#2563eb;
text-decoration:none;
}

.form-split-login-signup a:hover,
.form-split-login-signup a:focus{
text-decoration:underline;
outline:none;
}

@media (max-width: 900px){
.form-split-login-layout{
grid-template-columns:1fr;
}

.form-split-login-panel{
min-height:430px;
}

.form-split-login-form-side{
padding:34px;
}
}

@media (max-width: 560px){
.form-split-login-layout{
border-radius:24px;
}

.form-split-login-panel,
.form-split-login-form-side{
padding:24px;
}

.form-split-login-panel{
min-height:390px;
}

.form-split-login-options{
align-items:flex-start;
flex-direction:column;
gap:10px;
}

.form-split-login-form-title{
font-size:32px;
}

.form-split-login-heading{
font-size:32px;
}
}

This split screen login form is useful when a basic login card feels too plain. The visual panel gives the page more brand personality, while the login form remains simple, focused, and easy to complete.

Use this pattern for SaaS login pages, dashboard authentication screens, web app sign-in pages, account portals, customer areas, membership websites, and startup product pages.

25. Dashboard Settings Form

A dashboard settings form is used inside admin panels, SaaS dashboards, account areas, membership websites, client portals, and web apps. It helps users update account settings, workspace preferences, notification options, privacy settings, billing preferences, or product configuration details.

This example uses a clean dashboard-style layout with a settings sidebar, grouped fields, toggle-style options, select fields, notification preferences, and a save button. The layout is practical for real web app interfaces and admin screens.

  • Perfect for SaaS dashboards, admin panels, client portals, and account settings pages
  • Includes grouped sections for profile, workspace, and notifications
  • Uses toggle-style options and standard form fields
  • Works well in modern dashboard UI layouts
  • Uses HTML and CSS only
Dashboard Settings

Manage workspace settings

Update workspace details, preferences, notifications, and account settings in one clean form.

Saved

Workspace details

Set the basic information for your account or workspace.

Notification preferences

Choose what updates should be sent to your team.

HTML

<div class="form-settings-shell">

  <aside class="form-settings-sidebar">

    <div class="form-settings-brand">
      <span class="form-settings-brand-icon">S</span>
      <span class="form-settings-brand-text">
        <strong>Settings</strong>
        <span>Workspace control</span>
      </span>
    </div>

    <ul class="form-settings-nav">
      <li><a class="is-active" href="#"><span class="form-settings-nav-dot"></span> General</a></li>
      <li><a href="#"><span class="form-settings-nav-dot"></span> Profile</a></li>
      <li><a href="#"><span class="form-settings-nav-dot"></span> Security</a></li>
      <li><a href="#"><span class="form-settings-nav-dot"></span> Billing</a></li>
    </ul>

    <div class="form-settings-help">
      Use grouped settings forms to keep dashboard pages easier to scan and update.
    </div>

  </aside>

  <main class="form-settings-main">

    <div class="form-settings-header">

      <div>
        <div class="form-settings-kicker">Dashboard Settings</div>
        <h3 class="form-settings-title">Manage workspace settings</h3>
        <p class="form-settings-text">Update workspace details, preferences, notifications, and account settings in one clean form.</p>
      </div>

      <div class="form-settings-status">
        <span class="form-settings-status-dot"></span>
        Saved
      </div>

    </div>

    <form class="form-settings-form" action="#" method="post">

      <section class="form-settings-section">

        <div class="form-settings-section-head">
          <div>
            <h4 class="form-settings-section-title">Workspace details</h4>
            <p class="form-settings-section-text">Set the basic information for your account or workspace.</p>
          </div>
        </div>

        <div class="form-settings-grid">

          <div class="form-settings-field">
            <label class="form-settings-label" for="settings-workspace">Workspace name</label>
            <input class="form-settings-input" id="settings-workspace" type="text" name="workspace" placeholder="Acme Studio">
          </div>

          <div class="form-settings-field">
            <label class="form-settings-label" for="settings-timezone">Timezone</label>
            <select class="form-settings-select" id="settings-timezone" name="timezone">
              <option>Eastern Time</option>
              <option>Central Time</option>
              <option>Pacific Time</option>
              <option>UTC</option>
            </select>
          </div>

          <div class="form-settings-field form-settings-field-full">
            <label class="form-settings-label" for="settings-description">Workspace description</label>
            <textarea class="form-settings-textarea" id="settings-description" name="description" placeholder="Write a short description for this workspace..."></textarea>
          </div>

        </div>

      </section>

      <section class="form-settings-section">

        <div class="form-settings-section-head">
          <div>
            <h4 class="form-settings-section-title">Notification preferences</h4>
            <p class="form-settings-section-text">Choose what updates should be sent to your team.</p>
          </div>
        </div>

        <div class="form-settings-toggles">

          <label class="form-settings-toggle">
            <span class="form-settings-toggle-text">
              <strong>Email notifications</strong>
              <span>Receive important account updates by email.</span>
            </span>
            <span class="form-settings-switch">
              <input type="checkbox" name="email_notifications" checked>
              <span class="form-settings-slider"></span>
            </span>
          </label>

          <label class="form-settings-toggle">
            <span class="form-settings-toggle-text">
              <strong>Weekly reports</strong>
              <span>Send a weekly performance summary to admins.</span>
            </span>
            <span class="form-settings-switch">
              <input type="checkbox" name="weekly_reports" checked>
              <span class="form-settings-slider"></span>
            </span>
          </label>

          <label class="form-settings-toggle">
            <span class="form-settings-toggle-text">
              <strong>Product updates</strong>
              <span>Notify users about new features and releases.</span>
            </span>
            <span class="form-settings-switch">
              <input type="checkbox" name="product_updates">
              <span class="form-settings-slider"></span>
            </span>
          </label>

        </div>

      </section>

      <div class="form-settings-actions">
        <button class="form-settings-button-secondary" type="button">Cancel</button>
        <button class="form-settings-button-primary" type="submit">Save Settings</button>
      </div>

    </form>

  </main>

</div>

CSS

.form-settings-shell{
width:min(100%,1040px);
display:grid;
grid-template-columns:260px minmax(0,1fr);
gap:22px;
align-items:start;
}

.form-settings-sidebar,
.form-settings-main{
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-settings-sidebar{
padding:22px;
position:sticky;
top:20px;
}

.form-settings-brand{
display:flex;
align-items:center;
gap:12px;
padding-bottom:18px;
margin-bottom:18px;
border-bottom:1px solid #e2e8f0;
}

.form-settings-brand-icon{
width:44px;
height:44px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.form-settings-brand-text strong{
display:block;
font-size:16px;
line-height:1.25;
font-weight:950;
color:#0f172a;
}

.form-settings-brand-text span{
display:block;
margin-top:3px;
font-size:12px;
line-height:1.4;
color:#64748b;
}

.form-settings-nav{
display:grid;
gap:8px;
margin:0;
padding:0;
list-style:none;
}

.form-settings-nav a{
display:flex;
align-items:center;
gap:10px;
min-height:42px;
padding:0 12px;
border-radius:14px;
color:#64748b;
font-size:14px;
font-weight:850;
text-decoration:none;
transition:background .22s ease,color .22s ease;
}

.form-settings-nav a:hover,
.form-settings-nav a:focus{
background:#f8fafc;
color:#0f172a;
outline:none;
}

.form-settings-nav a.is-active{
background:#eff6ff;
color:#1d4ed8;
}

.form-settings-nav-dot{
width:8px;
height:8px;
border-radius:999px;
background:currentColor;
opacity:.7;
}

.form-settings-help{
margin-top:18px;
padding:14px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:13px;
line-height:1.6;
color:#64748b;
}

.form-settings-main{
padding:30px;
}

.form-settings-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
padding-bottom:22px;
margin-bottom:22px;
border-bottom:1px solid #e2e8f0;
}

.form-settings-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-settings-title{
margin:0 0 9px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-settings-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-settings-status{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:#f0fdf4;
border:1px solid #bbf7d0;
color:#15803d;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.form-settings-status-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.form-settings-form{
display:grid;
gap:20px;
}

.form-settings-section{
display:grid;
gap:16px;
padding:20px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-settings-section-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}

.form-settings-section-title{
margin:0 0 5px;
font-size:18px;
line-height:1.25;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.form-settings-section-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.form-settings-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-settings-field{
display:grid;
gap:8px;
}

.form-settings-field-full{
grid-column:1 / -1;
}

.form-settings-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-settings-input,
.form-settings-select,
.form-settings-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-settings-input,
.form-settings-select{
min-height:50px;
padding:0 14px;
}

.form-settings-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-settings-textarea{
min-height:104px;
resize:vertical;
padding:13px 14px;
}

.form-settings-input::placeholder,
.form-settings-textarea::placeholder{
color:#94a3b8;
}

.form-settings-input:focus,
.form-settings-select:focus,
.form-settings-textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-settings-toggles{
display:grid;
gap:10px;
}

.form-settings-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:14px;
border-radius:16px;
background:#ffffff;
border:1px solid #e2e8f0;
}

.form-settings-toggle-text strong{
display:block;
font-size:14px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.form-settings-toggle-text span{
display:block;
margin-top:3px;
font-size:13px;
line-height:1.5;
color:#64748b;
}

.form-settings-switch{
position:relative;
display:inline-flex;
width:48px;
height:28px;
flex:0 0 auto;
}

.form-settings-switch input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-settings-slider{
position:absolute;
inset:0;
border-radius:999px;
background:#cbd5e1;
cursor:pointer;
transition:background .22s ease;
}

.form-settings-slider::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#ffffff;
box-shadow:0 4px 12px rgba(15,23,42,.20);
transition:transform .22s ease;
}

.form-settings-switch input:checked + .form-settings-slider{
background:#22c55e;
}

.form-settings-switch input:checked + .form-settings-slider::before{
transform:translateX(20px);
}

.form-settings-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}

.form-settings-button-secondary,
.form-settings-button-primary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border-radius:16px;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.form-settings-button-secondary{
border:1px solid #dbe3ef;
background:#ffffff;
color:#0f172a;
}

.form-settings-button-secondary:hover,
.form-settings-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
outline:none;
}

.form-settings-button-primary{
border:0;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.22);
}

.form-settings-button-primary:hover,
.form-settings-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
outline:none;
}

@media (max-width: 940px){
.form-settings-shell{
grid-template-columns:1fr;
}

.form-settings-sidebar{
position:relative;
top:auto;
}

.form-settings-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.form-settings-header{
align-items:flex-start;
flex-direction:column;
}
}

@media (max-width: 640px){
.form-settings-sidebar,
.form-settings-main{
padding:22px;
border-radius:24px;
}

.form-settings-nav{
grid-template-columns:1fr;
}

.form-settings-grid{
grid-template-columns:1fr;
}

.form-settings-actions{
align-items:stretch;
flex-direction:column-reverse;
}

.form-settings-button-secondary,
.form-settings-button-primary{
width:100%;
}

.form-settings-title{
font-size:32px;
}
}

This dashboard settings form is useful when a simple card layout is not enough and the form needs to feel like part of a full product interface. The sidebar navigation, grouped sections, toggles, and status badge make the layout feel closer to a real SaaS dashboard.

Use this pattern for admin panels, SaaS dashboards, account settings pages, client portals, workspace settings, notification settings, and web app preference screens.

26. Profile Edit Form

A profile edit form allows users to update personal details, profile photo, public bio, contact information, social links, and account preferences. It is common in membership websites, SaaS apps, dashboards, social platforms, communities, online courses, and client portals.

This example uses a profile card with avatar upload styling, basic information fields, bio textarea, social profile fields, and account visibility options. The layout is clean, responsive, and suitable for modern user account pages.

  • Perfect for user dashboards, membership sites, communities, and SaaS apps
  • Includes avatar area, profile fields, bio, and social links
  • Uses grouped sections for easier scanning
  • Includes visibility preference options
  • Uses HTML and CSS only
Profile Form

Edit your public profile

Update personal details, bio, social links, and profile visibility in a clean account form.

Public
AM
Alex Morgan Product designer
A strong profile helps other users understand who you are, what you do, and how to contact you.

Basic information

Update the main information shown on your profile.

Social links

Add optional public links to your profile.

Profile visibility

Choose whether your profile should be visible to others.

HTML

<div class="form-profile-card">

  <div class="form-profile-cover">

    <div class="form-profile-cover-content">

      <div>
        <div class="form-profile-kicker">Profile Form</div>
        <h3 class="form-profile-title">Edit your public profile</h3>
        <p class="form-profile-text">Update personal details, bio, social links, and profile visibility in a clean account form.</p>
      </div>

      <div class="form-profile-status">
        <span class="form-profile-status-dot"></span>
        Public
      </div>

    </div>

  </div>

  <div class="form-profile-body">

    <div class="form-profile-side">

      <div class="form-profile-avatar-card">
        <div class="form-profile-avatar">AM</div>
        <strong>Alex Morgan</strong>
        <span>Product designer</span>
        <button class="form-profile-upload" type="button">Upload Photo</button>
      </div>

      <div class="form-profile-tips">
        A strong profile helps other users understand who you are, what you do, and how to contact you.
      </div>

    </div>

    <form class="form-profile-form" action="#" method="post">

      <section class="form-profile-section">

        <h4 class="form-profile-section-title">Basic information</h4>
        <p class="form-profile-section-text">Update the main information shown on your profile.</p>

        <div class="form-profile-grid">

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-first">First name</label>
            <input class="form-profile-input" id="profile-first" type="text" name="first_name" placeholder="Alex">
          </div>

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-last">Last name</label>
            <input class="form-profile-input" id="profile-last" type="text" name="last_name" placeholder="Morgan">
          </div>

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-title-field">Professional title</label>
            <input class="form-profile-input" id="profile-title-field" type="text" name="title" placeholder="Product designer">
          </div>

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-location">Location</label>
            <input class="form-profile-input" id="profile-location" type="text" name="location" placeholder="New York, USA">
          </div>

          <div class="form-profile-field form-profile-field-full">
            <label class="form-profile-label" for="profile-bio">Bio</label>
            <textarea class="form-profile-textarea" id="profile-bio" name="bio" placeholder="Write a short profile bio..."></textarea>
          </div>

        </div>

      </section>

      <section class="form-profile-section">

        <h4 class="form-profile-section-title">Social links</h4>
        <p class="form-profile-section-text">Add optional public links to your profile.</p>

        <div class="form-profile-grid">

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-website">Website</label>
            <input class="form-profile-input" id="profile-website" type="url" name="website" placeholder="https://example.com">
          </div>

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-linkedin">LinkedIn</label>
            <input class="form-profile-input" id="profile-linkedin" type="url" name="linkedin" placeholder="https://linkedin.com/in/username">
          </div>

        </div>

      </section>

      <section class="form-profile-section">

        <h4 class="form-profile-section-title">Profile visibility</h4>
        <p class="form-profile-section-text">Choose whether your profile should be visible to others.</p>

        <div class="form-profile-visibility">

          <label class="form-profile-visibility-option">
            <input type="radio" name="visibility" value="public" checked>
            <span>
              <strong>Public profile</strong>
              <small>Visible to other users and visitors.</small>
            </span>
          </label>

          <label class="form-profile-visibility-option">
            <input type="radio" name="visibility" value="private">
            <span>
              <strong>Private profile</strong>
              <small>Only visible to your account.</small>
            </span>
          </label>

        </div>

      </section>

      <div class="form-profile-actions">
        <button class="form-profile-button-secondary" type="button">Cancel</button>
        <button class="form-profile-button-primary" type="submit">Save Profile</button>
      </div>

    </form>

  </div>

</div>

CSS

.form-profile-card{
width:min(100%,920px);
overflow:hidden;
border-radius:32px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}

.form-profile-cover{
position:relative;
min-height:190px;
padding:30px;
overflow:hidden;
background:
radial-gradient(circle at 18% 24%,rgba(255,255,255,.22),transparent 28%),
linear-gradient(135deg,#8b5cf6,#0ea5e9 52%,#22c55e);
}

.form-profile-cover::after{
content:"";
position:absolute;
width:280px;
height:280px;
right:-120px;
top:-120px;
border-radius:999px;
background:rgba(255,255,255,.18);
pointer-events:none;
}

.form-profile-cover-content{
position:relative;
z-index:2;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
}

.form-profile-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-profile-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,46px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-profile-text{
margin:0;
max-width:560px;
font-size:15px;
line-height:1.75;
color:rgba(255,255,255,.88);
}

.form-profile-status{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
color:#ffffff;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.form-profile-status-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.16);
}

.form-profile-body{
display:grid;
grid-template-columns:260px minmax(0,1fr);
gap:24px;
padding:30px;
}

.form-profile-side{
display:grid;
align-content:start;
gap:16px;
}

.form-profile-avatar-card{
padding:20px;
border-radius:24px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
text-align:center;
}

.form-profile-avatar{
width:110px;
height:110px;
display:grid;
place-items:center;
margin:0 auto 14px;
border-radius:32px;
background:
linear-gradient(135deg,rgba(168,85,247,.32),rgba(14,165,233,.32)),
#111827;
border:1px solid rgba(255,255,255,.16);
color:#ffffff;
font-size:36px;
font-weight:950;
box-shadow:0 18px 46px rgba(0,0,0,.26);
}

.form-profile-avatar-card strong{
display:block;
font-size:16px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-profile-avatar-card span{
display:block;
margin-top:4px;
font-size:13px;
line-height:1.5;
color:#94a3b8;
}

.form-profile-upload{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
margin-top:16px;
border-radius:14px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:background .22s ease,transform .22s ease;
}

.form-profile-upload:hover,
.form-profile-upload:focus{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
outline:none;
}

.form-profile-tips{
padding:16px;
border-radius:20px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
font-size:13px;
line-height:1.65;
color:#cbd5e1;
}

.form-profile-form{
display:grid;
gap:20px;
}

.form-profile-section{
display:grid;
gap:16px;
padding:20px;
border-radius:24px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
}

.form-profile-section-title{
margin:0;
font-size:18px;
line-height:1.25;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.form-profile-section-text{
margin:-8px 0 0;
font-size:14px;
line-height:1.65;
color:#94a3b8;
}

.form-profile-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-profile-field{
display:grid;
gap:8px;
}

.form-profile-field-full{
grid-column:1 / -1;
}

.form-profile-label{
font-size:13px;
font-weight:850;
color:#ffffff;
}

.form-profile-input,
.form-profile-select,
.form-profile-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:15px;
background:rgba(255,255,255,.07);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-profile-input,
.form-profile-select{
min-height:50px;
padding:0 14px;
}

.form-profile-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-profile-select option{
color:#0f172a;
}

.form-profile-textarea{
min-height:118px;
resize:vertical;
padding:13px 14px;
}

.form-profile-input::placeholder,
.form-profile-textarea::placeholder{
color:#94a3b8;
}

.form-profile-input:focus,
.form-profile-select:focus,
.form-profile-textarea:focus{
border-color:#38bdf8;
box-shadow:0 0 0 4px rgba(56,189,248,.14);
background:rgba(255,255,255,.10);
}

.form-profile-visibility{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-profile-visibility-option{
position:relative;
cursor:pointer;
}

.form-profile-visibility-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-profile-visibility-option span{
display:grid;
gap:4px;
padding:14px;
border-radius:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-profile-visibility-option strong{
font-size:14px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-profile-visibility-option small{
font-size:12px;
line-height:1.45;
color:#94a3b8;
}

.form-profile-visibility-option input:checked + span{
border-color:#38bdf8;
box-shadow:0 0 0 4px rgba(56,189,248,.12);
background:rgba(14,165,233,.14);
}

.form-profile-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}

.form-profile-button-secondary,
.form-profile-button-primary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border-radius:16px;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.form-profile-button-secondary{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.07);
color:#ffffff;
}

.form-profile-button-secondary:hover,
.form-profile-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.11);
outline:none;
}

.form-profile-button-primary{
border:0;
background:linear-gradient(135deg,#8b5cf6,#0ea5e9,#22c55e);
color:#ffffff;
box-shadow:0 18px 42px rgba(14,165,233,.24);
}

.form-profile-button-primary:hover,
.form-profile-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
outline:none;
}

@media (max-width: 920px){
.form-profile-body{
grid-template-columns:1fr;
}

.form-profile-side{
grid-template-columns:1fr 1fr;
}

.form-profile-cover-content{
align-items:flex-start;
flex-direction:column;
}
}

@media (max-width: 640px){
.form-profile-card{
border-radius:24px;
}

.form-profile-cover,
.form-profile-body{
padding:22px;
}

.form-profile-side{
grid-template-columns:1fr;
}

.form-profile-grid,
.form-profile-visibility{
grid-template-columns:1fr;
}

.form-profile-actions{
align-items:stretch;
flex-direction:column-reverse;
}

.form-profile-button-secondary,
.form-profile-button-primary{
width:100%;
}

.form-profile-title{
font-size:32px;
}
}

This profile edit form is useful when users need to update several personal details without feeling overwhelmed. The cover area creates a strong profile header, while the grouped form sections keep basic information, social links, and visibility settings easy to understand.

Use this pattern for membership websites, user dashboards, SaaS account areas, client portals, communities, online course profiles, marketplace accounts, and social profile edit pages.

27. Product Filter Form

A product filter form helps users narrow down products by category, price, rating, availability, brand, color, size, or other product attributes. It is one of the most important form patterns for eCommerce websites, marketplaces, product catalogs, booking platforms, directories, and comparison websites.

This example uses a modern product filter panel with search, category, price range, rating options, availability toggles, color swatches, and action buttons. The layout is designed to work as a sidebar filter on desktop and as a stacked filter block on mobile.

  • Perfect for eCommerce stores, marketplaces, directories, and product catalogs
  • Includes search, category, price, rating, availability, and color filters
  • Uses visual swatches and checkbox-style filter options
  • Stacks cleanly on mobile screens
  • Works with HTML and CSS only

Filtered products

Example product cards show how filtered results could appear next to the form.

Modern Product Kit

A clean product card with simple details and a clear price.

$89 In stock

Premium Accessory

A useful accessory shown as part of the filtered product grid.

$49 Sale

Starter Bundle

A bundle product that appears after filters are applied.

$129 Popular

Compact Item

A compact example product for eCommerce filter layouts.

$39 New

HTML

<div class="form-product-filter-layout">

  <aside class="form-product-filter-panel">

    <div class="form-product-filter-header">
      <div class="form-product-filter-kicker">Product Filter</div>
      <h3 class="form-product-filter-title">Find the right product</h3>
      <p class="form-product-filter-text">Use filters to help customers narrow products by category, price, rating, availability, and color.</p>
    </div>

    <form class="form-product-filter-form" action="#" method="get">

      <div class="form-product-filter-group">

        <h4 class="form-product-filter-group-title">Search</h4>

        <div class="form-product-filter-field">
          <label class="form-product-filter-label" for="filter-search">Keyword</label>
          <input class="form-product-filter-input" id="filter-search" type="search" name="search" placeholder="Search products...">
        </div>

        <div class="form-product-filter-field">
          <label class="form-product-filter-label" for="filter-category">Category</label>
          <select class="form-product-filter-select" id="filter-category" name="category">
            <option>All categories</option>
            <option>Accessories</option>
            <option>Garden products</option>
            <option>Home products</option>
            <option>Digital products</option>
          </select>
        </div>

      </div>

      <div class="form-product-filter-group">

        <h4 class="form-product-filter-group-title">Price range</h4>

        <div class="form-product-filter-price-row">

          <div class="form-product-filter-field">
            <label class="form-product-filter-label" for="filter-min">Min</label>
            <input class="form-product-filter-input" id="filter-min" type="number" name="min_price" placeholder="$0">
          </div>

          <div class="form-product-filter-field">
            <label class="form-product-filter-label" for="filter-max">Max</label>
            <input class="form-product-filter-input" id="filter-max" type="number" name="max_price" placeholder="$500">
          </div>

        </div>

      </div>

      <div class="form-product-filter-group">

        <h4 class="form-product-filter-group-title">Availability and rating</h4>

        <div class="form-product-filter-checks">

          <label class="form-product-filter-check">
            <span>In stock</span>
            <span>
              <span class="form-product-filter-count">42</span>
              <input type="checkbox" name="stock" checked>
            </span>
          </label>

          <label class="form-product-filter-check">
            <span>On sale</span>
            <span>
              <span class="form-product-filter-count">18</span>
              <input type="checkbox" name="sale">
            </span>
          </label>

          <label class="form-product-filter-check">
            <span>4 stars and up</span>
            <span>
              <span class="form-product-filter-count">31</span>
              <input type="checkbox" name="rating">
            </span>
          </label>

        </div>

      </div>

      <div class="form-product-filter-group">

        <h4 class="form-product-filter-group-title">Color</h4>

        <div class="form-product-filter-swatches">

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="green" checked>
            <span class="form-product-filter-swatch-green"></span>
          </label>

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="blue">
            <span class="form-product-filter-swatch-blue"></span>
          </label>

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="purple">
            <span class="form-product-filter-swatch-purple"></span>
          </label>

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="orange">
            <span class="form-product-filter-swatch-orange"></span>
          </label>

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="gray">
            <span class="form-product-filter-swatch-gray"></span>
          </label>

        </div>

      </div>

      <div class="form-product-filter-actions">
        <button class="form-product-filter-reset" type="reset">Reset</button>
        <button class="form-product-filter-button" type="submit">Apply</button>
      </div>

    </form>

  </aside>

  <section class="form-product-filter-results">

    <div class="form-product-filter-results-head">

      <div>
        <h3 class="form-product-filter-results-title">Filtered products</h3>
        <p class="form-product-filter-results-text">Example product cards show how filtered results could appear next to the form.</p>
      </div>

      <select class="form-product-filter-sort" aria-label="Sort products">
        <option>Sort by popular</option>
        <option>Price low to high</option>
        <option>Newest first</option>
      </select>

    </div>

    <div class="form-product-filter-grid">

      <article class="form-product-filter-product">
        <div class="form-product-filter-thumb"></div>
        <h4>Modern Product Kit</h4>
        <p>A clean product card with simple details and a clear price.</p>
        <div class="form-product-filter-product-footer">
          <span class="form-product-filter-price">$89</span>
          <span class="form-product-filter-tag">In stock</span>
        </div>
      </article>

      <article class="form-product-filter-product">
        <div class="form-product-filter-thumb"></div>
        <h4>Premium Accessory</h4>
        <p>A useful accessory shown as part of the filtered product grid.</p>
        <div class="form-product-filter-product-footer">
          <span class="form-product-filter-price">$49</span>
          <span class="form-product-filter-tag">Sale</span>
        </div>
      </article>

      <article class="form-product-filter-product">
        <div class="form-product-filter-thumb"></div>
        <h4>Starter Bundle</h4>
        <p>A bundle product that appears after filters are applied.</p>
        <div class="form-product-filter-product-footer">
          <span class="form-product-filter-price">$129</span>
          <span class="form-product-filter-tag">Popular</span>
        </div>
      </article>

      <article class="form-product-filter-product">
        <div class="form-product-filter-thumb"></div>
        <h4>Compact Item</h4>
        <p>A compact example product for eCommerce filter layouts.</p>
        <div class="form-product-filter-product-footer">
          <span class="form-product-filter-price">$39</span>
          <span class="form-product-filter-tag">New</span>
        </div>
      </article>

    </div>

  </section>

</div>

CSS

.form-product-filter-layout{
width:min(100%,1040px);
display:grid;
grid-template-columns:330px minmax(0,1fr);
gap:22px;
align-items:start;
}

.form-product-filter-panel,
.form-product-filter-results{
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-product-filter-panel{
padding:26px;
position:sticky;
top:20px;
}

.form-product-filter-header{
margin-bottom:22px;
}

.form-product-filter-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-product-filter-title{
margin:0 0 9px;
font-size:clamp(28px,4vw,38px);
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-product-filter-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.form-product-filter-form{
display:grid;
gap:18px;
}

.form-product-filter-group{
display:grid;
gap:12px;
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-product-filter-group-title{
margin:0;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-product-filter-field{
display:grid;
gap:8px;
}

.form-product-filter-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-product-filter-input,
.form-product-filter-select{
width:100%;
min-height:48px;
padding:0 14px;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:14px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-product-filter-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-product-filter-input::placeholder{
color:#94a3b8;
}

.form-product-filter-input:focus,
.form-product-filter-select:focus{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
background:#ffffff;
}

.form-product-filter-price-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-product-filter-checks{
display:grid;
gap:10px;
}

.form-product-filter-check{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-radius:15px;
background:#ffffff;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.4;
font-weight:800;
color:#475569;
cursor:pointer;
}

.form-product-filter-check input{
width:18px;
height:18px;
margin:0;
accent-color:#22c55e;
}

.form-product-filter-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
min-height:22px;
padding:0 7px;
border-radius:999px;
background:#f1f5f9;
color:#64748b;
font-size:12px;
font-weight:900;
}

.form-product-filter-swatches{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.form-product-filter-swatch{
position:relative;
cursor:pointer;
}

.form-product-filter-swatch input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-product-filter-swatch span{
display:block;
width:34px;
height:34px;
border-radius:999px;
border:3px solid #ffffff;
box-shadow:0 0 0 1px #cbd5e1;
transition:box-shadow .22s ease,transform .22s ease;
}

.form-product-filter-swatch input:checked + span{
box-shadow:0 0 0 3px rgba(34,197,94,.42);
transform:translateY(-1px);
}

.form-product-filter-swatch-green{
background:#22c55e;
}

.form-product-filter-swatch-blue{
background:#2563eb;
}

.form-product-filter-swatch-purple{
background:#7c3aed;
}

.form-product-filter-swatch-orange{
background:#f97316;
}

.form-product-filter-swatch-gray{
background:#64748b;
}

.form-product-filter-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-product-filter-button,
.form-product-filter-reset{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
border-radius:16px;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.form-product-filter-button{
border:0;
background:linear-gradient(135deg,#22c55e,#0ea5e9);
color:#ffffff;
box-shadow:0 18px 42px rgba(34,197,94,.22);
}

.form-product-filter-button:hover,
.form-product-filter-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(14,165,233,.24);
outline:none;
}

.form-product-filter-reset{
border:1px solid #dbe3ef;
background:#ffffff;
color:#0f172a;
}

.form-product-filter-reset:hover,
.form-product-filter-reset:focus{
transform:translateY(-2px);
background:#f8fafc;
outline:none;
}

.form-product-filter-results{
padding:26px;
}

.form-product-filter-results-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
}

.form-product-filter-results-title{
margin:0 0 7px;
font-size:26px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.form-product-filter-results-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.form-product-filter-sort{
min-height:42px;
padding:0 36px 0 12px;
border:1px solid #dbe3ef;
border-radius:14px;
background:#ffffff;
color:#0f172a;
font-size:13px;
font-weight:850;
outline:none;
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}

.form-product-filter-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.form-product-filter-product{
padding:14px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-product-filter-thumb{
height:130px;
border-radius:16px;
background:
radial-gradient(circle at 24% 20%,rgba(255,255,255,.68),transparent 28%),
linear-gradient(135deg,rgba(34,197,94,.22),rgba(14,165,233,.22));
border:1px solid #e2e8f0;
margin-bottom:12px;
}

.form-product-filter-product h4{
margin:0 0 6px;
font-size:16px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-product-filter-product p{
margin:0 0 10px;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-product-filter-product-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.form-product-filter-price{
font-size:16px;
font-weight:950;
color:#15803d;
}

.form-product-filter-tag{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:900;
}

@media (max-width: 940px){
.form-product-filter-layout{
grid-template-columns:1fr;
}

.form-product-filter-panel{
position:relative;
top:auto;
}

.form-product-filter-grid{
grid-template-columns:1fr 1fr;
}
}

@media (max-width: 640px){
.form-product-filter-panel,
.form-product-filter-results{
padding:22px;
border-radius:24px;
}

.form-product-filter-results-head{
flex-direction:column;
}

.form-product-filter-price-row,
.form-product-filter-actions,
.form-product-filter-grid{
grid-template-columns:1fr;
}

.form-product-filter-title{
font-size:32px;
}
}

This product filter form is useful when users need to narrow a large product list into a smaller, more relevant set of results. The form works well as a sidebar on desktop and can become a full-width filter panel on mobile.

Use this pattern for WooCommerce stores, product catalogs, marketplaces, directories, booking websites, comparison pages, real estate listings, course catalogs, and any website where users need to filter many items.

28. Pricing / Plan Selection Form

A pricing or plan selection form helps users choose between different subscription tiers, packages, service levels, or product plans. It is useful for SaaS websites, membership platforms, hosting companies, agencies, online tools, digital products, and service businesses.

This example uses three selectable pricing cards with radio inputs, billing cycle options, a small add-on selector, and a checkout-style summary. The design helps users compare plans visually before submitting their selection.

  • Perfect for SaaS pricing pages, membership websites, hosting plans, and service packages
  • Uses selectable pricing cards with radio inputs
  • Includes monthly / yearly billing options
  • Includes add-on options and a summary area
  • Uses HTML and CSS only
Plan Selection Form

Choose the right pricing plan

A selectable pricing form helps users compare plans, choose billing options, add extras, and submit their preferred package.

Optional add-ons

Plan summary

Selected plan Professional
Billing Monthly
Estimated total $49/mo

This is a static UI example. Connect the selected plan values to your checkout or billing system in a real project.

HTML

<div class="form-pricing-shell">

  <div class="form-pricing-header">

    <div class="form-pricing-kicker">Plan Selection Form</div>

    <h3 class="form-pricing-title">Choose the right <span>pricing plan</span></h3>

    <p class="form-pricing-text">A selectable pricing form helps users compare plans, choose billing options, add extras, and submit their preferred package.</p>

  </div>

  <form class="form-pricing-form" action="#" method="post">

    <div class="form-pricing-billing">

      <label class="form-pricing-billing-option">
        <input type="radio" name="billing" value="monthly" checked>
        <span>Monthly billing</span>
      </label>

      <label class="form-pricing-billing-option">
        <input type="radio" name="billing" value="yearly">
        <span>Yearly billing - Save 20%</span>
      </label>

    </div>

    <div class="form-pricing-grid">

      <label class="form-pricing-card">
        <input type="radio" name="plan" value="starter">
        <span class="form-pricing-card-body">

          <span class="form-pricing-plan-top">
            <span class="form-pricing-plan-name">Starter</span>
          </span>

          <span class="form-pricing-price">
            <strong>$19</strong>
            <span>/mo</span>
          </span>

          <span class="form-pricing-description">Best for simple websites, small projects, and personal use.</span>

          <ul class="form-pricing-features">
            <li><span class="form-pricing-check">✓</span> 1 workspace</li>
            <li><span class="form-pricing-check">✓</span> Basic support</li>
            <li><span class="form-pricing-check">✓</span> 5 projects</li>
          </ul>

        </span>
      </label>

      <label class="form-pricing-card">
        <input type="radio" name="plan" value="pro" checked>
        <span class="form-pricing-card-body">

          <span class="form-pricing-plan-top">
            <span class="form-pricing-plan-name">Professional</span>
            <span class="form-pricing-badge">Popular</span>
          </span>

          <span class="form-pricing-price">
            <strong>$49</strong>
            <span>/mo</span>
          </span>

          <span class="form-pricing-description">Best for growing teams, client work, and advanced workflows.</span>

          <ul class="form-pricing-features">
            <li><span class="form-pricing-check">✓</span> 5 workspaces</li>
            <li><span class="form-pricing-check">✓</span> Priority support</li>
            <li><span class="form-pricing-check">✓</span> 50 projects</li>
          </ul>

        </span>
      </label>

      <label class="form-pricing-card">
        <input type="radio" name="plan" value="business">
        <span class="form-pricing-card-body">

          <span class="form-pricing-plan-top">
            <span class="form-pricing-plan-name">Business</span>
          </span>

          <span class="form-pricing-price">
            <strong>$99</strong>
            <span>/mo</span>
          </span>

          <span class="form-pricing-description">Best for companies, agencies, and larger product teams.</span>

          <ul class="form-pricing-features">
            <li><span class="form-pricing-check">✓</span> Unlimited workspaces</li>
            <li><span class="form-pricing-check">✓</span> Dedicated support</li>
            <li><span class="form-pricing-check">✓</span> Unlimited projects</li>
          </ul>

        </span>
      </label>

    </div>

    <div class="form-pricing-bottom">

      <div class="form-pricing-addons">

        <h4 class="form-pricing-section-title">Optional add-ons</h4>

        <div class="form-pricing-addon-list">

          <label class="form-pricing-addon">
            <span class="form-pricing-addon-text">
              <strong>Advanced analytics</strong>
              <span>Track deeper user and product insights.</span>
            </span>
            <span class="form-pricing-addon-price">+$12/mo</span>
            <input type="checkbox" name="addon_analytics">
          </label>

          <label class="form-pricing-addon">
            <span class="form-pricing-addon-text">
              <strong>Extra storage</strong>
              <span>Add more space for files and assets.</span>
            </span>
            <span class="form-pricing-addon-price">+$8/mo</span>
            <input type="checkbox" name="addon_storage">
          </label>

          <label class="form-pricing-addon">
            <span class="form-pricing-addon-text">
              <strong>Priority onboarding</strong>
              <span>Get guided setup for your team.</span>
            </span>
            <span class="form-pricing-addon-price">+$29</span>
            <input type="checkbox" name="addon_onboarding">
          </label>

        </div>

      </div>

      <div class="form-pricing-summary">

        <h4 class="form-pricing-section-title">Plan summary</h4>

        <div class="form-pricing-summary-row">
          <span>Selected plan</span>
          <span>Professional</span>
        </div>

        <div class="form-pricing-summary-row">
          <span>Billing</span>
          <span>Monthly</span>
        </div>

        <div class="form-pricing-summary-row">
          <span>Estimated total</span>
          <strong>$49/mo</strong>
        </div>

        <p class="form-pricing-summary-note">This is a static UI example. Connect the selected plan values to your checkout or billing system in a real project.</p>

        <button class="form-pricing-button" type="submit">Continue with Plan</button>

      </div>

    </div>

  </form>

</div>

CSS

.form-pricing-shell{
width:min(100%,1040px);
display:grid;
gap:24px;
}

.form-pricing-header{
text-align:center;
max-width:760px;
margin:0 auto;
}

.form-pricing-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.14);
border:1px solid rgba(168,85,247,.28);
color:#d8b4fe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-pricing-title{
margin:0 0 10px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-pricing-title span{
background:linear-gradient(90deg,#93c5fd,#d8b4fe,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-pricing-text{
margin:0 auto;
max-width:640px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-pricing-form{
display:grid;
gap:20px;
}

.form-pricing-billing{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.form-pricing-billing-option{
position:relative;
cursor:pointer;
}

.form-pricing-billing-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-pricing-billing-option span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:14px;
font-weight:900;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-pricing-billing-option input:checked + span{
border-color:#a855f7;
box-shadow:0 0 0 4px rgba(168,85,247,.14);
background:rgba(168,85,247,.18);
color:#ffffff;
}

.form-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}

.form-pricing-card{
position:relative;
cursor:pointer;
}

.form-pricing-card input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-pricing-card-body{
display:grid;
gap:16px;
height:100%;
padding:22px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.24);
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease;
}

.form-pricing-card input:checked + .form-pricing-card-body{
border-color:#a855f7;
box-shadow:0 0 0 4px rgba(168,85,247,.14),0 28px 80px rgba(168,85,247,.18);
background:rgba(168,85,247,.13);
transform:translateY(-3px);
}

.form-pricing-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}

.form-pricing-plan-name{
margin:0;
font-size:20px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.form-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.24);
color:#86efac;
font-size:12px;
font-weight:900;
white-space:nowrap;
}

.form-pricing-price{
display:flex;
align-items:flex-end;
gap:5px;
color:#ffffff;
}

.form-pricing-price strong{
font-size:40px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.form-pricing-price span{
padding-bottom:5px;
font-size:13px;
font-weight:850;
color:#94a3b8;
}

.form-pricing-description{
margin:0;
font-size:14px;
line-height:1.65;
color:#cbd5e1;
}

.form-pricing-features{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-pricing-features li{
display:flex;
align-items:flex-start;
gap:9px;
font-size:13px;
line-height:1.5;
color:#e2e8f0;
}

.form-pricing-check{
width:20px;
height:20px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(34,197,94,.14);
color:#86efac;
font-size:12px;
font-weight:950;
}

.form-pricing-bottom{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:16px;
align-items:start;
}

.form-pricing-addons,
.form-pricing-summary{
padding:22px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.form-pricing-section-title{
margin:0 0 12px;
font-size:18px;
line-height:1.25;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.form-pricing-addon-list{
display:grid;
gap:10px;
}

.form-pricing-addon{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px;
border-radius:17px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
cursor:pointer;
}

.form-pricing-addon input{
width:18px;
height:18px;
margin:0;
accent-color:#a855f7;
}

.form-pricing-addon-text{
display:grid;
gap:3px;
}

.form-pricing-addon-text strong{
font-size:14px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-pricing-addon-text span{
font-size:13px;
line-height:1.45;
color:#94a3b8;
}

.form-pricing-addon-price{
font-size:14px;
font-weight:950;
color:#86efac;
white-space:nowrap;
}

.form-pricing-summary{
display:grid;
gap:14px;
}

.form-pricing-summary-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
font-size:14px;
line-height:1.5;
color:#cbd5e1;
}

.form-pricing-summary-row strong{
font-size:20px;
color:#ffffff;
}

.form-pricing-summary-note{
margin:0;
padding:14px;
border-radius:16px;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.20);
color:#bbf7d0;
font-size:13px;
line-height:1.55;
}

.form-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#a855f7,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(168,85,247,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-pricing-button:hover,
.form-pricing-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 940px){
.form-pricing-grid{
grid-template-columns:1fr;
}

.form-pricing-bottom{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.form-pricing-grid{
gap:14px;
}

.form-pricing-card-body,
.form-pricing-addons,
.form-pricing-summary{
padding:20px;
border-radius:24px;
}

.form-pricing-billing{
align-items:stretch;
flex-direction:column;
}

.form-pricing-billing-option span{
width:100%;
}

.form-pricing-title{
font-size:32px;
}
}

This pricing and plan selection form is useful when users need to compare options before continuing to checkout, signup, or a quote request. The selectable cards make the choice visual, while the add-on and summary sections make the decision feel clearer.

Use this pattern for SaaS pricing pages, hosting packages, membership plans, service packages, agency retainers, digital product tiers, subscription forms, and pricing comparison sections.

29. Payment Card Form UI

A payment card form UI is used when a website needs to collect card-style payment details, billing information, or checkout information. Even when the real payment is handled by a secure provider like Stripe, PayPal, or another gateway, the visual payment form still needs to feel trustworthy, simple, and easy to complete.

This example uses a modern payment card preview with cardholder details, card number, expiry date, CVC, billing email, and a secure payment button. It is a front-end UI example only and should be connected to a real secure payment processor in production.

  • Perfect for checkout pages, SaaS billing forms, subscription pages, and payment screens
  • Includes card number, cardholder name, expiry, CVC, and billing email fields
  • Uses a visual card preview for a more premium payment UI
  • Stacks cleanly on mobile screens
  • Uses HTML and CSS only
Secure Pay
1234 5678 9012 3456
Cardholder Alex Morgan
Expires 12/28

Secure payment experience

A visual payment card can make a checkout or billing page feel more polished, but real payments must always be handled through a secure payment gateway.

Payment Form

Enter payment details

Use this payment card UI for checkout, subscription, or billing form layouts.

✓ This is a static UI demo. In a real project, never store raw card data yourself. Use a secure payment processor.
Plan Professional
Billing Monthly
Total $49/mo

HTML

<div class="form-payment-layout">

  <div class="form-payment-visual">

    <div class="form-payment-card-preview">

      <div class="form-payment-card-inner">

        <div class="form-payment-card-top">
          <div class="form-payment-card-chip"></div>
          <div class="form-payment-card-brand">Secure Pay</div>
        </div>

        <div class="form-payment-card-number">1234 5678 9012 3456</div>

        <div class="form-payment-card-bottom">

          <div class="form-payment-card-meta">
            <span>Cardholder</span>
            <strong>Alex Morgan</strong>
          </div>

          <div class="form-payment-card-meta">
            <span>Expires</span>
            <strong>12/28</strong>
          </div>

        </div>

      </div>

    </div>

    <div class="form-payment-info">
      <h3>Secure payment experience</h3>
      <p>A visual payment card can make a checkout or billing page feel more polished, but real payments must always be handled through a secure payment gateway.</p>
    </div>

  </div>

  <div class="form-payment-form-card">

    <div class="form-payment-header">
      <div class="form-payment-kicker">Payment Form</div>
      <h3 class="form-payment-title">Enter payment details</h3>
      <p class="form-payment-text">Use this payment card UI for checkout, subscription, or billing form layouts.</p>
    </div>

    <form class="form-payment-form" action="#" method="post">

      <div class="form-payment-grid">

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-email">Billing email</label>
          <input class="form-payment-input" id="payment-email" type="email" name="email" placeholder="you@example.com">
        </div>

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-country">Country</label>
          <select class="form-payment-select" id="payment-country" name="country">
            <option>United States</option>
            <option>Canada</option>
            <option>United Kingdom</option>
            <option>Australia</option>
          </select>
        </div>

        <div class="form-payment-field form-payment-field-full">
          <label class="form-payment-label" for="payment-card-number">Card number</label>
          <input class="form-payment-input" id="payment-card-number" type="text" name="card_number" placeholder="1234 5678 9012 3456">
        </div>

      </div>

      <div class="form-payment-card-row">

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-card-name">Name on card</label>
          <input class="form-payment-input" id="payment-card-name" type="text" name="card_name" placeholder="Alex Morgan">
        </div>

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-expiry">Expiry</label>
          <input class="form-payment-input" id="payment-expiry" type="text" name="expiry" placeholder="MM/YY">
        </div>

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-cvc">CVC</label>
          <input class="form-payment-input" id="payment-cvc" type="text" name="cvc" placeholder="123">
        </div>

      </div>

      <div class="form-payment-secure">
        <span class="form-payment-secure-icon">✓</span>
        <span>This is a static UI demo. In a real project, never store raw card data yourself. Use a secure payment processor.</span>
      </div>

      <div class="form-payment-summary">

        <div class="form-payment-summary-row">
          <span>Plan</span>
          <span>Professional</span>
        </div>

        <div class="form-payment-summary-row">
          <span>Billing</span>
          <span>Monthly</span>
        </div>

        <div class="form-payment-summary-row">
          <strong>Total</strong>
          <strong>$49/mo</strong>
        </div>

      </div>

      <button class="form-payment-button" type="submit">Pay Securely</button>

    </form>

  </div>

</div>

CSS

.form-payment-layout{
width:min(100%,960px);
display:grid;
grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);
gap:24px;
align-items:center;
}

.form-payment-visual{
display:grid;
gap:18px;
}

.form-payment-card-preview{
position:relative;
min-height:230px;
padding:26px;
border-radius:30px;
overflow:hidden;
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.22),transparent 28%),
linear-gradient(135deg,#2563eb,#7c3aed 52%,#22c55e);
box-shadow:0 30px 90px rgba(37,99,235,.28);
border:1px solid rgba(255,255,255,.18);
}

.form-payment-card-preview::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-120px;
top:-120px;
border-radius:999px;
background:rgba(255,255,255,.18);
}

.form-payment-card-preview::after{
content:"";
position:absolute;
width:200px;
height:200px;
left:-90px;
bottom:-110px;
border-radius:999px;
background:rgba(255,255,255,.13);
}

.form-payment-card-inner{
position:relative;
z-index:2;
min-height:178px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
}

.form-payment-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
}

.form-payment-card-chip{
width:52px;
height:40px;
border-radius:12px;
background:
linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.24));
border:1px solid rgba(255,255,255,.28);
}

.form-payment-card-brand{
font-size:15px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
color:#ffffff;
}

.form-payment-card-number{
font-size:clamp(20px,3vw,28px);
line-height:1.2;
font-weight:900;
letter-spacing:.08em;
color:#ffffff;
}

.form-payment-card-bottom{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
}

.form-payment-card-meta span{
display:block;
margin-bottom:5px;
font-size:10px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:rgba(255,255,255,.70);
}

.form-payment-card-meta strong{
display:block;
font-size:14px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-payment-info{
padding:20px;
border-radius:24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.24);
backdrop-filter:blur(18px);
}

.form-payment-info h3{
margin:0 0 10px;
font-size:28px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-payment-info p{
margin:0;
font-size:14px;
line-height:1.7;
color:#cbd5e1;
}

.form-payment-form-card{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 30px 90px rgba(0,0,0,.34);
}

.form-payment-header{
margin-bottom:24px;
}

.form-payment-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-payment-title{
margin:0 0 9px;
font-size:clamp(30px,4vw,42px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-payment-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-payment-form{
display:grid;
gap:18px;
}

.form-payment-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-payment-field{
display:grid;
gap:8px;
}

.form-payment-field-full{
grid-column:1 / -1;
}

.form-payment-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-payment-input,
.form-payment-select{
width:100%;
min-height:52px;
padding:0 14px;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-payment-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-payment-input::placeholder{
color:#94a3b8;
}

.form-payment-input:focus,
.form-payment-select:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-payment-card-row{
display:grid;
grid-template-columns:1fr .46fr .34fr;
gap:14px;
}

.form-payment-secure{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f0fdf4;
border:1px solid #bbf7d0;
font-size:13px;
line-height:1.55;
color:#166534;
}

.form-payment-secure-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:950;
}

.form-payment-summary{
display:grid;
gap:10px;
padding:16px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-payment-summary-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
font-size:14px;
line-height:1.45;
color:#64748b;
}

.form-payment-summary-row strong{
font-size:18px;
color:#0f172a;
}

.form-payment-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-payment-button:hover,
.form-payment-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 920px){
.form-payment-layout{
grid-template-columns:1fr;
}

.form-payment-visual{
max-width:620px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.form-payment-form-card{
padding:24px;
border-radius:24px;
}

.form-payment-grid,
.form-payment-card-row{
grid-template-columns:1fr;
}

.form-payment-title{
font-size:32px;
}
}

This payment card form UI is useful when a checkout or billing page needs to feel secure and polished. The card preview makes the form more visual, while the actual input fields remain clear and easy to complete.

Use this pattern for checkout pages, SaaS billing pages, subscription forms, payment screens, invoice payment pages, donation forms, and account upgrade flows. For production payments, always connect the UI to a secure payment provider and avoid storing raw card data yourself.

30. Complete Responsive Form Layout

A complete responsive form layout combines multiple useful form patterns into one polished section. It can include a strong heading, contact information, service selection, budget fields, message area, consent checkbox, supporting cards, and a clear call-to-action button.

This final example works as a complete contact or quote request section for a modern website. It uses a two-column layout on desktop and stacks into a clean single-column form on mobile screens.

  • Perfect for contact pages, agency websites, quote request pages, and landing pages
  • Includes contact information, service selection, budget, message, and consent fields
  • Uses a complete responsive section layout
  • Includes supporting info cards beside the form
  • Uses HTML and CSS only
Complete Form Layout

Let’s build your next website section

Use this complete responsive form layout for contact pages, quote requests, landing pages, and service websites that need a polished conversion section.

  • ✓ Clean responsive two-column structure
  • ✓ Practical fields for real project requests
  • ✓ Strong supporting content beside the form
1
Fast reply Use a form layout that tells users what happens after they submit.
2
Clear details Collect the service, budget, timeline, and message in one form.

Send project request

Fill out the form and we will respond with the next steps.

Most forms work better when users know what happens after submission.

HTML

<section class="form-complete-section">

  <div class="form-complete-content">

    <div class="form-complete-intro">

      <div class="form-complete-intro-inner">

        <div class="form-complete-kicker">Complete Form Layout</div>

        <h3 class="form-complete-title">Let’s build your <span>next website section</span></h3>

        <p class="form-complete-text">Use this complete responsive form layout for contact pages, quote requests, landing pages, and service websites that need a polished conversion section.</p>

        <ul class="form-complete-list">
          <li><span class="form-complete-check">✓</span> Clean responsive two-column structure</li>
          <li><span class="form-complete-check">✓</span> Practical fields for real project requests</li>
          <li><span class="form-complete-check">✓</span> Strong supporting content beside the form</li>
        </ul>

      </div>

    </div>

    <div class="form-complete-info-grid">

      <div class="form-complete-info-card">
        <div class="form-complete-info-icon">1</div>
        <strong>Fast reply</strong>
        <span>Use a form layout that tells users what happens after they submit.</span>
      </div>

      <div class="form-complete-info-card">
        <div class="form-complete-info-icon">2</div>
        <strong>Clear details</strong>
        <span>Collect the service, budget, timeline, and message in one form.</span>
      </div>

    </div>

  </div>

  <div class="form-complete-form-card">

    <div class="form-complete-form-header">
      <h3 class="form-complete-form-title">Send project request</h3>
      <p class="form-complete-form-text">Fill out the form and we will respond with the next steps.</p>
    </div>

    <form class="form-complete-form" action="#" method="post">

      <div class="form-complete-grid">

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-name">Full name</label>
          <input class="form-complete-input" id="complete-name" type="text" name="name" placeholder="Alex Morgan">
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-email">Email address</label>
          <input class="form-complete-input" id="complete-email" type="email" name="email" placeholder="alex@example.com">
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-phone">Phone number</label>
          <input class="form-complete-input" id="complete-phone" type="tel" name="phone" placeholder="+1 555 123 4567">
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-company">Company</label>
          <input class="form-complete-input" id="complete-company" type="text" name="company" placeholder="Company name">
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-service">Service</label>
          <select class="form-complete-select" id="complete-service" name="service">
            <option>Website design</option>
            <option>Landing page</option>
            <option>Online store</option>
            <option>Custom form UI</option>
          </select>
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-budget">Budget</label>
          <select class="form-complete-select" id="complete-budget" name="budget">
            <option>$1,000 - $3,000</option>
            <option>$3,000 - $5,000</option>
            <option>$5,000 - $10,000</option>
            <option>$10,000+</option>
          </select>
        </div>

        <div class="form-complete-field form-complete-field-full">
          <label class="form-complete-label">Project urgency</label>
          <div class="form-complete-options">

            <label class="form-complete-option">
              <input type="radio" name="urgency" value="standard" checked>
              <span>Standard timeline</span>
            </label>

            <label class="form-complete-option">
              <input type="radio" name="urgency" value="urgent">
              <span>Urgent request</span>
            </label>

          </div>
        </div>

        <div class="form-complete-field form-complete-field-full">
          <label class="form-complete-label" for="complete-message">Project message</label>
          <textarea class="form-complete-textarea" id="complete-message" name="message" placeholder="Tell us about your project, goals, pages, features, and timeline..."></textarea>
        </div>

      </div>

      <label class="form-complete-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this request and understand that this form does not create a contract automatically.</span>
      </label>

      <div class="form-complete-actions">
        <button class="form-complete-button" type="submit">Send Request</button>
        <p class="form-complete-note">Most forms work better when users know what happens after submission.</p>
      </div>

    </form>

  </div>

</section>

CSS

.form-complete-section{
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
gap:26px;
align-items:start;
}

.form-complete-content{
display:grid;
gap:18px;
}

.form-complete-intro{
padding:30px;
border-radius:30px;
background:#0f172a;
position:relative;
overflow:hidden;
box-shadow:0 28px 80px rgba(15,23,42,.20);
}

.form-complete-intro::before{
content:"";
position:absolute;
width:320px;
height:320px;
right:-130px;
top:-130px;
border-radius:999px;
background:radial-gradient(circle,rgba(37,99,235,.42),transparent 70%);
}

.form-complete-intro::after{
content:"";
position:absolute;
width:260px;
height:260px;
left:-120px;
bottom:-130px;
border-radius:999px;
background:radial-gradient(circle,rgba(34,197,94,.28),transparent 70%);
}

.form-complete-intro-inner{
position:relative;
z-index:2;
}

.form-complete-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-complete-title{
margin:0 0 14px;
font-size:clamp(34px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-complete-title span{
background:linear-gradient(90deg,#93c5fd,#86efac,#f9a8d4) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-complete-text{
margin:0 0 22px;
font-size:15px;
line-height:1.8;
color:#cbd5e1;
}

.form-complete-list{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.form-complete-list li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
font-weight:800;
color:#ffffff;
}

.form-complete-check{
width:23px;
height:23px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.28);
color:#86efac;
font-size:13px;
font-weight:950;
}

.form-complete-info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-complete-info-card{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 46px rgba(15,23,42,.10);
}

.form-complete-info-icon{
width:38px;
height:38px;
display:grid;
place-items:center;
margin-bottom:12px;
border-radius:14px;
background:#dbeafe;
color:#1d4ed8;
font-size:15px;
font-weight:950;
}

.form-complete-info-card strong{
display:block;
margin-bottom:5px;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-complete-info-card span{
display:block;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-complete-form-card{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.form-complete-form-header{
margin-bottom:24px;
}

.form-complete-form-title{
margin:0 0 9px;
font-size:clamp(30px,4vw,42px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-complete-form-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-complete-form{
display:grid;
gap:18px;
}

.form-complete-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-complete-field{
display:grid;
gap:8px;
}

.form-complete-field-full{
grid-column:1 / -1;
}

.form-complete-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-complete-input,
.form-complete-select,
.form-complete-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-complete-input,
.form-complete-select{
min-height:52px;
padding:0 14px;
}

.form-complete-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-complete-textarea{
min-height:138px;
resize:vertical;
padding:13px 14px;
}

.form-complete-input::placeholder,
.form-complete-textarea::placeholder{
color:#94a3b8;
}

.form-complete-input:focus,
.form-complete-select:focus,
.form-complete-textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-complete-options{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-complete-option{
position:relative;
cursor:pointer;
}

.form-complete-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-complete-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 12px;
border-radius:15px;
background:#f8fafc;
border:1px solid #dbe3ef;
color:#475569;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-complete-option input:checked + span{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#eff6ff;
color:#1d4ed8;
}

.form-complete-consent{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-complete-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#2563eb;
}

.form-complete-actions{
display:flex;
align-items:center;
gap:12px;
}

.form-complete-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:56px;
padding:0 20px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-complete-button:hover,
.form-complete-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.08);
outline:none;
}

.form-complete-note{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

@media (max-width: 960px){
.form-complete-section{
grid-template-columns:1fr;
}

.form-complete-content{
max-width:720px;
width:100%;
margin:0 auto;
}

.form-complete-form-card{
max-width:720px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.form-complete-intro,
.form-complete-form-card{
padding:24px;
border-radius:24px;
}

.form-complete-info-grid,
.form-complete-grid,
.form-complete-options{
grid-template-columns:1fr;
}

.form-complete-actions{
align-items:stretch;
flex-direction:column;
}

.form-complete-button{
width:100%;
}

.form-complete-title{
font-size:32px;
}

.form-complete-form-title{
font-size:32px;
}
}

This complete responsive form layout is useful as a final reusable section for real website projects. It combines strong content, supporting trust points, practical form fields, responsive behavior, and a clear call-to-action into one polished layout.

Use this pattern for contact pages, quote request pages, agency websites, service landing pages, SaaS lead forms, consultation forms, homepage contact sections, and any conversion-focused form area that needs more context than a simple form card.

Form Accessibility Best Practices

Modern CSS forms should not only look good. They should also be easy to use for as many people as possible. Accessibility is important for keyboard users, screen reader users, mobile users, people with low vision, and anyone who needs a clear and predictable form experience.

A form can have beautiful gradients, cards, shadows, animations, and modern layouts, but if users cannot understand the fields, reach the submit button, read the labels, or see the active focus state, the form is not working well enough for a real website.

Use these best practices when adapting the form examples from this guide into production websites.

Always Use Clear Labels

Every important input should have a visible label. Placeholder text can support the label, but it should not be the only way to explain the field. Once a user starts typing, placeholder text disappears, and the field meaning can become unclear.

For example, use labels like Full name, Email address, Phone number, Project message, or Billing address. Clear labels reduce mistakes and make forms easier to scan.

Connect Labels to Inputs

Use the for attribute on labels and match it with the input id. This makes the form more accessible and allows users to click the label to focus the related field.

<label for="user-email">Email address</label>
<input id="user-email" type="email" name="email">

This simple connection is especially useful for checkboxes, radio buttons, login forms, checkout forms, filters, and longer multi-field forms.

Make Focus States Easy to See

Focus states show which field is active. They are important for keyboard navigation and general usability. A good focus state can use a visible border, outline, glow, background change, or another clear visual signal.

Do not remove focus outlines without replacing them with another visible focus style. If users cannot see where they are in the form, the experience becomes frustrating and less accessible.

Use Enough Color Contrast

Form labels, placeholder text, helper text, error messages, buttons, and input values should be readable against the background. This is especially important for dark mode forms, glassmorphism forms, gradient forms, and image-based form sections.

Light gray text on a white background may look subtle, but it can become hard to read. On dark backgrounds, low-contrast gray text can also disappear. Always test forms on desktop and mobile before publishing.

Keep Tap Targets Large Enough

Mobile users need comfortable tap targets. Inputs, buttons, dropdowns, checkboxes, radio cards, filter chips, and plan selection cards should not be too small. A form may look clean on desktop but become difficult to use on a phone if the fields are too short or too close together.

As a practical rule, use comfortable input heights, enough spacing between fields, and full-width buttons on small screens where it improves usability.

Write Helpful Button Text

The submit button should describe the action clearly. Instead of only using Submit, use more specific text such as Send Message, Create Account, Request Quote, Book Appointment, Save Settings, or Continue with Plan.

Specific button text helps users understand what will happen after they click.

Show Helpful Error Messages

If a user makes a mistake, the form should explain what happened and how to fix it. Avoid vague messages like “Invalid input” when you can write something clearer, such as “Please enter a valid email address” or “Password must be at least 8 characters long.”

Error messages should appear close to the field they belong to. This makes the problem easier to understand and fix.

Do Not Ask for More Than You Need

Every extra field adds friction. A newsletter form may only need an email address. A contact form may need name, email, subject, and message. A quote request form may need more details, but it should still avoid unnecessary questions.

If a form becomes long, split it into sections, group related fields, or use a multi-step layout when it makes the form easier to complete.

Recommended Tool

Need fast hosting for WordPress forms, landing pages, and CSS-heavy websites?

Modern forms, landing pages, UI examples, and code-heavy tutorials work best on fast, reliable hosting. If you build WordPress websites, client sites, or content-heavy blogs, managed hosting can help with performance, security, and easier maintenance.

Explore Kinsta Hosting
Kinsta managed WordPress hosting

Common Form Design Mistakes

Even small form design mistakes can reduce trust, create confusion, and stop users from completing an action. A modern form should feel simple, focused, and easy to understand. The following mistakes are common on contact pages, checkout pages, signup pages, dashboards, and landing pages.

Using Placeholder Text Instead of Labels

Placeholder-only forms may look minimal, but they are often harder to use. Once the user starts typing, the instruction disappears. This can be especially confusing in long forms, checkout forms, account settings, and quote request forms.

Use visible labels whenever clarity matters. Floating labels can also work well, as long as the label remains visible after the user enters text.

Making Forms Too Long

Long forms can work, but only when the extra fields are truly useful. If the form asks for too much information too early, users may leave before submitting. This is common with quote request forms, signup forms, checkout forms, and survey forms.

Ask for the most important details first. Optional details can be added later, placed in a separate section, or moved into a follow-up step.

Weak Mobile Layouts

A form that looks good on desktop can still fail on mobile. Two-column fields may become too narrow, buttons may be hard to tap, labels may wrap badly, and input spacing may feel crowded.

Most forms should stack into one column on smaller screens. Buttons should often become full width, and inputs should have comfortable height and spacing.

Poor Contrast on Dark or Image Backgrounds

Glassmorphism forms, image contact forms, dark mode forms, and gradient forms can look impressive, but they can also become hard to read if the contrast is too weak. Labels, buttons, and input values must remain clear.

If the background is busy, add an overlay, blur, stronger card background, or darker/lighter surface behind the form.

Generic Submit Buttons

A generic “Submit” button does not always tell users what they are doing. A stronger button label can increase clarity and trust. For example, use “Send Message”, “Request Quote”, “Create Account”, “Book Appointment”, “Submit Ticket”, “Save Profile”, or “Pay Securely”.

No Success or Confirmation Message

After users submit a form, they should know what happened. A simple success message can confirm that the message was sent, the booking was requested, the account was created, or the payment step was completed.

For business forms, it also helps to tell users what happens next. For example: “We usually reply within one business day.”

Not Testing Real Form Behavior

Static HTML and CSS are only the visual part of the form. Real forms also need validation, spam protection, email delivery, database storage, security checks, file upload limits, and backend handling.

Before publishing a production form, test it on multiple devices and browsers. Submit the form yourself, check error states, test required fields, confirm email delivery, and make sure mobile users can complete it comfortably.

Continue Learning

Related CSS and Website UI Guides

Forms work best when they are part of a complete website system. These related guides help you build better layouts, navigation, sections, and UI components around your forms.

25 Modern CSS Navigation Menus for Websites Build responsive navbars, dropdown menus, mega menus, mobile menus, and complete website headers. 25 Modern CSS Layouts for Websites Explore modern Grid, Flexbox, bento layouts, landing page structures, cards, sidebars, and responsive sections. More Web Design and CSS Tutorials Browse more practical website design, WordPress, CSS, UI, and frontend development guides.

FAQ About Modern CSS Forms

Here are answers to common questions about building modern CSS forms for websites, landing pages, dashboards, online stores, and WordPress projects.

What is a CSS form?

A CSS form is an HTML form that is styled with CSS. HTML creates the form structure, labels, inputs, textareas, dropdowns, checkboxes, radio buttons, and buttons. CSS controls the layout, spacing, colors, borders, typography, focus states, shadows, responsive behavior, and overall visual design.

Can I build modern forms with only HTML and CSS?

Yes. Many form layouts can be built with only HTML and CSS, including contact forms, login forms, signup forms, newsletter forms, quote forms, checkout layouts, dark mode forms, floating label forms, and product filter UI. JavaScript is only needed when the form requires dynamic behavior, such as multi-step navigation, live validation, file previews, or interactive ratings.

Do CSS forms actually send emails or save data?

No. HTML and CSS create the visible form interface, but they do not handle form submissions by themselves. To send emails, save entries, upload files, process payments, or create accounts, you need backend code, a form plugin, an API, or a third-party service.

What is the best layout for a contact form?

The best contact form layout depends on the page. A simple contact page may only need a centered card with name, email, subject, and message fields. A service website or landing page can use a two-column form with supporting text, trust points, or an image panel. On mobile, most contact forms should stack into a single column.

Should form labels be visible?

Yes, visible labels are usually better for clarity and accessibility. Placeholder text can be useful, but it should not be the only label in important forms. Floating labels are a good modern option when you want a clean design while still keeping the label visible after typing.

How do I make forms responsive?

Use flexible widths, CSS Grid or Flexbox, media queries, comfortable input heights, and mobile-friendly spacing. A common approach is to use two columns on desktop and switch to one column on smaller screens. Buttons often work better as full-width elements on mobile.

What makes a form look modern?

A modern form usually has clean spacing, readable labels, consistent input styles, rounded corners, clear focus states, strong buttons, responsive behavior, and a layout that matches the website design. Visual styles like gradients, glassmorphism, dark mode, floating labels, and card layouts can help, but usability should always come first.

Are dark mode forms good for websites?

Dark mode forms can work very well when the surrounding website or app also uses a dark interface. The most important thing is contrast. Labels, input values, placeholders, borders, helper text, and buttons must remain easy to read.

Can I use these form examples in WordPress?

Yes. You can use these examples inside WordPress custom HTML blocks, Gutenberg templates, custom themes, landing pages, or plugin templates. If you want the form to actually submit data, connect the HTML structure to WordPress form handling, a contact form plugin, WooCommerce, a custom plugin, or backend code.

What is the most important part of form design?

The most important part of form design is clarity. Users should immediately understand what the form is for, what information is needed, which fields are required, and what will happen after they submit it. A beautiful form that is confusing will not perform as well as a simple form that is clear and easy to complete.

Kinsta WordPress hosting
Hosting for WordPress Projects

Building CSS-heavy tutorials, landing pages, forms, and UI libraries? Fast hosting helps your pages load smoothly and keeps your WordPress website easier to maintain.

Learn more about Kinsta

Conclusion: Build Modern CSS Forms That Are Clear, Responsive, and Easy to Use

Modern CSS forms are one of the most important parts of a website. They help users contact businesses, create accounts, sign in, subscribe to newsletters, request quotes, book appointments, submit feedback, filter products, complete checkout, and manage account settings.

The best forms are not only visually attractive. They are also clear, responsive, accessible, and easy to complete. A strong form uses readable labels, comfortable spacing, visible focus states, mobile-friendly inputs, helpful button text, and a logical field structure.

In this guide, we covered 30 practical form examples, including contact forms, login forms, signup forms, newsletter forms, search forms, quote request forms, checkout forms, booking forms, support ticket forms, feedback forms, review forms, file upload forms, floating label forms, glassmorphism forms, dark mode forms, product filter forms, pricing forms, payment card forms, and complete responsive form layouts.

You can use these examples as starting points for real projects. Copy the structure, adjust the colors, change the typography, add your own fields, connect the form to a backend, and adapt the layout to your website or WordPress theme.

If you are building a complete website, forms should not be designed alone. They should match the navigation, layout, content sections, cards, buttons, and overall visual style of the website. For that reason, it is useful to combine this guide with related CSS layout and navigation examples.

Next Guides

Build the Rest of the Website UI

After designing forms, continue with layouts, navigation menus, and other reusable website sections. These guides help you build a more complete and consistent website design system.

01 25 Modern CSS Navigation Menus for Websites

Responsive navbars, sticky headers, dropdown menus, mega menus, hamburger menus, sidebars, breadcrumbs, and complete website headers.

 02 25 Modern CSS Layouts for Websites

Grid, Flexbox, responsive hero layouts, product grids, pricing tables, sidebars, bento grids, landing page layouts, and container queries.

 03 More Website Design Tutorials

Explore more practical CSS, UI design, WordPress, layout, navigation, frontend, and website building tutorials.
]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-forms/feed/ 0 25 Modern CSS Navigation Menus for Websites – Responsive Navbar, Dropdown & Mega Menu Examples https://veebilehed24.ee/en/blog/css-effects/modern-css-navigation-menus/ https://veebilehed24.ee/en/blog/css-effects/modern-css-navigation-menus/#respond Wed, 20 May 2026 13:29:23 +0000 https://veebilehed24.ee/?p=1276 Modern CSS navigation menus are one of the most important parts of every professional website. A good navigation menu helps visitors understand where they are, where they can go next, and how quickly they can find the most important pages on your site.

In modern web design, navigation is no longer just a simple row of links at the top of a page. A strong website navigation system can include a responsive navbar, dropdown menu, mega menu, mobile hamburger menu, sticky header, sidebar navigation, footer menu, breadcrumbs, category filters, and call-to-action links.

Navigation also has a direct impact on user experience. If a menu is confusing, too crowded, hard to tap on mobile, or difficult to scan, visitors may leave the website before they even see your best content. A clean and responsive CSS navigation menu makes the website feel faster, more organized, and more trustworthy.

In 2026, modern navigation menus need to work across many different screen sizes and content types. A desktop user may expect a wide navbar with dropdowns or a mega menu, while a mobile user needs a simple touch-friendly menu that opens quickly and does not cover important actions in a confusing way.

This is why a good navigation menu should be designed as a flexible system. It should support clear labels, readable spacing, hover and focus states, mobile-friendly tap targets, accessible interaction patterns, and a structure that can scale as the website grows.

In this guide, we showcase 25 modern CSS navigation menus for websites. These examples include responsive navbars, sticky headers, animated link menus, dropdown navigation, multi-level dropdowns, mega menus, eCommerce category menus, mobile hamburger menus, fullscreen overlays, side menus, sidebar navigation, tabs, breadcrumbs, footer navigation, and a complete responsive website header.

Each example is built as a practical website navigation pattern that you can copy, customize, and reuse in real projects. Some examples use only HTML and CSS, while interactive examples include small JavaScript snippets for opening mobile menus, toggling dropdowns, or improving responsive behavior.

All examples are designed with a strong focus on clean structure, responsive behavior, modern UI design, and real-world usability.

Table of Contents

Kinsta hosting

What Are CSS Navigation Menus?

CSS navigation menus are website menu systems styled and arranged with CSS. They help users move between pages, sections, categories, products, services, blog posts, account areas, and important calls to action.

A navigation menu usually appears in the header, but navigation can also appear in sidebars, footers, mobile bottom bars, breadcrumbs, tabs, category filters, dashboards, and landing page sections. The goal is always the same: help users find the right content faster.

A simple navigation menu may only include a logo and a few text links. A more advanced website navigation system may include dropdown menus, mega menus, icons, CTA buttons, search fields, language switchers, account links, product categories, or mobile slide-out panels.

Modern CSS makes it possible to create clean and responsive navigation layouts with tools like Flexbox, CSS Grid, position: sticky, media queries, transitions, custom properties, and modern selector patterns.

Common CSS navigation menu patterns include:

  • Responsive navbars for desktop and mobile websites
  • Sticky header navigation that remains visible while scrolling
  • Dropdown menus for services, categories, or grouped links
  • Mega menus for large websites and eCommerce stores
  • Mobile hamburger menus and slide-in navigation panels
  • Sidebar navigation for dashboards and web apps
  • Breadcrumb navigation for better page hierarchy
  • Footer navigation for important secondary links
  • Tabs and pill navigation for content sections

The best navigation menus are not only visually attractive. They are also clear, predictable, responsive, accessible, and easy to maintain.

Why Navigation Menus Matter in 2026

Website navigation matters because it controls how users move through a website. Even if a website has beautiful visuals, strong content, and great products, visitors still need a simple way to understand the structure of the site.

A strong navigation menu helps users answer important questions quickly: What does this website offer? Where can I find pricing? Where are the services? How do I contact the company? Where are the product categories? Can I read more articles? How do I get back to the homepage?

In 2026, navigation menus also need to support different browsing habits. Many users visit websites from mobile devices, where space is limited and every tap matters. Others browse from larger desktop screens, where dropdown menus, mega menus, and sticky headers can make the experience more efficient.

Good navigation design helps with:

  • User experience: visitors can find pages, products, and information faster.
  • Mobile usability: menus stay readable, tappable, and easy to open on smaller screens.
  • Website structure: important pages are grouped in a logical way.
  • Conversions: CTA buttons like “Get Started”, “Book a Call”, or “View Pricing” are easier to find.
  • SEO: internal links help search engines understand important pages and content relationships.
  • Trust: a clean navigation system makes the website feel more professional.

A navigation menu should never feel like an afterthought. It is one of the first interface elements users interact with, and it often decides whether they continue exploring the website or leave.

CSS-Only vs JavaScript Navigation Menus

Some navigation menus can be built with HTML and CSS only. Others need a small amount of JavaScript to handle interaction, especially on mobile devices.

CSS-only navigation menus are useful for simple desktop menus, hover effects, basic dropdowns, tabs, breadcrumbs, footer navigation, and static link groups. They are lightweight, fast, and easy to maintain.

JavaScript navigation menus are useful when the menu needs to open and close, update ARIA attributes, toggle mobile panels, manage active states, close when clicking outside, or support more complex responsive behavior.

Navigation type CSS-only works well JavaScript is useful
Simple navbar Yes Optional
Hover underline menu Yes No
Desktop dropdown Yes Optional for accessibility
Mobile hamburger menu Possible Recommended
Fullscreen overlay menu Possible Recommended
Mega menu Yes for desktop Useful for mobile behavior
Collapsible sidebar Limited Recommended

A good rule is simple: use CSS for layout and visual styling, and use JavaScript only for behavior that needs interaction. This keeps the navigation menu fast, clean, and easier to debug.

Types of Website Navigation Menus

Different websites need different navigation patterns. A small portfolio website may only need a minimal navbar, while an eCommerce store may need product categories, dropdowns, mega menus, search, account links, and mobile-friendly category navigation.

Before choosing a navigation style, think about the size of the website, the number of important pages, the type of content, and the main user journey.

Header Navigation

Header navigation is the most common website navigation pattern. It usually includes a logo, main menu links, and one or more CTA buttons. It works well for business websites, SaaS websites, portfolios, blogs, landing pages, and online stores.

Dropdown Navigation

Dropdown navigation is useful when a single menu item needs to reveal related subpages. For example, a “Services” link may open a dropdown with web design, SEO, hosting, maintenance, and consulting pages.

Mega Menu Navigation

A mega menu is a larger dropdown that can display multiple columns, categories, descriptions, featured links, icons, or promotional blocks. Mega menus are especially useful for eCommerce websites, large blogs, software websites, educational websites, and marketplaces.

Mobile Navigation

Mobile navigation should be simple, easy to tap, and quick to understand. Common mobile navigation patterns include hamburger menus, slide-in side menus, fullscreen overlay menus, accordion submenus, and bottom navigation bars.

Sidebar Navigation

Sidebar navigation is commonly used in dashboards, admin panels, web apps, documentation websites, learning platforms, and account areas. It keeps important sections visible while giving the main content area enough space.

Secondary Navigation

Secondary navigation includes breadcrumbs, footer menus, tabs, category filters, portfolio filters, and contextual links. These menus support the main navigation and help users move through deeper sections of a website.

Responsive Navigation Principles

Responsive navigation is not only about hiding links behind a hamburger icon. A good responsive menu should preserve clarity, hierarchy, and usability across screen sizes.

The same navigation system may need to behave differently on desktop, tablet, and mobile. Desktop navigation can use horizontal space, hover states, dropdowns, and mega menus. Mobile navigation needs larger tap targets, clear spacing, simple open and close behavior, and readable link groups.

Keep Menu Labels Clear

Navigation labels should be short, direct, and easy to understand. Labels like “Services”, “Pricing”, “Resources”, “Products”, “Blog”, and “Contact” usually work better than vague or clever labels that require extra thinking.

Prioritize Important Links

Not every page needs to appear in the main navigation. The most important pages should be visible first, while secondary links can move into dropdowns, mega menus, footer navigation, or contextual sections.

Use Touch-Friendly Spacing

Mobile navigation links should be easy to tap without accidentally pressing the wrong item. Use enough padding, readable font sizes, and clear separation between links.

Design Clear Active, Hover, and Focus States

Users should be able to understand which link is active, which link is being hovered, and which item is focused with the keyboard. Focus states are especially important for accessibility.

Do Not Overload the Header

A crowded header can make the entire website feel messy. If you have too many links, group them into dropdowns, mega menus, category sections, or footer navigation instead of forcing everything into one horizontal row.

Make Mobile Menus Easy to Close

A mobile menu should have an obvious close button or toggle state. Users should never feel trapped inside a menu overlay or side panel.

Use JavaScript Carefully

JavaScript can improve mobile navigation, dropdown toggles, and menu state management, but it should not make the menu fragile. Keep scripts small, readable, and focused only on the behavior that CSS cannot handle cleanly.

25 Modern CSS Navigation Menu Examples

The following examples show practical navigation menu patterns that can be used in real websites. Each menu is designed as a compact demo, but the structure can be expanded into a full website header, mobile menu, dashboard sidebar, eCommerce navigation system, or landing page menu.

These examples are not only visual styles. They are reusable navigation building blocks for modern websites, including business websites, WordPress themes, blogs, SaaS websites, portfolios, dashboards, landing pages, and online stores.

1. Responsive Navbar

A responsive navbar is the foundation of modern website navigation. It gives desktop users a clean horizontal menu while providing mobile users with a compact hamburger button that opens a touch-friendly navigation panel.

This type of navigation menu is one of the most useful patterns for business websites, landing pages, portfolios, blogs, SaaS websites, and WordPress themes. The goal is simple: keep the menu easy to scan on large screens and easy to use on smaller screens.

  • Perfect for modern websites, landing pages, blogs, and business sites
  • Uses Flexbox for clean desktop alignment
  • Includes a mobile hamburger button with JavaScript toggle behavior
  • Stacks navigation links into a mobile-friendly panel on smaller screens
  • Includes a clear call-to-action button for conversions
Get Started
Responsive Navbar

Build a cleaner website navigation

This responsive navbar keeps desktop navigation simple and turns into a clean mobile menu with a hamburger toggle on smaller screens.

HTML

<header class="nav-responsive-header">

  <a href="#" class="nav-responsive-logo">
    <span class="nav-responsive-logo-mark">N</span>
    <span>NavStudio</span>
  </a>

  <nav aria-label="Main navigation">
    <ul class="nav-responsive-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <div class="nav-responsive-actions">

    <a href="#" class="nav-responsive-cta">Get Started</a>

    <button class="nav-responsive-toggle" type="button" aria-label="Toggle navigation menu" aria-expanded="false">
      <span></span>
      <span></span>
      <span></span>
    </button>

  </div>

</header>

CSS

.nav-responsive-header{
position:relative;
z-index:5;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.78);
border-bottom:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(16px);
}

.nav-responsive-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}

.nav-responsive-logo-mark{
width:38px;
height:38px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#6366f1,#a855f7);
box-shadow:0 14px 34px rgba(34,211,238,.22);
font-size:17px;
font-weight:900;
color:#ffffff;
}

.nav-responsive-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-responsive-menu a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:800;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-responsive-menu a:hover,
.nav-responsive-menu a:focus{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-responsive-actions{
display:flex;
align-items:center;
gap:10px;
}

.nav-responsive-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#818cf8);
color:#020617;
font-size:14px;
font-weight:900;
text-decoration:none;
box-shadow:0 14px 34px rgba(34,211,238,.24);
transition:transform .22s ease,box-shadow .22s ease;
white-space:nowrap;
}

.nav-responsive-cta:hover,
.nav-responsive-cta:focus{
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(34,211,238,.30);
outline:none;
}

.nav-responsive-toggle{
display:none;
width:44px;
height:44px;
border:0;
border-radius:14px;
background:rgba(255,255,255,.08);
color:#ffffff;
cursor:pointer;
position:relative;
transition:background .22s ease;
}

.nav-responsive-toggle:hover{
background:rgba(255,255,255,.12);
}

.nav-responsive-toggle span{
position:absolute;
left:12px;
right:12px;
height:2px;
border-radius:999px;
background:#ffffff;
transition:transform .25s ease,opacity .25s ease,top .25s ease;
}

.nav-responsive-toggle span:nth-child(1){
top:14px;
}

.nav-responsive-toggle span:nth-child(2){
top:21px;
}

.nav-responsive-toggle span:nth-child(3){
top:28px;
}

.nav-responsive-header.is-open .nav-responsive-toggle span:nth-child(1){
top:21px;
transform:rotate(45deg);
}

.nav-responsive-header.is-open .nav-responsive-toggle span:nth-child(2){
opacity:0;
}

.nav-responsive-header.is-open .nav-responsive-toggle span:nth-child(3){
top:21px;
transform:rotate(-45deg);
}

@media (max-width: 820px){
.nav-responsive-toggle{
display:block;
}

.nav-responsive-actions .nav-responsive-cta{
display:none;
}

.nav-responsive-menu{
position:absolute;
left:16px;
right:16px;
top:76px;
display:grid;
gap:8px;
padding:14px;
border-radius:18px;
background:rgba(15,23,42,.96);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 20px 60px rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transform:translateY(-8px);
transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
}

.nav-responsive-header.is-open .nav-responsive-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-responsive-menu a{
justify-content:flex-start;
min-height:46px;
padding:0 14px;
border-radius:13px;
background:rgba(255,255,255,.045);
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".nav-responsive-header").forEach(function (header) {
    const toggle = header.querySelector(".nav-responsive-toggle");

    if (!toggle) {
      return;
    }

    toggle.addEventListener("click", function () {
      const isOpen = header.classList.toggle("is-open");
      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
    });
  });
});

This responsive navbar is a strong starting point for modern website navigation because it keeps the desktop header clean while providing a simple mobile menu for smaller screens. Flexbox handles the desktop alignment, while a small JavaScript toggle controls the mobile menu state.

Use this navigation pattern for landing pages, business websites, portfolio websites, blogs, SaaS websites, WordPress themes, and any project where the main menu needs to stay simple, responsive, and easy to understand.

2. Sticky Header Navigation

A sticky header navigation keeps the main menu visible while users scroll through a page. This is useful for long landing pages, blogs, documentation websites, SaaS pages, eCommerce stores, and service websites where visitors may need quick access to important links at any time.

This example uses position: sticky to keep the navigation bar attached to the top of its preview area. The design includes a compact logo, clean navigation links, a highlighted active item, and a strong call-to-action button.

  • Perfect for long pages, landing pages, blogs, and SaaS websites
  • Uses position: sticky for a simple CSS-only sticky header
  • Includes active, hover, and focus states for better usability
  • Keeps important navigation links visible while users scroll
  • Works well with call-to-action buttons in the header
Start Free
Sticky Header

Keep important links visible while scrolling

A sticky header navigation helps users move through long pages without scrolling back to the top. This pattern is useful for landing pages, SaaS websites, blogs, documentation pages, and product pages.

Always Accessible The menu remains visible as users scroll through the page.
CSS Only The sticky behavior works with position: sticky.
Conversion Friendly A CTA button stays close to the user throughout the page.
Scroll Area

Designed for long content pages

Scroll inside this demo preview to see how the header stays attached to the top of the container. In a real website, the same technique can keep the main header visible while the user moves through the page.

Navigation UX

Make navigation easy to reach

Sticky navigation should stay compact and readable. Avoid making sticky headers too tall, because they can take too much space on smaller screens.

HTML

<header class="nav-sticky-header">

  <a href="#" class="nav-sticky-logo">
    <span class="nav-sticky-logo-mark">S</span>
    <span>StickyNav</span>
  </a>

  <nav aria-label="Main navigation">
    <ul class="nav-sticky-menu">
      <li><a href="#" class="is-active">Overview</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>
  </nav>

  <a href="#" class="nav-sticky-cta">Start Free</a>

</header>

CSS

.nav-sticky-header{
position:sticky;
top:0;
z-index:10;
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
padding:16px 22px;
background:rgba(15,23,42,.82);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(18px);
}

.nav-sticky-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}

.nav-sticky-logo-mark{
width:38px;
height:38px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22c55e,#22d3ee);
box-shadow:0 14px 34px rgba(34,197,94,.22);
font-size:16px;
font-weight:900;
color:#020617;
}

.nav-sticky-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-sticky-menu a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:800;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-sticky-menu a:hover,
.nav-sticky-menu a:focus{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-sticky-menu a.is-active{
background:rgba(34,211,238,.13);
color:#67e8f9;
box-shadow:inset 0 0 0 1px rgba(34,211,238,.22);
}

.nav-sticky-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
font-size:14px;
font-weight:900;
text-decoration:none;
box-shadow:0 14px 34px rgba(34,197,94,.22);
transition:transform .22s ease,box-shadow .22s ease;
white-space:nowrap;
}

.nav-sticky-cta:hover,
.nav-sticky-cta:focus{
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(34,211,238,.26);
outline:none;
}

@media (max-width: 820px){
.nav-sticky-header{
align-items:flex-start;
flex-direction:column;
padding:16px;
gap:14px;
}

.nav-sticky-menu{
width:100%;
justify-content:flex-start;
overflow-x:auto;
padding-bottom:4px;
}

.nav-sticky-menu a{
white-space:nowrap;
}

.nav-sticky-cta{
width:100%;
}
}

This sticky header navigation works well when users need quick access to important pages throughout a long page. The sticky behavior is handled with CSS only, which keeps the pattern lightweight and easy to maintain.

Use this pattern for long landing pages, product pages, SaaS websites, documentation pages, blog posts, service pages, and any layout where the main navigation should stay available while users scroll.

3. Minimal CSS Navigation Bar

A minimal CSS navigation bar is a clean and lightweight menu pattern for websites that do not need complex dropdowns, large visual effects, or heavy JavaScript. It focuses on clarity, spacing, typography, and a simple structure.

This navigation style works especially well for portfolios, blogs, personal websites, creative studios, service websites, documentation pages, and small business websites. The design is intentionally simple so the content remains the main focus.

  • Perfect for blogs, portfolios, personal websites, and small business sites
  • Uses clean typography and simple spacing
  • Works without JavaScript
  • Easy to customize for different brands and layouts
  • Includes subtle hover and active link states
Contact
Minimal Navbar

Simple navigation for clean websites

A minimal CSS navigation bar keeps the header light, readable, and focused. It works well when the website has a small number of important links and does not need dropdown menus.

Clean Structure Minimal navigation removes visual noise and helps users focus on the most important links.

HTML

<header class="nav-minimal-header">

  <a href="#" class="nav-minimal-logo">
    <span class="nav-minimal-logo-mark">M</span>
    <span>Minimal</span>
  </a>

  <nav aria-label="Main navigation">
    <ul class="nav-minimal-menu">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>

  <a href="#" class="nav-minimal-link">Contact</a>

</header>

CSS

.nav-minimal-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:20px 24px;
border-bottom:1px solid rgba(15,23,42,.08);
background:rgba(255,255,255,.88);
backdrop-filter:blur(14px);
}

.nav-minimal-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#0f172a;
text-decoration:none;
white-space:nowrap;
}

.nav-minimal-logo-mark{
width:36px;
height:36px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:#0f172a;
color:#ffffff;
font-size:15px;
font-weight:900;
}

.nav-minimal-menu{
display:flex;
align-items:center;
justify-content:center;
gap:22px;
margin:0;
padding:0;
list-style:none;
}

.nav-minimal-menu a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
font-size:14px;
font-weight:800;
color:#475569;
text-decoration:none;
transition:color .22s ease;
}

.nav-minimal-menu a::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:2px;
height:2px;
border-radius:999px;
background:#0f172a;
transform:scaleX(0);
transform-origin:center;
transition:transform .22s ease;
}

.nav-minimal-menu a:hover,
.nav-minimal-menu a:focus,
.nav-minimal-menu a.is-active{
color:#0f172a;
outline:none;
}

.nav-minimal-menu a:hover::after,
.nav-minimal-menu a:focus::after,
.nav-minimal-menu a.is-active::after{
transform:scaleX(1);
}

.nav-minimal-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 15px;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:14px;
font-weight:900;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
white-space:nowrap;
}

.nav-minimal-link:hover,
.nav-minimal-link:focus{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(15,23,42,.18);
background:#111827;
outline:none;
}

@media (max-width: 820px){
.nav-minimal-header{
align-items:flex-start;
flex-direction:column;
padding:18px;
gap:16px;
}

.nav-minimal-menu{
width:100%;
justify-content:flex-start;
gap:16px;
overflow-x:auto;
padding-bottom:4px;
}

.nav-minimal-menu a{
white-space:nowrap;
}

.nav-minimal-link{
width:100%;
}
}

This minimal CSS navigation bar is useful when the website needs a clean and professional header without complex interactions. The design relies on spacing, typography, simple contrast, and subtle hover states instead of heavy visual effects.

Use this pattern for portfolios, personal websites, blogs, small business websites, documentation pages, and simple landing pages where clarity is more important than advanced menu behavior.

4. Animated Underline Navigation

An animated underline navigation is a clean CSS menu style where each navigation link reveals a smooth underline effect on hover, focus, or active state. It is simple, lightweight, and works well when you want the navigation to feel modern without adding heavy visual effects.

This type of CSS navigation menu is especially useful for blogs, portfolios, agency websites, SaaS landing pages, documentation sites, and modern business websites. The underline animation gives users clear feedback while keeping the header minimal and professional.

  • Perfect for clean websites, blogs, portfolios, and landing pages
  • Uses CSS pseudo-elements for the underline animation
  • Works without JavaScript
  • Includes hover, focus, and active states
  • Easy to customize with different colors, thickness, and animation speed
Contact
Animated Underline

Add clear feedback with CSS underline motion

This navigation menu uses a smooth animated underline to show hover, focus, and active states. It keeps the interface clean while making links feel more interactive.

CSS-only hover effect

HTML

<header class="nav-underline-header">

  <a href="#" class="nav-underline-logo">
    <span class="nav-underline-logo-mark">U</span>
    <span>Underline</span>
  </a>

  <nav aria-label="Main navigation">
    <ul class="nav-underline-menu">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Resources</a></li>
    </ul>
  </nav>

  <a href="#" class="nav-underline-cta">Contact</a>

</header>

CSS

.nav-underline-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:20px 24px;
background:rgba(15,23,42,.72);
border-bottom:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(16px);
}

.nav-underline-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}

.nav-underline-logo-mark{
width:38px;
height:38px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#ec4899);
box-shadow:0 14px 34px rgba(236,72,153,.20);
font-size:16px;
font-weight:900;
color:#ffffff;
}

.nav-underline-menu{
display:flex;
align-items:center;
justify-content:center;
gap:30px;
margin:0;
padding:0;
list-style:none;
}

.nav-underline-menu a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
font-size:14px;
font-weight:850;
color:#cbd5e1;
text-decoration:none;
letter-spacing:.01em;
transition:color .22s ease;
}

.nav-underline-menu a::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:4px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,#22d3ee,#ec4899,#a855f7);
transform:scaleX(0);
transform-origin:right;
transition:transform .28s ease;
}

.nav-underline-menu a:hover,
.nav-underline-menu a:focus,
.nav-underline-menu a.is-active{
color:#ffffff;
outline:none;
}

.nav-underline-menu a:hover::before,
.nav-underline-menu a:focus::before,
.nav-underline-menu a.is-active::before{
transform:scaleX(1);
transform-origin:left;
}

.nav-underline-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:14px;
font-weight:900;
text-decoration:none;
transition:transform .22s ease,background .22s ease,border-color .22s ease;
white-space:nowrap;
}

.nav-underline-cta:hover,
.nav-underline-cta:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.12);
border-color:rgba(34,211,238,.30);
outline:none;
}

@media (max-width: 820px){
.nav-underline-header{
align-items:flex-start;
flex-direction:column;
padding:18px;
gap:16px;
}

.nav-underline-menu{
width:100%;
justify-content:flex-start;
gap:22px;
overflow-x:auto;
padding-bottom:4px;
}

.nav-underline-menu a{
white-space:nowrap;
}

.nav-underline-cta{
width:100%;
}
}

This animated underline navigation is a good choice when you want a clean menu with a small interactive detail. The underline effect helps users understand which link is active or being hovered without making the header feel heavy.

Use this pattern for portfolios, agency websites, SaaS landing pages, blogs, documentation websites, and business websites that need simple but polished navigation.

5. Gradient Navigation Menu

A gradient navigation menu uses color transitions to create a bold and modern website header. It is a strong choice for creative websites, SaaS products, digital agencies, app landing pages, portfolios, and startup websites that need a more energetic first impression.

This example combines a dark interface with gradient accents, soft borders, rounded menu links, and a clear call-to-action button. The result is a modern CSS navigation menu that feels visual without becoming difficult to read.

  • Perfect for SaaS websites, creative agencies, startups, and landing pages
  • Uses CSS gradients for a modern visual style
  • Works without JavaScript
  • Includes clear hover, focus, and active states
  • Responsive layout stacks cleanly on smaller screens
Launch Now
Gradient Navigation

Create a bold header with modern CSS gradients

This gradient navigation menu uses color, soft borders, and rounded links to create a strong visual header for modern landing pages and creative websites.

HTML

<header class="nav-gradient-header">

  <a href="#" class="nav-gradient-logo">
    <span class="nav-gradient-logo-mark">G</span>
    <span>Gradient</span>
  </a>

  <nav aria-label="Main navigation">
    <ul class="nav-gradient-menu">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Solutions</a></li>
      <li><a href="#">Pricing</a></li>
    </ul>
  </nav>

  <a href="#" class="nav-gradient-cta">Launch Now</a>

</header>

CSS

.nav-gradient-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:20px 24px;
background:
linear-gradient(90deg,rgba(34,211,238,.14),rgba(168,85,247,.16),rgba(251,146,60,.12)),
rgba(15,23,42,.72);
border-bottom:1px solid rgba(255,255,255,.10);
backdrop-filter:blur(18px);
}

.nav-gradient-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}

.nav-gradient-logo-mark{
width:40px;
height:40px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#818cf8,#f97316);
box-shadow:0 14px 34px rgba(34,211,238,.24);
font-size:16px;
font-weight:900;
color:#ffffff;
}

.nav-gradient-menu{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin:0;
padding:0;
list-style:none;
}

.nav-gradient-menu a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 14px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#dbeafe;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.nav-gradient-menu a:hover,
.nav-gradient-menu a:focus{
background:rgba(255,255,255,.10);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-gradient-menu a.is-active{
background:linear-gradient(135deg,rgba(34,211,238,.28),rgba(168,85,247,.28));
color:#ffffff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

.nav-gradient-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 17px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#a78bfa,#fb923c);
color:#020617;
font-size:14px;
font-weight:950;
text-decoration:none;
box-shadow:0 16px 38px rgba(168,85,247,.26);
transition:transform .22s ease,box-shadow .22s ease;
white-space:nowrap;
}

.nav-gradient-cta:hover,
.nav-gradient-cta:focus{
transform:translateY(-2px);
box-shadow:0 20px 48px rgba(34,211,238,.28);
outline:none;
}

@media (max-width: 820px){
.nav-gradient-header{
align-items:flex-start;
flex-direction:column;
padding:18px;
gap:16px;
}

.nav-gradient-menu{
width:100%;
justify-content:flex-start;
overflow-x:auto;
padding-bottom:4px;
}

.nav-gradient-menu a{
white-space:nowrap;
}

.nav-gradient-cta{
width:100%;
}
}

This gradient navigation menu is best when the header should feel more visual and energetic. The gradient accents create a strong first impression while the rounded links and simple structure keep the navigation readable.

Use this pattern for SaaS websites, startup landing pages, creative portfolios, digital agencies, product launches, app websites, and modern business websites that need a bolder navigation style.

6. Glassmorphism Navbar

A glassmorphism navbar uses transparency, blur, soft borders, and layered backgrounds to create a modern floating navigation effect. This type of CSS navigation menu is popular on SaaS websites, portfolio websites, app landing pages, creative agencies, and modern product pages.

The key to a good glassmorphism navigation bar is balance. The menu should feel light and futuristic, but the text must still remain readable. This example uses a dark blurred header, subtle gradients, rounded links, and a clear call-to-action button.

  • Perfect for SaaS websites, portfolios, apps, and creative landing pages
  • Uses backdrop-filter for the glass effect
  • Includes transparent background, soft border, and blurred layers
  • Works without JavaScript
  • Responsive layout stacks cleanly on smaller screens
Try Demo
Glassmorphism Navbar

Create depth with a blurred glass header

This glassmorphism navbar uses transparency, blur, soft borders, and layered gradients to create a modern floating navigation style.

HTML

<header class="nav-glass-header">

  <a href="#" class="nav-glass-logo">
    <span class="nav-glass-logo-mark">G</span>
    <span>GlassNav</span>
  </a>

  <nav aria-label="Main navigation">
    <ul class="nav-glass-menu">
      <li><a href="#" class="is-active">Home</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Docs</a></li>
    </ul>
  </nav>

  <a href="#" class="nav-glass-cta">Try Demo</a>

</header>

CSS

.nav-glass-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:14px 16px;
border-radius:22px;
background:rgba(15,23,42,.52);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 18px 60px rgba(0,0,0,.28);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}

.nav-glass-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}

.nav-glass-logo-mark{
width:38px;
height:38px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 34px rgba(34,211,238,.18);
font-size:16px;
font-weight:900;
color:#ffffff;
backdrop-filter:blur(10px);
}

.nav-glass-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-glass-menu a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#dbeafe;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease;
border:1px solid transparent;
}

.nav-glass-menu a:hover,
.nav-glass-menu a:focus{
background:rgba(255,255,255,.10);
border-color:rgba(255,255,255,.14);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-glass-menu a.is-active{
background:rgba(255,255,255,.13);
border-color:rgba(255,255,255,.18);
color:#ffffff;
}

.nav-glass-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,.92);
color:#020617;
font-size:14px;
font-weight:950;
text-decoration:none;
box-shadow:0 16px 38px rgba(255,255,255,.12);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
white-space:nowrap;
}

.nav-glass-cta:hover,
.nav-glass-cta:focus{
transform:translateY(-2px);
background:#ffffff;
box-shadow:0 20px 48px rgba(255,255,255,.16);
outline:none;
}

@media (max-width: 820px){
.nav-glass-header{
align-items:flex-start;
flex-direction:column;
padding:16px;
gap:16px;
}

.nav-glass-menu{
width:100%;
justify-content:flex-start;
overflow-x:auto;
padding-bottom:4px;
}

.nav-glass-menu a{
white-space:nowrap;
}

.nav-glass-cta{
width:100%;
}
}

This glassmorphism navbar works well when a website needs a modern, layered, and premium visual style. The transparent background, blur effect, and soft borders create depth while keeping the navigation readable.

Use this pattern for SaaS websites, product landing pages, creative portfolios, app websites, startup pages, and modern agency websites where the header should feel polished and futuristic.

7. Dropdown Navigation Menu

A dropdown navigation menu is one of the most common website navigation patterns. It allows a main menu item to reveal related links, services, categories, resources, or product pages without making the main header too crowded.

This CSS dropdown menu works well for websites that need a clean top-level navigation but still have several secondary pages. The dropdown appears on hover and focus on larger screens, while the responsive version stacks the menu items in a simple mobile-friendly layout.

  • Perfect for services, resources, product categories, and grouped pages
  • Uses CSS hover and focus behavior for the dropdown
  • Works without JavaScript
  • Keeps the main navigation clean and organized
  • Includes a mobile-friendly stacked layout on smaller screens
Get Quote
Dropdown Menu

Group related links with a clean CSS dropdown

This dropdown navigation menu keeps the main header simple while revealing related service links when users hover or focus on the parent menu item.

HTML

<header class="nav-dropdown-header">

  <a href="#" class="nav-dropdown-logo">
    <span class="nav-dropdown-logo-mark">D</span>
    <span>DropNav</span>
  </a>

  <nav aria-label="Main navigation">

    <ul class="nav-dropdown-menu">

      <li><a href="#">Home</a></li>

      <li class="nav-dropdown-item">

        <a href="#">
          Services <span class="nav-dropdown-arrow">▾</span>
        </a>

        <div class="nav-dropdown-panel">

          <a href="#">
            <strong>Web Design</strong>
            <span>Modern websites and landing pages</span>
          </a>

          <a href="#">
            <strong>SEO Strategy</strong>
            <span>Content structure and organic growth</span>
          </a>

          <a href="#">
            <strong>Development</strong>
            <span>Clean HTML, CSS, and JavaScript</span>
          </a>

        </div>

      </li>

      <li><a href="#">Work</a></li>
      <li><a href="#">Pricing</a></li>

    </ul>

  </nav>

  <a href="#" class="nav-dropdown-cta">Get Quote</a>

</header>

CSS

.nav-dropdown-header{
position:relative;
z-index:20;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.82);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-dropdown-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}

.nav-dropdown-logo-mark{
width:38px;
height:38px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#22c55e);
box-shadow:0 14px 34px rgba(34,211,238,.22);
font-size:16px;
font-weight:900;
color:#020617;
}

.nav-dropdown-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-dropdown-item{
position:relative;
}

.nav-dropdown-menu > li > a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-dropdown-menu > li > a:hover,
.nav-dropdown-menu > li > a:focus,
.nav-dropdown-item:hover > a,
.nav-dropdown-item:focus-within > a{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-dropdown-arrow{
font-size:12px;
line-height:1;
opacity:.75;
transform:translateY(1px);
}

.nav-dropdown-panel{
position:absolute;
left:0;
top:calc(100% + 12px);
width:260px;
padding:10px;
border-radius:18px;
background:rgba(15,23,42,.98);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.46);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
backdrop-filter:blur(18px);
}

.nav-dropdown-item:hover .nav-dropdown-panel,
.nav-dropdown-item:focus-within .nav-dropdown-panel{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-dropdown-panel::before{
content:"";
position:absolute;
left:24px;
top:-6px;
width:12px;
height:12px;
background:rgba(15,23,42,.98);
border-left:1px solid rgba(255,255,255,.12);
border-top:1px solid rgba(255,255,255,.12);
transform:rotate(45deg);
}

.nav-dropdown-panel a{
display:grid;
gap:4px;
padding:12px 13px;
border-radius:14px;
color:#e2e8f0;
text-decoration:none;
transition:background .22s ease,transform .22s ease;
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus{
background:rgba(255,255,255,.07);
outline:none;
transform:translateX(2px);
}

.nav-dropdown-panel strong{
display:block;
font-size:14px;
line-height:1.25;
color:#ffffff;
}

.nav-dropdown-panel span{
display:block;
font-size:13px;
line-height:1.45;
color:#94a3b8;
}

.nav-dropdown-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#22c55e);
color:#020617;
font-size:14px;
font-weight:950;
text-decoration:none;
box-shadow:0 14px 34px rgba(34,211,238,.22);
transition:transform .22s ease,box-shadow .22s ease;
white-space:nowrap;
}

.nav-dropdown-cta:hover,
.nav-dropdown-cta:focus{
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(34,197,94,.24);
outline:none;
}

@media (max-width: 860px){
.nav-dropdown-header{
align-items:flex-start;
flex-direction:column;
padding:18px;
gap:16px;
}

.nav-dropdown-menu{
width:100%;
display:grid;
grid-template-columns:1fr;
gap:8px;
}

.nav-dropdown-menu > li > a{
justify-content:space-between;
width:100%;
min-height:46px;
padding:0 14px;
background:rgba(255,255,255,.045);
border-radius:13px;
}

.nav-dropdown-panel{
position:static;
width:100%;
margin-top:8px;
opacity:1;
visibility:visible;
transform:none;
display:grid;
gap:4px;
background:rgba(255,255,255,.045);
box-shadow:none;
border-radius:14px;
}

.nav-dropdown-panel::before{
display:none;
}

.nav-dropdown-cta{
width:100%;
}
}

This dropdown navigation menu is useful when a website has grouped pages but should still keep the main header clean. The parent item reveals a compact panel with related links, short descriptions, and clear spacing.

Use this pattern for service websites, agency websites, SaaS products, resource sections, category groups, and any website where one main menu item needs to reveal several related links.

8. Multi-Level Dropdown Menu

A multi-level dropdown menu is useful when a website has deeper navigation groups, nested categories, or several levels of related pages. Instead of placing every link directly in the main header, a multi-level dropdown keeps the top navigation cleaner while still giving users access to detailed sections.

This example uses CSS hover and focus states to reveal a second-level dropdown on desktop. On smaller screens, the menu becomes a stacked layout so all links remain visible and easy to tap without requiring complex JavaScript.

  • Perfect for large websites, service directories, docs, and category structures
  • Uses nested dropdown levels for deeper navigation
  • Works with CSS hover and focus states
  • Includes a mobile-friendly stacked fallback
  • Keeps complex navigation organized without overcrowding the header
Explore
Multi-Level Dropdown

Organize deeper pages with nested navigation

This multi-level dropdown menu helps larger websites organize products, services, and categories into deeper groups without crowding the main header.

HTML

<header class="nav-multilevel-header">

  <a href="#" class="nav-multilevel-logo">
    <span class="nav-multilevel-logo-mark">M</span>
    <span>MultiNav</span>
  </a>

  <nav aria-label="Main navigation">

    <ul class="nav-multilevel-menu">

      <li><a href="#">Home</a></li>

      <li class="nav-multilevel-item">

        <a href="#">
          Products <span class="nav-multilevel-arrow">▾</span>
        </a>

        <ul class="nav-multilevel-panel">

          <li>

            <a href="#">Website Tools <span>›</span></a>

            <ul class="nav-multilevel-subpanel">
              <li>
                <a href="#">
                  <strong>Page Builder</strong>
                  <span>Build landing pages faster</span>
                </a>
              </li>

              <li>
                <a href="#">
                  <strong>Form Builder</strong>
                  <span>Create forms and lead flows</span>
                </a>
              </li>

              <li>
                <a href="#">
                  <strong>SEO Tools</strong>
                  <span>Improve organic visibility</span>
                </a>
              </li>
            </ul>

          </li>

          <li>

            <a href="#">Commerce <span>›</span></a>

            <ul class="nav-multilevel-subpanel">
              <li>
                <a href="#">
                  <strong>Product Pages</strong>
                  <span>Showcase products clearly</span>
                </a>
              </li>

              <li>
                <a href="#">
                  <strong>Checkout UX</strong>
                  <span>Improve buying journeys</span>
                </a>
              </li>

              <li>
                <a href="#">
                  <strong>Catalog Menus</strong>
                  <span>Organize categories</span>
                </a>
              </li>
            </ul>

          </li>

          <li><a href="#">Analytics</a></li>

        </ul>

      </li>

      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>

    </ul>

  </nav>

  <a href="#" class="nav-multilevel-cta">Explore</a>

</header>

CSS

.nav-multilevel-header{
position:relative;
z-index:30;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.84);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-multilevel-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-multilevel-item{
position:relative;
}

.nav-multilevel-menu > li > a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-multilevel-menu > li > a:hover,
.nav-multilevel-menu > li > a:focus,
.nav-multilevel-item:hover > a,
.nav-multilevel-item:focus-within > a{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-multilevel-panel,
.nav-multilevel-subpanel{
position:absolute;
padding:10px;
border-radius:18px;
background:rgba(15,23,42,.98);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.46);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
backdrop-filter:blur(18px);
list-style:none;
margin:0;
}

.nav-multilevel-panel{
left:0;
top:calc(100% + 12px);
width:260px;
}

.nav-multilevel-item:hover > .nav-multilevel-panel,
.nav-multilevel-item:focus-within > .nav-multilevel-panel{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-multilevel-panel li{
position:relative;
}

.nav-multilevel-panel a{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:12px 13px;
border-radius:14px;
color:#e2e8f0;
font-size:14px;
font-weight:850;
text-decoration:none;
transition:background .22s ease,transform .22s ease,color .22s ease;
}

.nav-multilevel-panel a:hover,
.nav-multilevel-panel a:focus,
.nav-multilevel-panel li:hover > a,
.nav-multilevel-panel li:focus-within > a{
background:rgba(255,255,255,.07);
color:#ffffff;
outline:none;
transform:translateX(2px);
}

.nav-multilevel-subpanel{
left:calc(100% + 10px);
top:0;
width:240px;
transform:translateX(-4px);
}

.nav-multilevel-panel li:hover > .nav-multilevel-subpanel,
.nav-multilevel-panel li:focus-within > .nav-multilevel-subpanel{
opacity:1;
visibility:visible;
transform:translateX(0);
}

.nav-multilevel-subpanel a{
display:grid;
gap:4px;
align-items:start;
justify-content:start;
}

.nav-multilevel-subpanel strong{
font-size:14px;
line-height:1.25;
color:#ffffff;
}

.nav-multilevel-subpanel span{
font-size:13px;
line-height:1.45;
font-weight:600;
color:#94a3b8;
}

@media (max-width: 900px){
.nav-multilevel-header{
align-items:flex-start;
flex-direction:column;
padding:18px;
gap:16px;
}

.nav-multilevel-menu{
width:100%;
display:grid;
grid-template-columns:1fr;
gap:8px;
}

.nav-multilevel-menu > li > a{
justify-content:space-between;
width:100%;
min-height:46px;
padding:0 14px;
background:rgba(255,255,255,.045);
border-radius:13px;
}

.nav-multilevel-panel,
.nav-multilevel-subpanel{
position:static;
width:100%;
margin-top:8px;
opacity:1;
visibility:visible;
transform:none;
display:grid;
gap:4px;
background:rgba(255,255,255,.045);
box-shadow:none;
border-radius:14px;
}

.nav-multilevel-subpanel{
margin:6px 0 4px 14px;
width:calc(100% - 14px);
}
}

This multi-level dropdown menu is useful when a website has deeper navigation groups that need to stay organized. It keeps the header clean while allowing users to discover nested pages, tools, services, or product categories.

Use this pattern for larger business websites, documentation websites, directories, SaaS platforms, eCommerce category structures, and any project where top-level menu items need several layers of related links.

9. Mega Menu Navigation

A mega menu navigation is a large dropdown menu that displays multiple columns of links, descriptions, categories, and featured calls to action. It is especially useful for websites with many important pages that need to be grouped clearly without forcing users through several smaller dropdowns.

This mega menu example uses a wide dropdown panel with columns for product links, resources, company pages, and a featured promotional card. The design is useful for SaaS websites, large blogs, marketplaces, online stores, agencies, and product websites.

  • Perfect for large websites, SaaS platforms, marketplaces, and eCommerce stores
  • Uses a wide dropdown panel with organized columns
  • Includes descriptions and a featured call-to-action card
  • Keeps large navigation structures easier to scan
  • Stacks into a simple mobile-friendly layout on smaller screens
Start Free
Mega Menu Navigation

Show many links inside a structured mega menu

This mega menu uses columns, descriptions, and a featured card to organize large navigation systems in a way that feels clear and easy to scan.

HTML

<header class="nav-mega-header">

  <a href="#" class="nav-mega-logo">
    <span class="nav-mega-logo-mark">M</span>
    <span>MegaNav</span>
  </a>

  <nav aria-label="Main navigation">

    <ul class="nav-mega-menu">

      <li><a href="#">Home</a></li>

      <li class="nav-mega-item">

        <a href="#">Platform ▾</a>

        <div class="nav-mega-panel">

          <div class="nav-mega-grid">

            <div class="nav-mega-column">
              <h3 class="nav-mega-heading">Products</h3>
              <ul class="nav-mega-list">
                <li><a href="#"><strong>Website Builder</strong><span>Create responsive pages</span></a></li>
                <li><a href="#"><strong>Commerce Tools</strong><span>Sell products online</span></a></li>
                <li><a href="#"><strong>Analytics</strong><span>Track visitor behavior</span></a></li>
              </ul>
            </div>

            <div class="nav-mega-column">
              <h3 class="nav-mega-heading">Resources</h3>
              <ul class="nav-mega-list">
                <li><a href="#"><strong>Blog</strong><span>Guides and tutorials</span></a></li>
                <li><a href="#"><strong>Docs</strong><span>Developer documentation</span></a></li>
                <li><a href="#"><strong>Templates</strong><span>Reusable layouts</span></a></li>
              </ul>
            </div>

            <div class="nav-mega-column">
              <h3 class="nav-mega-heading">Company</h3>
              <ul class="nav-mega-list">
                <li><a href="#"><strong>About</strong><span>Meet the team</span></a></li>
                <li><a href="#"><strong>Customers</strong><span>Success stories</span></a></li>
                <li><a href="#"><strong>Contact</strong><span>Talk to sales</span></a></li>
              </ul>
            </div>

            <div class="nav-mega-feature">
              <h3>Build faster websites</h3>
              <p>Explore reusable navigation, layout, and UI patterns for modern web projects.</p>
              <a href="#">View Examples</a>
            </div>

          </div>

        </div>

      </li>

      <li><a href="#">Pricing</a></li>
      <li><a href="#">Support</a></li>

    </ul>

  </nav>

  <a href="#" class="nav-mega-cta">Start Free</a>

</header>

CSS

.nav-mega-header{
position:relative;
z-index:40;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.84);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-mega-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-mega-item{
position:static;
}

.nav-mega-menu > li > a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-mega-menu > li > a:hover,
.nav-mega-menu > li > a:focus,
.nav-mega-item:hover > a,
.nav-mega-item:focus-within > a{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-mega-panel{
position:absolute;
left:22px;
right:22px;
top:calc(100% + 12px);
padding:18px;
border-radius:24px;
background:rgba(15,23,42,.98);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 90px rgba(0,0,0,.52);
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
backdrop-filter:blur(18px);
}

.nav-mega-item:hover .nav-mega-panel,
.nav-mega-item:focus-within .nav-mega-panel{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-mega-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr 1.15fr;
gap:16px;
}

.nav-mega-column{
padding:8px;
}

.nav-mega-heading{
margin:0 0 10px;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
color:#67e8f9;
}

.nav-mega-list{
display:grid;
gap:5px;
margin:0;
padding:0;
list-style:none;
}

.nav-mega-list a{
display:grid;
gap:4px;
padding:10px 11px;
border-radius:14px;
text-decoration:none;
transition:background .22s ease,transform .22s ease;
}

.nav-mega-list a:hover,
.nav-mega-list a:focus{
background:rgba(255,255,255,.07);
outline:none;
transform:translateX(2px);
}

.nav-mega-list strong{
font-size:14px;
line-height:1.25;
color:#ffffff;
}

.nav-mega-list span{
font-size:13px;
line-height:1.45;
color:#94a3b8;
}

.nav-mega-feature{
position:relative;
overflow:hidden;
min-height:100%;
padding:18px;
border-radius:20px;
background:
linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.18)),
rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
}

@media (max-width: 980px){
.nav-mega-header{
align-items:flex-start;
flex-direction:column;
padding:18px;
gap:16px;
}

.nav-mega-menu{
width:100%;
display:grid;
grid-template-columns:1fr;
gap:8px;
}

.nav-mega-menu > li > a{
justify-content:space-between;
width:100%;
min-height:46px;
padding:0 14px;
background:rgba(255,255,255,.045);
border-radius:13px;
}

.nav-mega-panel{
position:static;
margin-top:8px;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
background:rgba(255,255,255,.045);
}

.nav-mega-grid{
grid-template-columns:1fr;
gap:10px;
}
}

This mega menu navigation is ideal when a website has many important pages, tools, categories, or resources that need to be organized clearly. Instead of hiding everything inside small dropdowns, the mega menu gives users a larger, more scannable navigation panel.

Use this pattern for SaaS websites, marketplaces, eCommerce websites, large blogs, educational websites, agencies, product platforms, and any website where users need to compare several navigation groups at once.

10. Ecommerce Category Mega Menu

An ecommerce category mega menu helps online stores organize product categories, featured collections, seasonal offers, and shopping shortcuts inside one large navigation panel. It is especially useful when a store has many product groups that need to be easy to scan.

This example uses a wide category mega menu with multiple product columns, small category descriptions, a highlighted sale card, and a strong shopping call-to-action. It is designed for online stores, WooCommerce websites, marketplaces, product catalogs, and brand shops.

  • Perfect for WooCommerce stores, marketplaces, and product catalogs
  • Organizes product categories into clear columns
  • Includes featured collections and a promotional sale card
  • Helps users discover products faster
  • Stacks into a mobile-friendly layout on smaller screens
⌕ Cart
Ecommerce Mega Menu

Help shoppers browse product categories faster

This ecommerce category mega menu organizes store links, product groups, featured collections, and sale promotions inside one clear navigation panel.

HTML

<header class="nav-ecommerce-header">

  <a href="#" class="nav-ecommerce-logo">
    <span class="nav-ecommerce-logo-mark">E</span>
    <span>ShopNav</span>
  </a>

  <nav aria-label="Ecommerce category navigation">

    <ul class="nav-ecommerce-menu">

      <li><a href="#">Home</a></li>

      <li class="nav-ecommerce-item">

        <a href="#">Categories ▾</a>

        <div class="nav-ecommerce-panel">

          <div class="nav-ecommerce-grid">

            <div class="nav-ecommerce-column">
              <h3 class="nav-ecommerce-heading">Garden</h3>
              <ul class="nav-ecommerce-list">
                <li><a href="#"><span class="nav-ecommerce-icon">🌿</span><span><strong>Greenhouses</strong><span>Grow plants all year</span></span></a></li>
                <li><a href="#"><span class="nav-ecommerce-icon">🪴</span><span><strong>Planters</strong><span>Raised beds and pots</span></span></a></li>
                <li><a href="#"><span class="nav-ecommerce-icon">💧</span><span><strong>Irrigation</strong><span>Watering accessories</span></span></a></li>
              </ul>
            </div>

            <div class="nav-ecommerce-column">
              <h3 class="nav-ecommerce-heading">Outdoor</h3>
              <ul class="nav-ecommerce-list">
                <li><a href="#"><span class="nav-ecommerce-icon">🏡</span><span><strong>Shelters</strong><span>Outdoor storage</span></span></a></li>
                <li><a href="#"><span class="nav-ecommerce-icon">☀️</span><span><strong>Shade</strong><span>Patio covers</span></span></a></li>
                <li><a href="#"><span class="nav-ecommerce-icon">🪑</span><span><strong>Furniture</strong><span>Garden comfort</span></span></a></li>
              </ul>
            </div>

            <div class="nav-ecommerce-column">
              <h3 class="nav-ecommerce-heading">Shop</h3>
              <ul class="nav-ecommerce-list">
                <li><a href="#"><span class="nav-ecommerce-icon">⭐</span><span><strong>Best Sellers</strong><span>Popular products</span></span></a></li>
                <li><a href="#"><span class="nav-ecommerce-icon">🆕</span><span><strong>New Arrivals</strong><span>Fresh collections</span></span></a></li>
                <li><a href="#"><span class="nav-ecommerce-icon">🏷️</span><span><strong>Sale</strong><span>Limited deals</span></span></a></li>
              </ul>
            </div>

            <div class="nav-ecommerce-sale">
              <div class="nav-ecommerce-sale-badge">Seasonal Sale</div>
              <h3>Save on garden essentials</h3>
              <p>Highlight a product collection, discount campaign, or featured category inside the ecommerce mega menu.</p>
              <a href="#">Shop Deals</a>
            </div>

          </div>

        </div>

      </li>

      <li><a href="#">Brands</a></li>
      <li><a href="#">Guides</a></li>

    </ul>

  </nav>

  <div class="nav-ecommerce-actions">
    <a href="#" class="nav-ecommerce-search">⌕</a>
    <a href="#" class="nav-ecommerce-cart">Cart</a>
  </div>

</header>

CSS

.nav-ecommerce-header{
position:relative;
z-index:50;
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
padding:18px 22px;
background:rgba(15,23,42,.84);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-ecommerce-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-ecommerce-item{
position:static;
}

.nav-ecommerce-menu > li > a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-ecommerce-menu > li > a:hover,
.nav-ecommerce-menu > li > a:focus,
.nav-ecommerce-item:hover > a,
.nav-ecommerce-item:focus-within > a{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-ecommerce-panel{
position:absolute;
left:22px;
right:22px;
top:calc(100% + 12px);
padding:18px;
border-radius:24px;
background:rgba(15,23,42,.98);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 90px rgba(0,0,0,.52);
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
backdrop-filter:blur(18px);
}

.nav-ecommerce-item:hover .nav-ecommerce-panel,
.nav-ecommerce-item:focus-within .nav-ecommerce-panel{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-ecommerce-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr 1.2fr;
gap:16px;
}

.nav-ecommerce-heading{
margin:0 0 10px;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
color:#86efac;
}

.nav-ecommerce-list{
display:grid;
gap:5px;
margin:0;
padding:0;
list-style:none;
}

.nav-ecommerce-list a{
display:grid;
grid-template-columns:auto 1fr;
align-items:start;
gap:10px;
padding:10px 11px;
border-radius:14px;
text-decoration:none;
transition:background .22s ease,transform .22s ease;
}

.nav-ecommerce-list a:hover,
.nav-ecommerce-list a:focus{
background:rgba(255,255,255,.07);
outline:none;
transform:translateX(2px);
}

.nav-ecommerce-icon{
width:34px;
height:34px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
font-size:16px;
}

.nav-ecommerce-sale{
position:relative;
overflow:hidden;
min-height:100%;
padding:20px;
border-radius:22px;
background:
linear-gradient(135deg,rgba(34,197,94,.20),rgba(251,146,60,.18)),
rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
}

@media (max-width: 980px){
.nav-ecommerce-header{
align-items:flex-start;
flex-direction:column;
padding:18px;
gap:16px;
}

.nav-ecommerce-menu{
width:100%;
display:grid;
grid-template-columns:1fr;
gap:8px;
}

.nav-ecommerce-menu > li > a{
justify-content:space-between;
width:100%;
min-height:46px;
padding:0 14px;
background:rgba(255,255,255,.045);
border-radius:13px;
}

.nav-ecommerce-panel{
position:static;
margin-top:8px;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
background:rgba(255,255,255,.045);
}

.nav-ecommerce-grid{
grid-template-columns:1fr;
gap:10px;
}
}

This ecommerce category mega menu is useful when an online store has many categories, product groups, featured collections, and promotional links. It helps shoppers understand the store structure faster and reduces the need to search manually.

Use this pattern for WooCommerce stores, marketplaces, product catalogs, fashion stores, garden stores, electronics stores, furniture shops, and any ecommerce website where category discovery is important.

11. Mobile Hamburger Menu

A mobile hamburger menu is one of the most common responsive navigation patterns. It hides the navigation links behind a compact button on smaller screens and opens a mobile-friendly menu panel when the user taps the button.

This example uses a simple JavaScript toggle to open and close the menu, update the aria-expanded value, and animate the hamburger icon into a close icon. The desktop layout stays clean, while the mobile version becomes easy to tap and scan.

  • Perfect for responsive websites, blogs, landing pages, and WordPress themes
  • Uses JavaScript to toggle the mobile menu open and closed
  • Animates the hamburger icon into a close icon
  • Includes accessible aria-expanded behavior
  • Keeps navigation compact on small screens
Book Call
Mobile Hamburger Menu

Turn desktop links into a mobile menu panel

This mobile hamburger menu uses a small JavaScript toggle to open and close the navigation panel while keeping the header simple on smaller screens.

HTML

<header class="nav-hamburger-header">

  <a href="#" class="nav-hamburger-logo">
    <span class="nav-hamburger-logo-mark">H</span>
    <span>Hamburger</span>
  </a>

  <nav aria-label="Mobile navigation">
    <ul class="nav-hamburger-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <a href="#" class="nav-hamburger-cta">Book Call</a>

  <button class="nav-hamburger-toggle" type="button" aria-label="Toggle mobile menu" aria-expanded="false">
    <span></span>
    <span></span>
    <span></span>
  </button>

</header>

CSS

.nav-hamburger-header{
position:relative;
z-index:10;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.84);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-hamburger-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-hamburger-menu a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-hamburger-toggle{
display:none;
width:44px;
height:44px;
border:0;
border-radius:14px;
background:rgba(255,255,255,.08);
color:#ffffff;
cursor:pointer;
position:relative;
transition:background .22s ease;
}

.nav-hamburger-toggle span{
position:absolute;
left:12px;
right:12px;
height:2px;
border-radius:999px;
background:#ffffff;
transition:transform .25s ease,opacity .25s ease,top .25s ease;
}

.nav-hamburger-toggle span:nth-child(1){top:14px;}
.nav-hamburger-toggle span:nth-child(2){top:21px;}
.nav-hamburger-toggle span:nth-child(3){top:28px;}

.nav-hamburger-header.is-open .nav-hamburger-toggle span:nth-child(1){
top:21px;
transform:rotate(45deg);
}

.nav-hamburger-header.is-open .nav-hamburger-toggle span:nth-child(2){
opacity:0;
}

.nav-hamburger-header.is-open .nav-hamburger-toggle span:nth-child(3){
top:21px;
transform:rotate(-45deg);
}

@media (max-width: 860px){
.nav-hamburger-toggle{
display:block;
}

.nav-hamburger-menu{
position:absolute;
left:16px;
right:16px;
top:76px;
display:grid;
gap:8px;
padding:14px;
border-radius:18px;
background:rgba(15,23,42,.96);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 20px 60px rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transform:translateY(-8px);
transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
}

.nav-hamburger-header.is-open .nav-hamburger-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-hamburger-menu a{
justify-content:flex-start;
min-height:46px;
padding:0 14px;
border-radius:13px;
background:rgba(255,255,255,.045);
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".nav-hamburger-header").forEach(function (header) {
    const toggle = header.querySelector(".nav-hamburger-toggle");

    if (!toggle) {
      return;
    }

    toggle.addEventListener("click", function () {
      const isOpen = header.classList.toggle("is-open");
      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
    });
  });
});

This mobile hamburger menu is useful when a desktop navigation bar needs to become compact on smaller screens. The hamburger button saves space, while the opened panel keeps links large enough to tap comfortably.

Use this pattern for responsive websites, WordPress themes, landing pages, blogs, portfolios, SaaS websites, and business websites where mobile navigation needs to stay simple and easy to use.

12. Fullscreen Overlay Menu

A fullscreen overlay menu opens a large navigation layer over the entire page or preview area. It is a bold mobile-friendly navigation pattern that works especially well for creative websites, portfolios, agencies, landing pages, app websites, and modern brand experiences.

This example uses JavaScript to toggle the overlay menu, update the aria-expanded value, and animate the menu into view. The fullscreen layout gives each navigation link more space, making it easy to tap on mobile devices and visually impressive on larger screens.

  • Perfect for portfolios, agencies, creative websites, and landing pages
  • Uses a fullscreen overlay panel for strong visual impact
  • Includes large touch-friendly navigation links
  • Uses JavaScript for open and close behavior
  • Works well when the menu should feel like a designed experience
Fullscreen Overlay Menu

Create a bold full-screen navigation

This fullscreen overlay menu turns navigation into a focused experience with large links, strong spacing, and a simple open and close toggle.

HTML

<div class="nav-overlay-preview">

  <header class="nav-overlay-header">

    <a href="#" class="nav-overlay-logo">
      <span class="nav-overlay-logo-mark">O</span>
      <span>Overlay</span>
    </a>

    <button class="nav-overlay-toggle" type="button" aria-label="Toggle fullscreen menu" aria-expanded="false">
      <span></span>
      <span></span>
      <span></span>
    </button>

  </header>

  <nav class="nav-overlay-panel" aria-label="Fullscreen overlay navigation">

    <ul class="nav-overlay-menu">
      <li><a href="#">Home <span>01</span></a></li>
      <li><a href="#">Services <span>02</span></a></li>
      <li><a href="#">Projects <span>03</span></a></li>
      <li><a href="#">Journal <span>04</span></a></li>
      <li><a href="#">Contact <span>05</span></a></li>
    </ul>

  </nav>

</div>

CSS

.nav-overlay-preview{
position:relative;
overflow:hidden;
}

.nav-overlay-header{
position:relative;
z-index:20;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.78);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-overlay-toggle{
width:46px;
height:46px;
border:0;
border-radius:15px;
background:rgba(255,255,255,.08);
color:#ffffff;
cursor:pointer;
position:relative;
transition:background .22s ease,transform .22s ease;
}

.nav-overlay-toggle span{
position:absolute;
left:12px;
right:12px;
height:2px;
border-radius:999px;
background:#ffffff;
transition:transform .25s ease,opacity .25s ease,top .25s ease;
}

.nav-overlay-toggle span:nth-child(1){top:15px;}
.nav-overlay-toggle span:nth-child(2){top:22px;}
.nav-overlay-toggle span:nth-child(3){top:29px;}

.nav-overlay-preview.is-open .nav-overlay-toggle span:nth-child(1){
top:22px;
transform:rotate(45deg);
}

.nav-overlay-preview.is-open .nav-overlay-toggle span:nth-child(2){
opacity:0;
}

.nav-overlay-preview.is-open .nav-overlay-toggle span:nth-child(3){
top:22px;
transform:rotate(-45deg);
}

.nav-overlay-panel{
position:absolute;
inset:0;
z-index:15;
display:grid;
place-items:center;
padding:86px 28px 28px;
background:
radial-gradient(circle at 20% 20%,rgba(236,72,153,.24),transparent 36%),
radial-gradient(circle at 80% 28%,rgba(34,211,238,.22),transparent 34%),
linear-gradient(135deg,rgba(2,6,23,.98),rgba(15,23,42,.96));
opacity:0;
visibility:hidden;
transform:scale(.98);
transition:opacity .25s ease,visibility .25s ease,transform .25s ease;
}

.nav-overlay-preview.is-open .nav-overlay-panel{
opacity:1;
visibility:visible;
transform:scale(1);
}

.nav-overlay-menu{
width:min(100%,760px);
margin:0;
padding:0;
list-style:none;
display:grid;
gap:12px;
}

.nav-overlay-menu a{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px 20px;
border-radius:22px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
color:#ffffff;
font-size:clamp(26px,5vw,48px);
line-height:1;
font-weight:950;
letter-spacing:-.05em;
text-decoration:none;
transition:background .22s ease,transform .22s ease,border-color .22s ease;
}

.nav-overlay-menu a:hover,
.nav-overlay-menu a:focus{
background:rgba(255,255,255,.10);
border-color:rgba(34,211,238,.26);
outline:none;
transform:translateX(4px);
}

.nav-overlay-menu span{
font-size:14px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#67e8f9;
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".nav-overlay-preview").forEach(function (preview) {
    const toggle = preview.querySelector(".nav-overlay-toggle");

    if (!toggle) {
      return;
    }

    toggle.addEventListener("click", function () {
      const isOpen = preview.classList.toggle("is-open");
      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
    });
  });
});

This fullscreen overlay menu works well when navigation should feel bold, immersive, and easy to tap. It gives each link more breathing room and creates a strong visual transition between the page and the navigation state.

Use this pattern for creative portfolios, digital agencies, brand websites, app landing pages, modern service websites, and campaign pages where the navigation can become part of the visual experience.

13. Slide-In Side Menu

A slide-in side menu opens a navigation panel from the left or right side of the screen. This pattern is also called an off-canvas menu and is commonly used on mobile websites, dashboards, web apps, content-heavy sites, and responsive layouts.

This example uses JavaScript to toggle the side panel, update the aria-expanded attribute, and add a soft overlay behind the menu. The slide-in animation keeps the navigation compact while still giving users a clear menu area when they need it.

  • Perfect for mobile websites, apps, dashboards, and content-heavy layouts
  • Uses a side panel that slides in from the right
  • Includes a dimmed overlay for focus
  • Uses JavaScript for open and close behavior
  • Keeps the main page visible behind the navigation layer
Slide-In Side Menu

Open navigation from a side panel

This slide-in side menu keeps the page visible while opening a focused navigation panel from the right side of the screen.

HTML

<div class="nav-slide-preview">

  <header class="nav-slide-header">

    <a href="#" class="nav-slide-logo">
      <span class="nav-slide-logo-mark">S</span>
      <span>SideMenu</span>
    </a>

    <button class="nav-slide-open" type="button" aria-label="Open side menu" aria-expanded="false">
      <span class="nav-slide-open-lines">
        <span></span>
        <span></span>
        <span></span>
      </span>
      <strong>Menu</strong>
    </button>

  </header>

  <div class="nav-slide-backdrop"></div>

  <aside class="nav-slide-panel" aria-label="Slide-in side navigation">

    <div class="nav-slide-panel-top">
      <h3 class="nav-slide-panel-title">Navigation</h3>
      <button class="nav-slide-close" type="button" aria-label="Close side menu">×</button>
    </div>

    <ul class="nav-slide-menu">
      <li><a href="#">Home <span>01</span></a></li>
      <li><a href="#">Services <span>02</span></a></li>
      <li><a href="#">Case Studies <span>03</span></a></li>
      <li><a href="#">Pricing <span>04</span></a></li>
      <li><a href="#">Contact <span>05</span></a></li>
    </ul>

    <div class="nav-slide-panel-card">
      <strong>Need a modern website?</strong>
      <p>Add a small CTA block inside the side menu to guide users toward the next action.</p>
      <a href="#">Book a Call</a>
    </div>

  </aside>

</div>

CSS

.nav-slide-preview{
position:relative;
overflow:hidden;
}

.nav-slide-header{
position:relative;
z-index:20;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.82);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-slide-open{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:44px;
padding:0 15px;
border:0;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:14px;
font-weight:900;
cursor:pointer;
transition:transform .22s ease,background .22s ease;
}

.nav-slide-backdrop{
position:absolute;
inset:0;
z-index:25;
background:rgba(2,6,23,.68);
opacity:0;
visibility:hidden;
transition:opacity .24s ease,visibility .24s ease;
}

.nav-slide-preview.is-open .nav-slide-backdrop{
opacity:1;
visibility:visible;
}

.nav-slide-panel{
position:absolute;
top:0;
right:0;
bottom:0;
z-index:30;
width:min(86%,360px);
padding:18px;
background:rgba(15,23,42,.98);
border-left:1px solid rgba(255,255,255,.12);
box-shadow:-24px 0 80px rgba(0,0,0,.50);
transform:translateX(100%);
transition:transform .28s ease;
backdrop-filter:blur(18px);
display:flex;
flex-direction:column;
}

.nav-slide-preview.is-open .nav-slide-panel{
transform:translateX(0);
}

.nav-slide-menu{
display:grid;
gap:9px;
margin:18px 0 0;
padding:0;
list-style:none;
}

.nav-slide-menu a{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
min-height:50px;
padding:0 14px;
border-radius:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
color:#e2e8f0;
font-size:15px;
font-weight:900;
text-decoration:none;
transition:background .22s ease,transform .22s ease,border-color .22s ease;
}

.nav-slide-menu a:hover,
.nav-slide-menu a:focus{
background:rgba(255,255,255,.09);
border-color:rgba(34,211,238,.24);
transform:translateX(2px);
outline:none;
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".nav-slide-preview").forEach(function (preview) {
    const openButton = preview.querySelector(".nav-slide-open");
    const closeElements = preview.querySelectorAll(".nav-slide-backdrop, .nav-slide-close");

    if (!openButton) {
      return;
    }

    function setOpenState(isOpen) {
      preview.classList.toggle("is-open", isOpen);
      openButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
    }

    openButton.addEventListener("click", function () {
      setOpenState(!preview.classList.contains("is-open"));
    });

    closeElements.forEach(function (item) {
      item.addEventListener("click", function () {
        setOpenState(false);
      });
    });
  });
});

This slide-in side menu is useful when you want navigation to stay compact until the user needs it. The side panel gives the menu its own space while the overlay helps focus attention on the navigation layer.

Use this pattern for mobile websites, web apps, dashboards, blogs, documentation layouts, ecommerce filters, account areas, and any responsive website where an off-canvas menu improves usability.

14. Sidebar Navigation

A sidebar navigation menu is a vertical navigation pattern commonly used in dashboards, admin panels, documentation websites, learning platforms, account areas, SaaS apps, and web applications. Instead of placing all links across the top of the page, the main sections stay visible in a side column.

This example uses a clean sidebar layout with grouped navigation links, icons, an active state, and a compact content preview. It is useful when users need to move between many sections without losing context.

  • Perfect for dashboards, admin panels, SaaS apps, and documentation sites
  • Uses vertical navigation for clear section structure
  • Includes active, hover, and focus states
  • Works without JavaScript
  • Stacks into a mobile-friendly layout on smaller screens
Sidebar Navigation

Create app-like navigation with a vertical sidebar

This sidebar navigation keeps important dashboard links visible in a dedicated side column. It is useful for web apps, admin panels, account areas, documentation websites, and SaaS platforms.

Persistent Links Key sections stay visible while users work inside the app.
Grouped Menus Links can be separated into main, settings, and support areas.
App Layout The structure feels natural for dashboards and admin interfaces.

HTML

<div class="nav-sidebar-layout">

  <aside class="nav-sidebar-aside" aria-label="Sidebar navigation">

    <a href="#" class="nav-sidebar-logo">
      <span class="nav-sidebar-logo-mark">S</span>
      <span>SideDash</span>
    </a>

    <div class="nav-sidebar-section">

      <p class="nav-sidebar-label">Main</p>

      <ul class="nav-sidebar-menu">
        <li><a href="#" class="is-active"><span class="nav-sidebar-icon">⌂</span> Dashboard</a></li>
        <li><a href="#"><span class="nav-sidebar-icon">◫</span> Projects</a></li>
        <li><a href="#"><span class="nav-sidebar-icon">◉</span> Analytics</a></li>
        <li><a href="#"><span class="nav-sidebar-icon">✉</span> Messages</a></li>
      </ul>

    </div>

    <div class="nav-sidebar-section">

      <p class="nav-sidebar-label">Settings</p>

      <ul class="nav-sidebar-menu">
        <li><a href="#"><span class="nav-sidebar-icon">⚙</span> Settings</a></li>
        <li><a href="#"><span class="nav-sidebar-icon">?</span> Help Center</a></li>
      </ul>

    </div>

  </aside>

  <main class="nav-sidebar-main">
    <h1>Dashboard content</h1>
  </main>

</div>

CSS

.nav-sidebar-layout{
display:grid;
grid-template-columns:270px minmax(0,1fr);
min-height:460px;
}

.nav-sidebar-aside{
background:rgba(15,23,42,.86);
border-right:1px solid rgba(255,255,255,.09);
padding:20px;
display:flex;
flex-direction:column;
gap:22px;
}

.nav-sidebar-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
text-decoration:none;
}

.nav-sidebar-menu{
display:grid;
gap:7px;
margin:0;
padding:0;
list-style:none;
}

.nav-sidebar-menu a{
display:flex;
align-items:center;
gap:11px;
min-height:44px;
padding:0 12px;
border-radius:15px;
color:#cbd5e1;
font-size:14px;
font-weight:850;
text-decoration:none;
border:1px solid transparent;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease;
}

.nav-sidebar-menu a:hover,
.nav-sidebar-menu a:focus{
background:rgba(255,255,255,.07);
border-color:rgba(255,255,255,.10);
color:#ffffff;
outline:none;
transform:translateX(2px);
}

.nav-sidebar-menu a.is-active{
background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(99,102,241,.16));
border-color:rgba(34,211,238,.24);
color:#ffffff;
box-shadow:0 14px 34px rgba(34,211,238,.10);
}

.nav-sidebar-icon{
width:30px;
height:30px;
border-radius:11px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
font-size:14px;
}

@media (max-width: 900px){
.nav-sidebar-layout{
grid-template-columns:1fr;
}

.nav-sidebar-aside{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.09);
}

.nav-sidebar-menu{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width: 560px){
.nav-sidebar-menu{
grid-template-columns:1fr;
}
}

This sidebar navigation pattern is useful when users need regular access to many sections while working inside a website or app. The vertical structure gives more room for labels, icons, grouped sections, and active states than a traditional horizontal navbar.

Use this pattern for dashboards, admin panels, SaaS apps, account areas, documentation websites, online courses, web apps, and internal tools where navigation should stay visible and organized.

15. Collapsible Sidebar Menu

A collapsible sidebar menu gives users more control over the interface. The sidebar can stay expanded when users need full labels and collapse into a narrow icon rail when they want more screen space for content.

This example uses a small JavaScript toggle to switch the sidebar between expanded and collapsed states. The collapsed version keeps icons visible while hiding text labels, making it useful for dashboards, admin panels, SaaS tools, and productivity apps.

  • Perfect for dashboards, web apps, SaaS tools, and admin interfaces
  • Collapses from a full sidebar into a compact icon rail
  • Uses JavaScript to toggle the collapsed state
  • Keeps important navigation icons visible
  • Helps save horizontal space on busy interfaces
Collapsible Sidebar

Save screen space with a collapsible menu

This collapsible sidebar menu switches between a full navigation column and a compact icon rail. It helps dashboards and apps stay usable when screen space is limited.

Performance Overview
Recent Activity

HTML

<div class="nav-collapse-layout">

  <aside class="nav-collapse-aside" aria-label="Collapsible sidebar navigation">

    <div class="nav-collapse-top">

      <a href="#" class="nav-collapse-logo">
        <span class="nav-collapse-logo-mark">C</span>
        <span class="nav-collapse-logo-text">CollapseUI</span>
      </a>

      <button class="nav-collapse-toggle" type="button" aria-label="Toggle sidebar width" aria-expanded="true">‹</button>

    </div>

    <ul class="nav-collapse-menu">
      <li><a href="#" class="is-active"><span class="nav-collapse-icon">⌂</span><span class="nav-collapse-label">Dashboard</span></a></li>
      <li><a href="#"><span class="nav-collapse-icon">◫</span><span class="nav-collapse-label">Projects</span></a></li>
      <li><a href="#"><span class="nav-collapse-icon">◉</span><span class="nav-collapse-label">Analytics</span></a></li>
      <li><a href="#"><span class="nav-collapse-icon">✉</span><span class="nav-collapse-label">Messages</span></a></li>
      <li><a href="#"><span class="nav-collapse-icon">⚙</span><span class="nav-collapse-label">Settings</span></a></li>
    </ul>

  </aside>

  <main class="nav-collapse-main">
    <h1>Dashboard content</h1>
  </main>

</div>

CSS

.nav-collapse-layout{
display:grid;
grid-template-columns:280px minmax(0,1fr);
min-height:460px;
transition:grid-template-columns .28s ease;
}

.nav-collapse-layout.is-collapsed{
grid-template-columns:92px minmax(0,1fr);
}

.nav-collapse-aside{
background:rgba(15,23,42,.88);
border-right:1px solid rgba(255,255,255,.09);
padding:18px;
display:flex;
flex-direction:column;
gap:20px;
min-width:0;
}

.nav-collapse-menu{
display:grid;
gap:7px;
margin:0;
padding:0;
list-style:none;
}

.nav-collapse-menu a{
display:flex;
align-items:center;
gap:11px;
min-height:46px;
padding:0 12px;
border-radius:15px;
color:#cbd5e1;
font-size:14px;
font-weight:850;
text-decoration:none;
border:1px solid transparent;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease;
white-space:nowrap;
overflow:hidden;
}

.nav-collapse-icon{
width:30px;
height:30px;
flex:0 0 30px;
border-radius:11px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
font-size:14px;
}

.nav-collapse-label{
overflow:hidden;
text-overflow:ellipsis;
transition:opacity .22s ease,width .22s ease;
}

.nav-collapse-layout.is-collapsed .nav-collapse-label{
opacity:0;
width:0;
}

.nav-collapse-layout.is-collapsed .nav-collapse-menu a{
justify-content:center;
padding:0;
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".nav-collapse-layout").forEach(function (layout) {
    const toggle = layout.querySelector(".nav-collapse-toggle");

    if (!toggle) {
      return;
    }

    toggle.addEventListener("click", function () {
      const isCollapsed = layout.classList.toggle("is-collapsed");
      toggle.setAttribute("aria-expanded", isCollapsed ? "false" : "true");
    });
  });
});

This collapsible sidebar menu is useful when a dashboard or app needs both navigation clarity and flexible screen space. The expanded state shows full labels, while the collapsed state keeps the most important icons available.

Use this pattern for SaaS dashboards, admin panels, analytics tools, account areas, productivity apps, CRM interfaces, project management tools, and web applications with many navigation sections.

16. Bottom Mobile Navigation

A bottom mobile navigation places the most important links at the bottom of a mobile screen, where they are easy to reach with one hand. This pattern is common in mobile apps, ecommerce websites, dashboards, booking platforms, social apps, and modern responsive web interfaces.

This example creates a mobile-style phone preview with a fixed bottom navigation bar, icons, labels, an active state, and a floating action button. It is useful when mobile users need fast access to a few primary sections without opening a hamburger menu.

  • Perfect for mobile-first websites, apps, shops, dashboards, and booking pages
  • Places important links within easy thumb reach
  • Includes icon labels and an active navigation state
  • Works without JavaScript
  • Best for 3 to 5 primary mobile actions
Bottom Mobile Navigation

Put key actions within easy thumb reach

This bottom mobile navigation keeps the most important sections visible at the bottom of the screen, making the interface feel more like a modern mobile app.

Mobile App

Today’s Overview
Recent Activity
Saved Items

HTML

<div class="nav-bottom-preview">

  <div class="nav-bottom-content">

    <div class="nav-bottom-kicker">Bottom Mobile Navigation</div>

    <h3 class="nav-bottom-title">
      Put key actions within <span>easy thumb reach</span>
    </h3>

    <p class="nav-bottom-text">
      This bottom mobile navigation keeps the most important sections visible at the bottom of the screen,
      making the interface feel more like a modern mobile app.
    </p>

  </div>

  <div class="nav-bottom-phone">

    <div class="nav-bottom-screen">

      <div class="nav-bottom-app-header">
        <h3 class="nav-bottom-app-title">Mobile App</h3>
        <div class="nav-bottom-avatar"></div>
      </div>

      <div class="nav-bottom-card-wrap">

        <div class="nav-bottom-card">
          <strong>Today’s Overview</strong>
          <div class="nav-bottom-line"></div>
          <div class="nav-bottom-line"></div>
        </div>

        <div class="nav-bottom-card">
          <strong>Recent Activity</strong>
          <div class="nav-bottom-line"></div>
          <div class="nav-bottom-line"></div>
        </div>

        <div class="nav-bottom-card">
          <strong>Saved Items</strong>
          <div class="nav-bottom-line"></div>
          <div class="nav-bottom-line"></div>
        </div>

      </div>

      <nav class="nav-bottom-nav" aria-label="Bottom mobile navigation">

        <a href="#" class="nav-bottom-link is-active">
          <span class="nav-bottom-icon">⌂</span>
          <span>Home</span>
        </a>

        <a href="#" class="nav-bottom-link">
          <span class="nav-bottom-icon">⌕</span>
          <span>Search</span>
        </a>

        <a href="#" class="nav-bottom-link" aria-label="Create new item">
          <span class="nav-bottom-fab">+</span>
        </a>

        <a href="#" class="nav-bottom-link">
          <span class="nav-bottom-icon">♡</span>
          <span>Saved</span>
        </a>

        <a href="#" class="nav-bottom-link">
          <span class="nav-bottom-icon">☻</span>
          <span>Profile</span>
        </a>

      </nav>

    </div>

  </div>

</div>

CSS

.nav-bottom-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-bottom-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(236,72,153,.18),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(168,85,247,.18),transparent 40%);
pointer-events:none;
}

.nav-bottom-preview{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(270px,340px);
gap:34px;
align-items:center;
min-height:470px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
padding:34px;
}

.nav-bottom-content{
max-width:590px;
}

.nav-bottom-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.10);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-bottom-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-bottom-title span{
background:linear-gradient(90deg,#22d3ee,#ec4899,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-bottom-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:540px;
}

.nav-bottom-phone{
width:min(100%,320px);
justify-self:center;
padding:16px;
border-radius:38px;
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 32px 90px rgba(0,0,0,.46);
}

.nav-bottom-screen{
position:relative;
min-height:430px;
border-radius:28px;
overflow:hidden;
background:
radial-gradient(circle at 50% 0%,rgba(34,211,238,.18),transparent 34%),
linear-gradient(180deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,.10);
}

.nav-bottom-app-header{
padding:22px 18px 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.nav-bottom-app-title{
margin:0;
font-size:18px;
line-height:1;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-bottom-avatar{
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#22d3ee,#ec4899);
box-shadow:0 12px 28px rgba(236,72,153,.22);
}

.nav-bottom-card-wrap{
display:grid;
gap:12px;
padding:10px 18px 96px;
}

.nav-bottom-card{
min-height:92px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
position:relative;
overflow:hidden;
}

.nav-bottom-card:nth-child(1){
background:
linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.14)),
rgba(255,255,255,.07);
}

.nav-bottom-card strong{
display:block;
margin-bottom:10px;
font-size:14px;
line-height:1.2;
color:#ffffff;
}

.nav-bottom-line{
height:9px;
border-radius:999px;
background:rgba(255,255,255,.22);
margin-bottom:8px;
}

.nav-bottom-line:nth-child(2){
width:84%;
}

.nav-bottom-line:nth-child(3){
width:58%;
}

.nav-bottom-nav{
position:absolute;
left:12px;
right:12px;
bottom:12px;
height:72px;
display:grid;
grid-template-columns:repeat(5,1fr);
align-items:center;
gap:6px;
padding:8px;
border-radius:24px;
background:rgba(15,23,42,.92);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 -18px 50px rgba(0,0,0,.35);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}

.nav-bottom-link{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
min-width:0;
height:56px;
border-radius:18px;
color:#94a3b8;
text-decoration:none;
font-size:11px;
font-weight:850;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-bottom-link:hover,
.nav-bottom-link:focus{
background:rgba(255,255,255,.07);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-bottom-link.is-active{
background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(236,72,153,.16));
color:#ffffff;
}

.nav-bottom-icon{
font-size:18px;
line-height:1;
}

.nav-bottom-fab{
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
margin:-20px auto 0;
border-radius:18px;
background:linear-gradient(135deg,#22d3ee,#ec4899);
color:#ffffff;
font-size:22px;
font-weight:950;
box-shadow:0 16px 38px rgba(236,72,153,.28);
transform:translateY(-6px);
}

@media (max-width: 860px){
.nav-bottom-demo{
padding:20px;
}

.nav-bottom-preview{
grid-template-columns:1fr;
padding:28px 22px;
gap:30px;
}

.nav-bottom-title{
font-size:34px;
}

.nav-bottom-phone{
width:min(100%,310px);
}
}

@media (max-width: 520px){
.nav-bottom-preview{
padding:24px 18px;
}

.nav-bottom-title{
font-size:31px;
}

.nav-bottom-phone{
padding:12px;
border-radius:32px;
}
}

This bottom mobile navigation pattern is best when a website or app has a small number of primary sections that users need often. Instead of hiding everything behind a menu button, the most important actions stay visible and easy to reach.

Use this pattern for mobile-first websites, ecommerce stores, dashboards, booking apps, account areas, social platforms, and responsive web apps where fast mobile navigation matters.

17. Tabs Navigation Menu

A tabs navigation menu lets users switch between related content panels without leaving the page. Tabs are useful for pricing sections, product details, feature comparisons, dashboards, account settings, documentation pages, and landing page content blocks.

This example uses a small JavaScript snippet to switch active tabs, update the selected state, and show the matching content panel. The design includes rounded tab buttons, clear active styling, and responsive stacking for smaller screens.

  • Perfect for pricing, product details, dashboards, FAQs, and feature sections
  • Uses JavaScript to switch active content panels
  • Includes active tab and active panel states
  • Keeps related content inside one clean interface
  • Stacks cleanly on mobile screens
Tabs Navigation Menu

Switch content with a clean tab menu

This tabs navigation menu lets users move between related content panels without loading a new page.

Design-focused navigation

Use tabs to separate related content into smaller sections while keeping the layout clean and easy to scan.

  • ✓ Clear active tab state
  • ✓ Better content grouping
  • ✓ Modern rounded UI

Code-friendly structure

The markup stays simple: tab buttons control matching content panels using small JavaScript and clear data attributes.

  • ✓ Simple HTML structure
  • ✓ Small JavaScript toggle
  • ✓ Reusable CSS classes

Responsive tab layout

The tab buttons wrap into a two-column or single-column layout on smaller screens so the menu remains easy to tap.

  • ✓ Touch-friendly buttons
  • ✓ Responsive grid
  • ✓ Clean mobile stacking

Useful for structured pages

Tabs can help organize product details, feature groups, pricing information, documentation sections, and comparison content.

  • ✓ Better content organization
  • ✓ Cleaner page sections
  • ✓ Faster user scanning

HTML

<div class="nav-tabs-preview" data-nav-tabs>

  <div class="nav-tabs-header">

    <div class="nav-tabs-kicker">Tabs Navigation Menu</div>

    <h3 class="nav-tabs-title">
      Switch content with a <span>clean tab menu</span>
    </h3>

    <p class="nav-tabs-text">
      This tabs navigation menu lets users move between related content panels without loading a new page.
    </p>

  </div>

  <div class="nav-tabs-box">

    <div class="nav-tabs-list" role="tablist" aria-label="Feature tabs">

      <button class="nav-tabs-button is-active" type="button" role="tab" aria-selected="true" data-tab-target="design">Design</button>

      <button class="nav-tabs-button" type="button" role="tab" aria-selected="false" data-tab-target="code">Code</button>

      <button class="nav-tabs-button" type="button" role="tab" aria-selected="false" data-tab-target="mobile">Mobile</button>

      <button class="nav-tabs-button" type="button" role="tab" aria-selected="false" data-tab-target="seo">SEO</button>

    </div>

    <div class="nav-tabs-panel is-active" data-tab-panel="design">

      <div class="nav-tabs-panel-content">
        <h3>Design-focused navigation</h3>
        <p>Use tabs to separate related content into smaller sections while keeping the layout clean and easy to scan.</p>

        <ul class="nav-tabs-feature-list">
          <li><span class="nav-tabs-check">✓</span> Clear active tab state</li>
          <li><span class="nav-tabs-check">✓</span> Better content grouping</li>
          <li><span class="nav-tabs-check">✓</span> Modern rounded UI</li>
        </ul>
      </div>

      <div class="nav-tabs-visual">
        <div class="nav-tabs-visual-card"></div>
        <div class="nav-tabs-visual-card"></div>
        <div class="nav-tabs-visual-card"></div>
      </div>

    </div>

    <div class="nav-tabs-panel" data-tab-panel="code">

      <div class="nav-tabs-panel-content">
        <h3>Code-friendly structure</h3>
        <p>The markup stays simple: tab buttons control matching content panels using small JavaScript and clear data attributes.</p>

        <ul class="nav-tabs-feature-list">
          <li><span class="nav-tabs-check">✓</span> Simple HTML structure</li>
          <li><span class="nav-tabs-check">✓</span> Small JavaScript toggle</li>
          <li><span class="nav-tabs-check">✓</span> Reusable CSS classes</li>
        </ul>
      </div>

      <div class="nav-tabs-visual">
        <div class="nav-tabs-visual-card"></div>
        <div class="nav-tabs-visual-card"></div>
        <div class="nav-tabs-visual-card"></div>
      </div>

    </div>

    <div class="nav-tabs-panel" data-tab-panel="mobile">

      <div class="nav-tabs-panel-content">
        <h3>Responsive tab layout</h3>
        <p>The tab buttons wrap into a two-column or single-column layout on smaller screens so the menu remains easy to tap.</p>

        <ul class="nav-tabs-feature-list">
          <li><span class="nav-tabs-check">✓</span> Touch-friendly buttons</li>
          <li><span class="nav-tabs-check">✓</span> Responsive grid</li>
          <li><span class="nav-tabs-check">✓</span> Clean mobile stacking</li>
        </ul>
      </div>

      <div class="nav-tabs-visual">
        <div class="nav-tabs-visual-card"></div>
        <div class="nav-tabs-visual-card"></div>
        <div class="nav-tabs-visual-card"></div>
      </div>

    </div>

    <div class="nav-tabs-panel" data-tab-panel="seo">

      <div class="nav-tabs-panel-content">
        <h3>Useful for structured pages</h3>
        <p>Tabs can help organize product details, feature groups, pricing information, documentation sections, and comparison content.</p>

        <ul class="nav-tabs-feature-list">
          <li><span class="nav-tabs-check">✓</span> Better content organization</li>
          <li><span class="nav-tabs-check">✓</span> Cleaner page sections</li>
          <li><span class="nav-tabs-check">✓</span> Faster user scanning</li>
        </ul>
      </div>

      <div class="nav-tabs-visual">
        <div class="nav-tabs-visual-card"></div>
        <div class="nav-tabs-visual-card"></div>
        <div class="nav-tabs-visual-card"></div>
      </div>

    </div>

  </div>

</div>

CSS

.nav-tabs-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-tabs-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(99,102,241,.22),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(34,197,94,.14),transparent 40%);
pointer-events:none;
}

.nav-tabs-preview{
position:relative;
z-index:2;
min-height:470px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
padding:34px;
}

.nav-tabs-header{
max-width:760px;
margin:0 auto 26px;
text-align:center;
}

.nav-tabs-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(99,102,241,.12);
border:1px solid rgba(99,102,241,.26);
color:#c4b5fd;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-tabs-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-tabs-title span{
background:linear-gradient(90deg,#818cf8,#22d3ee,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-tabs-text{
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:620px;
}

.nav-tabs-box{
max-width:900px;
margin:0 auto;
padding:18px;
border-radius:26px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 26px 80px rgba(0,0,0,.38);
}

.nav-tabs-list{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
padding:8px;
border-radius:20px;
background:rgba(2,6,23,.54);
border:1px solid rgba(255,255,255,.08);
margin-bottom:18px;
}

.nav-tabs-button{
min-height:46px;
border:0;
border-radius:15px;
background:transparent;
color:#94a3b8;
font-size:14px;
font-weight:900;
cursor:pointer;
transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.nav-tabs-button:hover,
.nav-tabs-button:focus{
background:rgba(255,255,255,.07);
color:#ffffff;
outline:none;
}

.nav-tabs-button.is-active{
background:linear-gradient(135deg,#6366f1,#22d3ee);
color:#ffffff;
box-shadow:0 14px 34px rgba(34,211,238,.20);
}

.nav-tabs-panel{
display:none;
grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);
gap:22px;
align-items:center;
padding:24px;
border-radius:22px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
}

.nav-tabs-panel.is-active{
display:grid;
}

.nav-tabs-panel-content h3{
margin:0 0 12px;
font-size:30px;
line-height:1.12;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-tabs-panel-content p{
margin:0 0 18px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.nav-tabs-feature-list{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.nav-tabs-feature-list li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:800;
color:#e2e8f0;
}

.nav-tabs-check{
width:24px;
height:24px;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(34,211,238,.14);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:13px;
font-weight:950;
}

.nav-tabs-visual{
display:grid;
gap:12px;
padding:16px;
border-radius:22px;
background:rgba(2,6,23,.46);
border:1px solid rgba(255,255,255,.08);
}

.nav-tabs-visual-card{
min-height:78px;
border-radius:17px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.nav-tabs-visual-card:nth-child(1){
background:rgba(99,102,241,.12);
border-color:rgba(99,102,241,.20);
}

.nav-tabs-visual-card:nth-child(2){
background:rgba(34,211,238,.10);
border-color:rgba(34,211,238,.18);
}

.nav-tabs-visual-card:nth-child(3){
background:rgba(34,197,94,.09);
border-color:rgba(34,197,94,.16);
}

.nav-tabs-visual-card::before{
content:"";
position:absolute;
left:16px;
top:18px;
width:52%;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.30);
}

.nav-tabs-visual-card::after{
content:"";
position:absolute;
left:16px;
top:40px;
width:76%;
height:7px;
border-radius:999px;
background:rgba(148,163,184,.28);
}

@media (max-width: 820px){
.nav-tabs-demo{
padding:20px;
}

.nav-tabs-preview{
padding:28px 22px;
}

.nav-tabs-header{
text-align:left;
}

.nav-tabs-title{
font-size:34px;
}

.nav-tabs-list{
grid-template-columns:1fr 1fr;
}

.nav-tabs-panel{
grid-template-columns:1fr;
padding:20px;
}
}

@media (max-width: 520px){
.nav-tabs-preview{
padding:24px 18px;
}

.nav-tabs-title{
font-size:31px;
}

.nav-tabs-list{
grid-template-columns:1fr;
}

.nav-tabs-panel-content h3{
font-size:25px;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[data-nav-tabs]").forEach(function (tabs) {
    const buttons = tabs.querySelectorAll("[data-tab-target]");
    const panels = tabs.querySelectorAll("[data-tab-panel]");

    buttons.forEach(function (button) {
      button.addEventListener("click", function () {
        const target = button.getAttribute("data-tab-target");

        buttons.forEach(function (item) {
          item.classList.remove("is-active");
          item.setAttribute("aria-selected", "false");
        });

        panels.forEach(function (panel) {
          panel.classList.remove("is-active");
        });

        button.classList.add("is-active");
        button.setAttribute("aria-selected", "true");

        const activePanel = tabs.querySelector('[data-tab-panel="' + target + '"]');

        if (activePanel) {
          activePanel.classList.add("is-active");
        }
      });
    });
  });
});

This tabs navigation menu is useful when related content should stay on the same page but not appear all at once. Tabs reduce clutter and let users choose the section they want to view.

Use this pattern for pricing tables, product information, feature comparisons, dashboards, account settings, documentation pages, service pages, landing pages, and FAQ-style content blocks.

18. Pill Navigation Menu

A pill navigation menu uses rounded link buttons to create a soft, modern, and highly readable navigation style. It works well for SaaS websites, pricing sections, category filters, landing pages, dashboards, and content-heavy pages where navigation should feel clear but not too heavy.

This example uses a rounded pill container, individual pill links, an active state, subtle gradients, and responsive wrapping. It is a CSS-only navigation pattern that can be used as a main menu, category navigation, section menu, or filter-style navigation block.

  • Perfect for SaaS websites, landing pages, category filters, and dashboards
  • Uses rounded pill-shaped links for a soft modern UI
  • Works without JavaScript
  • Includes hover, focus, and active states
  • Wraps cleanly on smaller screens
Pill Navigation Menu

Organize sections with rounded pill links

This pill navigation menu uses rounded link buttons to create a soft and modern navigation style for categories, sections, dashboards, and landing page content.

Soft navigation for modern interfaces

Pill navigation is useful when links should look like selectable categories instead of traditional text links. It works especially well for filters, landing page sections, pricing groups, and content categories.

HTML

<div class="nav-pill-preview">

  <div class="nav-pill-header">

    <div class="nav-pill-kicker">Pill Navigation Menu</div>

    <h3 class="nav-pill-title">
      Organize sections with <span>rounded pill links</span>
    </h3>

    <p class="nav-pill-text">
      This pill navigation menu uses rounded link buttons to create a soft and modern navigation style for categories, sections, dashboards, and landing page content.
    </p>

  </div>

  <nav class="nav-pill-menu-wrap" aria-label="Pill navigation example">

    <ul class="nav-pill-menu">
      <li><a href="#" class="is-active">All <span class="nav-pill-count">24</span></a></li>
      <li><a href="#">Design <span class="nav-pill-count">8</span></a></li>
      <li><a href="#">Code <span class="nav-pill-count">6</span></a></li>
      <li><a href="#">UI Kits <span class="nav-pill-count">5</span></a></li>
      <li><a href="#">Tools <span class="nav-pill-count">5</span></a></li>
    </ul>

  </nav>

  <div class="nav-pill-content">

    <div class="nav-pill-card">
      <h3>Soft navigation for modern interfaces</h3>
      <p>Pill navigation is useful when links should look like selectable categories instead of traditional text links. It works especially well for filters, landing page sections, pricing groups, and content categories.</p>
    </div>

    <div class="nav-pill-list">
      <div class="nav-pill-list-item"></div>
      <div class="nav-pill-list-item"></div>
      <div class="nav-pill-list-item"></div>
    </div>

  </div>

</div>

CSS

.nav-pill-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-pill-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(34,197,94,.16),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(168,85,247,.18),transparent 40%);
pointer-events:none;
}

.nav-pill-preview{
position:relative;
z-index:2;
min-height:430px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
padding:34px;
}

.nav-pill-header{
max-width:780px;
margin:0 auto 28px;
text-align:center;
}

.nav-pill-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.24);
color:#86efac;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-pill-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-pill-title span{
background:linear-gradient(90deg,#22c55e,#22d3ee,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-pill-text{
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:620px;
}

.nav-pill-menu-wrap{
max-width:920px;
margin:0 auto;
padding:14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 22px 70px rgba(0,0,0,.30);
}

.nav-pill-menu{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:8px;
margin:0;
padding:0;
list-style:none;
}

.nav-pill-menu a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
padding:0 17px;
border-radius:999px;
color:#cbd5e1;
font-size:14px;
font-weight:900;
text-decoration:none;
border:1px solid transparent;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.nav-pill-menu a:hover,
.nav-pill-menu a:focus{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.12);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-pill-menu a.is-active{
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
box-shadow:0 14px 34px rgba(34,211,238,.20);
}

.nav-pill-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
height:24px;
padding:0 7px;
border-radius:999px;
background:rgba(255,255,255,.10);
font-size:12px;
font-weight:950;
}

.nav-pill-menu a.is-active .nav-pill-count{
background:rgba(2,6,23,.18);
}

.nav-pill-content{
max-width:920px;
margin:24px auto 0;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:18px;
}

.nav-pill-card{
padding:24px;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.30);
}

.nav-pill-card h3{
margin:0 0 12px;
font-size:28px;
line-height:1.14;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-pill-card p{
margin:0;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.nav-pill-list{
display:grid;
gap:12px;
}

.nav-pill-list-item{
min-height:58px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.nav-pill-list-item::before{
content:"";
position:absolute;
left:16px;
top:16px;
width:48%;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.30);
}

.nav-pill-list-item::after{
content:"";
position:absolute;
left:16px;
top:36px;
width:72%;
height:7px;
border-radius:999px;
background:rgba(148,163,184,.28);
}

.nav-pill-list-item:nth-child(1){
background:rgba(34,197,94,.10);
border-color:rgba(34,197,94,.18);
}

.nav-pill-list-item:nth-child(3){
background:rgba(34,211,238,.10);
border-color:rgba(34,211,238,.18);
}

@media (max-width: 820px){
.nav-pill-demo{
padding:20px;
}

.nav-pill-preview{
padding:28px 22px;
}

.nav-pill-header{
text-align:left;
}

.nav-pill-title{
font-size:34px;
}

.nav-pill-menu-wrap{
border-radius:24px;
}

.nav-pill-menu{
justify-content:flex-start;
}

.nav-pill-menu a{
width:calc(50% - 4px);
}

.nav-pill-content{
grid-template-columns:1fr;
}
}

@media (max-width: 520px){
.nav-pill-preview{
padding:24px 18px;
}

.nav-pill-title{
font-size:31px;
}

.nav-pill-menu a{
width:100%;
}

.nav-pill-card h3{
font-size:24px;
}
}

This pill navigation menu is useful when links should behave like selectable categories or section filters. The rounded design feels friendly, modern, and easy to scan without overwhelming the page.

Use this pattern for SaaS pages, dashboards, blogs, category filters, pricing sections, landing pages, resource libraries, portfolio filters, and modern content navigation blocks.

19. Icon Navigation Menu

An icon navigation menu combines simple icons with short labels to make navigation faster to recognize. This pattern works well for dashboards, mobile apps, product interfaces, admin panels, portfolio websites, SaaS tools, and compact website headers.

This example uses a horizontal icon navigation card with a clear active state, compact labels, hover effects, and a responsive layout. Icons should support the text labels, not replace them completely, because labels make the navigation easier to understand and more accessible.

  • Perfect for dashboards, apps, admin panels, and compact navigation areas
  • Combines icons with readable text labels
  • Includes active, hover, and focus states
  • Works without JavaScript
  • Stacks into a clean grid on smaller screens
Icon Navigation Menu

Make navigation faster with icons and labels

This icon navigation menu combines visual symbols with short text labels, making each section easier to recognize while keeping the interface compact.

Visual recognition

Icons help users recognize important sections faster, especially in dashboards and app-style interfaces.

Labels still matter

Short text labels keep the navigation clear, accessible, and easier to understand than icon-only menus.

HTML

<div class="nav-icon-preview">

  <div class="nav-icon-header">

    <div class="nav-icon-kicker">Icon Navigation Menu</div>

    <h3 class="nav-icon-title">
      Make navigation faster with <span>icons and labels</span>
    </h3>

    <p class="nav-icon-text">
      This icon navigation menu combines visual symbols with short text labels, making each section easier to recognize while keeping the interface compact.
    </p>

  </div>

  <div class="nav-icon-shell">

    <nav aria-label="Icon navigation example">

      <ul class="nav-icon-menu">

        <li>
          <a href="#" class="is-active">
            <span class="nav-icon-symbol">⌂</span>
            <span class="nav-icon-label">Home</span>
          </a>
        </li>

        <li>
          <a href="#">
            <span class="nav-icon-symbol">◫</span>
            <span class="nav-icon-label">Projects</span>
          </a>
        </li>

        <li>
          <a href="#">
            <span class="nav-icon-symbol">◉</span>
            <span class="nav-icon-label">Analytics</span>
          </a>
        </li>

        <li>
          <a href="#">
            <span class="nav-icon-symbol">✉</span>
            <span class="nav-icon-label">Messages</span>
          </a>
        </li>

        <li>
          <a href="#">
            <span class="nav-icon-symbol">★</span>
            <span class="nav-icon-label">Favorites</span>
          </a>
        </li>

        <li>
          <a href="#">
            <span class="nav-icon-symbol">⚙</span>
            <span class="nav-icon-label">Settings</span>
          </a>
        </li>

      </ul>

    </nav>

    <div class="nav-icon-panel">

      <div class="nav-icon-card">
        <strong>Visual recognition</strong>
        <p>Icons help users recognize important sections faster, especially in dashboards and app-style interfaces.</p>
      </div>

      <div class="nav-icon-card">
        <strong>Labels still matter</strong>
        <p>Short text labels keep the navigation clear, accessible, and easier to understand than icon-only menus.</p>
      </div>

    </div>

  </div>

</div>

CSS

.nav-icon-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-icon-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(236,72,153,.16),transparent 40%);
pointer-events:none;
}

.nav-icon-preview{
position:relative;
z-index:2;
min-height:430px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
padding:34px;
}

.nav-icon-header{
max-width:780px;
margin:0 auto 28px;
text-align:center;
}

.nav-icon-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.12);
border:1px solid rgba(168,85,247,.26);
color:#d8b4fe;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-icon-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-icon-title span{
background:linear-gradient(90deg,#c084fc,#22d3ee,#f0abfc) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-icon-text{
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:620px;
}

.nav-icon-shell{
max-width:940px;
margin:0 auto;
padding:18px;
border-radius:28px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 26px 80px rgba(0,0,0,.38);
}

.nav-icon-menu{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.nav-icon-menu a{
position:relative;
min-height:116px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 10px;
border-radius:22px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease,box-shadow .22s ease;
overflow:hidden;
}

.nav-icon-menu a::before{
content:"";
position:absolute;
inset:auto auto -40px -40px;
width:90px;
height:90px;
border-radius:999px;
background:rgba(34,211,238,.10);
opacity:0;
transition:opacity .22s ease;
}

.nav-icon-menu a:hover,
.nav-icon-menu a:focus{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.14);
color:#ffffff;
outline:none;
transform:translateY(-3px);
}

.nav-icon-menu a:hover::before,
.nav-icon-menu a:focus::before{
opacity:1;
}

.nav-icon-menu a.is-active{
background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(34,211,238,.18));
border-color:rgba(168,85,247,.30);
color:#ffffff;
box-shadow:0 18px 45px rgba(168,85,247,.16);
}

.nav-icon-symbol{
position:relative;
z-index:2;
width:46px;
height:46px;
border-radius:17px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.11);
font-size:22px;
line-height:1;
}

.nav-icon-menu a.is-active .nav-icon-symbol{
background:linear-gradient(135deg,#a855f7,#22d3ee);
border-color:transparent;
box-shadow:0 14px 34px rgba(34,211,238,.22);
}

.nav-icon-label{
position:relative;
z-index:2;
font-size:13px;
font-weight:900;
line-height:1.2;
text-align:center;
}

.nav-icon-panel{
margin-top:18px;
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.nav-icon-card{
min-height:120px;
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.nav-icon-card strong{
display:block;
margin-bottom:8px;
font-size:15px;
line-height:1.2;
color:#ffffff;
}

.nav-icon-card p{
margin:0;
font-size:14px;
line-height:1.65;
color:#94a3b8;
}

.nav-icon-card:nth-child(1){
background:rgba(168,85,247,.10);
border-color:rgba(168,85,247,.18);
}

.nav-icon-card:nth-child(2){
background:rgba(34,211,238,.09);
border-color:rgba(34,211,238,.17);
}

@media (max-width: 900px){
.nav-icon-demo{
padding:20px;
}

.nav-icon-preview{
padding:28px 22px;
}

.nav-icon-header{
text-align:left;
}

.nav-icon-title{
font-size:34px;
}

.nav-icon-menu{
grid-template-columns:repeat(3,1fr);
}

.nav-icon-panel{
grid-template-columns:1fr;
}
}

@media (max-width: 560px){
.nav-icon-preview{
padding:24px 18px;
}

.nav-icon-title{
font-size:31px;
}

.nav-icon-menu{
grid-template-columns:repeat(2,1fr);
}

.nav-icon-menu a{
min-height:104px;
}

.nav-icon-symbol{
width:42px;
height:42px;
border-radius:15px;
font-size:20px;
}
}

This icon navigation menu is useful when users need to recognize sections quickly. The icons make the interface easier to scan, while the text labels keep the menu clear and accessible.

Use this pattern for dashboards, mobile apps, SaaS interfaces, admin panels, portfolio sections, account areas, compact website headers, and app-style navigation blocks.

20. Breadcrumb Navigation

Breadcrumb navigation shows users where they are inside a website structure. It is especially useful for blogs, documentation websites, product pages, ecommerce categories, large websites, and WordPress sites with many nested pages.

This example creates a modern breadcrumb navigation bar with a homepage link, separators, category links, and the current page. Breadcrumbs improve orientation, make deeper pages easier to understand, and can support a stronger internal linking structure.

  • Perfect for blogs, ecommerce stores, documentation, and WordPress websites
  • Shows the current page location clearly
  • Uses simple HTML and CSS without JavaScript
  • Improves navigation on deeper website structures
  • Works well above articles, products, categories, and service pages
Breadcrumb Navigation

Show users where they are in the website structure

Breadcrumb navigation helps users understand the page hierarchy and move back to broader sections like the homepage, blog, category page, or parent product category.

Clear page hierarchy

Breadcrumbs are especially useful for deeper content structures. They help users understand the relationship between the current page, its category, and the main website sections.

HTML

<div class="nav-breadcrumb-preview">

  <div class="nav-breadcrumb-page">

    <nav class="nav-breadcrumb-bar" aria-label="Breadcrumb navigation">

      <a href="#">
        <span class="nav-breadcrumb-home">⌂</span>
        Home
      </a>

      <span class="nav-breadcrumb-separator">›</span>

      <a href="#">Blog</a>

      <span class="nav-breadcrumb-separator">›</span>

      <a href="#">CSS</a>

      <span class="nav-breadcrumb-separator">›</span>

      <span class="nav-breadcrumb-current" aria-current="page">Navigation Menus</span>

    </nav>

    <div class="nav-breadcrumb-kicker">Breadcrumb Navigation</div>

    <h3 class="nav-breadcrumb-title">
      Show users where they are in the <span>website structure</span>
    </h3>

    <p class="nav-breadcrumb-text">
      Breadcrumb navigation helps users understand the page hierarchy and move back to broader sections like the homepage, blog, category page, or parent product category.
    </p>

    <div class="nav-breadcrumb-content-grid">

      <div class="nav-breadcrumb-article-card">
        <h3>Clear page hierarchy</h3>
        <p>Breadcrumbs are especially useful for deeper content structures. They help users understand the relationship between the current page, its category, and the main website sections.</p>
      </div>

      <div class="nav-breadcrumb-structure">
        <div class="nav-breadcrumb-structure-row"></div>
        <div class="nav-breadcrumb-structure-row"></div>
        <div class="nav-breadcrumb-structure-row"></div>
      </div>

    </div>

  </div>

</div>

CSS

.nav-breadcrumb-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-breadcrumb-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(34,197,94,.16),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(168,85,247,.18),transparent 40%);
pointer-events:none;
}

.nav-breadcrumb-preview{
position:relative;
z-index:2;
min-height:420px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
padding:34px;
}

.nav-breadcrumb-page{
max-width:920px;
margin:0 auto;
}

.nav-breadcrumb-bar{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:9px;
margin:0 0 30px;
padding:12px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 50px rgba(0,0,0,.25);
width:max-content;
max-width:100%;
}

.nav-breadcrumb-bar a,
.nav-breadcrumb-current{
display:inline-flex;
align-items:center;
gap:7px;
min-height:34px;
padding:0 10px;
border-radius:999px;
font-size:13px;
font-weight:850;
line-height:1;
text-decoration:none;
white-space:nowrap;
}

.nav-breadcrumb-bar a{
color:#cbd5e1;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-breadcrumb-bar a:hover,
.nav-breadcrumb-bar a:focus{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-breadcrumb-current{
color:#67e8f9;
background:rgba(34,211,238,.10);
border:1px solid rgba(34,211,238,.20);
}

.nav-breadcrumb-home{
width:24px;
height:24px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:9px;
background:rgba(34,211,238,.12);
color:#67e8f9;
font-size:13px;
}

.nav-breadcrumb-separator{
display:inline-flex;
align-items:center;
justify-content:center;
color:#64748b;
font-size:14px;
font-weight:900;
}

.nav-breadcrumb-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.24);
color:#86efac;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-breadcrumb-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-breadcrumb-title span{
background:linear-gradient(90deg,#22d3ee,#22c55e,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-breadcrumb-text{
margin:0 0 26px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:650px;
}

.nav-breadcrumb-content-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:18px;
align-items:start;
}

.nav-breadcrumb-article-card{
padding:24px;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.30);
}

.nav-breadcrumb-article-card h3{
margin:0 0 12px;
font-size:26px;
line-height:1.16;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-breadcrumb-article-card p{
margin:0;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.nav-breadcrumb-structure{
display:grid;
gap:12px;
}

.nav-breadcrumb-structure-row{
min-height:58px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.nav-breadcrumb-structure-row::before{
content:"";
position:absolute;
left:16px;
top:16px;
width:48%;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.30);
}

.nav-breadcrumb-structure-row::after{
content:"";
position:absolute;
left:16px;
top:36px;
width:72%;
height:7px;
border-radius:999px;
background:rgba(148,163,184,.28);
}

.nav-breadcrumb-structure-row:nth-child(1){
background:rgba(34,211,238,.10);
border-color:rgba(34,211,238,.18);
}

.nav-breadcrumb-structure-row:nth-child(2){
margin-left:18px;
background:rgba(34,197,94,.09);
border-color:rgba(34,197,94,.16);
}

.nav-breadcrumb-structure-row:nth-child(3){
margin-left:36px;
background:rgba(168,85,247,.10);
border-color:rgba(168,85,247,.18);
}

@media (max-width: 820px){
.nav-breadcrumb-demo{
padding:20px;
}

.nav-breadcrumb-preview{
padding:28px 22px;
}

.nav-breadcrumb-title{
font-size:34px;
}

.nav-breadcrumb-bar{
width:100%;
border-radius:22px;
}

.nav-breadcrumb-content-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 520px){
.nav-breadcrumb-preview{
padding:24px 18px;
}

.nav-breadcrumb-title{
font-size:31px;
}

.nav-breadcrumb-bar{
gap:6px;
padding:10px;
}

.nav-breadcrumb-bar a,
.nav-breadcrumb-current{
font-size:12px;
padding:0 8px;
}
}

This breadcrumb navigation pattern is useful when users land on deeper pages from search engines, social links, or internal links. It gives them a quick way to understand the page hierarchy and move back to broader sections.

Use this pattern for WordPress blogs, WooCommerce product pages, category archives, documentation websites, learning platforms, resource libraries, and any large website with nested page structures.

21. Footer Navigation Menu

A footer navigation menu helps users find important links after they reach the bottom of a page. It usually includes company pages, product links, resources, legal pages, contact details, social links, and newsletter signup options.

This example creates a modern multi-column footer navigation with brand content, grouped link columns, a newsletter field, and a clean bottom bar. It is useful for business websites, blogs, SaaS websites, agencies, ecommerce stores, and WordPress themes.

  • Perfect for business websites, blogs, SaaS websites, and ecommerce stores
  • Groups important secondary links into clear footer columns
  • Includes newsletter signup and social navigation
  • Works without JavaScript
  • Stacks into a clean mobile layout on smaller screens
Footer Navigation Menu

Guide users at the bottom with organized footer links

This footer navigation menu groups important secondary links, resources, legal pages, newsletter signup, and social links into a clean multi-column layout.

HTML

<div class="nav-footer-preview">

  <div class="nav-footer-top-content">

    <div class="nav-footer-kicker">Footer Navigation Menu</div>

    <h3 class="nav-footer-title">
      Guide users at the bottom with <span>organized footer links</span>
    </h3>

    <p class="nav-footer-text">
      This footer navigation menu groups important secondary links, resources, legal pages, newsletter signup, and social links into a clean multi-column layout.
    </p>

  </div>

  <footer class="nav-footer" aria-label="Website footer navigation">

    <div class="nav-footer-grid">

      <div class="nav-footer-brand">

        <a href="#" class="nav-footer-logo">
          <span class="nav-footer-logo-mark">F</span>
          <span>FooterNav</span>
        </a>

        <p>Build cleaner website navigation systems with reusable HTML, CSS, and JavaScript patterns for modern web projects.</p>

        <div class="nav-footer-social" aria-label="Social navigation">
          <a href="#">X</a>
          <a href="#">in</a>
          <a href="#">Y</a>
        </div>

      </div>

      <div class="nav-footer-column">

        <h3>Product</h3>

        <ul class="nav-footer-list">
          <li><a href="#">Features</a></li>
          <li><a href="#">Templates</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Integrations</a></li>
        </ul>

      </div>

      <div class="nav-footer-column">

        <h3>Resources</h3>

        <ul class="nav-footer-list">
          <li><a href="#">Blog</a></li>
          <li><a href="#">Documentation</a></li>
          <li><a href="#">CSS Guides</a></li>
          <li><a href="#">Examples</a></li>
        </ul>

      </div>

      <div class="nav-footer-column">

        <h3>Company</h3>

        <ul class="nav-footer-list">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Support</a></li>
        </ul>

      </div>

      <div class="nav-footer-newsletter">

        <h3>Newsletter</h3>

        <p>Get new UI examples and CSS navigation patterns directly in your inbox.</p>

        <form class="nav-footer-form">
          <input class="nav-footer-input" type="email" placeholder="Email address" aria-label="Email address">
          <button class="nav-footer-button" type="submit">Join</button>
        </form>

      </div>

    </div>

    <div class="nav-footer-bottom">

      <p class="nav-footer-copy">© 2026 FooterNav. All rights reserved.</p>

      <div class="nav-footer-bottom-links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms</a>
        <a href="#">Cookies</a>
      </div>

    </div>

  </footer>

</div>

CSS

.nav-footer-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-footer-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(34,197,94,.14),transparent 40%);
pointer-events:none;
}

.nav-footer-preview{
position:relative;
z-index:2;
min-height:460px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
display:flex;
flex-direction:column;
justify-content:flex-end;
}

.nav-footer-top-content{
padding:40px 34px 28px;
}

.nav-footer-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.12);
border:1px solid rgba(168,85,247,.26);
color:#d8b4fe;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-footer-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
max-width:760px;
}

.nav-footer-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-footer-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:650px;
}

.nav-footer{
margin:0 18px 18px;
padding:28px;
border-radius:28px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 26px 80px rgba(0,0,0,.38);
}

.nav-footer-grid{
display:grid;
grid-template-columns:1.4fr .8fr .8fr .8fr 1.2fr;
gap:24px;
align-items:start;
}

.nav-footer-brand{
display:grid;
gap:14px;
}

.nav-footer-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:19px;
line-height:1;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff;
text-decoration:none;
}

.nav-footer-logo-mark{
width:42px;
height:42px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#a855f7);
box-shadow:0 14px 34px rgba(34,211,238,.22);
font-size:17px;
font-weight:950;
color:#ffffff;
}

.nav-footer-brand p{
margin:0;
font-size:14px;
line-height:1.7;
color:#cbd5e1;
max-width:310px;
}

.nav-footer-social{
display:flex;
align-items:center;
gap:8px;
}

.nav-footer-social a{
width:38px;
height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#ffffff;
font-size:14px;
font-weight:900;
text-decoration:none;
transition:background .22s ease,transform .22s ease,border-color .22s ease;
}

.nav-footer-social a:hover,
.nav-footer-social a:focus{
background:rgba(255,255,255,.11);
border-color:rgba(34,211,238,.24);
outline:none;
transform:translateY(-2px);
}

.nav-footer-column h3,
.nav-footer-newsletter h3{
margin:0 0 14px;
font-size:13px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
color:#67e8f9 !important;
-webkit-text-fill-color:#67e8f9 !important;
}

.nav-footer-list{
display:grid;
gap:9px;
margin:0;
padding:0;
list-style:none;
}

.nav-footer-list a{
display:inline-flex;
align-items:center;
width:max-content;
max-width:100%;
font-size:14px;
font-weight:800;
line-height:1.4;
color:#cbd5e1;
text-decoration:none;
transition:color .22s ease,transform .22s ease;
}

.nav-footer-list a:hover,
.nav-footer-list a:focus{
color:#ffffff;
outline:none;
transform:translateX(2px);
}

.nav-footer-newsletter p{
margin:0 0 14px;
font-size:14px;
line-height:1.65;
color:#cbd5e1;
}

.nav-footer-form{
display:flex;
gap:8px;
padding:6px;
border-radius:18px;
background:rgba(2,6,23,.48);
border:1px solid rgba(255,255,255,.10);
}

.nav-footer-input{
min-width:0;
flex:1;
height:42px;
border:0;
outline:none;
background:transparent;
color:#ffffff;
font-size:14px;
padding:0 10px;
}

.nav-footer-input::placeholder{
color:#64748b;
}

.nav-footer-button{
height:42px;
border:0;
border-radius:14px;
padding:0 14px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#020617;
font-size:14px;
font-weight:950;
cursor:pointer;
white-space:nowrap;
}

.nav-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:26px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.09);
}

.nav-footer-copy{
margin:0;
font-size:13px;
line-height:1.5;
color:#94a3b8;
}

.nav-footer-bottom-links{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:14px;
}

.nav-footer-bottom-links a{
font-size:13px;
font-weight:800;
color:#94a3b8;
text-decoration:none;
transition:color .22s ease;
}

.nav-footer-bottom-links a:hover,
.nav-footer-bottom-links a:focus{
color:#ffffff;
outline:none;
}

@media (max-width: 980px){
.nav-footer-demo{
padding:20px;
}

.nav-footer-top-content{
padding:34px 22px 24px;
}

.nav-footer-title{
font-size:34px;
}

.nav-footer{
margin:0 14px 14px;
padding:22px;
}

.nav-footer-grid{
grid-template-columns:1fr 1fr;
}

.nav-footer-brand,
.nav-footer-newsletter{
grid-column:1 / -1;
}
}

@media (max-width: 620px){
.nav-footer-top-content{
padding:28px 18px 22px;
}

.nav-footer-title{
font-size:31px;
}

.nav-footer{
padding:18px;
}

.nav-footer-grid{
grid-template-columns:1fr;
gap:22px;
}

.nav-footer-form{
flex-direction:column;
}

.nav-footer-button{
width:100%;
}

.nav-footer-bottom{
align-items:flex-start;
flex-direction:column;
}
}

This footer navigation menu is useful because many users scroll to the bottom of a page when they cannot find a link in the main header. A structured footer gives them another clear path to important pages, resources, and contact options.

Use this pattern for business websites, blogs, SaaS websites, agencies, ecommerce stores, WordPress themes, product websites, and any site that needs organized secondary navigation at the bottom of the page.

22. Blog Category Navigation

A blog category navigation menu helps readers browse articles by topic, content type, or interest area. It is useful for blogs, magazines, tutorial websites, resource libraries, news websites, and SEO content hubs with many posts.

This example creates a modern blog category navigation block with rounded category buttons, post counts, an active state, and featured article cards. It works without JavaScript and can be used above a blog archive, inside a resources page, or before a list of related articles.

  • Perfect for blogs, resource libraries, magazines, and tutorial websites
  • Organizes posts by category or content topic
  • Includes category counts and active state styling
  • Works without JavaScript
  • Wraps cleanly on mobile screens
Blog Category Navigation

Help readers explore posts by topic and category

This blog category navigation menu makes content archives easier to scan by grouping posts into clear topic areas with active states and post counts.

Featured Guide

Modern CSS navigation patterns for better websites

Use category navigation to help readers move between related tutorials, guides, examples, and content clusters without forcing them to search manually.

Read Article
CSS menu examples Explore practical navigation snippets for modern websites.
JavaScript UI patterns Build interactive components with clean, reusable code.
WordPress theme sections Organize reusable blocks, menus, and frontend layouts.

HTML

<div class="nav-blogcat-preview">

  <div class="nav-blogcat-header">

    <div class="nav-blogcat-kicker">Blog Category Navigation</div>

    <h3 class="nav-blogcat-title">
      Help readers explore posts by <span>topic and category</span>
    </h3>

    <p class="nav-blogcat-text">
      This blog category navigation menu makes content archives easier to scan by grouping posts into clear topic areas with active states and post counts.
    </p>

  </div>

  <nav class="nav-blogcat-nav" aria-label="Blog category navigation">

    <ul class="nav-blogcat-list">
      <li><a href="#" class="is-active">All Posts <span class="nav-blogcat-count">42</span></a></li>
      <li><a href="#">CSS <span class="nav-blogcat-count">16</span></a></li>
      <li><a href="#">JavaScript <span class="nav-blogcat-count">9</span></a></li>
      <li><a href="#">UI Design <span class="nav-blogcat-count">11</span></a></li>
      <li><a href="#">WordPress <span class="nav-blogcat-count">6</span></a></li>
    </ul>

  </nav>

  <div class="nav-blogcat-grid">

    <article class="nav-blogcat-feature">

      <div class="nav-blogcat-feature-badge">Featured Guide</div>

      <h3>Modern CSS navigation patterns for better websites</h3>

      <p>Use category navigation to help readers move between related tutorials, guides, examples, and content clusters without forcing them to search manually.</p>

      <a href="#" class="nav-blogcat-read">Read Article</a>

    </article>

    <div class="nav-blogcat-sidebar">

      <article class="nav-blogcat-post">
        <strong>CSS menu examples</strong>
        <span>Explore practical navigation snippets for modern websites.</span>
      </article>

      <article class="nav-blogcat-post">
        <strong>JavaScript UI patterns</strong>
        <span>Build interactive components with clean, reusable code.</span>
      </article>

      <article class="nav-blogcat-post">
        <strong>WordPress theme sections</strong>
        <span>Organize reusable blocks, menus, and frontend layouts.</span>
      </article>

    </div>

  </div>

</div>

CSS

.nav-blogcat-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-blogcat-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(168,85,247,.18),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(34,197,94,.14),transparent 40%);
pointer-events:none;
}

.nav-blogcat-preview{
position:relative;
z-index:2;
min-height:470px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
padding:34px;
}

.nav-blogcat-header{
max-width:820px;
margin:0 auto 26px;
text-align:center;
}

.nav-blogcat-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.10);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-blogcat-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-blogcat-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-blogcat-text{
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:650px;
}

.nav-blogcat-nav{
max-width:980px;
margin:0 auto 24px;
padding:14px;
border-radius:26px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 22px 70px rgba(0,0,0,.30);
}

.nav-blogcat-list{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:9px;
margin:0;
padding:0;
list-style:none;
}

.nav-blogcat-list a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
padding:0 16px;
border-radius:999px;
color:#cbd5e1;
font-size:14px;
font-weight:900;
text-decoration:none;
border:1px solid transparent;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.nav-blogcat-list a:hover,
.nav-blogcat-list a:focus{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.12);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-blogcat-list a.is-active{
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#020617;
box-shadow:0 14px 34px rgba(34,211,238,.20);
}

.nav-blogcat-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
height:24px;
padding:0 7px;
border-radius:999px;
background:rgba(255,255,255,.10);
font-size:12px;
font-weight:950;
}

.nav-blogcat-list a.is-active .nav-blogcat-count{
background:rgba(2,6,23,.16);
}

.nav-blogcat-grid{
max-width:980px;
margin:0 auto;
display:grid;
grid-template-columns:1.15fr .85fr;
gap:18px;
}

.nav-blogcat-feature{
padding:24px;
border-radius:26px;
background:
linear-gradient(135deg,rgba(34,211,238,.14),rgba(168,85,247,.12)),
rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.30);
position:relative;
overflow:hidden;
}

.nav-blogcat-feature::before{
content:"";
position:absolute;
right:-60px;
top:-60px;
width:180px;
height:180px;
border-radius:999px;
background:rgba(34,211,238,.14);
}

.nav-blogcat-feature-badge{
position:relative;
z-index:2;
display:inline-flex;
padding:7px 10px;
border-radius:999px;
background:rgba(34,211,238,.12);
border:1px solid rgba(34,211,238,.22);
color:#67e8f9;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
margin-bottom:16px;
}

.nav-blogcat-feature h3{
position:relative;
z-index:2;
margin:0 0 12px;
font-size:30px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-blogcat-feature p{
position:relative;
z-index:2;
margin:0 0 18px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
max-width:560px;
}

.nav-blogcat-read{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 15px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#020617;
font-size:14px;
font-weight:950;
text-decoration:none;
}

.nav-blogcat-sidebar{
display:grid;
gap:12px;
}

.nav-blogcat-post{
min-height:100px;
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.nav-blogcat-post:nth-child(1){
background:rgba(168,85,247,.10);
border-color:rgba(168,85,247,.18);
}

.nav-blogcat-post:nth-child(2){
background:rgba(34,197,94,.09);
border-color:rgba(34,197,94,.16);
}

.nav-blogcat-post strong{
display:block;
margin-bottom:8px;
font-size:15px;
line-height:1.25;
color:#ffffff;
}

.nav-blogcat-post span{
display:block;
font-size:14px;
line-height:1.6;
color:#94a3b8;
}

@media (max-width: 860px){
.nav-blogcat-demo{
padding:20px;
}

.nav-blogcat-preview{
padding:28px 22px;
}

.nav-blogcat-header{
text-align:left;
}

.nav-blogcat-title{
font-size:34px;
}

.nav-blogcat-list{
justify-content:flex-start;
}

.nav-blogcat-list a{
width:calc(50% - 5px);
}

.nav-blogcat-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 520px){
.nav-blogcat-preview{
padding:24px 18px;
}

.nav-blogcat-title{
font-size:31px;
}

.nav-blogcat-list a{
width:100%;
}

.nav-blogcat-feature h3{
font-size:25px;
}
}

This blog category navigation pattern is useful when a website has many articles and readers need a faster way to explore topics. It also supports content hubs by making related categories more visible.

Use this pattern for WordPress blogs, tutorial websites, SEO content hubs, online magazines, documentation libraries, resource pages, and any website where articles are grouped by topic.

23. Portfolio Filter Navigation

A portfolio filter navigation menu helps users browse projects by type, industry, service, style, or technology. It is commonly used on agency websites, designer portfolios, developer portfolios, photography websites, case study pages, and creative studio websites.

This example uses JavaScript to filter portfolio cards based on the selected navigation button. The filter buttons include active states, category labels, and a responsive project grid. It is a practical interactive navigation pattern for showcasing work in a clean and scannable way.

  • Perfect for portfolios, agency websites, case studies, and creative studios
  • Filters project cards by category
  • Uses JavaScript for interactive filtering
  • Includes active button states and responsive card layout
  • Helps users quickly find relevant work examples
Portfolio Filter Navigation

Filter projects with a portfolio navigation menu

This portfolio filter navigation lets users browse work examples by category, making case studies and project galleries easier to explore.

Web Design

Agency Landing Page

A clean landing page layout for a modern digital agency.

Branding

Visual Identity System

A flexible brand style system for a startup website.

App UI

Mobile Dashboard

A compact app interface with navigation and analytics cards.

Web Design

Portfolio Website

A responsive showcase for creative work and case studies.

App UI

SaaS Product Panel

A dashboard-style interface for product teams and reports.

Branding

Campaign Design

A visual campaign concept for a product launch page.

HTML

<div class="nav-portfolio-preview" data-nav-portfolio>

  <div class="nav-portfolio-header">

    <div class="nav-portfolio-kicker">Portfolio Filter Navigation</div>

    <h3 class="nav-portfolio-title">
      Filter projects with a <span>portfolio navigation menu</span>
    </h3>

    <p class="nav-portfolio-text">
      This portfolio filter navigation lets users browse work examples by category, making case studies and project galleries easier to explore.
    </p>

  </div>

  <div class="nav-portfolio-filter" role="group" aria-label="Portfolio filter navigation">

    <button class="nav-portfolio-button is-active" type="button" data-filter="all">All Projects</button>
    <button class="nav-portfolio-button" type="button" data-filter="web">Web Design</button>
    <button class="nav-portfolio-button" type="button" data-filter="branding">Branding</button>
    <button class="nav-portfolio-button" type="button" data-filter="app">App UI</button>

  </div>

  <div class="nav-portfolio-grid">

    <article class="nav-portfolio-card" data-category="web">
      <span class="nav-portfolio-tag">Web Design</span>
      <h3>Agency Landing Page</h3>
      <p>A clean landing page layout for a modern digital agency.</p>
      <div class="nav-portfolio-card-line"></div>
    </article>

    <article class="nav-portfolio-card" data-category="branding">
      <span class="nav-portfolio-tag">Branding</span>
      <h3>Visual Identity System</h3>
      <p>A flexible brand style system for a startup website.</p>
      <div class="nav-portfolio-card-line"></div>
    </article>

    <article class="nav-portfolio-card" data-category="app">
      <span class="nav-portfolio-tag">App UI</span>
      <h3>Mobile Dashboard</h3>
      <p>A compact app interface with navigation and analytics cards.</p>
      <div class="nav-portfolio-card-line"></div>
    </article>

    <article class="nav-portfolio-card" data-category="web">
      <span class="nav-portfolio-tag">Web Design</span>
      <h3>Portfolio Website</h3>
      <p>A responsive showcase for creative work and case studies.</p>
      <div class="nav-portfolio-card-line"></div>
    </article>

    <article class="nav-portfolio-card" data-category="app">
      <span class="nav-portfolio-tag">App UI</span>
      <h3>SaaS Product Panel</h3>
      <p>A dashboard-style interface for product teams and reports.</p>
      <div class="nav-portfolio-card-line"></div>
    </article>

    <article class="nav-portfolio-card" data-category="branding">
      <span class="nav-portfolio-tag">Branding</span>
      <h3>Campaign Design</h3>
      <p>A visual campaign concept for a product launch page.</p>
      <div class="nav-portfolio-card-line"></div>
    </article>

  </div>

</div>

CSS

.nav-portfolio-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-portfolio-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(236,72,153,.20),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(168,85,247,.18),transparent 40%);
pointer-events:none;
}

.nav-portfolio-preview{
position:relative;
z-index:2;
min-height:520px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
padding:34px;
}

.nav-portfolio-header{
max-width:820px;
margin:0 auto 26px;
text-align:center;
}

.nav-portfolio-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(236,72,153,.10);
border:1px solid rgba(236,72,153,.24);
color:#f9a8d4;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-portfolio-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-portfolio-title span{
background:linear-gradient(90deg,#ec4899,#22d3ee,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-portfolio-text{
margin:0 auto;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:650px;
}

.nav-portfolio-filter{
max-width:980px;
margin:0 auto 24px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:9px;
padding:14px;
border-radius:26px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 22px 70px rgba(0,0,0,.30);
}

.nav-portfolio-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
padding:0 16px;
border-radius:999px;
border:1px solid transparent;
background:transparent;
color:#cbd5e1;
font-size:14px;
font-weight:900;
cursor:pointer;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.nav-portfolio-button:hover,
.nav-portfolio-button:focus{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.12);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-portfolio-button.is-active{
background:linear-gradient(135deg,#ec4899,#22d3ee);
color:#020617;
box-shadow:0 14px 34px rgba(236,72,153,.20);
}

.nav-portfolio-grid{
max-width:980px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.nav-portfolio-card{
min-height:185px;
padding:18px;
border-radius:24px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
box-shadow:0 20px 60px rgba(0,0,0,.26);
position:relative;
overflow:hidden;
transition:opacity .22s ease,transform .22s ease,border-color .22s ease;
}

.nav-portfolio-card.is-hidden{
display:none;
}

.nav-portfolio-card:hover{
transform:translateY(-4px);
border-color:rgba(34,211,238,.22);
}

.nav-portfolio-card::before{
content:"";
position:absolute;
right:-44px;
top:-44px;
width:130px;
height:130px;
border-radius:999px;
background:rgba(34,211,238,.12);
}

.nav-portfolio-card[data-category="web"]{
background:rgba(34,211,238,.08);
border-color:rgba(34,211,238,.14);
}

.nav-portfolio-card[data-category="branding"]{
background:rgba(236,72,153,.08);
border-color:rgba(236,72,153,.14);
}

.nav-portfolio-card[data-category="app"]{
background:rgba(168,85,247,.09);
border-color:rgba(168,85,247,.16);
}

.nav-portfolio-tag{
position:relative;
z-index:2;
display:inline-flex;
margin-bottom:28px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:12px;
font-weight:950;
letter-spacing:.06em;
text-transform:uppercase;
}

.nav-portfolio-card h3{
position:relative;
z-index:2;
margin:0 0 10px;
font-size:20px;
line-height:1.18;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-portfolio-card p{
position:relative;
z-index:2;
margin:0;
font-size:14px;
line-height:1.65;
color:#cbd5e1;
}

.nav-portfolio-card-line{
position:absolute;
left:18px;
right:18px;
bottom:18px;
height:9px;
border-radius:999px;
background:linear-gradient(90deg,#ec4899,#22d3ee,#a78bfa);
opacity:.72;
}

@media (max-width: 860px){
.nav-portfolio-demo{
padding:20px;
}

.nav-portfolio-preview{
padding:28px 22px;
}

.nav-portfolio-header{
text-align:left;
}

.nav-portfolio-title{
font-size:34px;
}

.nav-portfolio-filter{
justify-content:flex-start;
}

.nav-portfolio-button{
width:calc(50% - 5px);
}

.nav-portfolio-grid{
grid-template-columns:1fr 1fr;
}
}

@media (max-width: 560px){
.nav-portfolio-preview{
padding:24px 18px;
}

.nav-portfolio-title{
font-size:31px;
}

.nav-portfolio-button{
width:100%;
}

.nav-portfolio-grid{
grid-template-columns:1fr;
}

.nav-portfolio-card{
min-height:160px;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[data-nav-portfolio]").forEach(function (portfolio) {
    const buttons = portfolio.querySelectorAll("[data-filter]");
    const cards = portfolio.querySelectorAll(".nav-portfolio-card");

    buttons.forEach(function (button) {
      button.addEventListener("click", function () {
        const filter = button.getAttribute("data-filter");

        buttons.forEach(function (item) {
          item.classList.remove("is-active");
        });

        button.classList.add("is-active");

        cards.forEach(function (card) {
          const category = card.getAttribute("data-category");
          const shouldShow = filter === "all" || category === filter;

          card.classList.toggle("is-hidden", !shouldShow);
        });
      });
    });
  });
});

This portfolio filter navigation pattern is useful when users want to browse work examples by category instead of viewing every project at once. It improves scanning and helps visitors find the most relevant case studies faster.

Use this pattern for agency portfolios, designer websites, developer portfolios, photography galleries, case study pages, creative studios, and project showcase sections.

24. CTA Navigation Bar

A CTA navigation bar is designed to guide users toward one clear action, such as starting a free trial, booking a call, viewing pricing, downloading a resource, or contacting sales. It works especially well for landing pages, SaaS websites, service websites, startup pages, and conversion-focused homepages.

This example uses a clean horizontal navigation layout with a strong call-to-action button, secondary text link, active menu state, and a conversion-focused hero section. The CTA button is visually stronger than the regular menu links so users can quickly understand the main next step.

  • Perfect for SaaS websites, landing pages, startups, and service websites
  • Highlights one main conversion action
  • Includes regular navigation links and a strong CTA button
  • Works without JavaScript
  • Stacks cleanly on smaller screens
Sign In Start Free
CTA Navigation Bar

Guide visitors toward one clear next step

This CTA navigation bar balances standard page links with a strong conversion button, making the main action easy to notice without overwhelming the header.

Start Free Trial View Demo

HTML

<div class="nav-cta-preview">

  <header class="nav-cta-header">

    <a href="#" class="nav-cta-logo">
      <span class="nav-cta-logo-mark">C</span>
      <span>ConvertNav</span>
    </a>

    <nav aria-label="CTA navigation example">

      <ul class="nav-cta-menu">
        <li><a href="#" class="is-active">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Resources</a></li>
      </ul>

    </nav>

    <div class="nav-cta-actions">
      <a href="#" class="nav-cta-secondary">Sign In</a>
      <a href="#" class="nav-cta-button">Start Free</a>
    </div>

  </header>

  <section class="nav-cta-hero">

    <div class="nav-cta-content">

      <div class="nav-cta-kicker">CTA Navigation Bar</div>

      <h3 class="nav-cta-title">
        Guide visitors toward one <span>clear next step</span>
      </h3>

      <p class="nav-cta-text">
        This CTA navigation bar balances standard page links with a strong conversion button, making the main action easy to notice without overwhelming the header.
      </p>

      <div class="nav-cta-hero-actions">
        <a href="#" class="nav-cta-hero-primary">Start Free Trial</a>
        <a href="#" class="nav-cta-hero-secondary">View Demo</a>
      </div>

    </div>

    <div class="nav-cta-visual">

      <div class="nav-cta-card">

        <div class="nav-cta-card-top">
          <div class="nav-cta-card-dots">
            <span class="nav-cta-card-dot"></span>
            <span class="nav-cta-card-dot"></span>
            <span class="nav-cta-card-dot"></span>
          </div>
          <div class="nav-cta-card-pill"></div>
        </div>

        <div class="nav-cta-ui">
          <div class="nav-cta-ui-main"></div>
          <div class="nav-cta-ui-grid">
            <div class="nav-cta-ui-box"></div>
            <div class="nav-cta-ui-box"></div>
          </div>
        </div>

      </div>

    </div>

  </section>

</div>

CSS

.nav-cta-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-cta-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(34,197,94,.17),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(168,85,247,.18),transparent 40%);
pointer-events:none;
}

.nav-cta-preview{
position:relative;
z-index:2;
min-height:460px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
}

.nav-cta-header{
position:relative;
z-index:5;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.82);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-cta-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}

.nav-cta-logo-mark{
width:38px;
height:38px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#22c55e);
box-shadow:0 14px 34px rgba(34,211,238,.22);
font-size:16px;
font-weight:950;
color:#020617;
}

.nav-cta-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-cta-menu a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-cta-menu a:hover,
.nav-cta-menu a:focus{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-cta-menu a.is-active{
background:rgba(34,211,238,.12);
color:#67e8f9;
}

.nav-cta-actions{
display:flex;
align-items:center;
gap:10px;
}

.nav-cta-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 14px;
border-radius:999px;
color:#cbd5e1;
font-size:14px;
font-weight:900;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
white-space:nowrap;
}

.nav-cta-secondary:hover,
.nav-cta-secondary:focus{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-cta-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 18px;
border-radius:999px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
font-size:14px;
font-weight:950;
text-decoration:none;
box-shadow:0 16px 38px rgba(34,211,238,.24);
transition:transform .22s ease,box-shadow .22s ease;
white-space:nowrap;
}

.nav-cta-button:hover,
.nav-cta-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 48px rgba(34,197,94,.26);
outline:none;
}

.nav-cta-hero{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);
gap:34px;
align-items:center;
padding:58px 34px 44px;
}

.nav-cta-content{
max-width:600px;
}

.nav-cta-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.24);
color:#86efac;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-cta-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,58px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-cta-title span{
background:linear-gradient(90deg,#22c55e,#22d3ee,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-cta-text{
margin:0 0 24px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:540px;
}

.nav-cta-hero-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
}

.nav-cta-hero-primary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 20px;
border-radius:999px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
font-size:15px;
font-weight:950;
text-decoration:none;
box-shadow:0 18px 44px rgba(34,211,238,.24);
}

.nav-cta-hero-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 18px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.11);
color:#ffffff;
font-size:15px;
font-weight:900;
text-decoration:none;
}

.nav-cta-visual{
display:flex;
align-items:center;
justify-content:center;
min-height:260px;
}

.nav-cta-card{
width:min(100%,390px);
padding:18px;
border-radius:28px;
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.13);
box-shadow:0 28px 80px rgba(0,0,0,.42);
backdrop-filter:blur(14px);
}

.nav-cta-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}

.nav-cta-card-dots{
display:flex;
gap:7px;
}

.nav-cta-card-dot{
width:10px;
height:10px;
border-radius:999px;
background:#64748b;
}

.nav-cta-card-dot:nth-child(1){background:#ef4444;}
.nav-cta-card-dot:nth-child(2){background:#f59e0b;}
.nav-cta-card-dot:nth-child(3){background:#22c55e;}

.nav-cta-card-pill{
width:42%;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.24);
}

.nav-cta-ui{
display:grid;
gap:12px;
}

.nav-cta-ui-main{
height:118px;
border-radius:22px;
background:
linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,211,238,.18)),
rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.11);
position:relative;
overflow:hidden;
}

.nav-cta-ui-main::before{
content:"";
position:absolute;
left:18px;
top:18px;
width:52%;
height:12px;
border-radius:999px;
background:rgba(255,255,255,.32);
}

.nav-cta-ui-main::after{
content:"";
position:absolute;
left:18px;
bottom:18px;
width:120px;
height:34px;
border-radius:999px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
box-shadow:0 14px 34px rgba(34,211,238,.20);
}

.nav-cta-ui-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.nav-cta-ui-box{
height:78px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.nav-cta-ui-box::before{
content:"";
position:absolute;
left:14px;
top:16px;
width:54%;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.30);
}

.nav-cta-ui-box::after{
content:"";
position:absolute;
left:14px;
top:38px;
width:76%;
height:7px;
border-radius:999px;
background:rgba(148,163,184,.28);
}

@media (max-width: 880px){
.nav-cta-demo{
padding:20px;
}

.nav-cta-header{
align-items:flex-start;
flex-direction:column;
padding:18px;
gap:16px;
}

.nav-cta-menu{
width:100%;
justify-content:flex-start;
overflow-x:auto;
padding-bottom:4px;
}

.nav-cta-menu a{
white-space:nowrap;
}

.nav-cta-actions{
width:100%;
}

.nav-cta-secondary,
.nav-cta-button{
flex:1;
}

.nav-cta-hero{
grid-template-columns:1fr;
padding:42px 22px 30px;
gap:30px;
}

.nav-cta-title{
font-size:34px;
}

.nav-cta-visual{
min-height:240px;
}
}

@media (max-width: 520px){
.nav-cta-title{
font-size:31px;
}

.nav-cta-hero{
padding:34px 18px 24px;
}

.nav-cta-actions,
.nav-cta-hero-actions{
flex-direction:column;
align-items:stretch;
}

.nav-cta-secondary,
.nav-cta-button,
.nav-cta-hero-primary,
.nav-cta-hero-secondary{
width:100%;
}
}

This CTA navigation bar is useful when the header needs to support conversions. The regular menu links help users explore the website, while the highlighted CTA button clearly shows the main action.

Use this pattern for SaaS websites, startup landing pages, service websites, pricing pages, lead generation pages, product websites, and conversion-focused homepages.

25. Complete Responsive Website Header

A complete responsive website header combines the most important navigation features into one practical layout: logo, desktop navigation links, dropdown menu, call-to-action button, mobile hamburger toggle, and a responsive mobile menu.

This final example brings together several patterns from this guide. It uses JavaScript to toggle the mobile menu, CSS for the desktop dropdown, responsive media queries for smaller screens, and clear active, hover, and focus states for better usability.

  • Perfect for real business websites, WordPress themes, SaaS pages, and landing pages
  • Combines desktop navbar, dropdown menu, CTA button, and mobile menu
  • Uses JavaScript for the mobile hamburger toggle
  • Uses CSS hover and focus behavior for the desktop dropdown
  • Provides a strong reusable starting point for a full website header
Modern responsive website header example
Docs Support Contact
Get Started
Complete Responsive Header

Build a full website header with navigation, dropdowns and mobile menu

This complete responsive website header combines a desktop navbar, dropdown menu, CTA button, mobile hamburger menu, and responsive layout into one reusable pattern.

Start Building View Components

HTML

<div class="nav-complete-preview">

  <div class="nav-complete-topbar">

    <span>Modern responsive website header example</span>

    <div class="nav-complete-toplinks">
      <a href="#">Docs</a>
      <a href="#">Support</a>
      <a href="#">Contact</a>
    </div>

  </div>

  <header class="nav-complete-header" data-nav-complete-header>

    <a href="#" class="nav-complete-logo">
      <span class="nav-complete-logo-mark">R</span>
      <span>ResponsivePro</span>
    </a>

    <nav aria-label="Complete responsive navigation">

      <ul class="nav-complete-menu">

        <li><a href="#" class="is-active">Home</a></li>

        <li class="nav-complete-item">

          <a href="#">Services ▾</a>

          <div class="nav-complete-dropdown">
            <a href="#">
              <strong>Web Design</strong>
              <span>Modern landing pages and websites</span>
            </a>

            <a href="#">
              <strong>Development</strong>
              <span>Clean frontend code and components</span>
            </a>

            <a href="#">
              <strong>SEO Content</strong>
              <span>Better structure for organic traffic</span>
            </a>
          </div>

        </li>

        <li><a href="#">Work</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Blog</a></li>

      </ul>

    </nav>

    <div class="nav-complete-actions">

      <a href="#" class="nav-complete-login">Login</a>

      <a href="#" class="nav-complete-cta">Get Started</a>

      <button class="nav-complete-toggle" type="button" aria-label="Toggle navigation menu" aria-expanded="false" data-nav-complete-toggle>
        <span></span>
        <span></span>
        <span></span>
      </button>

    </div>

  </header>

  <section class="nav-complete-hero">

    <div class="nav-complete-content">

      <div class="nav-complete-kicker">Complete Responsive Header</div>

      <h3 class="nav-complete-title">
        Build a full website header with <span>navigation, dropdowns and mobile menu</span>
      </h3>

      <p class="nav-complete-text">
        This complete responsive website header combines a desktop navbar, dropdown menu, CTA button, mobile hamburger menu, and responsive layout into one reusable pattern.
      </p>

      <div class="nav-complete-hero-actions">
        <a href="#" class="nav-complete-primary">Start Building</a>
        <a href="#" class="nav-complete-secondary">View Components</a>
      </div>

    </div>

    <div class="nav-complete-visual">

      <div class="nav-complete-browser">

        <div class="nav-complete-browser-top">
          <div class="nav-complete-dots">
            <span class="nav-complete-dot"></span>
            <span class="nav-complete-dot"></span>
            <span class="nav-complete-dot"></span>
          </div>
          <div class="nav-complete-url"></div>
        </div>

        <div class="nav-complete-ui">
          <div class="nav-complete-ui-hero"></div>
          <div class="nav-complete-ui-card"></div>
          <div class="nav-complete-ui-card"></div>
        </div>

      </div>

    </div>

  </section>

</div>

CSS

.nav-complete-demo{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.nav-complete-demo::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 20%,rgba(34,211,238,.22),transparent 34%),
radial-gradient(circle at 82% 18%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(34,197,94,.14),transparent 40%);
pointer-events:none;
}

.nav-complete-preview{
position:relative;
z-index:2;
min-height:500px;
border-radius:24px;
overflow:visible;
background:
linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.36);
}

.nav-complete-topbar{
position:relative;
z-index:40;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:10px 22px;
background:rgba(2,6,23,.66);
border-bottom:1px solid rgba(255,255,255,.07);
font-size:13px;
font-weight:800;
color:#94a3b8;
}

.nav-complete-topbar a{
color:#cbd5e1;
text-decoration:none;
transition:color .22s ease;
}

.nav-complete-topbar a:hover,
.nav-complete-topbar a:focus{
color:#ffffff;
outline:none;
}

.nav-complete-toplinks{
display:flex;
align-items:center;
gap:14px;
}

.nav-complete-header{
position:relative;
z-index:45;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px;
background:rgba(15,23,42,.84);
border-bottom:1px solid rgba(255,255,255,.09);
backdrop-filter:blur(16px);
}

.nav-complete-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}

.nav-complete-logo-mark{
width:40px;
height:40px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#a855f7);
box-shadow:0 14px 34px rgba(34,211,238,.22);
font-size:16px;
font-weight:950;
color:#ffffff;
}

.nav-complete-menu{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
list-style:none;
}

.nav-complete-item{
position:relative;
}

.nav-complete-menu > li > a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:40px;
padding:0 13px;
border-radius:999px;
font-size:14px;
font-weight:850;
color:#cbd5e1;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease;
}

.nav-complete-menu > li > a:hover,
.nav-complete-menu > li > a:focus,
.nav-complete-item:hover > a,
.nav-complete-item:focus-within > a{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
transform:translateY(-1px);
}

.nav-complete-menu > li > a.is-active{
background:rgba(34,211,238,.12);
color:#67e8f9;
}

.nav-complete-dropdown{
position:absolute;
left:0;
top:calc(100% + 12px);
width:280px;
padding:10px;
border-radius:18px;
background:rgba(15,23,42,.98);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.46);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
backdrop-filter:blur(18px);
}

.nav-complete-item:hover .nav-complete-dropdown,
.nav-complete-item:focus-within .nav-complete-dropdown{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-complete-dropdown a{
display:grid;
gap:4px;
padding:12px 13px;
border-radius:14px;
color:#e2e8f0;
text-decoration:none;
transition:background .22s ease,transform .22s ease;
}

.nav-complete-dropdown a:hover,
.nav-complete-dropdown a:focus{
background:rgba(255,255,255,.07);
outline:none;
transform:translateX(2px);
}

.nav-complete-dropdown strong{
font-size:14px;
line-height:1.25;
color:#ffffff;
}

.nav-complete-dropdown span{
font-size:13px;
line-height:1.45;
color:#94a3b8;
}

.nav-complete-actions{
display:flex;
align-items:center;
gap:10px;
}

.nav-complete-login{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 14px;
border-radius:999px;
color:#cbd5e1;
font-size:14px;
font-weight:900;
text-decoration:none;
transition:background .22s ease,color .22s ease;
white-space:nowrap;
}

.nav-complete-login:hover,
.nav-complete-login:focus{
background:rgba(255,255,255,.08);
color:#ffffff;
outline:none;
}

.nav-complete-cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 18px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#020617;
font-size:14px;
font-weight:950;
text-decoration:none;
box-shadow:0 16px 38px rgba(34,211,238,.24);
transition:transform .22s ease,box-shadow .22s ease;
white-space:nowrap;
}

.nav-complete-cta:hover,
.nav-complete-cta:focus{
transform:translateY(-2px);
box-shadow:0 22px 48px rgba(168,85,247,.26);
outline:none;
}

.nav-complete-toggle{
display:none;
width:44px;
height:44px;
border:0;
border-radius:14px;
background:rgba(255,255,255,.08);
color:#ffffff;
cursor:pointer;
position:relative;
transition:background .22s ease;
}

.nav-complete-toggle:hover,
.nav-complete-toggle:focus{
background:rgba(255,255,255,.12);
outline:none;
}

.nav-complete-toggle span{
position:absolute;
left:12px;
right:12px;
height:2px;
border-radius:999px;
background:#ffffff;
transition:transform .25s ease,opacity .25s ease,top .25s ease;
}

.nav-complete-toggle span:nth-child(1){top:14px;}
.nav-complete-toggle span:nth-child(2){top:21px;}
.nav-complete-toggle span:nth-child(3){top:28px;}

.nav-complete-header.is-open .nav-complete-toggle span:nth-child(1){
top:21px;
transform:rotate(45deg);
}

.nav-complete-header.is-open .nav-complete-toggle span:nth-child(2){
opacity:0;
}

.nav-complete-header.is-open .nav-complete-toggle span:nth-child(3){
top:21px;
transform:rotate(-45deg);
}

.nav-complete-hero{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);
gap:34px;
align-items:center;
padding:62px 34px 44px;
}

.nav-complete-content{
max-width:610px;
}

.nav-complete-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.10);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:13px;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.nav-complete-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,58px);
line-height:1.04;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.nav-complete-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.nav-complete-text{
margin:0 0 24px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:550px;
}

.nav-complete-hero-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
}

.nav-complete-primary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 20px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#020617;
font-size:15px;
font-weight:950;
text-decoration:none;
box-shadow:0 18px 44px rgba(34,211,238,.24);
}

.nav-complete-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 18px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.11);
color:#ffffff;
font-size:15px;
font-weight:900;
text-decoration:none;
}

.nav-complete-visual{
display:flex;
align-items:center;
justify-content:center;
min-height:280px;
}

.nav-complete-browser{
width:min(100%,410px);
padding:18px;
border-radius:28px;
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.13);
box-shadow:0 28px 80px rgba(0,0,0,.42);
backdrop-filter:blur(14px);
}

.nav-complete-browser-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}

.nav-complete-dots{
display:flex;
gap:7px;
}

.nav-complete-dot{
width:10px;
height:10px;
border-radius:999px;
background:#64748b;
}

.nav-complete-dot:nth-child(1){background:#ef4444;}
.nav-complete-dot:nth-child(2){background:#f59e0b;}
.nav-complete-dot:nth-child(3){background:#22c55e;}

.nav-complete-url{
height:10px;
width:52%;
border-radius:999px;
background:rgba(255,255,255,.24);
}

.nav-complete-ui{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.nav-complete-ui-hero{
grid-column:1 / -1;
height:126px;
border-radius:22px;
background:
linear-gradient(135deg,rgba(34,211,238,.20),rgba(168,85,247,.18)),
rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.11);
position:relative;
overflow:hidden;
}

.nav-complete-ui-hero::before{
content:"";
position:absolute;
left:18px;
top:20px;
width:58%;
height:12px;
border-radius:999px;
background:rgba(255,255,255,.32);
}

.nav-complete-ui-hero::after{
content:"";
position:absolute;
left:18px;
bottom:20px;
width:128px;
height:34px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
box-shadow:0 14px 34px rgba(34,211,238,.20);
}

.nav-complete-ui-card{
height:86px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.nav-complete-ui-card::before{
content:"";
position:absolute;
left:14px;
top:16px;
width:54%;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.30);
}

.nav-complete-ui-card::after{
content:"";
position:absolute;
left:14px;
top:38px;
width:76%;
height:7px;
border-radius:999px;
background:rgba(148,163,184,.28);
}

@media (max-width: 960px){
.nav-complete-demo{
padding:20px;
}

.nav-complete-topbar{
display:none;
}

.nav-complete-header{
padding:16px;
}

.nav-complete-toggle{
display:block;
}

.nav-complete-actions .nav-complete-login,
.nav-complete-actions .nav-complete-cta{
display:none;
}

.nav-complete-menu{
position:absolute;
left:16px;
right:16px;
top:76px;
display:grid;
grid-template-columns:1fr;
gap:8px;
padding:14px;
border-radius:18px;
background:rgba(15,23,42,.98);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 22px 70px rgba(0,0,0,.50);
opacity:0;
visibility:hidden;
transform:translateY(-8px);
transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
}

.nav-complete-header.is-open .nav-complete-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-complete-menu > li > a{
justify-content:space-between;
width:100%;
min-height:46px;
padding:0 14px;
border-radius:13px;
background:rgba(255,255,255,.045);
}

.nav-complete-dropdown{
position:static;
width:100%;
margin-top:8px;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
background:rgba(255,255,255,.045);
border-radius:14px;
}

.nav-complete-hero{
grid-template-columns:1fr;
padding:42px 22px 30px;
gap:30px;
}

.nav-complete-title{
font-size:34px;
}

.nav-complete-visual{
min-height:250px;
}
}

@media (max-width: 520px){
.nav-complete-title{
font-size:31px;
}

.nav-complete-hero{
padding:34px 18px 24px;
}

.nav-complete-hero-actions{
flex-direction:column;
align-items:stretch;
}

.nav-complete-primary,
.nav-complete-secondary{
width:100%;
}

.nav-complete-browser{
border-radius:22px;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[data-nav-complete-header]").forEach(function (header) {
    const toggle = header.querySelector("[data-nav-complete-toggle]");

    if (!toggle) {
      return;
    }

    toggle.addEventListener("click", function () {
      const isOpen = header.classList.toggle("is-open");
      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
    });
  });
});

This complete responsive website header is the most practical full navigation pattern in this guide. It combines the features that many real websites need: desktop links, dropdown navigation, a clear CTA, and a mobile hamburger menu.

Use this pattern as a starting point for business websites, WordPress themes, SaaS websites, agency pages, landing pages, product websites, and any modern website that needs a complete responsive navigation system.

If you want to continue learning modern CSS after these navigation menu examples, it is useful to explore related UI patterns as well. Navigation is one of the most important parts of a website, but real projects also need buttons, cards, layouts, animations, hamburger icons, content sections, and responsive interface components.

The following guides can help you build more complete website sections using HTML, CSS, and JavaScript:

Want Modern CSS Navigation Menus on Your Website?

If you want to implement modern CSS navigation menus, responsive headers, dropdown menus, mega menus, mobile hamburger menus, sticky navigation, sidebar menus, or custom WordPress navigation layouts using HTML, CSS, JavaScript, Flexbox, and CSS Grid, we can design, build, and integrate them for your website.

View our website update service

Best Practices for Modern CSS Navigation Menus

Modern CSS navigation menus can make a website feel polished, professional, and easier to use, but they should always be built with clarity, responsiveness, accessibility, performance, and maintainability in mind. The goal is not to create a complicated menu only because CSS and JavaScript allow it. The goal is to help visitors understand the website structure and find the right page faster.

When building navigation with HTML, CSS, Flexbox, CSS Grid, media queries, and small JavaScript interactions, the best approach is to choose the simplest pattern that solves the real user problem. A small business website may only need a clean responsive navbar, while a large eCommerce store may need product category navigation, breadcrumbs, mega menus, search, and a stronger mobile menu system.

When implementing modern CSS navigation menus, follow these best practices:

  • use clear menu labels that users understand immediately
  • keep the main navbar focused on the most important pages
  • use dropdowns and mega menus only when they improve structure
  • make mobile navigation easy to open, read, tap, and close
  • use visible hover, active, and focus states for better usability
  • include a strong CTA button when the website has a clear conversion goal
  • use semantic HTML such as <nav>, lists, links, and real buttons
  • update aria-expanded when JavaScript opens or closes a mobile menu
  • avoid hover-only menus on touch devices
  • test the menu with real labels, long page names, translations, and mobile widths
  • use unique class names when placing demo code inside WordPress or Gutenberg
  • keep JavaScript small and focused only on interaction behavior

In professional web design, the best navigation menus are usually not the most complex ones. A clean structure, strong spacing, readable labels, visible states, and responsive behavior matter more than decorative complexity.

A good navigation menu should also support the content strategy of the website. Important pages should be easy to reach, related pages should be grouped logically, and secondary links should still be available through footer navigation, breadcrumbs, category menus, or contextual links.

Common Navigation Menu Mistakes

Even small navigation problems can make a website harder to use. A menu may look visually modern, but if users cannot understand it quickly, the design is not doing its job.

Here are the most common mistakes to avoid when building CSS navigation menus for modern websites.

Using Too Many Main Menu Links

A crowded header is one of the most common navigation problems. Too many links make the menu harder to scan, especially on laptops, tablets, and smaller desktop screens. If every page is treated as equally important, users may struggle to find the pages that actually matter.

Use the main navbar for primary pages only. Move secondary content into dropdowns, mega menus, footer navigation, category navigation, resource pages, or internal page sections.

Ignoring Mobile Navigation

A desktop navbar cannot simply be squeezed into a mobile screen. Mobile navigation needs larger tap targets, stacked links, clear spacing, and a predictable open and close interaction.

Always test the menu on real mobile widths. A menu that looks good in a desktop browser preview may still feel uncomfortable on a real phone.

Making Dropdown Menus Too Deep

Multi-level dropdown menus can be useful, but too many nested levels can quickly become difficult to use. Deep menus are especially problematic on mobile devices and for users who rely on keyboard navigation.

If a website needs many levels of navigation, consider using a mega menu, sidebar navigation, category landing pages, search, or a better content structure instead of forcing users through several hover levels.

Using Icon-Only Navigation Without Labels

Icons can make navigation easier to recognize, but icons alone are often unclear. A home icon may be obvious, but icons for services, resources, account pages, filters, dashboards, or settings can be interpreted differently by different users.

When possible, combine icons with short text labels. This improves clarity, accessibility, and overall usability.

Forgetting Keyboard Focus States

Navigation should not only work with a mouse. Keyboard users need visible focus states so they can understand which link or button is currently selected.

Do not remove outlines without replacing them with a visible custom focus style. A good focus state can use a border, background, underline, shadow, or another clear visual indicator.

Using Hover-Only Menus on Touch Devices

Hover behavior is useful on desktop, but mobile users do not have a true hover state. If a dropdown or mega menu depends only on hover, it may be difficult to access on phones and tablets.

For responsive navigation, provide a mobile version that works with tapping. This can be a hamburger menu, slide-in panel, fullscreen overlay, stacked menu, visible category list, or click-based dropdown.

Hiding Important Links Too Deep

Important pages should not be buried. If users need pricing, contact information, product categories, booking options, checkout access, or account links, those links should be easy to find.

Use visual hierarchy to make key actions stand out. A CTA button, cart link, account link, search button, or category menu can help users move faster through the website.

Not Testing Long Labels and Translations

Navigation can break when labels become longer. This often happens on multilingual websites, eCommerce sites, documentation menus, and WordPress themes where menu text may be edited later.

Test menus with longer labels, different languages, and realistic content before publishing. Flexible layouts with wrapping, horizontal scrolling, or stacked mobile states are usually safer than fixed-width menu structures.

Performance tip

Need a fast environment to test modern navigation menus?

To properly test responsive navigation menus, dropdowns, mega menus, mobile hamburger menus, JavaScript interactions, sticky headers, and WordPress frontend changes, you need fast hosting, staging environments, and reliable performance tools. This is especially important for modern WordPress websites, WooCommerce stores, and custom frontend projects.

Explore Kinsta Hosting

FAQ – Modern CSS Navigation Menus

What is a CSS navigation menu?

A CSS navigation menu is a website menu styled and arranged with CSS. It helps users move between pages, sections, categories, resources, products, services, account areas, or important actions. Common examples include navbars, dropdown menus, mega menus, mobile hamburger menus, breadcrumbs, sidebar menus, tabs, and footer navigation.

Can I build a navigation menu with only HTML and CSS?

Yes. Many navigation menus can be built with only HTML and CSS, including simple navbars, animated underline menus, sticky headers, breadcrumbs, footer menus, pill navigation, icon menus, and some desktop dropdown menus. JavaScript is mainly needed when the menu must open, close, toggle, filter content, or update active states dynamically.

When should I use JavaScript for navigation?

Use JavaScript when the navigation needs interactive behavior that CSS cannot handle cleanly. Examples include mobile hamburger menus, fullscreen overlay menus, slide-in side menus, collapsible sidebars, tab navigation, portfolio filters, and complete responsive headers with toggle buttons.

What is the best navigation menu for mobile websites?

The best mobile navigation pattern depends on the website. A hamburger menu works well for most websites with several pages. A bottom mobile navigation works well for app-like interfaces with a few primary actions. A slide-in side menu is useful for dashboards and content-heavy sites. A fullscreen overlay menu works well for creative websites and landing pages.

Are dropdown menus good for SEO?

Dropdown menus can support SEO when they create useful internal links to important pages. However, they should not be used to hide messy site structure. Important pages should still be easy for users to discover, and the navigation should be logical, readable, and accessible.

What is the difference between a dropdown menu and a mega menu?

A dropdown menu usually shows a small list of related links under one menu item. A mega menu is larger and can include multiple columns, categories, descriptions, icons, featured links, product groups, or promotional cards. Mega menus are better for large websites, marketplaces, eCommerce stores, and content-heavy platforms.

How many links should a main navigation menu have?

Most websites work best with a small number of main navigation links, usually around four to seven primary items. Larger websites can use dropdowns, mega menus, footer navigation, category pages, breadcrumbs, and search to support deeper structures without overcrowding the header.

Should a navigation bar be sticky?

A sticky navigation bar can be helpful when users need quick access to menu links while scrolling. It works well for long landing pages, blogs, documentation, SaaS websites, and eCommerce stores. However, it should not take up too much screen space on mobile devices.

What makes a navigation menu accessible?

An accessible navigation menu uses semantic HTML, readable labels, visible focus states, proper button elements for toggles, helpful ARIA attributes when needed, enough color contrast, and keyboard-friendly interaction. Mobile menus should also update states such as aria-expanded when they open or close.

Which CSS layout method is best for navigation menus?

Flexbox is usually the best choice for horizontal navbars, button groups, and simple menu alignment. CSS Grid is useful for mega menus, sidebar dashboards, footer navigation columns, and larger structured navigation layouts. Many modern menus use both: Grid for the larger structure and Flexbox for alignment inside smaller elements.

Conclusion: Build Navigation Menus That Are Clear, Responsive, and Useful

Modern CSS navigation menus are much more than a row of links. They shape how users understand a website, how quickly they find important pages, and how easily they move from one section to another.

A strong navigation system can include a responsive navbar, sticky header, dropdown menu, mega menu, eCommerce category menu, mobile hamburger menu, fullscreen overlay, slide-in side menu, sidebar navigation, bottom mobile navigation, breadcrumbs, tabs, footer links, category filters, and CTA buttons.

The right pattern depends on the website. A small portfolio may only need a minimal navbar and footer menu. A SaaS website may need a CTA navbar, dropdowns, documentation links, and a mobile hamburger menu. An online store may need search, product category navigation, a mega menu, breadcrumbs, and a strong mobile shopping experience.

The most important rule is simple: navigation should help users, not confuse them. Keep labels clear, group links logically, make mobile menus easy to use, add visible hover and focus states, and avoid hiding important pages too deeply.

The 25 examples in this guide give you practical starting points for building better website navigation. You can copy the HTML, CSS, and JavaScript, customize the colors and spacing, replace the demo labels with real links, and adapt each pattern to your own website, WordPress theme, landing page, SaaS interface, portfolio, blog, or eCommerce store.

When navigation is clear, responsive, and well structured, the whole website feels more professional. Users can move faster, content becomes easier to discover, and important actions become easier to complete.

]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-navigation-menus/feed/ 0 25 Modern CSS Layouts for Websites (Grid, Flexbox & Container Queries) – 2026 Guide https://veebilehed24.ee/en/blog/css-effects/modern-css-layouts-grid-flexbox-container-queries/ https://veebilehed24.ee/en/blog/css-effects/modern-css-layouts-grid-flexbox-container-queries/#respond Mon, 18 May 2026 06:22:14 +0000 https://veebilehed24.ee/?p=1235 Modern CSS layouts are the foundation of every professional website. Before animations, hover effects, buttons, cards, and micro-interactions can work well, the page structure itself needs to be clean, responsive, flexible, and easy to maintain.

In modern web design, layout is no longer just about placing boxes on a page. A good CSS layout controls how users read content, how sections adapt to different screen sizes, how product cards behave inside grids, how sidebars respond on mobile, and how entire landing pages feel across devices.

In 2026, developers have more powerful layout tools than ever before. CSS Grid makes it easier to build complex two-dimensional structures, Flexbox remains perfect for alignment and one-directional layouts, and container queries allow components to respond to the size of their own container instead of only the browser viewport.

This means modern websites can be built with fewer hacks, fewer unnecessary wrappers, less JavaScript, and more reusable layout patterns. Whether you are building a landing page, blog, SaaS website, portfolio, WordPress theme, eCommerce store, or agency website, strong layout patterns make the entire project easier to scale.

In this guide, we showcase 25 modern CSS layouts for websites. These layouts include hero sections, split screens, feature grids, product grids, pricing tables, sidebars, dashboards, bento grids, footers, CTA sections, container query cards, and more.

Each layout is designed as a practical pattern that can be used in real-world projects. Instead of showing full websites, the examples focus on clean, reusable layout structures that you can copy, customize, and combine inside your own pages.

All examples are built with HTML and CSS, with a strong focus on responsive design, modern spacing, reusable structure, and clean code.

Table of Contents

Kinsta hosting

What Are CSS Layouts?

CSS layouts define how content is arranged on a webpage. They control the position, size, spacing, alignment, order, and responsiveness of page elements such as headers, hero sections, cards, sidebars, product grids, blog previews, forms, and footers.

A layout is not only a visual structure. It directly affects how users move through a website, how easily they understand the content, and how professional the page feels. A beautiful button or animation cannot fix a page that has poor spacing, broken alignment, confusing hierarchy, or bad mobile behavior.

Modern CSS layouts are usually built using a combination of CSS Grid, Flexbox, responsive units, media queries, container queries, and fluid spacing. These tools allow developers to build layouts that adapt naturally across desktop, tablet, and mobile screens.

Common CSS layout patterns include:

  • Hero layouts with text and visual content
  • Responsive card grids
  • Blog and magazine layouts
  • Product grids for eCommerce websites
  • Pricing tables and comparison sections
  • Sidebar and sticky sidebar layouts
  • Dashboard and admin panel layouts
  • Footer and newsletter layouts
  • CTA sections and landing page blocks

The goal of a strong layout is to make content easy to scan, visually balanced, and responsive without requiring excessive custom code for every screen size.

Why Modern CSS Layouts Matter in 2026

Modern websites need to work across many different screen sizes, devices, browsers, and content types. A layout that looks good only on a large desktop screen is no longer enough. Users expect a website to feel polished on mobile, tablet, laptop, and wide desktop screens.

This is why modern CSS layouts are so important. They provide the structure behind the entire user experience. When a layout is well designed, the page feels easier to read, easier to navigate, and more trustworthy.

Good layouts also help developers work faster. Instead of rebuilding every section from scratch, you can create reusable layout patterns: a hero layout, a feature grid, a product grid, a pricing layout, a CTA section, and a footer layout. These patterns can then be reused across different pages and projects.

Modern CSS layouts help with:

  • Responsive design: sections adapt cleanly across desktop and mobile screens.
  • Better readability: content has proper spacing, line length, and hierarchy.
  • Improved user experience: users can understand the page structure faster.
  • Cleaner development: reusable layout patterns reduce repetitive CSS.
  • Better performance: many layouts can be built with CSS instead of JavaScript.
  • Stronger visual trust: a balanced layout makes a website feel more professional.

For blogs, layout affects how articles are discovered. For eCommerce websites, layout affects how products are compared and selected. For landing pages, layout affects how quickly visitors understand the offer and take action.

In short, layout is not just design. It is the system that holds the entire website together.

CSS Grid vs Flexbox

CSS Grid and Flexbox are the two most important layout systems in modern CSS. They are often used together, but they solve different problems.

CSS Grid is best for two-dimensional layouts. This means layouts that need to control both rows and columns at the same time. It is ideal for larger page structures such as product grids, blog grids, dashboard layouts, galleries, bento grids, and magazine-style layouts.

Flexbox is best for one-dimensional layouts. This means layouts that mainly flow in one direction: row or column. It is excellent for navigation menus, buttons, form groups, card content alignment, icon rows, pricing card actions, and small UI groups.

Feature CSS Grid Flexbox
Main purpose Two-dimensional layouts One-dimensional alignment
Best for Page sections, grids, dashboards, galleries Navigation, buttons, card content, small UI groups
Controls Rows and columns Row or column flow
Common use Product grid, blog grid, bento layout Navbar, button group, vertical card content
Responsive strength Excellent with minmax() and auto-fit Excellent for flexible alignment

A good rule is simple: use Grid for the larger structure and Flexbox for alignment inside components. For example, a product listing page may use CSS Grid to arrange product cards, while each product card uses Flexbox to align the title, price, rating, and button.

This combination gives you the best of both worlds: powerful page structure and clean component alignment.

What Are Container Queries?

Container queries allow elements to respond to the size of their parent container instead of only responding to the full browser viewport. This is one of the most important modern CSS features for reusable components.

Traditional responsive design relies heavily on media queries. Media queries check the width of the browser window. This works well for page-level changes, but it can be limiting when the same component appears in different places.

For example, a card may appear in a wide content area on one page and inside a narrow sidebar on another page. With only media queries, the card responds to the viewport width, not the actual space it has available. With container queries, the card can change based on its own container size.

This makes components more flexible and easier to reuse. A card can switch from a horizontal layout to a vertical layout when its container becomes narrow. A product block can adjust its image size, text spacing, or button placement based on the available space inside its parent section.

Container queries are especially useful for:

  • Reusable card components
  • Product cards inside different grids
  • Sidebar widgets
  • Dashboard panels
  • Blog preview cards
  • Responsive feature blocks
  • WordPress theme sections

In this guide, one of the layout examples is dedicated specifically to a container query card layout, showing how a component can adapt based on the space around it.

Responsive Layout Principles

Before looking at the layout examples, it is important to understand a few core responsive design principles. These principles make modern CSS layouts more reliable, easier to maintain, and better across different devices.

Start Mobile-First

A mobile-first approach means designing the simplest layout first, then adding more complex structures for larger screens. This usually results in cleaner CSS and better mobile experiences.

For example, a three-column feature grid should usually start as a single column on mobile. Then it can become two columns on tablet and three columns on desktop.

Use Fluid Widths

Modern layouts should avoid too many fixed widths. Instead of forcing sections to be exactly 1200px or cards to be exactly 300px, use flexible values such as percentages, minmax(), max-width, and responsive units.

This helps layouts adapt naturally instead of breaking when content changes or screen sizes become smaller.

Use gap Instead of Margin Where Possible

The gap property is one of the cleanest ways to control spacing inside Grid and Flexbox layouts. It keeps spacing consistent without requiring extra margin rules on every child element.

This is especially useful for card grids, navigation groups, form layouts, feature sections, and footer columns.

Use clamp() for Responsive Spacing and Typography

The clamp() function allows values to scale between a minimum and maximum size. This is useful for responsive headings, section spacing, card padding, and layout gaps.

Instead of creating many breakpoints, you can let spacing and font sizes scale smoothly between mobile and desktop sizes.

Avoid Unnecessary JavaScript for Layout

Most modern layouts can be built with CSS alone. JavaScript should usually be reserved for interaction, dynamic content, sliders, modals, tabs, filters, or behavior that CSS cannot handle cleanly.

Using CSS for layout keeps pages faster, simpler, and easier to maintain.

Test Real Content, Not Only Perfect Demo Text

A layout may look perfect with short demo titles, but break when real content is added. Always test layouts with longer titles, different image ratios, longer descriptions, multiple buttons, and missing images.

This is especially important for WordPress, WooCommerce, blogs, and content-heavy websites where editors may add different types of content over time.

25 Modern CSS Layout Examples

The following examples show practical layout patterns that can be used in real websites. Each layout is designed as a compact demo, but the structure can be expanded into a full website section.

These layouts are not just small visual effects. They are reusable building blocks for modern web pages, including landing pages, blogs, portfolios, dashboards, eCommerce stores, SaaS websites, and WordPress themes.

1. Responsive Hero Layout

A responsive hero layout is one of the most common and important CSS layout patterns. It usually appears at the top of a landing page, homepage, SaaS website, product page, portfolio, or agency website.

This layout uses a two-column structure on larger screens: text content on one side and a visual element on the other. On smaller screens, the columns stack vertically so the content stays readable and mobile-friendly.

  • Perfect for homepage and landing page hero sections
  • Uses CSS Grid for a clean two-column structure
  • Stacks into a single column on mobile screens
  • Works well with CTA buttons, product visuals, images, or UI mockups
Modern CSS Layout

Build cleaner responsive websites

Create a flexible hero section with CSS Grid, fluid typography, strong spacing, and a mobile-first structure that adapts naturally across screen sizes.

Get Started View Examples
Responsive Grid

HTML

<section class="layout-hero">

  <div class="layout-hero-inner">

    <div class="layout-hero-content">

      <div class="layout-hero-badge">Modern CSS Layout</div>

      <h1 class="layout-hero-title">
        Build cleaner <span>responsive websites</span>
      </h1>

      <p class="layout-hero-text">
        Create a flexible hero section with CSS Grid, fluid typography,
        strong spacing, and a mobile-first structure.
      </p>

      <div class="layout-hero-actions">
        <a href="#" class="layout-hero-btn layout-hero-btn-primary">Get Started</a>
        <a href="#" class="layout-hero-btn layout-hero-btn-secondary">View Examples</a>
      </div>

    </div>

    <div class="layout-hero-visual">

      <div class="layout-hero-card">

        <div class="layout-hero-card-top">
          <span class="layout-hero-dot"></span>
          <span class="layout-hero-dot"></span>
          <span class="layout-hero-dot"></span>
        </div>

        <div class="layout-hero-ui">
          <div class="layout-hero-ui-main"></div>
          <div class="layout-hero-ui-box"></div>
          <div class="layout-hero-ui-box"></div>
        </div>

      </div>

      <div class="layout-hero-float">Responsive Grid</div>

    </div>

  </div>

</section>

CSS

.layout-hero{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-hero::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 20% 20%,rgba(34,211,238,.18),transparent 32%),
radial-gradient(circle at 80% 30%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 50% 90%,rgba(99,102,241,.18),transparent 38%);
pointer-events:none;
}

.layout-hero-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
align-items:center;
gap:34px;
min-height:420px;
}

.layout-hero-content{
max-width:560px;
}

.layout-hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.10);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:13px;
font-weight:700;
letter-spacing:.03em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-hero-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,58px);
line-height:1.02;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
}

.layout-hero-title span{
background:linear-gradient(90deg,#22d3ee,#818cf8,#c084fc);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.layout-hero-text{
margin:0 0 24px;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:520px;
}

.layout-hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}

.layout-hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 18px;
border-radius:12px;
font-size:15px;
font-weight:800;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.layout-hero-btn-primary{
color:#020617;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
box-shadow:0 14px 34px rgba(34,211,238,.24);
}

.layout-hero-btn-secondary{
color:#e2e8f0;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
}

.layout-hero-btn:hover{
transform:translateY(-2px);
}

.layout-hero-visual{
position:relative;
min-height:330px;
display:flex;
align-items:center;
justify-content:center;
}

.layout-hero-card{
width:min(100%,430px);
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 80px rgba(0,0,0,.45);
padding:18px;
backdrop-filter:blur(14px);
}

.layout-hero-card-top{
display:flex;
gap:8px;
margin-bottom:18px;
}

.layout-hero-dot{
width:11px;
height:11px;
border-radius:999px;
background:#64748b;
}

.layout-hero-dot:nth-child(1){background:#ef4444;}
.layout-hero-dot:nth-child(2){background:#f59e0b;}
.layout-hero-dot:nth-child(3){background:#22c55e;}

.layout-hero-ui{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.layout-hero-ui-main{
grid-column:1 / -1;
height:120px;
border-radius:18px;
background:
linear-gradient(135deg,rgba(34,211,238,.22),rgba(99,102,241,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.10);
position:relative;
overflow:hidden;
}

.layout-hero-ui-main::after{
content:"";
position:absolute;
left:20px;
right:20px;
bottom:20px;
height:12px;
border-radius:999px;
background:linear-gradient(90deg,#22d3ee,#818cf8,#c084fc);
box-shadow:0 0 24px rgba(34,211,238,.45);
}

.layout-hero-ui-box{
height:92px;
border-radius:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.layout-hero-ui-box::before{
content:"";
position:absolute;
left:16px;
top:16px;
width:52%;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.28);
}

.layout-hero-ui-box::after{
content:"";
position:absolute;
left:16px;
top:38px;
width:74%;
height:8px;
border-radius:999px;
background:rgba(148,163,184,.28);
}

.layout-hero-float{
position:absolute;
right:6px;
bottom:18px;
width:118px;
padding:14px;
border-radius:18px;
background:linear-gradient(135deg,rgba(34,211,238,.95),rgba(99,102,241,.95));
box-shadow:0 18px 50px rgba(34,211,238,.25);
color:#fff;
font-size:13px;
font-weight:800;
text-align:center;
}

@media (max-width: 760px){
.layout-hero{
padding:20px;
}

.layout-hero-inner{
grid-template-columns:1fr;
gap:26px;
min-height:auto;
}

.layout-hero-title{
font-size:36px;
}

.layout-hero-text{
font-size:16px;
}

.layout-hero-actions{
align-items:stretch;
}

.layout-hero-btn{
width:100%;
}

.layout-hero-visual{
min-height:280px;
}

.layout-hero-card{
border-radius:20px;
}

.layout-hero-float{
right:14px;
bottom:4px;
}
}

This hero layout is a strong starting point for modern websites because it creates a clear visual hierarchy immediately. The text explains the offer, the buttons guide the user toward action, and the visual column adds depth without making the layout too complex.

Use this layout for homepages, product landing pages, service pages, SaaS websites, portfolio intros, or any page where the first screen needs to communicate value quickly.

2. Split Screen Layout

A split screen layout divides a section into two strong visual areas. It is a modern CSS layout pattern often used for landing pages, product introductions, portfolio sections, service pages, app showcases, and high-impact homepage sections.

The main advantage of a split screen layout is balance. One side can focus on strong messaging, while the other side can show an image, product preview, feature card, video placeholder, or visual design element. On mobile screens, the two sides stack vertically so the layout remains readable and easy to use.

  • Great for bold hero sections and product introductions
  • Uses CSS Grid to create two equal columns
  • Works well with images, cards, gradients, and call-to-action content
  • Stacks cleanly into one column on smaller screens
Split Screen

Design bold two-column sections

Use a split screen layout to balance strong copy with a visual preview, product mockup, image, or feature card. The structure stays clear on desktop and stacks naturally on mobile.

Explore Layout View Code
50 / 50 Layout

HTML

<section class="layout-split">

  <div class="layout-split-inner">

    <div class="layout-split-panel layout-split-left">

      <div class="layout-split-kicker">Split Screen</div>

      <h2 class="layout-split-title">
        Design bold <span>two-column sections</span>
      </h2>

      <p class="layout-split-text">
        Use a split screen layout to balance strong copy with a visual preview,
        product mockup, image, or feature card.
      </p>

      <div class="layout-split-actions">
        <a href="#" class="layout-split-btn layout-split-btn-primary">Explore Layout</a>
        <a href="#" class="layout-split-btn layout-split-btn-secondary">View Code</a>
      </div>

    </div>

    <div class="layout-split-panel layout-split-right">

      <div class="layout-split-visual">

        <div class="layout-split-orbit"></div>

        <div class="layout-split-device">

          <div class="layout-split-device-header">
            <span class="layout-split-dot"></span>
            <span class="layout-split-dot"></span>
            <span class="layout-split-dot"></span>
          </div>

          <div class="layout-split-screen">

            <div class="layout-split-screen-main"></div>

            <div class="layout-split-mini-grid">
              <div class="layout-split-mini"></div>
              <div class="layout-split-mini"></div>
            </div>

          </div>

        </div>

        <div class="layout-split-label">50 / 50 Layout</div>

      </div>

    </div>

  </div>

</section>

CSS

.layout-split{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-split::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 12% 30%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 88% 28%,rgba(249,115,22,.18),transparent 32%),
radial-gradient(circle at 70% 92%,rgba(168,85,247,.18),transparent 38%);
pointer-events:none;
}

.layout-split-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr;
min-height:430px;
border-radius:22px;
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.04);
}

.layout-split-panel{
position:relative;
padding:clamp(28px,5vw,56px);
display:flex;
flex-direction:column;
justify-content:center;
overflow:hidden;
}

.layout-split-left{
background:
linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.88));
}

.layout-split-right{
background:
linear-gradient(135deg,rgba(34,211,238,.16),rgba(99,102,241,.14),rgba(168,85,247,.18));
align-items:center;
text-align:center;
}

.layout-split-kicker{
display:inline-flex;
align-items:center;
width:max-content;
padding:8px 12px;
border-radius:999px;
background:rgba(249,115,22,.12);
border:1px solid rgba(249,115,22,.28);
color:#fdba74;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-split-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.03;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-split-title span{
background:linear-gradient(90deg,#fb923c,#22d3ee,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-split-text{
margin:0 0 26px;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:520px;
}

.layout-split-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.layout-split-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 18px;
border-radius:12px;
font-size:15px;
font-weight:800;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease;
}

.layout-split-btn-primary{
color:#020617;
background:linear-gradient(135deg,#fb923c,#22d3ee);
box-shadow:0 14px 34px rgba(251,146,60,.22);
}

.layout-split-btn-secondary{
color:#e2e8f0;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
}

.layout-split-btn:hover{
transform:translateY(-2px);
}

.layout-split-visual{
width:min(100%,360px);
position:relative;
}

.layout-split-orbit{
position:absolute;
inset:-36px;
border-radius:999px;
background:
radial-gradient(circle,rgba(34,211,238,.22),transparent 58%);
filter:blur(2px);
}

.layout-split-device{
position:relative;
z-index:2;
padding:18px;
border-radius:30px;
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 90px rgba(0,0,0,.42);
backdrop-filter:blur(16px);
}

.layout-split-device-header{
height:38px;
border-radius:16px;
background:rgba(2,6,23,.72);
border:1px solid rgba(255,255,255,.08);
margin-bottom:14px;
display:flex;
align-items:center;
gap:7px;
padding:0 12px;
}

.layout-split-dot{
width:9px;
height:9px;
border-radius:999px;
background:#64748b;
}

.layout-split-dot:nth-child(1){background:#ef4444;}
.layout-split-dot:nth-child(2){background:#f59e0b;}
.layout-split-dot:nth-child(3){background:#22c55e;}

.layout-split-screen{
display:grid;
gap:12px;
}

.layout-split-screen-main{
height:150px;
border-radius:20px;
background:
linear-gradient(135deg,rgba(34,211,238,.28),rgba(168,85,247,.24)),
linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.12);
position:relative;
overflow:hidden;
}

.layout-split-screen-main::before{
content:"";
position:absolute;
width:120px;
height:120px;
border-radius:999px;
right:-28px;
top:-28px;
background:rgba(251,146,60,.28);
}

.layout-split-screen-main::after{
content:"";
position:absolute;
left:18px;
right:18px;
bottom:18px;
height:12px;
border-radius:999px;
background:linear-gradient(90deg,#fb923c,#22d3ee,#a78bfa);
box-shadow:0 0 24px rgba(34,211,238,.45);
}

.layout-split-mini-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.layout-split-mini{
height:82px;
border-radius:16px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
position:relative;
overflow:hidden;
}

.layout-split-mini::before{
content:"";
position:absolute;
left:14px;
top:16px;
width:56%;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.30);
}

.layout-split-mini::after{
content:"";
position:absolute;
left:14px;
top:38px;
width:76%;
height:8px;
border-radius:999px;
background:rgba(148,163,184,.30);
}

.layout-split-label{
position:absolute;
right:-8px;
top:34px;
z-index:4;
padding:12px 14px;
border-radius:16px;
background:linear-gradient(135deg,#fb923c,#a855f7);
box-shadow:0 18px 50px rgba(168,85,247,.28);
color:#ffffff;
font-size:13px;
font-weight:900;
}

@media (max-width: 800px){
.layout-split{
padding:20px;
}

.layout-split-inner{
grid-template-columns:1fr;
}

.layout-split-panel{
padding:28px;
}

.layout-split-title{
font-size:36px;
}

.layout-split-text{
font-size:16px;
}

.layout-split-actions{
align-items:stretch;
}

.layout-split-btn{
width:100%;
}

.layout-split-right{
min-height:330px;
}

.layout-split-label{
right:10px;
top:22px;
}
}

This split screen layout is useful when you want to create a strong visual contrast between content and design. It keeps the message focused on one side while the other side supports the page with a visual element, product preview, illustration, or UI mockup.

Use this layout for modern landing pages, product introductions, portfolio sections, service pages, SaaS websites, app showcases, and campaign pages where the first impression needs to feel bold and structured.

3. Feature Grid Layout

A feature grid layout is one of the most useful CSS layout patterns for modern websites. It allows you to present services, product benefits, app features, process steps, or key selling points in a clean and scannable grid.

This layout uses CSS Grid to create responsive feature cards that automatically adapt across screen sizes. On desktop, the cards appear in a balanced multi-column layout. On mobile, they stack vertically for better readability and touch-friendly spacing.

  • Perfect for services, benefits, app features, and SaaS sections
  • Uses CSS Grid for clean responsive card placement
  • Creates a strong visual structure without complex JavaScript
  • Stacks into a simple single-column layout on mobile screens
Feature Grid

Show key benefits in a responsive grid

Use a feature grid layout to organize important benefits, services, or product features into clean cards that are easy to scan on every screen size.

01

Fast Layout

Build clean sections with CSS Grid and reusable card structures.

01
02

Responsive Cards

Cards adapt from three columns to two columns and finally one column.

02
03

Clean Spacing

Consistent gaps and padding create a balanced, professional layout.

03
04

Reusable Design

The same layout can be used for services, features, steps, or benefits.

04
05

No JavaScript

The full layout is handled with HTML and CSS only.

05
06

Modern UI

Subtle gradients, borders, and hover effects create a premium visual feel.

06

HTML

<section class="layout-feature">

  <div class="layout-feature-inner">

    <div class="layout-feature-header">

      <div class="layout-feature-kicker">Feature Grid</div>

      <h2 class="layout-feature-title">
        Show key benefits in a <span>responsive grid</span>
      </h2>

      <p class="layout-feature-text">
        Use a feature grid layout to organize important benefits,
        services, or product features into clean cards.
      </p>

    </div>

    <div class="layout-feature-grid">

      <div class="layout-feature-card">
        <div class="layout-feature-icon">01</div>
        <h3>Fast Layout</h3>
        <p>Build clean sections with CSS Grid and reusable card structures.</p>
        <div class="layout-feature-number">01</div>
      </div>

      <div class="layout-feature-card">
        <div class="layout-feature-icon">02</div>
        <h3>Responsive Cards</h3>
        <p>Cards adapt from three columns to two columns and finally one column.</p>
        <div class="layout-feature-number">02</div>
      </div>

      <div class="layout-feature-card">
        <div class="layout-feature-icon">03</div>
        <h3>Clean Spacing</h3>
        <p>Consistent gaps and padding create a balanced, professional layout.</p>
        <div class="layout-feature-number">03</div>
      </div>

      <div class="layout-feature-card">
        <div class="layout-feature-icon">04</div>
        <h3>Reusable Design</h3>
        <p>The same layout can be used for services, features, steps, or benefits.</p>
        <div class="layout-feature-number">04</div>
      </div>

      <div class="layout-feature-card">
        <div class="layout-feature-icon">05</div>
        <h3>No JavaScript</h3>
        <p>The full layout is handled with HTML and CSS only.</p>
        <div class="layout-feature-number">05</div>
      </div>

      <div class="layout-feature-card">
        <div class="layout-feature-icon">06</div>
        <h3>Modern UI</h3>
        <p>Subtle gradients, borders, and hover effects create a premium visual feel.</p>
        <div class="layout-feature-number">06</div>
      </div>

    </div>

  </div>

</section>

CSS

.layout-feature{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-feature::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 20% 15%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 82% 20%,rgba(168,85,247,.20),transparent 35%),
radial-gradient(circle at 50% 100%,rgba(34,197,94,.14),transparent 38%);
pointer-events:none;
}

.layout-feature-inner{
position:relative;
z-index:2;
}

.layout-feature-header{
max-width:760px;
margin:0 auto 34px;
text-align:center;
}

.layout-feature-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.26);
color:#86efac;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-feature-title{
margin:0 0 16px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-feature-title span{
background:linear-gradient(90deg,#22c55e,#22d3ee,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-feature-text{
margin:0 auto;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:680px;
}

.layout-feature-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}

.layout-feature-card{
position:relative;
min-height:220px;
padding:24px;
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-feature-card::before{
content:"";
position:absolute;
right:-40px;
top:-40px;
width:130px;
height:130px;
border-radius:999px;
background:rgba(34,211,238,.14);
filter:blur(2px);
}

.layout-feature-card:nth-child(2)::before{
background:rgba(168,85,247,.16);
}

.layout-feature-card:nth-child(3)::before{
background:rgba(34,197,94,.14);
}

.layout-feature-card:nth-child(4)::before{
background:rgba(251,146,60,.15);
}

.layout-feature-card:nth-child(5)::before{
background:rgba(99,102,241,.18);
}

.layout-feature-card:nth-child(6)::before{
background:rgba(236,72,153,.14);
}

.layout-feature-card:hover{
transform:translateY(-5px);
border-color:rgba(34,211,238,.26);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-feature-icon{
position:relative;
z-index:2;
width:48px;
height:48px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
background:linear-gradient(135deg,#22d3ee,#6366f1);
box-shadow:0 16px 36px rgba(34,211,238,.22);
color:#ffffff;
font-size:22px;
font-weight:900;
}

.layout-feature-card:nth-child(2) .layout-feature-icon{
background:linear-gradient(135deg,#a855f7,#6366f1);
}

.layout-feature-card:nth-child(3) .layout-feature-icon{
background:linear-gradient(135deg,#22c55e,#22d3ee);
}

.layout-feature-card:nth-child(4) .layout-feature-icon{
background:linear-gradient(135deg,#fb923c,#ef4444);
}

.layout-feature-card:nth-child(5) .layout-feature-icon{
background:linear-gradient(135deg,#818cf8,#22d3ee);
}

.layout-feature-card:nth-child(6) .layout-feature-icon{
background:linear-gradient(135deg,#ec4899,#a855f7);
}

.layout-feature-card h3{
position:relative;
z-index:2;
margin:0 0 10px;
font-size:21px;
line-height:1.25;
font-weight:900;
letter-spacing:-.02em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-feature-card p{
position:relative;
z-index:2;
margin:0;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.layout-feature-number{
position:absolute;
right:18px;
bottom:12px;
font-size:54px;
line-height:1;
font-weight:900;
letter-spacing:-.08em;
color:rgba(255,255,255,.045);
}

@media (max-width: 900px){
.layout-feature-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.layout-feature-title{
font-size:38px;
}
}

@media (max-width: 620px){
.layout-feature{
padding:20px;
}

.layout-feature-header{
text-align:left;
margin-bottom:24px;
}

.layout-feature-grid{
grid-template-columns:1fr;
gap:14px;
}

.layout-feature-card{
min-height:auto;
padding:22px;
}

.layout-feature-title{
font-size:34px;
}

.layout-feature-text{
font-size:16px;
}
}

This feature grid layout is useful when you need to present multiple benefits or content blocks without overwhelming the visitor. The grid gives every item equal visual importance, while the card styling keeps the section modern and easy to scan.

Use this layout for service sections, SaaS feature lists, product benefits, WordPress theme sections, agency websites, onboarding steps, homepage blocks, and any page where multiple key points need to be displayed clearly.

4. Auto-Fit Card Grid

An auto-fit card grid is one of the most practical modern CSS layout patterns. It allows cards to automatically resize and wrap based on the available space, without writing many custom breakpoints.

This layout uses repeat(auto-fit, minmax()) to create a flexible grid that works well for service cards, blog cards, product cards, portfolio items, feature blocks, and reusable WordPress sections. The browser decides how many cards can fit in each row, making the layout clean and responsive by default.

  • Perfect for flexible card-based sections
  • Uses repeat(auto-fit, minmax()) for responsive behavior
  • Automatically adjusts the number of columns based on available space
  • Reduces the need for many media queries
Auto-Fit Grid

Cards that adapt automatically

Use an auto-fit card grid when you want responsive cards that fill available space naturally without writing many custom breakpoints.

repeat(auto-fit, minmax())
01

Flexible Columns

The grid automatically creates as many columns as can fit inside the available width.

Grid
02

Less CSS

You can create responsive card layouts without writing breakpoints for every screen size.

Clean
03

Reusable Cards

The same grid works for services, posts, products, features, portfolios, and resources.

Reusable
04

Fluid Layout

Cards grow and shrink naturally while maintaining a readable minimum width.

Fluid
05

Mobile Friendly

On smaller screens, cards wrap into fewer columns and eventually a single-column layout.

Mobile
06

Modern Pattern

This is one of the most useful layout techniques for modern responsive websites.

2026

HTML

<section class="layout-autofit">

  <div class="layout-autofit-inner">

    <div class="layout-autofit-header">

      <div class="layout-autofit-heading">

        <div class="layout-autofit-kicker">Auto-Fit Grid</div>

        <h2 class="layout-autofit-title">
          Cards that <span>adapt automatically</span>
        </h2>

        <p class="layout-autofit-text">
          Use an auto-fit card grid when you want responsive cards that fill
          available space naturally without writing many custom breakpoints.
        </p>

      </div>

      <div class="layout-autofit-pill">repeat(auto-fit, minmax())</div>

    </div>

    <div class="layout-autofit-grid">

      <div class="layout-autofit-card">
        <div class="layout-autofit-icon">01</div>
        <h3>Flexible Columns</h3>
        <p>The grid automatically creates as many columns as can fit inside the available width.</p>
        <div class="layout-autofit-tag">Grid</div>
      </div>

      <div class="layout-autofit-card">
        <div class="layout-autofit-icon">02</div>
        <h3>Less CSS</h3>
        <p>You can create responsive card layouts without writing breakpoints for every screen size.</p>
        <div class="layout-autofit-tag">Clean</div>
      </div>

      <div class="layout-autofit-card">
        <div class="layout-autofit-icon">03</div>
        <h3>Reusable Cards</h3>
        <p>The same grid works for services, posts, products, features, portfolios, and resources.</p>
        <div class="layout-autofit-tag">Reusable</div>
      </div>

      <div class="layout-autofit-card">
        <div class="layout-autofit-icon">04</div>
        <h3>Fluid Layout</h3>
        <p>Cards grow and shrink naturally while maintaining a readable minimum width.</p>
        <div class="layout-autofit-tag">Fluid</div>
      </div>

      <div class="layout-autofit-card">
        <div class="layout-autofit-icon">05</div>
        <h3>Mobile Friendly</h3>
        <p>On smaller screens, cards wrap into fewer columns and eventually a single-column layout.</p>
        <div class="layout-autofit-tag">Mobile</div>
      </div>

      <div class="layout-autofit-card">
        <div class="layout-autofit-icon">06</div>
        <h3>Modern Pattern</h3>
        <p>This is one of the most useful layout techniques for modern responsive websites.</p>
        <div class="layout-autofit-tag">2026</div>
      </div>

    </div>

  </div>

</section>

CSS

.layout-autofit{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-autofit::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 16% 18%,rgba(14,165,233,.20),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(168,85,247,.18),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(245,158,11,.14),transparent 38%);
pointer-events:none;
}

.layout-autofit-inner{
position:relative;
z-index:2;
}

.layout-autofit-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
}

.layout-autofit-heading{
max-width:720px;
}

.layout-autofit-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(14,165,233,.11);
border:1px solid rgba(14,165,233,.28);
color:#7dd3fc;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-autofit-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-autofit-title span{
background:linear-gradient(90deg,#38bdf8,#a78bfa,#fbbf24) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-autofit-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:680px;
}

.layout-autofit-pill{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:13px;
font-weight:900;
box-shadow:0 16px 40px rgba(0,0,0,.25);
}

.layout-autofit-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:16px;
}

.layout-autofit-card{
position:relative;
min-height:190px;
padding:22px;
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 22px 60px rgba(0,0,0,.30);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-autofit-card::before{
content:"";
position:absolute;
right:-36px;
top:-36px;
width:118px;
height:118px;
border-radius:999px;
background:rgba(56,189,248,.16);
filter:blur(2px);
}

.layout-autofit-card:nth-child(2)::before{
background:rgba(168,85,247,.17);
}

.layout-autofit-card:nth-child(3)::before{
background:rgba(245,158,11,.16);
}

.layout-autofit-card:nth-child(4)::before{
background:rgba(34,197,94,.15);
}

.layout-autofit-card:nth-child(5)::before{
background:rgba(236,72,153,.15);
}

.layout-autofit-card:nth-child(6)::before{
background:rgba(99,102,241,.18);
}

.layout-autofit-card:hover{
transform:translateY(-5px);
border-color:rgba(56,189,248,.28);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-autofit-icon{
position:relative;
z-index:2;
width:46px;
height:46px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
background:linear-gradient(135deg,#38bdf8,#6366f1);
box-shadow:0 16px 36px rgba(56,189,248,.22);
color:#ffffff;
font-size:20px;
font-weight:900;
}

.layout-autofit-card:nth-child(2) .layout-autofit-icon{
background:linear-gradient(135deg,#a855f7,#6366f1);
}

.layout-autofit-card:nth-child(3) .layout-autofit-icon{
background:linear-gradient(135deg,#f59e0b,#fb7185);
}

.layout-autofit-card:nth-child(4) .layout-autofit-icon{
background:linear-gradient(135deg,#22c55e,#14b8a6);
}

.layout-autofit-card:nth-child(5) .layout-autofit-icon{
background:linear-gradient(135deg,#ec4899,#a855f7);
}

.layout-autofit-card:nth-child(6) .layout-autofit-icon{
background:linear-gradient(135deg,#818cf8,#38bdf8);
}

.layout-autofit-card h3{
position:relative;
z-index:2;
margin:0 0 10px;
font-size:20px;
line-height:1.25;
font-weight:900;
letter-spacing:-.02em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-autofit-card p{
position:relative;
z-index:2;
margin:0;
font-size:15px;
line-height:1.65;
color:#cbd5e1;
}

.layout-autofit-tag{
position:absolute;
right:16px;
bottom:14px;
z-index:2;
padding:7px 9px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#94a3b8;
font-size:11px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}

@media (max-width: 760px){
.layout-autofit{
padding:20px;
}

.layout-autofit-header{
display:block;
margin-bottom:24px;
}

.layout-autofit-title{
font-size:34px;
}

.layout-autofit-text{
font-size:16px;
}

.layout-autofit-pill{
margin-top:18px;
width:100%;
box-sizing:border-box;
}

.layout-autofit-grid{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px;
}

.layout-autofit-card{
min-height:auto;
padding:22px;
}
}

This auto-fit card grid is one of the most reusable CSS layout patterns because it adapts to the available space automatically. Instead of defining exact columns for every screen size, the grid uses a minimum card width and lets the browser calculate how many cards fit in each row.

Use this layout for service cards, blog previews, product cards, feature sections, portfolio items, resource grids, WordPress blocks, and any content section where the number of cards may change over time.

5. Blog Post Grid Layout

A blog post grid layout is a clean and practical CSS layout pattern for displaying articles, tutorials, news posts, guides, or resources. It helps visitors scan multiple posts quickly while keeping each article preview visually balanced.

This layout uses CSS Grid to place blog cards in a responsive structure. Each card includes a visual thumbnail area, category label, title, short excerpt, meta information, and a read more link. On smaller screens, the grid automatically stacks into a single column for better readability.

  • Perfect for blog homepages, category pages, and resource sections
  • Uses CSS Grid for a responsive article card layout
  • Includes thumbnail, category, title, excerpt, meta text, and CTA link
  • Works well for WordPress blogs, tutorials, guides, and magazine-style websites
Blog Grid

Display articles in a clean content grid

Use a blog post grid layout to organize articles, tutorials, guides, or resources into readable cards with strong hierarchy and responsive spacing.

All CSS UI Guides
Featured
CSS 8 min read

Modern Layout Systems for Responsive Websites

Learn how CSS Grid, Flexbox, and modern spacing patterns help create cleaner website structures.

Read article
Tutorial
Grid 5 min read

Build Better Card Layouts

Create flexible article cards that stay readable across different devices and screen sizes.

Read article
Design
UX 6 min read

Spacing Rules for Blog Pages

Use consistent gaps, readable line lengths, and clear visual hierarchy for content-heavy pages.

Read article
CSS
Flexbox 4 min read

Responsive Meta Rows

Use Flexbox to align category labels, dates, reading time, and small article details.

Read article

HTML

<section class="layout-bloggrid">

  <div class="layout-bloggrid-inner">

    <div class="layout-bloggrid-header">

      <div>

        <div class="layout-bloggrid-kicker">Blog Grid</div>

        <h2 class="layout-bloggrid-title">
          Display articles in a <span>clean content grid</span>
        </h2>

        <p class="layout-bloggrid-text">
          Use a blog post grid layout to organize articles, tutorials,
          guides, or resources into readable cards.
        </p>

      </div>

      <div class="layout-bloggrid-filter">
        <span>All</span>
        <span>CSS</span>
        <span>UI</span>
        <span>Guides</span>
      </div>

    </div>

    <div class="layout-bloggrid-grid">

      <article class="layout-bloggrid-card layout-bloggrid-featured">

        <div class="layout-bloggrid-thumb">
          <div class="layout-bloggrid-category">Featured</div>
        </div>

        <div class="layout-bloggrid-content">

          <div class="layout-bloggrid-meta">
            <span>CSS</span>
            <span>8 min read</span>
          </div>

          <h3>Modern Layout Systems for Responsive Websites</h3>

          <p>
            Learn how CSS Grid, Flexbox, and modern spacing patterns help
            create cleaner website structures.
          </p>

          <a href="#" class="layout-bloggrid-link">Read article</a>

        </div>

      </article>

      <article class="layout-bloggrid-card">

        <div class="layout-bloggrid-thumb">
          <div class="layout-bloggrid-category">Tutorial</div>
        </div>

        <div class="layout-bloggrid-content">

          <div class="layout-bloggrid-meta">
            <span>Grid</span>
            <span>5 min read</span>
          </div>

          <h3>Build Better Card Layouts</h3>

          <p>
            Create flexible article cards that stay readable across different
            devices and screen sizes.
          </p>

          <a href="#" class="layout-bloggrid-link">Read article</a>

        </div>

      </article>

      <article class="layout-bloggrid-card">

        <div class="layout-bloggrid-thumb">
          <div class="layout-bloggrid-category">Design</div>
        </div>

        <div class="layout-bloggrid-content">

          <div class="layout-bloggrid-meta">
            <span>UX</span>
            <span>6 min read</span>
          </div>

          <h3>Spacing Rules for Blog Pages</h3>

          <p>
            Use consistent gaps, readable line lengths, and clear visual
            hierarchy for content-heavy pages.
          </p>

          <a href="#" class="layout-bloggrid-link">Read article</a>

        </div>

      </article>

      <article class="layout-bloggrid-card">

        <div class="layout-bloggrid-thumb">
          <div class="layout-bloggrid-category">CSS</div>
        </div>

        <div class="layout-bloggrid-content">

          <div class="layout-bloggrid-meta">
            <span>Flexbox</span>
            <span>4 min read</span>
          </div>

          <h3>Responsive Meta Rows</h3>

          <p>
            Use Flexbox to align category labels, dates, reading time,
            and small article details.
          </p>

          <a href="#" class="layout-bloggrid-link">Read article</a>

        </div>

      </article>

    </div>

  </div>

</section>

CSS

.layout-bloggrid{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-bloggrid::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(59,130,246,.18),transparent 34%),
radial-gradient(circle at 84% 22%,rgba(236,72,153,.18),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,211,238,.14),transparent 38%);
pointer-events:none;
}

.layout-bloggrid-inner{
position:relative;
z-index:2;
}

.layout-bloggrid-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:end;
gap:24px;
margin-bottom:28px;
}

.layout-bloggrid-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(236,72,153,.10);
border:1px solid rgba(236,72,153,.28);
color:#f9a8d4;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-bloggrid-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-bloggrid-title span{
background:linear-gradient(90deg,#60a5fa,#f472b6,#22d3ee) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-bloggrid-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-bloggrid-filter{
display:flex;
align-items:center;
gap:8px;
padding:10px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 16px 40px rgba(0,0,0,.24);
}

.layout-bloggrid-filter span{
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 12px;
border-radius:999px;
font-size:12px;
font-weight:900;
color:#cbd5e1;
background:rgba(255,255,255,.06);
}

.layout-bloggrid-filter span:first-child{
color:#020617;
background:linear-gradient(135deg,#60a5fa,#f472b6);
}

.layout-bloggrid-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}

.layout-bloggrid-card{
position:relative;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-bloggrid-card:hover{
transform:translateY(-5px);
border-color:rgba(96,165,250,.30);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-bloggrid-thumb{
height:170px;
position:relative;
overflow:hidden;
background:
linear-gradient(135deg,rgba(96,165,250,.26),rgba(236,72,153,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-bloggrid-card:nth-child(2) .layout-bloggrid-thumb{
background:
linear-gradient(135deg,rgba(34,211,238,.24),rgba(99,102,241,.20)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-bloggrid-card:nth-child(3) .layout-bloggrid-thumb{
background:
linear-gradient(135deg,rgba(245,158,11,.23),rgba(236,72,153,.20)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-bloggrid-thumb::before{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:999px;
right:-48px;
top:-54px;
background:rgba(255,255,255,.15);
}

.layout-bloggrid-thumb::after{
content:"";
position:absolute;
left:22px;
right:22px;
bottom:22px;
height:14px;
border-radius:999px;
background:linear-gradient(90deg,#60a5fa,#f472b6,#22d3ee);
box-shadow:0 0 24px rgba(96,165,250,.45);
}

.layout-bloggrid-category{
position:absolute;
left:18px;
top:18px;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(2,6,23,.72);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:11px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
backdrop-filter:blur(10px);
}

.layout-bloggrid-content{
padding:22px;
}

.layout-bloggrid-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
margin-bottom:12px;
color:#94a3b8;
font-size:12px;
font-weight:800;
letter-spacing:.02em;
text-transform:uppercase;
}

.layout-bloggrid-meta span{
display:inline-flex;
align-items:center;
gap:6px;
}

.layout-bloggrid-card h3{
margin:0 0 10px;
font-size:21px;
line-height:1.25;
font-weight:900;
letter-spacing:-.02em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-bloggrid-card p{
margin:0 0 18px;
font-size:15px;
line-height:1.65;
color:#cbd5e1;
}

.layout-bloggrid-link{
display:inline-flex;
align-items:center;
gap:8px;
color:#93c5fd;
font-size:14px;
font-weight:900;
text-decoration:none;
}

.layout-bloggrid-link::after{
content:"→";
transition:transform .2s ease;
}

.layout-bloggrid-link:hover::after{
transform:translateX(4px);
}

.layout-bloggrid-featured{
grid-column:span 2;
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
}

.layout-bloggrid-featured .layout-bloggrid-thumb{
height:auto;
min-height:100%;
}

.layout-bloggrid-featured .layout-bloggrid-content{
padding:28px;
display:flex;
flex-direction:column;
justify-content:center;
}

.layout-bloggrid-featured h3{
font-size:clamp(24px,3vw,34px);
}

@media (max-width: 980px){
.layout-bloggrid-header{
grid-template-columns:1fr;
}

.layout-bloggrid-filter{
width:max-content;
}

.layout-bloggrid-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.layout-bloggrid-featured{
grid-column:span 2;
}
}

@media (max-width: 680px){
.layout-bloggrid{
padding:20px;
}

.layout-bloggrid-title{
font-size:34px;
}

.layout-bloggrid-text{
font-size:16px;
}

.layout-bloggrid-filter{
width:100%;
box-sizing:border-box;
overflow-x:auto;
}

.layout-bloggrid-grid{
grid-template-columns:1fr;
gap:14px;
}

.layout-bloggrid-featured{
grid-column:auto;
display:block;
}

.layout-bloggrid-featured .layout-bloggrid-thumb{
height:170px;
}

.layout-bloggrid-content,
.layout-bloggrid-featured .layout-bloggrid-content{
padding:22px;
}
}

This blog post grid layout is useful when you want to show multiple articles while still giving one important post more attention. The featured card creates visual hierarchy, while the smaller cards keep the section balanced and easy to scan.

Use this layout for WordPress blog homepages, category archives, tutorial lists, resource libraries, magazine-style sections, documentation hubs, and content marketing pages where articles need to be organized clearly.

6. Product Grid Layout

A product grid layout is one of the most important CSS layouts for eCommerce websites, WooCommerce stores, Shopify shops, affiliate pages, product catalogs, and landing pages that display multiple products.

This layout uses CSS Grid to display product cards in a clean, responsive structure. Each product card includes a visual product area, badge, category, product title, rating, price, and call-to-action button. On smaller screens, the grid adapts into fewer columns and finally stacks into a single-column layout.

  • Perfect for eCommerce stores, product catalogs, and affiliate websites
  • Uses CSS Grid for responsive product card placement
  • Includes product image area, sale badge, rating, price, and CTA button
  • Works well for WooCommerce, Shopify, and custom product sections
Product Grid

Create modern eCommerce product cards

Use a responsive product grid layout to display products with clear visuals, sale badges, pricing, ratings, and call-to-action buttons.

All Popular Sale New
Sale
♡
Greenhouse

Premium Garden Kit

★★★★★ (128)
$249 $199
View
New
♡
Outdoor

Modern Plant House

★★★★★ (94)
$329 $279
View
Hot
♡
Accessories

Smart Grow Shelf

★★★★☆ (76)
$119 $89
View
Top
♡
Storage

Compact Garden Box

★★★★★ (142)
$189 $149
View

HTML

<section class="layout-productgrid">

  <div class="layout-productgrid-inner">

    <div class="layout-productgrid-header">

      <div class="layout-productgrid-heading">

        <div class="layout-productgrid-kicker">Product Grid</div>

        <h2 class="layout-productgrid-title">
          Create modern <span>eCommerce product cards</span>
        </h2>

        <p class="layout-productgrid-text">
          Use a responsive product grid layout to display products with clear
          visuals, sale badges, pricing, ratings, and call-to-action buttons.
        </p>

      </div>

      <div class="layout-productgrid-tools">
        <span>All</span>
        <span>Popular</span>
        <span>Sale</span>
        <span>New</span>
      </div>

    </div>

    <div class="layout-productgrid-grid">

      <article class="layout-productgrid-card">

        <div class="layout-productgrid-media">
          <div class="layout-productgrid-badge">Sale</div>
          <div class="layout-productgrid-wishlist">♡</div>
          <div class="layout-productgrid-product-shape"></div>
        </div>

        <div class="layout-productgrid-content">

          <div class="layout-productgrid-category">Greenhouse</div>

          <h3>Premium Garden Kit</h3>

          <div class="layout-productgrid-rating">
            ★★★★★ <span>(128)</span>
          </div>

          <div class="layout-productgrid-bottom">

            <div class="layout-productgrid-price">
              <del>$249</del>
              <strong>$199</strong>
            </div>

            <a href="#" class="layout-productgrid-btn">View</a>

          </div>

        </div>

      </article>

      <article class="layout-productgrid-card">

        <div class="layout-productgrid-media">
          <div class="layout-productgrid-badge">New</div>
          <div class="layout-productgrid-wishlist">♡</div>
          <div class="layout-productgrid-product-shape"></div>
        </div>

        <div class="layout-productgrid-content">

          <div class="layout-productgrid-category">Outdoor</div>

          <h3>Modern Plant House</h3>

          <div class="layout-productgrid-rating">
            ★★★★★ <span>(94)</span>
          </div>

          <div class="layout-productgrid-bottom">

            <div class="layout-productgrid-price">
              <del>$329</del>
              <strong>$279</strong>
            </div>

            <a href="#" class="layout-productgrid-btn">View</a>

          </div>

        </div>

      </article>

      <article class="layout-productgrid-card">

        <div class="layout-productgrid-media">
          <div class="layout-productgrid-badge">Hot</div>
          <div class="layout-productgrid-wishlist">♡</div>
          <div class="layout-productgrid-product-shape"></div>
        </div>

        <div class="layout-productgrid-content">

          <div class="layout-productgrid-category">Accessories</div>

          <h3>Smart Grow Shelf</h3>

          <div class="layout-productgrid-rating">
            ★★★★☆ <span>(76)</span>
          </div>

          <div class="layout-productgrid-bottom">

            <div class="layout-productgrid-price">
              <del>$119</del>
              <strong>$89</strong>
            </div>

            <a href="#" class="layout-productgrid-btn">View</a>

          </div>

        </div>

      </article>

      <article class="layout-productgrid-card">

        <div class="layout-productgrid-media">
          <div class="layout-productgrid-badge">Top</div>
          <div class="layout-productgrid-wishlist">♡</div>
          <div class="layout-productgrid-product-shape"></div>
        </div>

        <div class="layout-productgrid-content">

          <div class="layout-productgrid-category">Storage</div>

          <h3>Compact Garden Box</h3>

          <div class="layout-productgrid-rating">
            ★★★★★ <span>(142)</span>
          </div>

          <div class="layout-productgrid-bottom">

            <div class="layout-productgrid-price">
              <del>$189</del>
              <strong>$149</strong>
            </div>

            <a href="#" class="layout-productgrid-btn">View</a>

          </div>

        </div>

      </article>

    </div>

  </div>

</section>

CSS

.layout-productgrid{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-productgrid::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,197,94,.18),transparent 34%),
radial-gradient(circle at 84% 22%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(249,115,22,.14),transparent 38%);
pointer-events:none;
}

.layout-productgrid-inner{
position:relative;
z-index:2;
}

.layout-productgrid-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
}

.layout-productgrid-heading{
max-width:760px;
}

.layout-productgrid-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.28);
color:#86efac;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-productgrid-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-productgrid-title span{
background:linear-gradient(90deg,#22c55e,#22d3ee,#fb923c) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-productgrid-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-productgrid-tools{
display:flex;
align-items:center;
gap:10px;
padding:10px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 16px 40px rgba(0,0,0,.24);
}

.layout-productgrid-tools span{
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 12px;
border-radius:999px;
font-size:12px;
font-weight:900;
color:#cbd5e1;
background:rgba(255,255,255,.06);
white-space:nowrap;
}

.layout-productgrid-tools span:first-child{
color:#020617;
background:linear-gradient(135deg,#22c55e,#22d3ee);
}

.layout-productgrid-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}

.layout-productgrid-card{
position:relative;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-productgrid-card:hover{
transform:translateY(-5px);
border-color:rgba(34,197,94,.30);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-productgrid-media{
height:190px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
linear-gradient(135deg,rgba(34,197,94,.22),rgba(34,211,238,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-productgrid-card:nth-child(2) .layout-productgrid-media{
background:
linear-gradient(135deg,rgba(34,211,238,.22),rgba(99,102,241,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-productgrid-card:nth-child(3) .layout-productgrid-media{
background:
linear-gradient(135deg,rgba(249,115,22,.22),rgba(236,72,153,.17)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-productgrid-card:nth-child(4) .layout-productgrid-media{
background:
linear-gradient(135deg,rgba(168,85,247,.22),rgba(59,130,246,.17)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-productgrid-media::before{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:999px;
background:rgba(255,255,255,.12);
right:-54px;
top:-58px;
}

.layout-productgrid-media::after{
content:"";
position:absolute;
width:120px;
height:120px;
border-radius:28px;
background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 22px 60px rgba(0,0,0,.25);
transform:rotate(-8deg);
}

.layout-productgrid-product-shape{
position:relative;
z-index:2;
width:94px;
height:126px;
border-radius:24px 24px 18px 18px;
background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(226,232,240,.42));
box-shadow:0 24px 60px rgba(0,0,0,.28);
}

.layout-productgrid-product-shape::before{
content:"";
position:absolute;
left:18px;
right:18px;
top:20px;
height:12px;
border-radius:999px;
background:rgba(2,6,23,.22);
}

.layout-productgrid-product-shape::after{
content:"";
position:absolute;
left:20px;
right:20px;
bottom:22px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
}

.layout-productgrid-badge{
position:absolute;
top:16px;
left:16px;
z-index:4;
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:linear-gradient(135deg,#fb923c,#ef4444);
box-shadow:0 12px 28px rgba(239,68,68,.24);
color:#ffffff;
font-size:11px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}

.layout-productgrid-wishlist{
position:absolute;
top:14px;
right:14px;
z-index:4;
width:36px;
height:36px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(2,6,23,.65);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:17px;
font-weight:900;
backdrop-filter:blur(10px);
}

.layout-productgrid-content{
padding:20px;
}

.layout-productgrid-category{
margin:0 0 8px;
color:#94a3b8;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}

.layout-productgrid-card h3{
margin:0 0 10px;
font-size:19px;
line-height:1.25;
font-weight:900;
letter-spacing:-.02em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-productgrid-rating{
display:flex;
align-items:center;
gap:8px;
margin-bottom:12px;
font-size:13px;
font-weight:800;
color:#facc15;
}

.layout-productgrid-rating span{
color:#94a3b8;
font-size:12px;
font-weight:800;
}

.layout-productgrid-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
}

.layout-productgrid-price{
display:flex;
flex-direction:column;
gap:2px;
}

.layout-productgrid-price strong{
font-size:20px;
line-height:1;
font-weight:900;
color:#ffffff;
}

.layout-productgrid-price del{
font-size:12px;
font-weight:800;
color:#64748b;
}

.layout-productgrid-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 13px;
border-radius:12px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
font-size:13px;
font-weight:900;
text-decoration:none;
box-shadow:0 14px 32px rgba(34,197,94,.20);
transition:transform .2s ease,box-shadow .2s ease;
white-space:nowrap;
}

.layout-productgrid-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 42px rgba(34,211,238,.24);
}

@media (max-width: 1060px){
.layout-productgrid-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.layout-productgrid-header{
display:block;
}

.layout-productgrid-tools{
width:max-content;
margin-top:18px;
}
}

@media (max-width: 620px){
.layout-productgrid{
padding:20px;
}

.layout-productgrid-title{
font-size:34px;
}

.layout-productgrid-text{
font-size:16px;
}

.layout-productgrid-tools{
width:100%;
box-sizing:border-box;
overflow-x:auto;
}

.layout-productgrid-grid{
grid-template-columns:1fr;
gap:14px;
}

.layout-productgrid-media{
height:180px;
}

.layout-productgrid-bottom{
align-items:flex-start;
flex-direction:column;
}

.layout-productgrid-btn{
width:100%;
box-sizing:border-box;
}
}

This product grid layout is useful when visitors need to compare multiple products quickly. The product image area gives each item visual weight, while the badge, rating, price, and button make the card practical for real eCommerce and affiliate websites.

Use this layout for WooCommerce shop sections, Shopify collections, product category previews, affiliate product roundups, homepage product blocks, landing pages, and any page where products need to be displayed in a clear responsive grid.

7. Pricing Table Layout

A pricing table layout is a high-conversion CSS layout pattern used on SaaS websites, hosting companies, service pages, membership platforms, digital product websites, and agency websites.

This layout helps users compare plans quickly. A good pricing table should make the differences between packages clear, highlight the recommended option, and provide strong call-to-action buttons. On mobile screens, the pricing cards stack vertically so each plan remains easy to read.

  • Perfect for SaaS, hosting, agency packages, and subscription websites
  • Uses CSS Grid for clean responsive pricing cards
  • Highlights the most popular plan with stronger visual styling
  • Includes plan name, price, description, features, and CTA button
Pricing Table

Compare plans with a modern pricing layout

Use a pricing table layout to present packages clearly, highlight the recommended plan, and guide visitors toward the best option.

Monthly Yearly

Starter

Best for small websites, personal projects, and simple landing pages.

$19 /mo
  • 1 website project
  • Basic layout sections
  • Responsive design system
  • Email support
Choose Starter
Popular

Professional

Perfect for growing businesses, SaaS websites, and modern service pages.

$49 /mo
  • Unlimited page sections
  • Advanced CSS layouts
  • Reusable component system
  • Priority support
Choose Pro

Business

Built for teams, agencies, and larger websites that need more flexibility.

$99 /mo
  • Team-ready layout system
  • Custom landing sections
  • Advanced responsive patterns
  • Dedicated support
Choose Business

HTML

<section class="layout-pricing">

  <div class="layout-pricing-inner">

    <div class="layout-pricing-header">

      <div class="layout-pricing-kicker">Pricing Table</div>

      <h2 class="layout-pricing-title">
        Compare plans with a <span>modern pricing layout</span>
      </h2>

      <p class="layout-pricing-text">
        Use a pricing table layout to present packages clearly,
        highlight the recommended plan, and guide visitors toward the best option.
      </p>

      <div class="layout-pricing-toggle">
        <span>Monthly</span>
        <span>Yearly</span>
      </div>

    </div>

    <div class="layout-pricing-grid">

      <div class="layout-pricing-card">

        <h3 class="layout-pricing-plan">Starter</h3>

        <p class="layout-pricing-description">
          Best for small websites, personal projects, and simple landing pages.
        </p>

        <div class="layout-pricing-price">
          <strong>$19</strong>
          <span>/mo</span>
        </div>

        <ul class="layout-pricing-features">
          <li>1 website project</li>
          <li>Basic layout sections</li>
          <li>Responsive design system</li>
          <li>Email support</li>
        </ul>

        <a href="#" class="layout-pricing-btn">Choose Starter</a>

      </div>

      <div class="layout-pricing-card layout-pricing-popular">

        <div class="layout-pricing-badge">Popular</div>

        <h3 class="layout-pricing-plan">Professional</h3>

        <p class="layout-pricing-description">
          Perfect for growing businesses, SaaS websites, and modern service pages.
        </p>

        <div class="layout-pricing-price">
          <strong>$49</strong>
          <span>/mo</span>
        </div>

        <ul class="layout-pricing-features">
          <li>Unlimited page sections</li>
          <li>Advanced CSS layouts</li>
          <li>Reusable component system</li>
          <li>Priority support</li>
        </ul>

        <a href="#" class="layout-pricing-btn layout-pricing-btn-primary">Choose Pro</a>

      </div>

      <div class="layout-pricing-card">

        <h3 class="layout-pricing-plan">Business</h3>

        <p class="layout-pricing-description">
          Built for teams, agencies, and larger websites that need more flexibility.
        </p>

        <div class="layout-pricing-price">
          <strong>$99</strong>
          <span>/mo</span>
        </div>

        <ul class="layout-pricing-features">
          <li>Team-ready layout system</li>
          <li>Custom landing sections</li>
          <li>Advanced responsive patterns</li>
          <li>Dedicated support</li>
        </ul>

        <a href="#" class="layout-pricing-btn">Choose Business</a>

      </div>

    </div>

  </div>

</section>

CSS

.layout-pricing{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-pricing::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(245,158,11,.14),transparent 38%);
pointer-events:none;
}

.layout-pricing-inner{
position:relative;
z-index:2;
}

.layout-pricing-header{
max-width:780px;
margin:0 auto 34px;
text-align:center;
}

.layout-pricing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.12);
border:1px solid rgba(168,85,247,.30);
color:#d8b4fe;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-pricing-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-pricing-title span{
background:linear-gradient(90deg,#a78bfa,#22d3ee,#fbbf24) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-pricing-text{
margin:0 auto;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:700px;
}

.layout-pricing-toggle{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:20px;
padding:8px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 16px 40px rgba(0,0,0,.24);
}

.layout-pricing-toggle span{
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 14px;
border-radius:999px;
font-size:12px;
font-weight:900;
color:#cbd5e1;
background:rgba(255,255,255,.05);
}

.layout-pricing-toggle span:first-child{
color:#020617;
background:linear-gradient(135deg,#a78bfa,#22d3ee);
}

.layout-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch;
}

.layout-pricing-card{
position:relative;
padding:24px;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
display:flex;
flex-direction:column;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-pricing-card::before{
content:"";
position:absolute;
right:-44px;
top:-44px;
width:140px;
height:140px;
border-radius:999px;
background:rgba(168,85,247,.14);
filter:blur(2px);
}

.layout-pricing-card:nth-child(1)::before{
background:rgba(34,211,238,.14);
}

.layout-pricing-card:nth-child(3)::before{
background:rgba(245,158,11,.15);
}

.layout-pricing-card:hover{
transform:translateY(-5px);
border-color:rgba(167,139,250,.28);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-pricing-popular{
border-color:rgba(34,211,238,.32);
background:
linear-gradient(180deg,rgba(34,211,238,.12),rgba(255,255,255,.05));
box-shadow:
0 24px 70px rgba(0,0,0,.34),
0 0 0 1px rgba(34,211,238,.10),
0 0 60px rgba(34,211,238,.12);
transform:translateY(-10px);
}

.layout-pricing-popular:hover{
transform:translateY(-15px);
}

.layout-pricing-badge{
position:absolute;
top:18px;
right:18px;
z-index:4;
padding:7px 10px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
box-shadow:0 12px 28px rgba(34,211,238,.24);
color:#020617;
font-size:11px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}

.layout-pricing-plan{
position:relative;
z-index:2;
margin:0 0 8px;
font-size:21px;
line-height:1.25;
font-weight:900;
letter-spacing:-.02em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-pricing-description{
position:relative;
z-index:2;
margin:0 0 22px;
font-size:15px;
line-height:1.65;
color:#cbd5e1;
}

.layout-pricing-price{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:7px;
margin-bottom:22px;
}

.layout-pricing-price strong{
font-size:46px;
line-height:.95;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff;
}

.layout-pricing-price span{
padding-bottom:5px;
font-size:14px;
font-weight:800;
color:#94a3b8;
}

.layout-pricing-features{
position:relative;
z-index:2;
display:grid;
gap:12px;
margin:0 0 24px;
padding:0;
list-style:none;
}

.layout-pricing-features li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.45;
color:#dbeafe;
}

.layout-pricing-features li::before{
content:"✓";
flex:0 0 auto;
width:20px;
height:20px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(34,211,238,.14);
border:1px solid rgba(34,211,238,.22);
color:#67e8f9;
font-size:12px;
font-weight:900;
}

.layout-pricing-btn{
position:relative;
z-index:2;
margin-top:auto;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
width:100%;
border-radius:14px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:14px;
font-weight:900;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.layout-pricing-btn-primary{
color:#020617;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
border-color:transparent;
box-shadow:0 16px 38px rgba(34,211,238,.22);
}

.layout-pricing-btn:hover{
transform:translateY(-2px);
}

@media (max-width: 920px){
.layout-pricing-grid{
grid-template-columns:1fr;
}

.layout-pricing-popular{
transform:none;
}

.layout-pricing-popular:hover{
transform:translateY(-5px);
}
}

@media (max-width: 620px){
.layout-pricing{
padding:20px;
}

.layout-pricing-header{
text-align:left;
margin-bottom:24px;
}

.layout-pricing-title{
font-size:34px;
}

.layout-pricing-text{
font-size:16px;
}

.layout-pricing-toggle{
width:100%;
box-sizing:border-box;
justify-content:center;
}

.layout-pricing-card{
padding:22px;
}

.layout-pricing-price strong{
font-size:40px;
}
}

This pricing table layout is useful because it makes plan comparison simple. The center card is visually highlighted as the recommended option, while the surrounding plans remain easy to compare. This helps users understand the difference between packages without reading long paragraphs.

Use this layout for SaaS pricing pages, hosting packages, digital products, service plans, agency packages, subscriptions, memberships, and any website where users need to compare multiple offers before taking action.

8. Comparison Table Layout

A comparison table layout helps users compare products, services, plans, tools, features, or packages in a clear visual structure. It is especially useful when visitors need to make a decision quickly.

Instead of using a plain HTML table only, this modern comparison layout combines a responsive grid structure, feature rows, highlight states, badges, and strong call-to-action buttons. On mobile screens, the layout stacks into card-style comparison blocks for better readability.

  • Perfect for product comparisons, SaaS plans, services, and feature lists
  • Uses CSS Grid for a modern table-like layout
  • Highlights the recommended or best-value option
  • Adapts into readable stacked cards on mobile screens
Comparison Layout

Compare options with a modern table layout

Use a comparison table layout when users need to compare plans, products, tools, or services before making a decision.

Features
Basic

Simple option for small projects.

$19
Pro Best

Best value for growing websites.

$49
Business

Advanced option for teams.

$99
Responsive layouts
✓Included
✓Included
✓Included
Reusable components
–Limited
✓Included
✓Included
Advanced grid systems
–No
✓Included
✓Included
Priority support
–No
✓Email
✓Dedicated
Choose plan
Choose Basic
Choose Pro
Choose Business

HTML

<section class="layout-comparison">

  <div class="layout-comparison-inner">

    <div class="layout-comparison-header">

      <div class="layout-comparison-kicker">Comparison Layout</div>

      <h2 class="layout-comparison-title">
        Compare options with a <span>modern table layout</span>
      </h2>

      <p class="layout-comparison-text">
        Use a comparison table layout when users need to compare plans,
        products, tools, or services before making a decision.
      </p>

    </div>

    <div class="layout-comparison-table">

      <div class="layout-comparison-row layout-comparison-head">

        <div class="layout-comparison-cell layout-comparison-feature">Features</div>

        <div class="layout-comparison-cell">
          <div class="layout-comparison-plan">
            <div class="layout-comparison-plan-name">Basic</div>
            <p class="layout-comparison-plan-desc">Simple option for small projects.</p>
            <span class="layout-comparison-plan-price">$19</span>
          </div>
        </div>

        <div class="layout-comparison-cell layout-comparison-highlight">
          <div class="layout-comparison-plan">
            <div class="layout-comparison-plan-name">
              Pro <span class="layout-comparison-badge">Best</span>
            </div>
            <p class="layout-comparison-plan-desc">Best value for growing websites.</p>
            <span class="layout-comparison-plan-price">$49</span>
          </div>
        </div>

        <div class="layout-comparison-cell">
          <div class="layout-comparison-plan">
            <div class="layout-comparison-plan-name">Business</div>
            <p class="layout-comparison-plan-desc">Advanced option for teams.</p>
            <span class="layout-comparison-plan-price">$99</span>
          </div>
        </div>

      </div>

      <div class="layout-comparison-row">
        <div class="layout-comparison-cell layout-comparison-feature">Responsive layouts</div>
        <div class="layout-comparison-cell" data-label="Basic">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Included</div>
        </div>
        <div class="layout-comparison-cell layout-comparison-highlight" data-label="Pro">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Included</div>
        </div>
        <div class="layout-comparison-cell" data-label="Business">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Included</div>
        </div>
      </div>

      <div class="layout-comparison-row">
        <div class="layout-comparison-cell layout-comparison-feature">Reusable components</div>
        <div class="layout-comparison-cell" data-label="Basic">
          <div class="layout-comparison-value"><span class="layout-comparison-minus">–</span>Limited</div>
        </div>
        <div class="layout-comparison-cell layout-comparison-highlight" data-label="Pro">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Included</div>
        </div>
        <div class="layout-comparison-cell" data-label="Business">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Included</div>
        </div>
      </div>

      <div class="layout-comparison-row">
        <div class="layout-comparison-cell layout-comparison-feature">Advanced grid systems</div>
        <div class="layout-comparison-cell" data-label="Basic">
          <div class="layout-comparison-value"><span class="layout-comparison-minus">–</span>No</div>
        </div>
        <div class="layout-comparison-cell layout-comparison-highlight" data-label="Pro">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Included</div>
        </div>
        <div class="layout-comparison-cell" data-label="Business">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Included</div>
        </div>
      </div>

      <div class="layout-comparison-row">
        <div class="layout-comparison-cell layout-comparison-feature">Priority support</div>
        <div class="layout-comparison-cell" data-label="Basic">
          <div class="layout-comparison-value"><span class="layout-comparison-minus">–</span>No</div>
        </div>
        <div class="layout-comparison-cell layout-comparison-highlight" data-label="Pro">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Email</div>
        </div>
        <div class="layout-comparison-cell" data-label="Business">
          <div class="layout-comparison-value"><span class="layout-comparison-check">✓</span>Dedicated</div>
        </div>
      </div>

      <div class="layout-comparison-row layout-comparison-footer">
        <div class="layout-comparison-cell layout-comparison-feature">Choose plan</div>
        <div class="layout-comparison-cell">
          <a href="#" class="layout-comparison-btn">Choose Basic</a>
        </div>
        <div class="layout-comparison-cell layout-comparison-highlight">
          <a href="#" class="layout-comparison-btn layout-comparison-btn-primary">Choose Pro</a>
        </div>
        <div class="layout-comparison-cell">
          <a href="#" class="layout-comparison-btn">Choose Business</a>
        </div>
      </div>

    </div>

  </div>

</section>

CSS

.layout-comparison{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-comparison::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(245,158,11,.16),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(168,85,247,.16),transparent 38%);
pointer-events:none;
}

.layout-comparison-inner{
position:relative;
z-index:2;
}

.layout-comparison-header{
max-width:820px;
margin:0 auto 32px;
text-align:center;
}

.layout-comparison-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(245,158,11,.11);
border:1px solid rgba(245,158,11,.28);
color:#fcd34d;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-comparison-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-comparison-title span{
background:linear-gradient(90deg,#fbbf24,#22d3ee,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-comparison-text{
margin:0 auto;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-comparison-table{
border-radius:24px;
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
}

.layout-comparison-row{
display:grid;
grid-template-columns:minmax(170px,1.15fr) repeat(3,minmax(0,1fr));
border-bottom:1px solid rgba(255,255,255,.09);
}

.layout-comparison-row:last-child{
border-bottom:0;
}

.layout-comparison-cell{
position:relative;
padding:18px;
display:flex;
align-items:center;
min-height:64px;
color:#cbd5e1;
font-size:14px;
line-height:1.45;
border-right:1px solid rgba(255,255,255,.08);
}

.layout-comparison-cell:last-child{
border-right:0;
}

.layout-comparison-head{
background:rgba(255,255,255,.055);
}

.layout-comparison-head .layout-comparison-cell{
align-items:flex-start;
min-height:150px;
padding:22px 18px;
}

.layout-comparison-feature{
font-weight:900;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-comparison-plan{
width:100%;
}

.layout-comparison-plan-name{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
font-size:18px;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-comparison-plan-desc{
margin:0;
font-size:13px;
line-height:1.55;
color:#94a3b8;
}

.layout-comparison-plan-price{
display:block;
margin-top:14px;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
}

.layout-comparison-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 8px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#020617;
font-size:10px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap;
}

.layout-comparison-highlight{
background:linear-gradient(180deg,rgba(34,211,238,.12),rgba(255,255,255,.035));
box-shadow:inset 0 0 0 1px rgba(34,211,238,.12);
}

.layout-comparison-value{
display:flex;
align-items:center;
gap:9px;
font-weight:800;
color:#e2e8f0;
}

.layout-comparison-check,
.layout-comparison-minus{
width:22px;
height:22px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
font-size:13px;
font-weight:950;
}

.layout-comparison-check{
background:rgba(34,211,238,.14);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
}

.layout-comparison-minus{
background:rgba(148,163,184,.10);
border:1px solid rgba(148,163,184,.18);
color:#94a3b8;
}

.layout-comparison-footer .layout-comparison-cell{
min-height:76px;
}

.layout-comparison-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
width:100%;
border-radius:13px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:13px;
font-weight:900;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease;
}

.layout-comparison-btn-primary{
color:#020617;
background:linear-gradient(135deg,#fbbf24,#22d3ee);
border-color:transparent;
box-shadow:0 16px 38px rgba(34,211,238,.20);
}

.layout-comparison-btn:hover{
transform:translateY(-2px);
}

@media (max-width: 860px){
.layout-comparison-header{
text-align:left;
margin-bottom:24px;
}

.layout-comparison-row{
grid-template-columns:1fr;
border-bottom:1px solid rgba(255,255,255,.14);
padding:14px;
gap:10px;
}

.layout-comparison-head{
display:none;
}

.layout-comparison-cell{
border-right:0;
border-bottom:0;
min-height:auto;
padding:14px;
border-radius:16px;
background:rgba(255,255,255,.045);
}

.layout-comparison-feature{
background:rgba(255,255,255,.08);
}

.layout-comparison-cell::before{
content:attr(data-label);
display:block;
margin-bottom:6px;
font-size:11px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
color:#94a3b8;
}

.layout-comparison-feature::before{
display:none;
}

.layout-comparison-highlight{
background:linear-gradient(180deg,rgba(34,211,238,.12),rgba(255,255,255,.05));
}

.layout-comparison-footer{
display:none;
}
}

@media (max-width: 620px){
.layout-comparison{
padding:20px;
}

.layout-comparison-title{
font-size:34px;
}

.layout-comparison-text{
font-size:16px;
}

.layout-comparison-row{
padding:12px;
}
}

This comparison table layout is useful because it helps visitors understand differences between options without reading long sections of text. The highlighted column draws attention to the recommended option, while the feature rows keep the comparison structured and easy to scan.

Use this layout for product comparisons, pricing plan comparisons, SaaS feature tables, hosting packages, service packages, plugin free/pro comparisons, affiliate roundups, and any page where users need to compare options before making a decision.

9. Sidebar Content Layout

A sidebar content layout is a classic but still very useful CSS layout pattern for blogs, documentation pages, resource hubs, product category pages, dashboards, and content-heavy websites.

This layout places supporting navigation, filters, categories, links, or summary content in a sidebar, while the main content area remains focused on the primary article or page content. On mobile screens, the sidebar stacks above or below the main content to keep the layout readable.

  • Perfect for blogs, documentation, guides, and category pages
  • Uses CSS Grid for a clean sidebar + main content structure
  • Keeps navigation and supporting content separate from the main content
  • Stacks into a single-column layout on smaller screens
Sidebar Layout

Organize content with a sidebar structure

Use a sidebar content layout when the page needs supporting navigation, categories, filters, links, or summary content next to the main article or section.

Main Content

Build readable pages with supporting navigation

A sidebar layout keeps secondary content close to the main article without mixing everything together. This makes the page easier to scan and improves navigation for long-form content.

The main content area can contain articles, product listings, documentation, forms, tutorials, or any content that needs more space and attention.

Clear hierarchy The sidebar supports the main content without competing with it.
Better navigation Users can jump between categories, sections, filters, or resources.

HTML

<section class="layout-sidebar">

  <div class="layout-sidebar-inner">

    <div class="layout-sidebar-header">

      <div class="layout-sidebar-kicker">Sidebar Layout</div>

      <h2 class="layout-sidebar-title">
        Organize content with a <span>sidebar structure</span>
      </h2>

      <p class="layout-sidebar-text">
        Use a sidebar content layout when the page needs supporting navigation,
        categories, filters, links, or summary content next to the main article.
      </p>

    </div>

    <div class="layout-sidebar-grid">

      <aside class="layout-sidebar-aside">

        <div class="layout-sidebar-search">
          <span></span>
          Search topics
        </div>

        <nav class="layout-sidebar-nav">
          <a href="#">Getting Started <span>12</span></a>
          <a href="#">CSS Grid <span>8</span></a>
          <a href="#">Flexbox <span>6</span></a>
          <a href="#">Responsive UI <span>15</span></a>
          <a href="#">Components <span>9</span></a>
        </nav>

        <div class="layout-sidebar-card">
          <h3>Need a layout?</h3>
          <p>
            Use sidebar sections for guides, documentation, filters,
            and content-heavy pages.
          </p>
          <a href="#">View Guide</a>
        </div>

      </aside>

      <main class="layout-sidebar-main">

        <article class="layout-sidebar-article">

          <div class="layout-sidebar-label">Main Content</div>

          <h3>Build readable pages with supporting navigation</h3>

          <p>
            A sidebar layout keeps secondary content close to the main article
            without mixing everything together.
          </p>

          <p>
            The main content area can contain articles, product listings,
            documentation, forms, tutorials, or any content that needs more space.
          </p>

          <div class="layout-sidebar-content-grid">

            <div class="layout-sidebar-mini">
              <strong>Clear hierarchy</strong>
              <span>The sidebar supports the main content without competing with it.</span>
            </div>

            <div class="layout-sidebar-mini">
              <strong>Better navigation</strong>
              <span>Users can jump between categories, sections, filters, or resources.</span>
            </div>

          </div>

        </article>

      </main>

    </div>

  </div>

</section>

CSS

.layout-sidebar{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-sidebar::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(99,102,241,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(34,211,238,.16),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,197,94,.13),transparent 38%);
pointer-events:none;
}

.layout-sidebar-inner{
position:relative;
z-index:2;
}

.layout-sidebar-header{
max-width:820px;
margin:0 0 30px;
}

.layout-sidebar-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(99,102,241,.12);
border:1px solid rgba(99,102,241,.30);
color:#c4b5fd;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-sidebar-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-sidebar-title span{
background:linear-gradient(90deg,#818cf8,#22d3ee,#22c55e) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-sidebar-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:760px;
}

.layout-sidebar-grid{
display:grid;
grid-template-columns:280px minmax(0,1fr);
gap:20px;
align-items:start;
}

.layout-sidebar-aside,
.layout-sidebar-main{
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
}

.layout-sidebar-aside{
padding:20px;
}

.layout-sidebar-search{
height:46px;
border-radius:14px;
background:rgba(2,6,23,.55);
border:1px solid rgba(255,255,255,.10);
display:flex;
align-items:center;
padding:0 14px;
gap:10px;
margin-bottom:18px;
color:#94a3b8;
font-size:14px;
font-weight:800;
}

.layout-sidebar-search span{
width:14px;
height:14px;
border-radius:999px;
border:2px solid rgba(148,163,184,.70);
position:relative;
flex:0 0 auto;
}

.layout-sidebar-search span::after{
content:"";
position:absolute;
width:7px;
height:2px;
border-radius:999px;
background:rgba(148,163,184,.70);
right:-6px;
bottom:-3px;
transform:rotate(45deg);
}

.layout-sidebar-nav{
display:grid;
gap:10px;
margin-bottom:22px;
}

.layout-sidebar-nav a{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 13px;
border-radius:14px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
color:#cbd5e1;
font-size:14px;
font-weight:850;
text-decoration:none;
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.layout-sidebar-nav a:hover,
.layout-sidebar-nav a:first-child{
background:linear-gradient(135deg,rgba(129,140,248,.24),rgba(34,211,238,.13));
border-color:rgba(129,140,248,.28);
transform:translateX(3px);
}

.layout-sidebar-nav a span{
color:#94a3b8;
font-size:12px;
font-weight:900;
}

.layout-sidebar-card{
padding:18px;
border-radius:18px;
background:
linear-gradient(135deg,rgba(34,211,238,.13),rgba(129,140,248,.10));
border:1px solid rgba(34,211,238,.16);
}

.layout-sidebar-card h3{
margin:0 0 8px;
font-size:18px;
line-height:1.25;
font-weight:900;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-sidebar-card p{
margin:0 0 14px;
font-size:14px;
line-height:1.6;
color:#cbd5e1;
}

.layout-sidebar-card a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 13px;
border-radius:12px;
background:linear-gradient(135deg,#818cf8,#22d3ee);
color:#020617;
font-size:13px;
font-weight:900;
text-decoration:none;
}

.layout-sidebar-main{
padding:26px;
position:relative;
}

.layout-sidebar-main::before{
content:"";
position:absolute;
right:-44px;
top:-44px;
width:150px;
height:150px;
border-radius:999px;
background:rgba(34,211,238,.12);
pointer-events:none;
}

.layout-sidebar-article{
position:relative;
z-index:2;
}

.layout-sidebar-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.22);
color:#86efac;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:16px;
}

.layout-sidebar-article h3{
margin:0 0 14px;
font-size:clamp(26px,4vw,42px);
line-height:1.08;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-sidebar-article p{
margin:0 0 18px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:760px;
}

.layout-sidebar-content-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
margin-top:22px;
}

.layout-sidebar-mini{
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
}

.layout-sidebar-mini strong{
display:block;
margin-bottom:8px;
font-size:15px;
line-height:1.25;
font-weight:900;
color:#ffffff;
}

.layout-sidebar-mini span{
display:block;
font-size:14px;
line-height:1.6;
color:#94a3b8;
}

@media (max-width: 900px){
.layout-sidebar-grid{
grid-template-columns:1fr;
}

.layout-sidebar-aside{
order:2;
}

.layout-sidebar-main{
order:1;
}
}

@media (max-width: 620px){
.layout-sidebar{
padding:20px;
}

.layout-sidebar-title{
font-size:34px;
}

.layout-sidebar-text{
font-size:16px;
}

.layout-sidebar-aside,
.layout-sidebar-main{
border-radius:20px;
}

.layout-sidebar-main{
padding:22px;
}

.layout-sidebar-content-grid{
grid-template-columns:1fr;
}

.layout-sidebar-article h3{
font-size:30px;
}
}

This sidebar content layout is useful because it keeps supporting navigation separate from the main content. The sidebar can contain search, categories, filters, links, a table of contents, related resources, or promotional blocks while the main area stays focused on the primary content.

Use this layout for blog articles, documentation pages, learning hubs, WooCommerce category filters, product guides, resource libraries, dashboard pages, and any content-heavy website where users need both navigation and readable content.

10. Sticky Sidebar Layout

A sticky sidebar layout is a useful CSS layout pattern for long-form content, documentation pages, blog guides, product filters, course pages, and resource hubs. The sidebar stays visible while the main content scrolls, making navigation easier for users.

This layout uses CSS Grid for the main structure and position: sticky for the sidebar. On desktop, the sidebar remains visible beside the content. On mobile screens, the layout becomes a simple stacked structure so the content remains easy to read.

  • Perfect for long articles, documentation, guides, and product filter layouts
  • Uses CSS Grid for the sidebar and main content structure
  • Uses position: sticky to keep the sidebar visible while scrolling
  • Stacks naturally on smaller screens for better mobile usability
Sticky Sidebar

Keep navigation visible with a sticky sidebar layout

Use a sticky sidebar layout when long content needs a visible table of contents, filters, page navigation, or supporting links while the user scrolls.

Overview

Sticky sidebars improve long-page navigation

A sticky sidebar keeps important links or filters visible while users move through a longer content area. This pattern is useful for guides, documentation, tutorials, and large product category pages.

Better scanning Users can understand the page structure without scrolling back to the top.
Clear navigation The sidebar gives users quick access to important sections.
Layout Setup

Use Grid for structure and sticky for behavior

The main page is built with CSS Grid. The sidebar uses position: sticky so it remains visible inside the scrolling container while the main content continues normally.

CSS Grid Creates the two-column content structure.
Position Sticky Keeps the sidebar fixed inside its parent area.
Responsive

Stack the layout on smaller screens

On mobile, sticky sidebars are usually less useful because screen space is limited. The sidebar should become a normal stacked section so users can read the content comfortably.

Desktop Sidebar and content appear side by side.
Mobile Sidebar stacks above the main content.
Best Practice

Keep sticky sidebars useful and simple

A sticky sidebar should help users, not distract them. Keep the content short, useful, and focused on navigation, filters, or important actions.

HTML

<section class="layout-sticky">

  <div class="layout-sticky-inner">

    <div class="layout-sticky-header">

      <div class="layout-sticky-kicker">Sticky Sidebar</div>

      <h2 class="layout-sticky-title">
        Keep navigation visible with a <span>sticky sidebar layout</span>
      </h2>

      <p class="layout-sticky-text">
        Use a sticky sidebar layout when long content needs a visible table of contents,
        filters, page navigation, or supporting links while the user scrolls.
      </p>

    </div>

    <div class="layout-sticky-scrollbox">

      <div class="layout-sticky-grid">

        <aside class="layout-sticky-sidebar">

          <h3>Page Sections</h3>

          <nav class="layout-sticky-nav">
            <a href="#">Overview <span>01</span></a>
            <a href="#">Layout Setup <span>02</span></a>
            <a href="#">Responsive Rules <span>03</span></a>
            <a href="#">Best Practice <span>04</span></a>
          </nav>

          <div class="layout-sticky-progress">

            <div class="layout-sticky-progress-label">
              <span>Progress</span>
              <span>68%</span>
            </div>

            <div class="layout-sticky-progress-bar">
              <div class="layout-sticky-progress-fill"></div>
            </div>

          </div>

        </aside>

        <main class="layout-sticky-content">

          <section class="layout-sticky-section">

            <div class="layout-sticky-label">Overview</div>

            <h3>Sticky sidebars improve long-page navigation</h3>

            <p>
              A sticky sidebar keeps important links or filters visible while users
              move through a longer content area.
            </p>

            <div class="layout-sticky-info-grid">

              <div class="layout-sticky-info">
                <strong>Better scanning</strong>
                <span>Users can understand the page structure without scrolling back to the top.</span>
              </div>

              <div class="layout-sticky-info">
                <strong>Clear navigation</strong>
                <span>The sidebar gives users quick access to important sections.</span>
              </div>

            </div>

          </section>

          <section class="layout-sticky-section">

            <div class="layout-sticky-label">Layout Setup</div>

            <h3>Use Grid for structure and sticky for behavior</h3>

            <p>
              The main page is built with CSS Grid. The sidebar uses position sticky
              so it remains visible inside the scrolling container.
            </p>

            <div class="layout-sticky-info-grid">

              <div class="layout-sticky-info">
                <strong>CSS Grid</strong>
                <span>Creates the two-column content structure.</span>
              </div>

              <div class="layout-sticky-info">
                <strong>Position Sticky</strong>
                <span>Keeps the sidebar fixed inside its parent area.</span>
              </div>

            </div>

          </section>

          <section class="layout-sticky-section">

            <div class="layout-sticky-label">Responsive</div>

            <h3>Stack the layout on smaller screens</h3>

            <p>
              On mobile, sticky sidebars are usually less useful because screen
              space is limited. The sidebar should become a normal stacked section.
            </p>

            <div class="layout-sticky-info-grid">

              <div class="layout-sticky-info">
                <strong>Desktop</strong>
                <span>Sidebar and content appear side by side.</span>
              </div>

              <div class="layout-sticky-info">
                <strong>Mobile</strong>
                <span>Sidebar stacks above the main content.</span>
              </div>

            </div>

          </section>

          <section class="layout-sticky-section">

            <div class="layout-sticky-label">Best Practice</div>

            <h3>Keep sticky sidebars useful and simple</h3>

            <p>
              A sticky sidebar should help users, not distract them. Keep the content
              short, useful, and focused on navigation, filters, or important actions.
            </p>

          </section>

        </main>

      </div>

    </div>

  </div>

</section>

CSS

.layout-sticky{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-sticky::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(168,85,247,.18),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(245,158,11,.13),transparent 38%);
pointer-events:none;
}

.layout-sticky-inner{
position:relative;
z-index:2;
}

.layout-sticky-header{
max-width:820px;
margin:0 0 30px;
}

.layout-sticky-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-sticky-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-sticky-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#fbbf24) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-sticky-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:760px;
}

.layout-sticky-scrollbox{
height:560px;
overflow-y:auto;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.32);
padding:20px;
}

.layout-sticky-grid{
display:grid;
grid-template-columns:270px minmax(0,1fr);
gap:20px;
align-items:start;
min-height:980px;
}

.layout-sticky-sidebar{
position:sticky;
top:20px;
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 60px rgba(0,0,0,.26);
padding:20px;
overflow:hidden;
}

.layout-sticky-sidebar::before{
content:"";
position:absolute;
right:-40px;
top:-40px;
width:130px;
height:130px;
border-radius:999px;
background:rgba(34,211,238,.14);
pointer-events:none;
}

.layout-sticky-sidebar h3{
position:relative;
z-index:2;
margin:0 0 14px;
font-size:20px;
line-height:1.25;
font-weight:900;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-sticky-nav{
position:relative;
z-index:2;
display:grid;
gap:10px;
margin-bottom:20px;
}

.layout-sticky-nav a{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 13px;
border-radius:14px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
color:#cbd5e1;
font-size:14px;
font-weight:850;
text-decoration:none;
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.layout-sticky-nav a:hover,
.layout-sticky-nav a:first-child{
background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(168,85,247,.13));
border-color:rgba(34,211,238,.28);
transform:translateX(3px);
}

.layout-sticky-nav a span{
color:#94a3b8;
font-size:12px;
font-weight:900;
}

.layout-sticky-progress{
position:relative;
z-index:2;
padding:16px;
border-radius:18px;
background:rgba(2,6,23,.42);
border:1px solid rgba(255,255,255,.09);
}

.layout-sticky-progress-label{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.05em;
color:#94a3b8;
}

.layout-sticky-progress-bar{
height:9px;
border-radius:999px;
background:rgba(255,255,255,.08);
overflow:hidden;
}

.layout-sticky-progress-fill{
height:100%;
width:68%;
border-radius:999px;
background:linear-gradient(90deg,#22d3ee,#a78bfa,#fbbf24);
box-shadow:0 0 22px rgba(34,211,238,.38);
}

.layout-sticky-content{
display:grid;
gap:16px;
}

.layout-sticky-section{
position:relative;
padding:26px;
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 60px rgba(0,0,0,.26);
overflow:hidden;
}

.layout-sticky-section::before{
content:"";
position:absolute;
right:-45px;
top:-45px;
width:130px;
height:130px;
border-radius:999px;
background:rgba(168,85,247,.11);
pointer-events:none;
}

.layout-sticky-section:nth-child(2)::before{
background:rgba(34,211,238,.12);
}

.layout-sticky-section:nth-child(3)::before{
background:rgba(34,197,94,.11);
}

.layout-sticky-section:nth-child(4)::before{
background:rgba(245,158,11,.12);
}

.layout-sticky-label{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(168,85,247,.11);
border:1px solid rgba(168,85,247,.22);
color:#d8b4fe;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:14px;
}

.layout-sticky-section h3{
position:relative;
z-index:2;
margin:0 0 12px;
font-size:clamp(24px,3vw,34px);
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-sticky-section p{
position:relative;
z-index:2;
margin:0 0 16px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:760px;
}

.layout-sticky-info-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:20px;
}

.layout-sticky-info{
padding:16px;
border-radius:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
}

.layout-sticky-info strong{
display:block;
margin-bottom:7px;
font-size:14px;
font-weight:900;
color:#ffffff;
}

.layout-sticky-info span{
display:block;
font-size:13px;
line-height:1.55;
color:#94a3b8;
}

@media (max-width: 900px){
.layout-sticky-scrollbox{
height:auto;
overflow:visible;
}

.layout-sticky-grid{
grid-template-columns:1fr;
min-height:auto;
}

.layout-sticky-sidebar{
position:relative;
top:auto;
}

.layout-sticky-content{
gap:14px;
}
}

@media (max-width: 620px){
.layout-sticky{
padding:20px;
}

.layout-sticky-title{
font-size:34px;
}

.layout-sticky-text{
font-size:16px;
}

.layout-sticky-scrollbox{
padding:14px;
border-radius:20px;
}

.layout-sticky-sidebar,
.layout-sticky-section{
border-radius:20px;
padding:20px;
}

.layout-sticky-info-grid{
grid-template-columns:1fr;
}

.layout-sticky-section h3{
font-size:28px;
}
}

This sticky sidebar layout is useful when users need quick access to navigation while reading or browsing longer content. The sidebar can contain a table of contents, category links, filters, related resources, progress indicators, or important actions.

Use this layout for long-form blog posts, documentation pages, online courses, resource hubs, WooCommerce filters, product guides, help centers, and any content-heavy page where navigation should remain close to the user.

11. Magazine Layout

A magazine layout is a modern CSS layout pattern for content-heavy websites that need to show one featured story and several smaller posts in the same section. It is commonly used on blogs, news websites, editorial pages, resource hubs, and online magazines.

This layout uses CSS Grid to create a strong editorial structure. The main article receives more visual space, while smaller articles are arranged beside it. On mobile screens, everything stacks into a clean single-column layout for better readability.

  • Perfect for blogs, news websites, resource hubs, and editorial sections
  • Uses CSS Grid to combine featured and smaller article cards
  • Creates strong visual hierarchy for content-heavy pages
  • Stacks into a simple readable layout on mobile screens
Magazine Layout

Create editorial pages with a featured story grid

Use a magazine layout to combine one large featured article with smaller supporting stories in a structured content section.

Latest issue · 2026
Featured

Modern CSS layouts are changing how websites are built

Editorial layouts help content-heavy websites create hierarchy, guide attention, and make articles easier to discover.

Design 10 min read Updated today
CSS Grid

Build stronger article sections

Use grid placement to highlight important content.

Read more
UI Design

Improve visual hierarchy

Make featured stories stand out from regular posts.

Read more
Responsive

Stack cleanly on mobile

Turn complex editorial grids into readable mobile cards.

Read more

HTML

<section class="layout-magazine">

  <div class="layout-magazine-inner">

    <div class="layout-magazine-header">

      <div class="layout-magazine-heading">

        <div class="layout-magazine-kicker">Magazine Layout</div>

        <h2 class="layout-magazine-title">
          Create editorial pages with a <span>featured story grid</span>
        </h2>

        <p class="layout-magazine-text">
          Use a magazine layout to combine one large featured article with
          smaller supporting stories in a structured content section.
        </p>

      </div>

      <div class="layout-magazine-date">Latest issue · 2026</div>

    </div>

    <div class="layout-magazine-grid">

      <article class="layout-magazine-featured">

        <div class="layout-magazine-featured-content">

          <div class="layout-magazine-category">Featured</div>

          <h3>Modern CSS layouts are changing how websites are built</h3>

          <p>
            Editorial layouts help content-heavy websites create hierarchy,
            guide attention, and make articles easier to discover.
          </p>

          <div class="layout-magazine-meta">
            <span>Design</span>
            <span>10 min read</span>
            <span>Updated today</span>
          </div>

        </div>

      </article>

      <div class="layout-magazine-side">

        <article class="layout-magazine-card">

          <div class="layout-magazine-thumb"></div>

          <div class="layout-magazine-card-content">
            <div class="layout-magazine-category">CSS Grid</div>
            <h3>Build stronger article sections</h3>
            <p>Use grid placement to highlight important content.</p>
            <a href="#" class="layout-magazine-link">Read more</a>
          </div>

        </article>

        <article class="layout-magazine-card">

          <div class="layout-magazine-thumb"></div>

          <div class="layout-magazine-card-content">
            <div class="layout-magazine-category">UI Design</div>
            <h3>Improve visual hierarchy</h3>
            <p>Make featured stories stand out from regular posts.</p>
            <a href="#" class="layout-magazine-link">Read more</a>
          </div>

        </article>

        <article class="layout-magazine-card">

          <div class="layout-magazine-thumb"></div>

          <div class="layout-magazine-card-content">
            <div class="layout-magazine-category">Responsive</div>
            <h3>Stack cleanly on mobile</h3>
            <p>Turn complex editorial grids into readable mobile cards.</p>
            <a href="#" class="layout-magazine-link">Read more</a>
          </div>

        </article>

      </div>

    </div>

  </div>

</section>

CSS

.layout-magazine{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-magazine::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(236,72,153,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(34,211,238,.17),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(245,158,11,.14),transparent 38%);
pointer-events:none;
}

.layout-magazine-inner{
position:relative;
z-index:2;
}

.layout-magazine-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
}

.layout-magazine-heading{
max-width:760px;
}

.layout-magazine-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(236,72,153,.11);
border:1px solid rgba(236,72,153,.28);
color:#f9a8d4;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-magazine-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-magazine-title span{
background:linear-gradient(90deg,#f472b6,#22d3ee,#fbbf24) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-magazine-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-magazine-date{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 16px 40px rgba(0,0,0,.24);
color:#e2e8f0;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.layout-magazine-grid{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
gap:18px;
align-items:stretch;
}

.layout-magazine-featured,
.layout-magazine-card{
position:relative;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-magazine-featured:hover,
.layout-magazine-card:hover{
transform:translateY(-5px);
border-color:rgba(244,114,182,.30);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-magazine-featured{
min-height:560px;
display:flex;
flex-direction:column;
justify-content:flex-end;
}

.layout-magazine-featured::before,
.layout-magazine-thumb::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(244,114,182,.22),rgba(34,211,238,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(2,6,23,.32));
}

.layout-magazine-featured::after{
content:"";
position:absolute;
width:280px;
height:280px;
border-radius:999px;
right:-90px;
top:-90px;
background:rgba(255,255,255,.13);
}

.layout-magazine-featured-content{
position:relative;
z-index:2;
padding:30px;
background:linear-gradient(180deg,transparent,rgba(2,6,23,.78));
}

.layout-magazine-category{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(2,6,23,.70);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(10px);
margin-bottom:14px;
}

.layout-magazine-featured h3{
margin:0 0 12px;
font-size:clamp(30px,4.5vw,52px);
line-height:1.02;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
max-width:700px;
}

.layout-magazine-featured p{
margin:0 0 18px;
font-size:16px;
line-height:1.7;
color:#dbeafe;
max-width:640px;
}

.layout-magazine-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
color:#94a3b8;
font-size:12px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}

.layout-magazine-side{
display:grid;
grid-template-rows:1fr 1fr 1fr;
gap:18px;
}

.layout-magazine-card{
display:grid;
grid-template-columns:130px minmax(0,1fr);
min-height:170px;
}

.layout-magazine-thumb{
position:relative;
overflow:hidden;
background:
linear-gradient(135deg,rgba(34,211,238,.20),rgba(99,102,241,.16));
}

.layout-magazine-card:nth-child(2) .layout-magazine-thumb{
background:
linear-gradient(135deg,rgba(245,158,11,.20),rgba(236,72,153,.16));
}

.layout-magazine-card:nth-child(3) .layout-magazine-thumb{
background:
linear-gradient(135deg,rgba(34,197,94,.19),rgba(34,211,238,.16));
}

.layout-magazine-thumb::after{
content:"";
position:absolute;
width:105px;
height:105px;
border-radius:28px;
left:50%;
top:50%;
transform:translate(-50%,-50%) rotate(-10deg);
background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 20px 50px rgba(0,0,0,.22);
}

.layout-magazine-card-content{
padding:18px;
display:flex;
flex-direction:column;
justify-content:center;
}

.layout-magazine-card h3{
margin:0 0 9px;
font-size:19px;
line-height:1.22;
font-weight:900;
letter-spacing:-.025em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-magazine-card p{
margin:0 0 12px;
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.layout-magazine-link{
display:inline-flex;
align-items:center;
gap:8px;
color:#93c5fd;
font-size:13px;
font-weight:900;
text-decoration:none;
}

.layout-magazine-link::after{
content:"→";
transition:transform .2s ease;
}

.layout-magazine-link:hover::after{
transform:translateX(4px);
}

@media (max-width: 980px){
.layout-magazine-header{
display:block;
}

.layout-magazine-date{
margin-top:18px;
}

.layout-magazine-grid{
grid-template-columns:1fr;
}

.layout-magazine-featured{
min-height:430px;
}

.layout-magazine-side{
grid-template-rows:auto;
}
}

@media (max-width: 680px){
.layout-magazine{
padding:20px;
}

.layout-magazine-title{
font-size:34px;
}

.layout-magazine-text{
font-size:16px;
}

.layout-magazine-featured{
min-height:390px;
}

.layout-magazine-featured-content{
padding:24px;
}

.layout-magazine-featured h3{
font-size:32px;
}

.layout-magazine-card{
grid-template-columns:1fr;
}

.layout-magazine-thumb{
height:160px;
}

.layout-magazine-card-content{
padding:20px;
}
}

This magazine layout is useful when a content section needs a clear editorial hierarchy. The large featured card draws attention to the most important story, while the smaller cards allow visitors to discover related articles, tutorials, or resources without overwhelming the page.

Use this layout for blog homepages, news sections, online magazines, resource libraries, article roundups, tutorial websites, editorial landing pages, and content-heavy WordPress websites that need a stronger visual structure.

12. Masonry-Style Grid Layout

A masonry-style grid layout is a modern CSS layout pattern used to display cards with different heights in a visually interesting structure. It is commonly used for portfolios, image galleries, inspiration boards, blog snippets, case studies, resources, and creative websites.

Traditional equal-height grids are clean, but masonry-style layouts feel more dynamic because each card can have a different height. This example uses CSS columns to create a masonry-like layout without JavaScript. On smaller screens, the layout automatically reduces the number of columns and becomes easier to read.

  • Perfect for galleries, portfolios, inspiration boards, and creative grids
  • Creates a masonry-style effect without JavaScript
  • Works well with cards of different heights
  • Adapts from multiple columns to a single-column mobile layout
Masonry Grid

Create dynamic cards with a masonry-style layout

Use a masonry-style layout when your cards have different heights and you want a more creative, editorial, or gallery-like visual structure.

CSS columns · no JavaScript
Gallery

Creative project grid

Showcase visual work with cards that do not need to have equal height.

Portfolio View
Case Study

Longer content card

Masonry-style layouts work well when one item has more text, a taller image, or a larger preview than the others.

Design View
UI

Compact card

Shorter items fit naturally into the column flow.

CSS View
Inspiration

Visual inspiration board

This layout is useful for inspiration pages, design collections, resources, and image-heavy content.

Grid View
Resource

Useful resource card

Cards remain clean and readable.

Guide View
Layout

Flexible content height

Different content lengths can create a natural, magazine-like rhythm instead of forcing every card to match the same height.

Modern View

HTML

<section class="layout-masonry">

  <div class="layout-masonry-inner">

    <div class="layout-masonry-header">

      <div class="layout-masonry-heading">

        <div class="layout-masonry-kicker">Masonry Grid</div>

        <h2 class="layout-masonry-title">
          Create dynamic cards with a <span>masonry-style layout</span>
        </h2>

        <p class="layout-masonry-text">
          Use a masonry-style layout when your cards have different heights and
          you want a more creative, editorial, or gallery-like visual structure.
        </p>

      </div>

      <div class="layout-masonry-pill">CSS columns · no JavaScript</div>

    </div>

    <div class="layout-masonry-grid">

      <article class="layout-masonry-card">
        <div class="layout-masonry-visual"></div>
        <div class="layout-masonry-content">
          <div class="layout-masonry-category">Gallery</div>
          <h3>Creative project grid</h3>
          <p>Showcase visual work with cards that do not need to have equal height.</p>
          <div class="layout-masonry-meta">
            <span>Portfolio</span>
            <a href="#" class="layout-masonry-link">View</a>
          </div>
        </div>
      </article>

      <article class="layout-masonry-card">
        <div class="layout-masonry-visual"></div>
        <div class="layout-masonry-content">
          <div class="layout-masonry-category">Case Study</div>
          <h3>Longer content card</h3>
          <p>
            Masonry-style layouts work well when one item has more text,
            a taller image, or a larger preview than the others.
          </p>
          <div class="layout-masonry-meta">
            <span>Design</span>
            <a href="#" class="layout-masonry-link">View</a>
          </div>
        </div>
      </article>

      <article class="layout-masonry-card">
        <div class="layout-masonry-visual"></div>
        <div class="layout-masonry-content">
          <div class="layout-masonry-category">UI</div>
          <h3>Compact card</h3>
          <p>Shorter items fit naturally into the column flow.</p>
          <div class="layout-masonry-meta">
            <span>CSS</span>
            <a href="#" class="layout-masonry-link">View</a>
          </div>
        </div>
      </article>

      <article class="layout-masonry-card">
        <div class="layout-masonry-visual"></div>
        <div class="layout-masonry-content">
          <div class="layout-masonry-category">Inspiration</div>
          <h3>Visual inspiration board</h3>
          <p>
            This layout is useful for inspiration pages, design collections,
            resources, and image-heavy content.
          </p>
          <div class="layout-masonry-meta">
            <span>Grid</span>
            <a href="#" class="layout-masonry-link">View</a>
          </div>
        </div>
      </article>

      <article class="layout-masonry-card">
        <div class="layout-masonry-visual"></div>
        <div class="layout-masonry-content">
          <div class="layout-masonry-category">Resource</div>
          <h3>Useful resource card</h3>
          <p>Cards remain clean and readable.</p>
          <div class="layout-masonry-meta">
            <span>Guide</span>
            <a href="#" class="layout-masonry-link">View</a>
          </div>
        </div>
      </article>

      <article class="layout-masonry-card">
        <div class="layout-masonry-visual"></div>
        <div class="layout-masonry-content">
          <div class="layout-masonry-category">Layout</div>
          <h3>Flexible content height</h3>
          <p>
            Different content lengths can create a natural, magazine-like rhythm
            instead of forcing every card to match the same height.
          </p>
          <div class="layout-masonry-meta">
            <span>Modern</span>
            <a href="#" class="layout-masonry-link">View</a>
          </div>
        </div>
      </article>

    </div>

  </div>

</section>

CSS

.layout-masonry{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-masonry::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(236,72,153,.17),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,197,94,.13),transparent 38%);
pointer-events:none;
}

.layout-masonry-inner{
position:relative;
z-index:2;
}

.layout-masonry-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
}

.layout-masonry-heading{
max-width:780px;
}

.layout-masonry-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-masonry-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-masonry-title span{
background:linear-gradient(90deg,#22d3ee,#f472b6,#22c55e) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-masonry-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-masonry-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 16px 40px rgba(0,0,0,.24);
color:#e2e8f0;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.layout-masonry-grid{
columns:3 230px;
column-gap:18px;
}

.layout-masonry-card{
position:relative;
display:inline-block;
width:100%;
margin:0 0 18px;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.30);
overflow:hidden;
break-inside:avoid;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-masonry-card:hover{
transform:translateY(-5px);
border-color:rgba(34,211,238,.30);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-masonry-visual{
position:relative;
height:180px;
overflow:hidden;
background:
linear-gradient(135deg,rgba(34,211,238,.22),rgba(236,72,153,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-masonry-card:nth-child(2) .layout-masonry-visual{
height:260px;
background:
linear-gradient(135deg,rgba(236,72,153,.22),rgba(168,85,247,.17)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-masonry-card:nth-child(3) .layout-masonry-visual{
height:140px;
background:
linear-gradient(135deg,rgba(34,197,94,.20),rgba(34,211,238,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-masonry-card:nth-child(4) .layout-masonry-visual{
height:220px;
background:
linear-gradient(135deg,rgba(245,158,11,.22),rgba(236,72,153,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-masonry-card:nth-child(5) .layout-masonry-visual{
height:165px;
background:
linear-gradient(135deg,rgba(99,102,241,.22),rgba(34,211,238,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-masonry-card:nth-child(6) .layout-masonry-visual{
height:245px;
background:
linear-gradient(135deg,rgba(244,114,182,.22),rgba(251,191,36,.15)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-masonry-visual::before{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:999px;
right:-58px;
top:-58px;
background:rgba(255,255,255,.14);
}

.layout-masonry-visual::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:110px;
height:110px;
border-radius:28px;
transform:translate(-50%,-50%) rotate(-10deg);
background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 20px 50px rgba(0,0,0,.22);
}

.layout-masonry-content{
padding:20px;
}

.layout-masonry-category{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#94a3b8;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:12px;
}

.layout-masonry-card h3{
margin:0 0 10px;
font-size:20px;
line-height:1.25;
font-weight:900;
letter-spacing:-.025em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-masonry-card p{
margin:0 0 16px;
font-size:14px;
line-height:1.65;
color:#cbd5e1;
}

.layout-masonry-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.08);
color:#94a3b8;
font-size:12px;
font-weight:850;
}

.layout-masonry-link{
color:#67e8f9;
font-size:13px;
font-weight:900;
text-decoration:none;
}

@media (max-width: 880px){
.layout-masonry-header{
display:block;
}

.layout-masonry-pill{
margin-top:18px;
}

.layout-masonry-grid{
columns:2 240px;
}
}

@media (max-width: 620px){
.layout-masonry{
padding:20px;
}

.layout-masonry-title{
font-size:34px;
}

.layout-masonry-text{
font-size:16px;
}

.layout-masonry-pill{
width:100%;
box-sizing:border-box;
}

.layout-masonry-grid{
columns:1;
}

.layout-masonry-card{
margin-bottom:14px;
}

.layout-masonry-visual,
.layout-masonry-card:nth-child(2) .layout-masonry-visual,
.layout-masonry-card:nth-child(3) .layout-masonry-visual,
.layout-masonry-card:nth-child(4) .layout-masonry-visual,
.layout-masonry-card:nth-child(5) .layout-masonry-visual,
.layout-masonry-card:nth-child(6) .layout-masonry-visual{
height:190px;
}
}

This masonry-style grid layout is useful when content items have different heights and should not be forced into a strict equal-card structure. The layout creates a more natural, editorial, and creative rhythm while still keeping each card readable.

Use this layout for portfolio galleries, design inspiration boards, image collections, resource grids, case studies, blog snippets, creative websites, and any section where varied content height makes the page feel more dynamic.

13. Dashboard Layout

A dashboard layout is a modern CSS layout pattern used for admin panels, analytics pages, SaaS products, client portals, CRM systems, reporting tools, and web apps. It usually combines a sidebar, top bar, statistic cards, charts, tables, and content panels.

This layout uses CSS Grid to create a structured dashboard interface with a sidebar on the left and a main content area on the right. The content area includes a top bar, metric cards, a large chart panel, and smaller activity panels. On mobile screens, the dashboard stacks into a clean single-column layout.

  • Perfect for admin panels, SaaS dashboards, analytics pages, and web apps
  • Uses CSS Grid for sidebar, top bar, cards, and content panels
  • Includes metric cards, chart placeholder, activity panel, and quick actions
  • Stacks into a mobile-friendly layout on smaller screens
Dashboard Layout

Build modern admin screens with a dashboard layout

Use a dashboard layout to organize navigation, statistics, charts, and activity panels inside a clean web app interface.

Analytics Overview

Track performance, revenue, traffic, and active users.

Search reports
Revenue $42.8k +18.4%
Users 18.2k +12.1%
Orders 1,284 +9.7%
Growth 24% +4.3%

Performance chart

Recent activity

A
New report generated Analytics report was updated.
B
Customer added A new customer joined today.
C
Goal completed Monthly traffic goal reached.

HTML

<section class="layout-dashboard">

  <div class="layout-dashboard-inner">

    <div class="layout-dashboard-header">

      <div class="layout-dashboard-kicker">Dashboard Layout</div>

      <h2 class="layout-dashboard-title">
        Build modern admin screens with a <span>dashboard layout</span>
      </h2>

      <p class="layout-dashboard-text">
        Use a dashboard layout to organize navigation, statistics,
        charts, and activity panels inside a clean web app interface.
      </p>

    </div>

    <div class="layout-dashboard-shell">

      <aside class="layout-dashboard-sidebar">

        <div class="layout-dashboard-brand">
          <div class="layout-dashboard-logo"></div>
          <div>
            <strong>DashFlow</strong>
            <span>Admin UI</span>
          </div>
        </div>

        <nav class="layout-dashboard-nav">
          <a href="#"><span class="layout-dashboard-nav-icon">01</span>Overview</a>
          <a href="#"><span class="layout-dashboard-nav-icon">02</span>Analytics</a>
          <a href="#"><span class="layout-dashboard-nav-icon">03</span>Customers</a>
          <a href="#"><span class="layout-dashboard-nav-icon">04</span>Reports</a>
        </nav>

        <div class="layout-dashboard-upgrade">
          <strong>Upgrade dashboard</strong>
          <p>Add advanced reports, custom widgets, and team analytics.</p>
          <a href="#">Upgrade</a>
        </div>

      </aside>

      <main class="layout-dashboard-main">

        <div class="layout-dashboard-topbar">

          <div>
            <h3>Analytics Overview</h3>
            <p>Track performance, revenue, traffic, and active users.</p>
          </div>

          <div class="layout-dashboard-actions">
            <div class="layout-dashboard-search">Search reports</div>
            <div class="layout-dashboard-avatar"></div>
          </div>

        </div>

        <div class="layout-dashboard-stats">

          <div class="layout-dashboard-stat">
            <span>Revenue</span>
            <strong>$42.8k</strong>
            <em>+18.4%</em>
          </div>

          <div class="layout-dashboard-stat">
            <span>Users</span>
            <strong>18.2k</strong>
            <em>+12.1%</em>
          </div>

          <div class="layout-dashboard-stat">
            <span>Orders</span>
            <strong>1,284</strong>
            <em>+9.7%</em>
          </div>

          <div class="layout-dashboard-stat">
            <span>Growth</span>
            <strong>24%</strong>
            <em>+4.3%</em>
          </div>

        </div>

        <div class="layout-dashboard-panels">

          <section class="layout-dashboard-panel">

            <h3>Performance chart</h3>

            <div class="layout-dashboard-chart">
              <div class="layout-dashboard-bar"></div>
              <div class="layout-dashboard-bar"></div>
              <div class="layout-dashboard-bar"></div>
              <div class="layout-dashboard-bar"></div>
              <div class="layout-dashboard-bar"></div>
              <div class="layout-dashboard-bar"></div>
              <div class="layout-dashboard-bar"></div>
              <div class="layout-dashboard-bar"></div>
            </div>

          </section>

          <section class="layout-dashboard-panel">

            <h3>Recent activity</h3>

            <div class="layout-dashboard-activity">

              <div class="layout-dashboard-item">
                <div class="layout-dashboard-item-icon">A</div>
                <div>
                  <strong>New report generated</strong>
                  <span>Analytics report was updated.</span>
                </div>
              </div>

              <div class="layout-dashboard-item">
                <div class="layout-dashboard-item-icon">B</div>
                <div>
                  <strong>Customer added</strong>
                  <span>A new customer joined today.</span>
                </div>
              </div>

              <div class="layout-dashboard-item">
                <div class="layout-dashboard-item-icon">C</div>
                <div>
                  <strong>Goal completed</strong>
                  <span>Monthly traffic goal reached.</span>
                </div>
              </div>

            </div>

          </section>

        </div>

      </main>

    </div>

  </div>

</section>

CSS

.layout-dashboard{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-dashboard::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(99,102,241,.20),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,197,94,.13),transparent 38%);
pointer-events:none;
}

.layout-dashboard-inner{
position:relative;
z-index:2;
}

.layout-dashboard-header{
max-width:820px;
margin:0 0 30px;
}

.layout-dashboard-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(99,102,241,.12);
border:1px solid rgba(99,102,241,.30);
color:#c4b5fd;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-dashboard-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-dashboard-title span{
background:linear-gradient(90deg,#818cf8,#22d3ee,#22c55e) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-dashboard-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:760px;
}

.layout-dashboard-shell{
display:grid;
grid-template-columns:250px minmax(0,1fr);
gap:18px;
min-height:620px;
border-radius:26px;
background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.32);
padding:18px;
overflow:hidden;
}

.layout-dashboard-sidebar{
border-radius:22px;
background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(15,23,42,.56));
border:1px solid rgba(255,255,255,.10);
padding:18px;
display:flex;
flex-direction:column;
gap:18px;
}

.layout-dashboard-brand{
display:flex;
align-items:center;
gap:12px;
padding-bottom:18px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.layout-dashboard-logo{
width:42px;
height:42px;
border-radius:14px;
background:linear-gradient(135deg,#818cf8,#22d3ee);
box-shadow:0 16px 34px rgba(34,211,238,.22);
}

.layout-dashboard-brand strong{
display:block;
font-size:15px;
font-weight:950;
color:#ffffff;
line-height:1.2;
}

.layout-dashboard-brand span{
display:block;
font-size:12px;
font-weight:800;
color:#94a3b8;
margin-top:3px;
}

.layout-dashboard-nav{
display:grid;
gap:10px;
}

.layout-dashboard-nav a{
display:flex;
align-items:center;
gap:10px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.07);
color:#cbd5e1;
font-size:14px;
font-weight:850;
text-decoration:none;
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.layout-dashboard-nav a:hover,
.layout-dashboard-nav a:first-child{
background:linear-gradient(135deg,rgba(129,140,248,.22),rgba(34,211,238,.12));
border-color:rgba(129,140,248,.28);
transform:translateX(3px);
}

.layout-dashboard-nav-icon{
width:28px;
height:28px;
border-radius:10px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.07);
color:#67e8f9;
font-size:13px;
font-weight:900;
}

.layout-dashboard-upgrade{
margin-top:auto;
padding:18px;
border-radius:18px;
background:
linear-gradient(135deg,rgba(34,211,238,.15),rgba(129,140,248,.12));
border:1px solid rgba(34,211,238,.18);
}

.layout-dashboard-upgrade strong{
display:block;
margin-bottom:8px;
font-size:15px;
font-weight:950;
color:#ffffff;
}

.layout-dashboard-upgrade p{
margin:0 0 14px;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.layout-dashboard-upgrade a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:0 12px;
border-radius:12px;
background:linear-gradient(135deg,#818cf8,#22d3ee);
color:#020617;
font-size:12px;
font-weight:900;
text-decoration:none;
}

.layout-dashboard-main{
display:grid;
grid-template-rows:auto auto minmax(0,1fr);
gap:18px;
min-width:0;
}

.layout-dashboard-topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.10);
padding:18px;
}

.layout-dashboard-topbar h3{
margin:0;
font-size:24px;
line-height:1.15;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-dashboard-topbar p{
margin:4px 0 0;
font-size:13px;
line-height:1.5;
font-weight:750;
color:#94a3b8;
}

.layout-dashboard-actions{
display:flex;
align-items:center;
gap:10px;
}

.layout-dashboard-search{
height:42px;
min-width:190px;
border-radius:14px;
display:flex;
align-items:center;
padding:0 13px;
background:rgba(2,6,23,.42);
border:1px solid rgba(255,255,255,.09);
color:#94a3b8;
font-size:13px;
font-weight:800;
}

.layout-dashboard-avatar{
width:42px;
height:42px;
border-radius:999px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
box-shadow:0 14px 34px rgba(34,197,94,.20);
}

.layout-dashboard-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}

.layout-dashboard-stat{
position:relative;
padding:18px;
border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 20px 50px rgba(0,0,0,.24);
overflow:hidden;
}

.layout-dashboard-stat::before{
content:"";
position:absolute;
right:-34px;
top:-34px;
width:105px;
height:105px;
border-radius:999px;
background:rgba(34,211,238,.12);
}

.layout-dashboard-stat:nth-child(2)::before{
background:rgba(129,140,248,.14);
}

.layout-dashboard-stat:nth-child(3)::before{
background:rgba(34,197,94,.13);
}

.layout-dashboard-stat:nth-child(4)::before{
background:rgba(245,158,11,.14);
}

.layout-dashboard-stat span{
position:relative;
z-index:2;
display:block;
margin-bottom:8px;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
color:#94a3b8;
}

.layout-dashboard-stat strong{
position:relative;
z-index:2;
display:block;
font-size:26px;
line-height:1;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff;
}

.layout-dashboard-stat em{
position:relative;
z-index:2;
display:block;
margin-top:10px;
font-style:normal;
font-size:12px;
font-weight:850;
color:#86efac;
}

.layout-dashboard-panels{
display:grid;
grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);
gap:18px;
min-width:0;
}

.layout-dashboard-panel{
position:relative;
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 24px 70px rgba(0,0,0,.28);
overflow:hidden;
padding:20px;
}

.layout-dashboard-panel h3{
margin:0 0 18px;
font-size:19px;
line-height:1.25;
font-weight:950;
letter-spacing:-.025em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-dashboard-chart{
height:260px;
display:flex;
align-items:flex-end;
gap:12px;
padding:18px;
border-radius:18px;
background:rgba(2,6,23,.38);
border:1px solid rgba(255,255,255,.08);
}

.layout-dashboard-bar{
flex:1;
min-width:18px;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#22d3ee,#818cf8);
box-shadow:0 0 24px rgba(34,211,238,.20);
}

.layout-dashboard-bar:nth-child(1){height:42%;}
.layout-dashboard-bar:nth-child(2){height:66%;}
.layout-dashboard-bar:nth-child(3){height:50%;}
.layout-dashboard-bar:nth-child(4){height:82%;}
.layout-dashboard-bar:nth-child(5){height:58%;}
.layout-dashboard-bar:nth-child(6){height:74%;}
.layout-dashboard-bar:nth-child(7){height:92%;}
.layout-dashboard-bar:nth-child(8){height:68%;}

.layout-dashboard-activity{
display:grid;
gap:12px;
}

.layout-dashboard-item{
display:flex;
align-items:center;
gap:12px;
padding:13px;
border-radius:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
}

.layout-dashboard-item-icon{
width:36px;
height:36px;
border-radius:13px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#818cf8);
color:#ffffff;
font-size:13px;
font-weight:950;
flex:0 0 auto;
}

.layout-dashboard-item strong{
display:block;
font-size:13px;
line-height:1.25;
font-weight:900;
color:#ffffff;
}

.layout-dashboard-item span{
display:block;
margin-top:3px;
font-size:12px;
line-height:1.35;
color:#94a3b8;
}

@media (max-width: 1060px){
.layout-dashboard-shell{
grid-template-columns:1fr;
}

.layout-dashboard-sidebar{
display:grid;
grid-template-columns:1fr;
}

.layout-dashboard-upgrade{
display:none;
}

.layout-dashboard-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.layout-dashboard-panels{
grid-template-columns:1fr;
}
}

@media (max-width: 680px){
.layout-dashboard{
padding:20px;
}

.layout-dashboard-title{
font-size:34px;
}

.layout-dashboard-text{
font-size:16px;
}

.layout-dashboard-shell{
padding:14px;
border-radius:22px;
}

.layout-dashboard-topbar{
display:block;
}

.layout-dashboard-actions{
margin-top:14px;
}

.layout-dashboard-search{
min-width:0;
width:100%;
}

.layout-dashboard-stats{
grid-template-columns:1fr;
}

.layout-dashboard-chart{
height:220px;
gap:8px;
padding:14px;
}

.layout-dashboard-sidebar,
.layout-dashboard-topbar,
.layout-dashboard-panel{
border-radius:20px;
}
}

This dashboard layout is useful because it organizes a lot of information into a clear interface. The sidebar handles navigation, the top bar gives context, the stat cards summarize key metrics, and the panels provide deeper information such as charts or activity logs.

Use this layout for SaaS dashboards, admin panels, CRM systems, analytics pages, client portals, reporting tools, web apps, internal tools, and any interface where users need to monitor data and navigate between sections.

14. Bento Grid Layout

A bento grid layout is a modern CSS layout pattern inspired by modular dashboard cards and Japanese bento boxes. It is commonly used on SaaS websites, startup landing pages, product pages, AI tool websites, portfolio pages, and modern feature sections.

This layout uses CSS Grid to create cards of different sizes inside one structured section. Some cards are large and visually dominant, while smaller cards support the main message. On mobile screens, the bento grid stacks into a clean single-column layout.

  • Perfect for SaaS, AI tools, startups, portfolios, and product landing pages
  • Uses CSS Grid with different card spans for a bento-style structure
  • Creates strong visual hierarchy without needing complex JavaScript
  • Stacks cleanly on mobile screens for better readability
Bento Grid

Present features with a modern bento layout

Use a bento grid layout to combine large feature cards, compact stats, mini charts, and supporting content into one visually rich section.

Main Feature

Build flexible website sections with modern CSS Grid

A bento layout gives important content more space while still keeping smaller details visible in a clean modular structure.

Speed

Fast UI

Use reusable cards and simple CSS rules to build polished sections faster.

3x faster
Insights

Visual data

Small charts and metrics fit naturally into bento cards.

Workflow

Organize multiple benefits in one section

Bento layouts are useful when a landing page needs to show many product benefits without turning into a boring card grid.

Grid Responsive Reusable Modern UI
Tasks

Clean structure

✓
Responsive cards
✓
Flexible columns
✓
Strong hierarchy
Design

Premium feel

Different card sizes create rhythm, depth, and a stronger visual presentation.

24 blocks

HTML

<section class="layout-bento">

  <div class="layout-bento-inner">

    <div class="layout-bento-header">

      <div class="layout-bento-kicker">Bento Grid</div>

      <h2 class="layout-bento-title">
        Present features with a <span>modern bento layout</span>
      </h2>

      <p class="layout-bento-text">
        Use a bento grid layout to combine large feature cards, compact stats,
        mini charts, and supporting content into one visually rich section.
      </p>

    </div>

    <div class="layout-bento-grid">

      <div class="layout-bento-card layout-bento-large layout-bento-glow-card">

        <div class="layout-bento-label">Main Feature</div>

        <h3>Build flexible website sections with modern CSS Grid</h3>

        <p>
          A bento layout gives important content more space while still keeping
          smaller details visible in a clean modular structure.
        </p>

        <div class="layout-bento-visual"></div>

      </div>

      <div class="layout-bento-card">

        <div class="layout-bento-label">Speed</div>

        <h3>Fast UI</h3>

        <p>Use reusable cards and simple CSS rules to build polished sections faster.</p>

        <div class="layout-bento-stat">
          <strong>3x</strong>
          <span>faster</span>
        </div>

      </div>

      <div class="layout-bento-card layout-bento-tall">

        <div class="layout-bento-label">Insights</div>

        <h3>Visual data</h3>

        <p>Small charts and metrics fit naturally into bento cards.</p>

        <div class="layout-bento-mini-chart">
          <div class="layout-bento-bar"></div>
          <div class="layout-bento-bar"></div>
          <div class="layout-bento-bar"></div>
          <div class="layout-bento-bar"></div>
          <div class="layout-bento-bar"></div>
        </div>

      </div>

      <div class="layout-bento-card layout-bento-wide">

        <div class="layout-bento-label">Workflow</div>

        <h3>Organize multiple benefits in one section</h3>

        <p>
          Bento layouts are useful when a landing page needs to show many
          product benefits without turning into a boring card grid.
        </p>

        <div class="layout-bento-chip-row">
          <span class="layout-bento-chip">Grid</span>
          <span class="layout-bento-chip">Responsive</span>
          <span class="layout-bento-chip">Reusable</span>
          <span class="layout-bento-chip">Modern UI</span>
        </div>

      </div>

      <div class="layout-bento-card">

        <div class="layout-bento-label">Tasks</div>

        <h3>Clean structure</h3>

        <div class="layout-bento-list">

          <div class="layout-bento-list-item">
            <div class="layout-bento-list-icon">✓</div>
            <span>Responsive cards</span>
          </div>

          <div class="layout-bento-list-item">
            <div class="layout-bento-list-icon">✓</div>
            <span>Flexible columns</span>
          </div>

          <div class="layout-bento-list-item">
            <div class="layout-bento-list-icon">✓</div>
            <span>Strong hierarchy</span>
          </div>

        </div>

      </div>

      <div class="layout-bento-card">

        <div class="layout-bento-label">Design</div>

        <h3>Premium feel</h3>

        <p>
          Different card sizes create rhythm, depth, and a stronger visual presentation.
        </p>

        <div class="layout-bento-stat">
          <strong>24</strong>
          <span>blocks</span>
        </div>

      </div>

    </div>

  </div>

</section>

CSS

.layout-bento{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-bento::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,197,94,.13),transparent 38%);
pointer-events:none;
}

.layout-bento-inner{
position:relative;
z-index:2;
}

.layout-bento-header{
max-width:820px;
margin:0 auto 32px;
text-align:center;
}

.layout-bento-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-bento-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-bento-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#22c55e) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-bento-text{
margin:0 auto;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-bento-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:minmax(180px,auto);
gap:18px;
}

.layout-bento-card{
position:relative;
padding:24px;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-bento-card::before{
content:"";
position:absolute;
right:-48px;
top:-48px;
width:150px;
height:150px;
border-radius:999px;
background:rgba(34,211,238,.13);
filter:blur(2px);
pointer-events:none;
}

.layout-bento-card:hover{
transform:translateY(-5px);
border-color:rgba(34,211,238,.30);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-bento-large{
grid-column:span 2;
grid-row:span 2;
min-height:380px;
}

.layout-bento-wide{
grid-column:span 2;
}

.layout-bento-tall{
grid-row:span 2;
}

.layout-bento-card:nth-child(2)::before{
background:rgba(168,85,247,.15);
}

.layout-bento-card:nth-child(3)::before{
background:rgba(34,197,94,.13);
}

.layout-bento-card:nth-child(4)::before{
background:rgba(245,158,11,.15);
}

.layout-bento-card:nth-child(5)::before{
background:rgba(236,72,153,.14);
}

.layout-bento-card:nth-child(6)::before{
background:rgba(99,102,241,.16);
}

.layout-bento-label{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#94a3b8;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:16px;
}

.layout-bento-card h3{
position:relative;
z-index:2;
margin:0 0 10px;
font-size:22px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-bento-large h3{
font-size:clamp(30px,4vw,46px);
line-height:1.05;
letter-spacing:-.05em;
max-width:560px;
}

.layout-bento-card p{
position:relative;
z-index:2;
margin:0;
font-size:15px;
line-height:1.65;
color:#cbd5e1;
max-width:560px;
}

.layout-bento-visual{
position:relative;
z-index:2;
margin-top:24px;
height:170px;
border-radius:22px;
background:
linear-gradient(135deg,rgba(34,211,238,.20),rgba(168,85,247,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.11);
overflow:hidden;
}

.layout-bento-visual::before{
content:"";
position:absolute;
left:24px;
top:24px;
width:130px;
height:92px;
border-radius:20px;
background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 22px 50px rgba(0,0,0,.22);
}

.layout-bento-visual::after{
content:"";
position:absolute;
right:24px;
bottom:24px;
width:46%;
height:12px;
border-radius:999px;
background:linear-gradient(90deg,#22d3ee,#a78bfa,#22c55e);
box-shadow:0 0 24px rgba(34,211,238,.38);
}

.layout-bento-mini-chart{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:8px;
height:118px;
margin-top:20px;
padding:14px;
border-radius:18px;
background:rgba(2,6,23,.35);
border:1px solid rgba(255,255,255,.08);
}

.layout-bento-bar{
flex:1;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#22d3ee,#818cf8);
box-shadow:0 0 18px rgba(34,211,238,.18);
}

.layout-bento-bar:nth-child(1){height:40%;}
.layout-bento-bar:nth-child(2){height:72%;}
.layout-bento-bar:nth-child(3){height:54%;}
.layout-bento-bar:nth-child(4){height:88%;}
.layout-bento-bar:nth-child(5){height:62%;}

.layout-bento-stat{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:8px;
margin-top:18px;
}

.layout-bento-stat strong{
font-size:42px;
line-height:.95;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff;
}

.layout-bento-stat span{
padding-bottom:5px;
font-size:13px;
font-weight:900;
color:#86efac;
}

.layout-bento-list{
position:relative;
z-index:2;
display:grid;
gap:10px;
margin-top:18px;
}

.layout-bento-list-item{
display:flex;
align-items:center;
gap:10px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
}

.layout-bento-list-icon{
width:26px;
height:26px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#ffffff;
font-size:12px;
font-weight:900;
flex:0 0 auto;
}

.layout-bento-list-item span{
font-size:13px;
line-height:1.3;
font-weight:850;
color:#cbd5e1;
}

.layout-bento-chip-row{
position:relative;
z-index:2;
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:20px;
}

.layout-bento-chip{
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:900;
}

.layout-bento-glow-card{
background:
linear-gradient(135deg,rgba(34,211,238,.16),rgba(168,85,247,.12)),
linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
}

@media (max-width: 1000px){
.layout-bento-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.layout-bento-large,
.layout-bento-wide{
grid-column:span 2;
}

.layout-bento-tall{
grid-row:auto;
}
}

@media (max-width: 640px){
.layout-bento{
padding:20px;
}

.layout-bento-header{
text-align:left;
margin-bottom:24px;
}

.layout-bento-title{
font-size:34px;
}

.layout-bento-text{
font-size:16px;
}

.layout-bento-grid{
grid-template-columns:1fr;
gap:14px;
}

.layout-bento-large,
.layout-bento-wide{
grid-column:auto;
}

.layout-bento-large{
min-height:auto;
}

.layout-bento-card{
padding:22px;
border-radius:20px;
}

.layout-bento-large h3{
font-size:32px;
}

.layout-bento-visual{
height:150px;
}
}

This bento grid layout is useful when a page needs to present several benefits, stats, visuals, and feature highlights inside one compact section. The different card sizes create visual hierarchy and make the section feel more premium than a standard equal-card grid.

Use this layout for SaaS websites, AI tool landing pages, startup websites, product pages, feature sections, portfolio pages, dashboard previews, and modern homepage sections where you want to combine multiple content types in one polished grid.

15. Portfolio Gallery Layout

A portfolio gallery layout is a modern CSS layout pattern used to showcase projects, case studies, design work, photography, website builds, branding projects, and creative services. It helps visitors browse visual work quickly while still giving each project enough context.

This layout uses CSS Grid to create a responsive project gallery. The featured project card is larger, while smaller project cards create a balanced visual rhythm. Each card includes a visual preview, category label, project title, short description, and a link. On mobile screens, all cards stack into a clean single-column layout.

  • Perfect for portfolios, agencies, designers, developers, and creative studios
  • Uses CSS Grid to combine featured and smaller project cards
  • Creates strong visual hierarchy for selected work
  • Stacks cleanly on mobile screens for better readability
Portfolio Gallery

Showcase projects with a modern gallery layout

Use a portfolio gallery layout to present selected work, case studies, websites, visual projects, or creative services with strong visual hierarchy.

All Websites Branding UI Design
Featured Project

Premium landing page redesign for a modern SaaS product

A large featured portfolio card gives the most important project more visual weight and helps guide attention.

UI CSS Grid Landing Page
→
Website

Agency homepage

Clean structure for service websites.

Web
→
Branding

Visual identity system

Project card with strong image focus.

Brand
→
Case Study

eCommerce product page experience

Wide portfolio cards are useful for larger case studies and more detailed project previews.

Shop UX
→
App UI

Dashboard design

Compact project preview.

App
→

HTML

<section class="layout-portfolio">

  <div class="layout-portfolio-inner">

    <div class="layout-portfolio-header">

      <div class="layout-portfolio-heading">

        <div class="layout-portfolio-kicker">Portfolio Gallery</div>

        <h2 class="layout-portfolio-title">
          Showcase projects with a <span>modern gallery layout</span>
        </h2>

        <p class="layout-portfolio-text">
          Use a portfolio gallery layout to present selected work, case studies,
          websites, visual projects, or creative services with strong visual hierarchy.
        </p>

      </div>

      <div class="layout-portfolio-filters">
        <span>All</span>
        <span>Websites</span>
        <span>Branding</span>
        <span>UI Design</span>
      </div>

    </div>

    <div class="layout-portfolio-grid">

      <article class="layout-portfolio-card layout-portfolio-featured">

        <div class="layout-portfolio-visual"></div>

        <div class="layout-portfolio-content">

          <div class="layout-portfolio-category">Featured Project</div>

          <h3>Premium landing page redesign for a modern SaaS product</h3>

          <p>
            A large featured portfolio card gives the most important project more
            visual weight and helps guide attention.
          </p>

          <div class="layout-portfolio-meta">

            <div class="layout-portfolio-tags">
              <span>UI</span>
              <span>CSS Grid</span>
              <span>Landing Page</span>
            </div>

            <a href="#" class="layout-portfolio-link">→</a>

          </div>

        </div>

      </article>

      <article class="layout-portfolio-card">

        <div class="layout-portfolio-visual"></div>

        <div class="layout-portfolio-content">

          <div class="layout-portfolio-category">Website</div>

          <h3>Agency homepage</h3>

          <p>Clean structure for service websites.</p>

          <div class="layout-portfolio-meta">
            <div class="layout-portfolio-tags">
              <span>Web</span>
            </div>
            <a href="#" class="layout-portfolio-link">→</a>
          </div>

        </div>

      </article>

      <article class="layout-portfolio-card">

        <div class="layout-portfolio-visual"></div>

        <div class="layout-portfolio-content">

          <div class="layout-portfolio-category">Branding</div>

          <h3>Visual identity system</h3>

          <p>Project card with strong image focus.</p>

          <div class="layout-portfolio-meta">
            <div class="layout-portfolio-tags">
              <span>Brand</span>
            </div>
            <a href="#" class="layout-portfolio-link">→</a>
          </div>

        </div>

      </article>

      <article class="layout-portfolio-card layout-portfolio-wide">

        <div class="layout-portfolio-visual"></div>

        <div class="layout-portfolio-content">

          <div class="layout-portfolio-category">Case Study</div>

          <h3>eCommerce product page experience</h3>

          <p>
            Wide portfolio cards are useful for larger case studies and more
            detailed project previews.
          </p>

          <div class="layout-portfolio-meta">
            <div class="layout-portfolio-tags">
              <span>Shop</span>
              <span>UX</span>
            </div>
            <a href="#" class="layout-portfolio-link">→</a>
          </div>

        </div>

      </article>

      <article class="layout-portfolio-card">

        <div class="layout-portfolio-visual"></div>

        <div class="layout-portfolio-content">

          <div class="layout-portfolio-category">App UI</div>

          <h3>Dashboard design</h3>

          <p>Compact project preview.</p>

          <div class="layout-portfolio-meta">
            <div class="layout-portfolio-tags">
              <span>App</span>
            </div>
            <a href="#" class="layout-portfolio-link">→</a>
          </div>

        </div>

      </article>

    </div>

  </div>

</section>

CSS

.layout-portfolio{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-portfolio::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(245,158,11,.16),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(168,85,247,.18),transparent 38%);
pointer-events:none;
}

.layout-portfolio-inner{
position:relative;
z-index:2;
}

.layout-portfolio-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
}

.layout-portfolio-heading{
max-width:780px;
}

.layout-portfolio-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-portfolio-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-portfolio-title span{
background:linear-gradient(90deg,#22d3ee,#fbbf24,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-portfolio-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-portfolio-filters{
display:flex;
align-items:center;
gap:8px;
padding:10px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 16px 40px rgba(0,0,0,.24);
}

.layout-portfolio-filters span{
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 12px;
border-radius:999px;
font-size:12px;
font-weight:900;
color:#cbd5e1;
background:rgba(255,255,255,.06);
white-space:nowrap;
}

.layout-portfolio-filters span:first-child{
color:#020617;
background:linear-gradient(135deg,#22d3ee,#fbbf24);
}

.layout-portfolio-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:240px;
gap:18px;
}

.layout-portfolio-card{
position:relative;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-portfolio-card:hover{
transform:translateY(-5px);
border-color:rgba(34,211,238,.30);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-portfolio-featured{
grid-column:span 2;
grid-row:span 2;
}

.layout-portfolio-wide{
grid-column:span 2;
}

.layout-portfolio-visual{
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(34,211,238,.22),rgba(168,85,247,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(2,6,23,.34));
overflow:hidden;
}

.layout-portfolio-card:nth-child(2) .layout-portfolio-visual{
background:
linear-gradient(135deg,rgba(245,158,11,.22),rgba(236,72,153,.17)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(2,6,23,.34));
}

.layout-portfolio-card:nth-child(3) .layout-portfolio-visual{
background:
linear-gradient(135deg,rgba(34,197,94,.20),rgba(34,211,238,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(2,6,23,.34));
}

.layout-portfolio-card:nth-child(4) .layout-portfolio-visual{
background:
linear-gradient(135deg,rgba(99,102,241,.23),rgba(34,211,238,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(2,6,23,.34));
}

.layout-portfolio-card:nth-child(5) .layout-portfolio-visual{
background:
linear-gradient(135deg,rgba(236,72,153,.20),rgba(168,85,247,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(2,6,23,.34));
}

.layout-portfolio-card:nth-child(6) .layout-portfolio-visual{
background:
linear-gradient(135deg,rgba(251,191,36,.21),rgba(34,211,238,.15)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(2,6,23,.34));
}

.layout-portfolio-visual::before{
content:"";
position:absolute;
right:-70px;
top:-70px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(255,255,255,.14);
}

.layout-portfolio-visual::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:150px;
height:120px;
border-radius:28px;
transform:translate(-50%,-50%) rotate(-8deg);
background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 22px 55px rgba(0,0,0,.24);
}

.layout-portfolio-content{
position:absolute;
left:0;
right:0;
bottom:0;
z-index:3;
padding:22px;
background:linear-gradient(180deg,transparent,rgba(2,6,23,.86));
}

.layout-portfolio-featured .layout-portfolio-content{
padding:30px;
}

.layout-portfolio-category{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(2,6,23,.70);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(10px);
margin-bottom:12px;
}

.layout-portfolio-card h3{
margin:0 0 8px;
font-size:21px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-portfolio-featured h3{
font-size:clamp(30px,4vw,46px);
line-height:1.04;
letter-spacing:-.05em;
max-width:620px;
}

.layout-portfolio-card p{
margin:0 0 14px;
font-size:14px;
line-height:1.55;
color:#cbd5e1;
max-width:520px;
}

.layout-portfolio-featured p{
font-size:16px;
line-height:1.7;
max-width:620px;
}

.layout-portfolio-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:12px;
}

.layout-portfolio-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.layout-portfolio-tags span{
display:inline-flex;
align-items:center;
justify-content:center;
height:28px;
padding:0 9px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:11px;
font-weight:900;
}

.layout-portfolio-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#fbbf24);
box-shadow:0 14px 34px rgba(34,211,238,.20);
color:#020617;
font-size:18px;
font-weight:950;
text-decoration:none;
flex:0 0 auto;
transition:transform .2s ease;
}

.layout-portfolio-link:hover{
transform:translateX(3px);
}

@media (max-width: 1000px){
.layout-portfolio-header{
display:block;
}

.layout-portfolio-filters{
width:max-content;
margin-top:18px;
}

.layout-portfolio-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:240px;
}

.layout-portfolio-featured,
.layout-portfolio-wide{
grid-column:span 2;
}
}

@media (max-width: 640px){
.layout-portfolio{
padding:20px;
}

.layout-portfolio-title{
font-size:34px;
}

.layout-portfolio-text{
font-size:16px;
}

.layout-portfolio-filters{
width:100%;
box-sizing:border-box;
overflow-x:auto;
}

.layout-portfolio-grid{
grid-template-columns:1fr;
grid-auto-rows:300px;
gap:14px;
}

.layout-portfolio-featured,
.layout-portfolio-wide{
grid-column:auto;
grid-row:auto;
}

.layout-portfolio-featured{
min-height:380px;
}

.layout-portfolio-content,
.layout-portfolio-featured .layout-portfolio-content{
padding:22px;
}

.layout-portfolio-featured h3{
font-size:32px;
}

.layout-portfolio-meta{
align-items:flex-start;
flex-direction:column;
}
}

This portfolio gallery layout is useful because it gives selected work a stronger visual presentation than a standard equal-card grid. The featured project creates hierarchy, while the smaller cards allow visitors to browse additional work quickly.

Use this layout for designer portfolios, web developer portfolios, agency case studies, photography galleries, branding projects, UI design showcases, creative studios, and any website where visual work needs to be presented professionally.

16. Testimonial Layout

A testimonial layout is a trust-building CSS layout pattern used on landing pages, service websites, SaaS pages, agency websites, product pages, and portfolio websites. It helps present customer feedback, reviews, client quotes, and social proof in a professional way.

This layout uses CSS Grid to combine one large featured testimonial with several smaller review cards. The featured testimonial gives extra emphasis to the strongest quote, while the smaller cards support it with additional trust signals. On mobile screens, the layout stacks into a simple single-column structure.

  • Perfect for service pages, landing pages, SaaS websites, and agency websites
  • Uses CSS Grid to combine one featured testimonial with smaller review cards
  • Includes avatar placeholders, star ratings, quotes, names, and roles
  • Stacks cleanly on mobile screens for better readability
Testimonial Layout

Build trust with a modern review section

Use a testimonial layout to highlight customer feedback, client results, review scores, and social proof in a clean responsive structure.

★★★★★

“The new website layout made our service pages easier to understand and helped visitors find the right offer faster.”

Sarah Mitchell Founder, Bright Studio
4.9

Average client rating

Combine review scores with testimonials to make the section more trustworthy.

★★★★★

“The design feels modern, clean, and much easier to scan on mobile.”

James Carter Marketing Lead
★★★★★

“The layout structure gave our landing page a much more professional first impression.”

Emma Wilson SaaS Product Manager

HTML

<section class="layout-testimonial">

  <div class="layout-testimonial-inner">

    <div class="layout-testimonial-header">

      <div class="layout-testimonial-kicker">Testimonial Layout</div>

      <h2 class="layout-testimonial-title">
        Build trust with a <span>modern review section</span>
      </h2>

      <p class="layout-testimonial-text">
        Use a testimonial layout to highlight customer feedback, client results,
        review scores, and social proof in a clean responsive structure.
      </p>

    </div>

    <div class="layout-testimonial-grid">

      <article class="layout-testimonial-featured">

        <div>

          <div class="layout-testimonial-stars">★★★★★</div>

          <p class="layout-testimonial-quote">
            “The new website layout made our service pages easier to understand
            and helped visitors find the right offer faster.”
          </p>

        </div>

        <div class="layout-testimonial-author">
          <div class="layout-testimonial-avatar"></div>
          <div>
            <strong>Sarah Mitchell</strong>
            <span>Founder, Bright Studio</span>
          </div>
        </div>

      </article>

      <div class="layout-testimonial-side">

        <div class="layout-testimonial-score">

          <div class="layout-testimonial-score-number">4.9</div>

          <div>
            <h3>Average client rating</h3>
            <p>Combine review scores with testimonials to make the section more trustworthy.</p>
          </div>

        </div>

        <article class="layout-testimonial-card">

          <div>
            <div class="layout-testimonial-small-stars">★★★★★</div>
            <p>“The design feels modern, clean, and much easier to scan on mobile.”</p>
          </div>

          <div class="layout-testimonial-card-author">
            <div class="layout-testimonial-small-avatar"></div>
            <div>
              <strong>James Carter</strong>
              <span>Marketing Lead</span>
            </div>
          </div>

        </article>

        <article class="layout-testimonial-card">

          <div>
            <div class="layout-testimonial-small-stars">★★★★★</div>
            <p>“The layout structure gave our landing page a much more professional first impression.”</p>
          </div>

          <div class="layout-testimonial-card-author">
            <div class="layout-testimonial-small-avatar"></div>
            <div>
              <strong>Emma Wilson</strong>
              <span>SaaS Product Manager</span>
            </div>
          </div>

        </article>

      </div>

    </div>

  </div>

</section>

CSS

.layout-testimonial{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-testimonial::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(236,72,153,.17),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(245,158,11,.13),transparent 38%);
pointer-events:none;
}

.layout-testimonial-inner{
position:relative;
z-index:2;
}

.layout-testimonial-header{
max-width:820px;
margin:0 auto 32px;
text-align:center;
}

.layout-testimonial-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(236,72,153,.11);
border:1px solid rgba(236,72,153,.28);
color:#f9a8d4;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-testimonial-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-testimonial-title span{
background:linear-gradient(90deg,#f472b6,#22d3ee,#fbbf24) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-testimonial-text{
margin:0 auto;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-testimonial-grid{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
gap:18px;
align-items:stretch;
}

.layout-testimonial-featured,
.layout-testimonial-card,
.layout-testimonial-score{
position:relative;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
}

.layout-testimonial-featured{
padding:30px;
min-height:440px;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.layout-testimonial-featured::before,
.layout-testimonial-card::before,
.layout-testimonial-score::before{
content:"";
position:absolute;
right:-52px;
top:-52px;
width:170px;
height:170px;
border-radius:999px;
background:rgba(34,211,238,.13);
filter:blur(2px);
pointer-events:none;
}

.layout-testimonial-featured::after{
content:"“";
position:absolute;
right:26px;
bottom:-24px;
font-size:170px;
line-height:1;
font-weight:950;
color:rgba(255,255,255,.055);
pointer-events:none;
}

.layout-testimonial-stars{
position:relative;
z-index:2;
display:flex;
gap:4px;
margin-bottom:20px;
color:#facc15;
font-size:18px;
letter-spacing:.05em;
}

.layout-testimonial-quote{
position:relative;
z-index:2;
margin:0 0 26px;
font-size:clamp(26px,3.5vw,42px);
line-height:1.18;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-testimonial-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:14px;
}

.layout-testimonial-avatar{
width:54px;
height:54px;
border-radius:999px;
background:linear-gradient(135deg,#22d3ee,#f472b6);
box-shadow:0 16px 36px rgba(34,211,238,.20);
flex:0 0 auto;
position:relative;
}

.layout-testimonial-avatar::before{
content:"";
position:absolute;
inset:13px;
border-radius:999px;
background:rgba(255,255,255,.35);
}

.layout-testimonial-author strong{
display:block;
font-size:16px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.layout-testimonial-author span{
display:block;
margin-top:3px;
font-size:13px;
line-height:1.35;
font-weight:800;
color:#94a3b8;
}

.layout-testimonial-side{
display:grid;
grid-template-rows:auto 1fr 1fr;
gap:18px;
}

.layout-testimonial-score{
padding:24px;
display:grid;
grid-template-columns:auto 1fr;
gap:18px;
align-items:center;
}

.layout-testimonial-score-number{
position:relative;
z-index:2;
width:88px;
height:88px;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#f472b6,#22d3ee);
box-shadow:0 18px 42px rgba(244,114,182,.22);
color:#020617;
font-size:30px;
font-weight:950;
letter-spacing:-.05em;
}

.layout-testimonial-score h3{
position:relative;
z-index:2;
margin:0 0 6px;
font-size:20px;
line-height:1.2;
font-weight:950;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-testimonial-score p{
position:relative;
z-index:2;
margin:0;
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.layout-testimonial-card{
padding:22px;
display:flex;
flex-direction:column;
justify-content:space-between;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-testimonial-card:hover{
transform:translateY(-5px);
border-color:rgba(244,114,182,.30);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-testimonial-card:nth-child(2)::before{
background:rgba(168,85,247,.14);
}

.layout-testimonial-card:nth-child(3)::before{
background:rgba(245,158,11,.14);
}

.layout-testimonial-small-stars{
position:relative;
z-index:2;
color:#facc15;
font-size:14px;
letter-spacing:.04em;
margin-bottom:14px;
}

.layout-testimonial-card p{
position:relative;
z-index:2;
margin:0 0 20px;
font-size:15px;
line-height:1.65;
color:#dbeafe;
}

.layout-testimonial-card-author{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:12px;
}

.layout-testimonial-small-avatar{
width:42px;
height:42px;
border-radius:999px;
background:linear-gradient(135deg,#818cf8,#22d3ee);
box-shadow:0 14px 30px rgba(129,140,248,.18);
flex:0 0 auto;
}

.layout-testimonial-card-author strong{
display:block;
font-size:14px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.layout-testimonial-card-author span{
display:block;
margin-top:2px;
font-size:12px;
font-weight:800;
color:#94a3b8;
}

@media (max-width: 980px){
.layout-testimonial-grid{
grid-template-columns:1fr;
}

.layout-testimonial-featured{
min-height:auto;
}
}

@media (max-width: 640px){
.layout-testimonial{
padding:20px;
}

.layout-testimonial-header{
text-align:left;
margin-bottom:24px;
}

.layout-testimonial-title{
font-size:34px;
}

.layout-testimonial-text{
font-size:16px;
}

.layout-testimonial-featured,
.layout-testimonial-card,
.layout-testimonial-score{
border-radius:20px;
}

.layout-testimonial-featured{
padding:24px;
}

.layout-testimonial-quote{
font-size:28px;
}

.layout-testimonial-score{
grid-template-columns:1fr;
}

.layout-testimonial-score-number{
width:78px;
height:78px;
}
}

This testimonial layout is useful because it combines emotional proof with structured social proof. The large quote gives one customer story more impact, while the smaller review cards and rating block support the section with additional credibility.

Use this layout for landing pages, service websites, SaaS product pages, agency websites, product pages, portfolio websites, client result sections, and any page where trust and credibility are important for conversions.

17. FAQ Two-Column Layout

A FAQ two-column layout is a practical CSS layout pattern for answering common questions while keeping the section visually balanced. It is commonly used on landing pages, product pages, SaaS websites, service pages, pricing pages, and SEO-focused content pages.

This layout places the FAQ introduction, short explanation, and call-to-action on one side, while the actual questions are displayed on the other side. This structure keeps the section easier to scan than a long single-column FAQ list. On mobile screens, the layout stacks into one column.

  • Perfect for product pages, service pages, pricing pages, and landing pages
  • Uses CSS Grid to create a two-column FAQ section
  • Combines introduction, CTA, and FAQ cards in one clean layout
  • Stacks into a readable single-column layout on mobile screens
FAQ Layout

Answer questions with a two-column FAQ section

Use this layout when you want to explain common questions while keeping a strong introduction and call-to-action visible beside the FAQ list.

12+ Common questions answered
0 JS Layout built with CSS only
Ask a Question

When should I use a two-column FAQ layout?

+

Use it when your FAQ section needs more context than a simple list. The left column can explain the topic, show trust signals, or include a call-to-action while the right column answers specific questions.

Landing page SEO

Is this layout good for SEO pages?

+

Yes. FAQ sections are useful for SEO-focused pages because they answer common search questions directly and make long pages easier to scan.

Content Search intent

Can this layout be used in WordPress?

+

Yes. This structure can be used inside a WordPress page, custom theme section, Gutenberg HTML block, landing page template, or reusable pattern.

WordPress Gutenberg

Does it need JavaScript?

+

This demo is a static layout and does not require JavaScript. If you want collapsible accordion behavior, you can add JavaScript or use the native HTML details element.

CSS only Optional JS

HTML

<section class="layout-faq">

  <div class="layout-faq-inner">

    <div class="layout-faq-left">

      <div class="layout-faq-kicker">FAQ Layout</div>

      <h2 class="layout-faq-title">
        Answer questions with a <span>two-column FAQ section</span>
      </h2>

      <p class="layout-faq-text">
        Use this layout when you want to explain common questions while keeping
        a strong introduction and call-to-action visible beside the FAQ list.
      </p>

      <div class="layout-faq-stats">

        <div class="layout-faq-stat">
          <strong>12+</strong>
          <span>Common questions answered</span>
        </div>

        <div class="layout-faq-stat">
          <strong>0 JS</strong>
          <span>Layout built with CSS only</span>
        </div>

      </div>

      <a href="#" class="layout-faq-cta">Ask a Question</a>

    </div>

    <div class="layout-faq-right">

      <div class="layout-faq-item layout-faq-highlight">

        <div class="layout-faq-question">
          <h3>When should I use a two-column FAQ layout?</h3>
          <div class="layout-faq-icon">+</div>
        </div>

        <div class="layout-faq-answer">
          <p>
            Use it when your FAQ section needs more context than a simple list.
            The left column can explain the topic, show trust signals, or include a CTA.
          </p>

          <div class="layout-faq-tag-row">
            <span class="layout-faq-tag">Landing page</span>
            <span class="layout-faq-tag">SEO</span>
          </div>
        </div>

      </div>

      <div class="layout-faq-item">

        <div class="layout-faq-question">
          <h3>Is this layout good for SEO pages?</h3>
          <div class="layout-faq-icon">+</div>
        </div>

        <div class="layout-faq-answer">
          <p>
            Yes. FAQ sections are useful for SEO-focused pages because they answer
            common search questions directly and make long pages easier to scan.
          </p>

          <div class="layout-faq-tag-row">
            <span class="layout-faq-tag">Content</span>
            <span class="layout-faq-tag">Search intent</span>
          </div>
        </div>

      </div>

      <div class="layout-faq-item">

        <div class="layout-faq-question">
          <h3>Can this layout be used in WordPress?</h3>
          <div class="layout-faq-icon">+</div>
        </div>

        <div class="layout-faq-answer">
          <p>
            Yes. This structure can be used inside a WordPress page, custom theme
            section, Gutenberg HTML block, landing page template, or reusable pattern.
          </p>

          <div class="layout-faq-tag-row">
            <span class="layout-faq-tag">WordPress</span>
            <span class="layout-faq-tag">Gutenberg</span>
          </div>
        </div>

      </div>

      <div class="layout-faq-item">

        <div class="layout-faq-question">
          <h3>Does it need JavaScript?</h3>
          <div class="layout-faq-icon">+</div>
        </div>

        <div class="layout-faq-answer">
          <p>
            This demo is a static layout and does not require JavaScript. If you want
            collapsible accordion behavior, you can add JavaScript or use details.
          </p>

          <div class="layout-faq-tag-row">
            <span class="layout-faq-tag">CSS only</span>
            <span class="layout-faq-tag">Optional JS</span>
          </div>
        </div>

      </div>

    </div>

  </div>

</section>

CSS

.layout-faq{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-faq::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(34,197,94,.16),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(168,85,247,.16),transparent 38%);
pointer-events:none;
}

.layout-faq-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);
gap:24px;
align-items:start;
}

.layout-faq-left{
position:sticky;
top:20px;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
padding:28px;
overflow:hidden;
}

.layout-faq-left::before{
content:"";
position:absolute;
right:-56px;
top:-56px;
width:170px;
height:170px;
border-radius:999px;
background:rgba(34,211,238,.14);
filter:blur(2px);
pointer-events:none;
}

.layout-faq-kicker{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-faq-title{
position:relative;
z-index:2;
margin:0 0 16px;
font-size:clamp(32px,5vw,52px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-faq-title span{
background:linear-gradient(90deg,#22d3ee,#22c55e,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-faq-text{
position:relative;
z-index:2;
margin:0 0 24px;
font-size:16px;
line-height:1.7;
color:#cbd5e1;
}

.layout-faq-stats{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-bottom:24px;
}

.layout-faq-stat{
padding:16px;
border-radius:18px;
background:rgba(2,6,23,.38);
border:1px solid rgba(255,255,255,.09);
}

.layout-faq-stat strong{
display:block;
font-size:26px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
margin-bottom:6px;
}

.layout-faq-stat span{
display:block;
font-size:12px;
line-height:1.4;
font-weight:850;
color:#94a3b8;
}

.layout-faq-cta{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
width:100%;
border-radius:14px;
background:linear-gradient(135deg,#22d3ee,#22c55e);
box-shadow:0 16px 38px rgba(34,211,238,.22);
color:#020617;
font-size:14px;
font-weight:900;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease;
}

.layout-faq-cta:hover{
transform:translateY(-2px);
box-shadow:0 20px 46px rgba(34,197,94,.24);
}

.layout-faq-right{
display:grid;
gap:14px;
}

.layout-faq-item{
position:relative;
border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 20px 55px rgba(0,0,0,.26);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.layout-faq-item:hover{
transform:translateY(-3px);
border-color:rgba(34,211,238,.28);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
}

.layout-faq-question{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
padding:22px 22px 14px;
}

.layout-faq-question h3{
margin:0;
font-size:20px;
line-height:1.3;
font-weight:950;
letter-spacing:-.025em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-faq-icon{
width:34px;
height:34px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
background:rgba(34,211,238,.12);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:22px;
font-weight:800;
line-height:1;
}

.layout-faq-answer{
padding:0 22px 22px;
}

.layout-faq-answer p{
margin:0;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.layout-faq-tag-row{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
}

.layout-faq-tag{
display:inline-flex;
align-items:center;
justify-content:center;
height:28px;
padding:0 10px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#94a3b8;
font-size:11px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}

.layout-faq-highlight{
border-color:rgba(34,197,94,.24);
background:
linear-gradient(135deg,rgba(34,197,94,.10),rgba(34,211,238,.06)),
linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
}

.layout-faq-highlight .layout-faq-icon{
background:rgba(34,197,94,.13);
border-color:rgba(34,197,94,.24);
color:#86efac;
}

@media (max-width: 920px){
.layout-faq-inner{
grid-template-columns:1fr;
}

.layout-faq-left{
position:relative;
top:auto;
}
}

@media (max-width: 620px){
.layout-faq{
padding:20px;
}

.layout-faq-left{
padding:24px;
border-radius:20px;
}

.layout-faq-title{
font-size:34px;
}

.layout-faq-text{
font-size:16px;
}

.layout-faq-stats{
grid-template-columns:1fr;
}

.layout-faq-question{
padding:20px 20px 12px;
}

.layout-faq-answer{
padding:0 20px 20px;
}

.layout-faq-question h3{
font-size:18px;
}

.layout-faq-item{
border-radius:20px;
}
}

This FAQ two-column layout is useful because it gives the FAQ section more structure than a basic list. The left column introduces the topic and provides a call-to-action, while the right column answers specific questions in a clean and scannable format.

Use this layout for landing pages, pricing pages, product pages, SaaS websites, service pages, WordPress pages, SEO guides, and any page where answering common questions can improve clarity, trust, and conversions.

18. Contact Section Layout

A contact section layout is a practical CSS layout pattern used on contact pages, landing pages, service websites, agency websites, portfolios, SaaS websites, and product pages. It helps visitors quickly understand how to contact the business and submit a message.

This layout uses a two-column structure: contact information and trust details on one side, and a clean contact form on the other side. The section creates a professional contact area that works well as a full contact page or as a conversion block near the end of a landing page. On mobile screens, the layout stacks into one column.

  • Perfect for contact pages, service websites, agencies, and landing pages
  • Uses CSS Grid for a clean contact information + form layout
  • Includes contact cards, business details, trust indicators, and form fields
  • Stacks into a readable single-column layout on mobile screens
Contact Layout

Make it easy to contact your business

Use a contact section layout to combine business details, trust signals, and a user-friendly contact form inside one responsive section.

✉
Email support hello@example.com
☎
Phone number +1 555 240 8800
⌖
Office location New York, United States
24h Average response time
500+ Projects completed

Send a message

Use a clean form layout with clear labels, enough spacing, and a strong submit button.

✓
Your message section should feel simple, trustworthy, and easy to complete on both desktop and mobile.

HTML

<section class="layout-contact">

  <div class="layout-contact-inner">

    <div class="layout-contact-info">

      <div>

        <div class="layout-contact-kicker">Contact Layout</div>

        <h2 class="layout-contact-title">
          Make it easy to <span>contact your business</span>
        </h2>

        <p class="layout-contact-text">
          Use a contact section layout to combine business details, trust signals,
          and a user-friendly contact form inside one responsive section.
        </p>

      </div>

      <div class="layout-contact-methods">

        <div class="layout-contact-method">
          <div class="layout-contact-icon">✉</div>
          <div>
            <strong>Email support</strong>
            <span>hello@example.com</span>
          </div>
        </div>

        <div class="layout-contact-method">
          <div class="layout-contact-icon">☎</div>
          <div>
            <strong>Phone number</strong>
            <span>+1 555 240 8800</span>
          </div>
        </div>

        <div class="layout-contact-method">
          <div class="layout-contact-icon">⌖</div>
          <div>
            <strong>Office location</strong>
            <span>New York, United States</span>
          </div>
        </div>

      </div>

      <div class="layout-contact-trust">

        <div class="layout-contact-trust-item">
          <strong>24h</strong>
          <span>Average response time</span>
        </div>

        <div class="layout-contact-trust-item">
          <strong>500+</strong>
          <span>Projects completed</span>
        </div>

      </div>

    </div>

    <div class="layout-contact-form-wrap">

      <form class="layout-contact-form">

        <div class="layout-contact-form-header">
          <h3>Send a message</h3>
          <p>
            Use a clean form layout with clear labels, enough spacing,
            and a strong submit button.
          </p>
        </div>

        <div class="layout-contact-row">

          <div class="layout-contact-field">
            <label for="contact-name">Name</label>
            <input id="contact-name" type="text" placeholder="Your name">
          </div>

          <div class="layout-contact-field">
            <label for="contact-email">Email</label>
            <input id="contact-email" type="email" placeholder="you@example.com">
          </div>

        </div>

        <div class="layout-contact-field">
          <label for="contact-topic">Topic</label>
          <select id="contact-topic">
            <option>Website project</option>
            <option>Support request</option>
            <option>Partnership</option>
          </select>
        </div>

        <div class="layout-contact-field">
          <label for="contact-message">Message</label>
          <textarea id="contact-message" placeholder="Tell us about your project..."></textarea>
        </div>

        <button class="layout-contact-submit" type="button">Send Message</button>

        <div class="layout-contact-note">
          <span>✓</span>
          <div>
            Your message section should feel simple, trustworthy,
            and easy to complete on both desktop and mobile.
          </div>
        </div>

      </form>

    </div>

  </div>

</section>

CSS

.layout-contact{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-contact::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(168,85,247,.17),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,197,94,.14),transparent 38%);
pointer-events:none;
}

.layout-contact-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
gap:24px;
align-items:stretch;
}

.layout-contact-info,
.layout-contact-form-wrap{
position:relative;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
}

.layout-contact-info{
padding:30px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:26px;
}

.layout-contact-info::before,
.layout-contact-form-wrap::before{
content:"";
position:absolute;
right:-56px;
top:-56px;
width:180px;
height:180px;
border-radius:999px;
background:rgba(34,211,238,.13);
filter:blur(2px);
pointer-events:none;
}

.layout-contact-form-wrap::before{
background:rgba(168,85,247,.14);
}

.layout-contact-kicker{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-contact-title{
position:relative;
z-index:2;
margin:0 0 16px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-contact-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#22c55e) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-contact-text{
position:relative;
z-index:2;
margin:0;
font-size:16px;
line-height:1.7;
color:#cbd5e1;
max-width:520px;
}

.layout-contact-methods{
position:relative;
z-index:2;
display:grid;
gap:12px;
}

.layout-contact-method{
display:flex;
align-items:flex-start;
gap:14px;
padding:16px;
border-radius:18px;
background:rgba(2,6,23,.38);
border:1px solid rgba(255,255,255,.09);
}

.layout-contact-icon{
width:42px;
height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
box-shadow:0 14px 34px rgba(34,211,238,.20);
color:#ffffff;
font-size:16px;
font-weight:950;
flex:0 0 auto;
}

.layout-contact-method strong{
display:block;
margin-bottom:4px;
font-size:15px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.layout-contact-method span{
display:block;
font-size:14px;
line-height:1.5;
color:#94a3b8;
}

.layout-contact-trust{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.layout-contact-trust-item{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
}

.layout-contact-trust-item strong{
display:block;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
margin-bottom:6px;
}

.layout-contact-trust-item span{
display:block;
font-size:12px;
line-height:1.45;
font-weight:850;
color:#94a3b8;
}

.layout-contact-form-wrap{
padding:30px;
}

.layout-contact-form{
position:relative;
z-index:2;
display:grid;
gap:16px;
}

.layout-contact-form-header{
margin-bottom:4px;
}

.layout-contact-form-header h3{
margin:0 0 8px;
font-size:28px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-contact-form-header p{
margin:0;
font-size:15px;
line-height:1.65;
color:#cbd5e1;
}

.layout-contact-row{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.layout-contact-field{
display:grid;
gap:8px;
}

.layout-contact-field label{
font-size:13px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
color:#94a3b8;
}

.layout-contact-field input,
.layout-contact-field textarea,
.layout-contact-field select{
width:100%;
box-sizing:border-box;
border:1px solid rgba(255,255,255,.10);
background:rgba(2,6,23,.42);
border-radius:14px;
min-height:48px;
padding:0 14px;
color:#ffffff;
font-size:15px;
font-weight:700;
outline:none;
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.layout-contact-field textarea{
min-height:132px;
padding:14px;
resize:vertical;
line-height:1.6;
}

.layout-contact-field input::placeholder,
.layout-contact-field textarea::placeholder{
color:#64748b;
}

.layout-contact-field input:focus,
.layout-contact-field textarea:focus,
.layout-contact-field select:focus{
border-color:rgba(34,211,238,.42);
box-shadow:0 0 0 4px rgba(34,211,238,.10);
background:rgba(2,6,23,.58);
}

.layout-contact-submit{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
width:100%;
border:0;
border-radius:15px;
background:linear-gradient(135deg,#22d3ee,#a78bfa,#22c55e);
box-shadow:0 18px 42px rgba(34,211,238,.22);
color:#020617;
font-size:15px;
font-weight:950;
cursor:pointer;
transition:transform .2s ease,box-shadow .2s ease;
}

.layout-contact-submit:hover{
transform:translateY(-2px);
box-shadow:0 24px 54px rgba(34,197,94,.24);
}

.layout-contact-note{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:rgba(34,197,94,.08);
border:1px solid rgba(34,197,94,.16);
color:#cbd5e1;
font-size:13px;
line-height:1.55;
}

.layout-contact-note span{
width:22px;
height:22px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.22);
color:#86efac;
font-size:12px;
font-weight:950;
flex:0 0 auto;
}

@media (max-width: 940px){
.layout-contact-inner{
grid-template-columns:1fr;
}

.layout-contact-info{
gap:24px;
}
}

@media (max-width: 640px){
.layout-contact{
padding:20px;
}

.layout-contact-info,
.layout-contact-form-wrap{
padding:24px;
border-radius:20px;
}

.layout-contact-title{
font-size:34px;
}

.layout-contact-text{
font-size:16px;
}

.layout-contact-row,
.layout-contact-trust{
grid-template-columns:1fr;
}

.layout-contact-form-header h3{
font-size:26px;
}
}

This contact section layout is useful because it makes the contact experience feel more complete than a simple form. Visitors can see contact methods, trust signals, and a clear form in one section, which helps reduce hesitation and improves the chance of receiving a message.

Use this layout for contact pages, agency websites, service pages, landing pages, quote request sections, SaaS support pages, portfolio websites, and any website where visitors need a simple and trustworthy way to get in touch.

19. Newsletter Signup Layout

A newsletter signup layout is a conversion-focused CSS layout pattern used on blogs, landing pages, SaaS websites, eCommerce stores, personal brands, agencies, and resource websites. It helps turn visitors into subscribers by presenting a clear value proposition and a simple email signup form.

This layout uses a modern two-column structure with the newsletter message on one side and a styled signup form on the other side. It includes trust indicators, subscriber count, topic chips, and a strong call-to-action. On mobile screens, the layout stacks into a single-column section with a full-width input and button.

  • Perfect for blogs, SaaS websites, eCommerce stores, and landing pages
  • Uses CSS Grid for a balanced content + signup form layout
  • Includes email input, CTA button, trust indicators, and topic chips
  • Stacks into a clean mobile-friendly layout on smaller screens
Newsletter Layout

Grow your audience with a modern signup section

Use a newsletter signup layout to collect emails, promote valuable content, and build a stronger connection with visitors who are not ready to buy yet.

CSS Layouts Web Design UI Components Frontend Tips
12k+ Subscribers
Weekly Fresh tutorials
0 spam Useful content only

Join the newsletter

Get practical layout examples, CSS tips, and modern website design ideas directly in your inbox.

✓
Receive new CSS layout examples and frontend guides.
✓
Learn reusable patterns for blogs, landing pages, and eCommerce websites.
Free examples Copy-friendly HTML and CSS patterns.
Design ideas Modern UI inspiration for real projects.

By subscribing, you agree to receive helpful emails. Read our privacy policy.

HTML

<section class="layout-newsletter">

  <div class="layout-newsletter-inner">

    <div class="layout-newsletter-content">

      <div>

        <div class="layout-newsletter-kicker">Newsletter Layout</div>

        <h2 class="layout-newsletter-title">
          Grow your audience with a <span>modern signup section</span>
        </h2>

        <p class="layout-newsletter-text">
          Use a newsletter signup layout to collect emails, promote valuable content,
          and build a stronger connection with visitors who are not ready to buy yet.
        </p>

      </div>

      <div class="layout-newsletter-topics">
        <span class="layout-newsletter-topic">CSS Layouts</span>
        <span class="layout-newsletter-topic">Web Design</span>
        <span class="layout-newsletter-topic">UI Components</span>
        <span class="layout-newsletter-topic">Frontend Tips</span>
      </div>

      <div class="layout-newsletter-stats">

        <div class="layout-newsletter-stat">
          <strong>12k+</strong>
          <span>Subscribers</span>
        </div>

        <div class="layout-newsletter-stat">
          <strong>Weekly</strong>
          <span>Fresh tutorials</span>
        </div>

        <div class="layout-newsletter-stat">
          <strong>0 spam</strong>
          <span>Useful content only</span>
        </div>

      </div>

    </div>

    <div class="layout-newsletter-form-card">

      <form class="layout-newsletter-form">

        <div class="layout-newsletter-form-header">
          <h3>Join the newsletter</h3>
          <p>
            Get practical layout examples, CSS tips, and modern website design
            ideas directly in your inbox.
          </p>
        </div>

        <div class="layout-newsletter-input-wrap">
          <input class="layout-newsletter-input" type="email" placeholder="Enter your email">
          <button class="layout-newsletter-submit" type="button">Subscribe</button>
        </div>

        <div class="layout-newsletter-checks">

          <div class="layout-newsletter-check">
            <div class="layout-newsletter-check-icon">✓</div>
            <span>Receive new CSS layout examples and frontend guides.</span>
          </div>

          <div class="layout-newsletter-check">
            <div class="layout-newsletter-check-icon">✓</div>
            <span>Learn reusable patterns for blogs, landing pages, and eCommerce websites.</span>
          </div>

        </div>

        <div class="layout-newsletter-card-row">

          <div class="layout-newsletter-mini-card">
            <strong>Free examples</strong>
            <span>Copy-friendly HTML and CSS patterns.</span>
          </div>

          <div class="layout-newsletter-mini-card">
            <strong>Design ideas</strong>
            <span>Modern UI inspiration for real projects.</span>
          </div>

        </div>

        <p class="layout-newsletter-privacy">
          By subscribing, you agree to receive helpful emails.
          Read our <a href="#">privacy policy</a>.
        </p>

      </form>

    </div>

  </div>

</section>

CSS

.layout-newsletter{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-newsletter::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.19),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(236,72,153,.17),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(245,158,11,.14),transparent 38%);
pointer-events:none;
}

.layout-newsletter-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
gap:24px;
align-items:stretch;
}

.layout-newsletter-content,
.layout-newsletter-form-card{
position:relative;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
}

.layout-newsletter-content{
padding:30px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:30px;
min-height:430px;
}

.layout-newsletter-content::before,
.layout-newsletter-form-card::before{
content:"";
position:absolute;
right:-60px;
top:-60px;
width:190px;
height:190px;
border-radius:999px;
background:rgba(34,211,238,.14);
filter:blur(2px);
pointer-events:none;
}

.layout-newsletter-form-card::before{
background:rgba(236,72,153,.14);
}

.layout-newsletter-kicker{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-newsletter-title{
position:relative;
z-index:2;
margin:0 0 16px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:900;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-newsletter-title span{
background:linear-gradient(90deg,#22d3ee,#f472b6,#fbbf24) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-newsletter-text{
position:relative;
z-index:2;
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:620px;
}

.layout-newsletter-topics{
position:relative;
z-index:2;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.layout-newsletter-topic{
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:900;
letter-spacing:.02em;
}

.layout-newsletter-stats{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.layout-newsletter-stat{
padding:16px;
border-radius:18px;
background:rgba(2,6,23,.38);
border:1px solid rgba(255,255,255,.09);
}

.layout-newsletter-stat strong{
display:block;
margin-bottom:6px;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
}

.layout-newsletter-stat span{
display:block;
font-size:12px;
line-height:1.45;
font-weight:850;
color:#94a3b8;
}

.layout-newsletter-form-card{
padding:30px;
display:flex;
align-items:center;
}

.layout-newsletter-form{
position:relative;
z-index:2;
width:100%;
display:grid;
gap:18px;
}

.layout-newsletter-form-header{
margin-bottom:4px;
}

.layout-newsletter-form-header h3{
margin:0 0 10px;
font-size:30px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-newsletter-form-header p{
margin:0;
font-size:15px;
line-height:1.65;
color:#cbd5e1;
}

.layout-newsletter-input-wrap{
display:flex;
gap:10px;
padding:8px;
border-radius:18px;
background:rgba(2,6,23,.48);
border:1px solid rgba(255,255,255,.10);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.layout-newsletter-input{
flex:1;
min-width:0;
height:50px;
border:0;
outline:none;
background:transparent;
color:#ffffff;
font-size:15px;
font-weight:700;
padding:0 12px;
}

.layout-newsletter-input::placeholder{
color:#64748b;
}

.layout-newsletter-submit{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:0 18px;
border:0;
border-radius:14px;
background:linear-gradient(135deg,#22d3ee,#f472b6,#fbbf24);
box-shadow:0 18px 42px rgba(244,114,182,.22);
color:#020617;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .2s ease,box-shadow .2s ease;
white-space:nowrap;
}

.layout-newsletter-submit:hover{
transform:translateY(-2px);
box-shadow:0 24px 54px rgba(34,211,238,.24);
}

.layout-newsletter-checks{
display:grid;
gap:10px;
}

.layout-newsletter-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:13px;
border-radius:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
}

.layout-newsletter-check-icon{
width:22px;
height:22px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(34,211,238,.13);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:12px;
font-weight:950;
flex:0 0 auto;
}

.layout-newsletter-check span{
font-size:13px;
line-height:1.5;
font-weight:800;
color:#cbd5e1;
}

.layout-newsletter-privacy{
margin:0;
font-size:12px;
line-height:1.6;
color:#94a3b8;
}

.layout-newsletter-privacy a{
color:#67e8f9;
font-weight:900;
text-decoration:none;
}

.layout-newsletter-card-row{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.layout-newsletter-mini-card{
position:relative;
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
overflow:hidden;
}

.layout-newsletter-mini-card::before{
content:"";
position:absolute;
right:-28px;
top:-28px;
width:90px;
height:90px;
border-radius:999px;
background:rgba(245,158,11,.12);
}

.layout-newsletter-mini-card strong{
position:relative;
z-index:2;
display:block;
margin-bottom:6px;
font-size:15px;
font-weight:950;
color:#ffffff;
}

.layout-newsletter-mini-card span{
position:relative;
z-index:2;
display:block;
font-size:12px;
line-height:1.45;
font-weight:800;
color:#94a3b8;
}

@media (max-width: 940px){
.layout-newsletter-inner{
grid-template-columns:1fr;
}

.layout-newsletter-content{
min-height:auto;
}
}

@media (max-width: 640px){
.layout-newsletter{
padding:20px;
}

.layout-newsletter-content,
.layout-newsletter-form-card{
padding:24px;
border-radius:20px;
}

.layout-newsletter-title{
font-size:34px;
}

.layout-newsletter-text{
font-size:16px;
}

.layout-newsletter-stats,
.layout-newsletter-card-row{
grid-template-columns:1fr;
}

.layout-newsletter-input-wrap{
display:grid;
gap:8px;
}

.layout-newsletter-submit{
width:100%;
}

.layout-newsletter-form-header h3{
font-size:26px;
}
}

This newsletter signup layout is useful because it gives visitors a clear reason to subscribe instead of showing only a basic email field. The value proposition, topic chips, trust indicators, and simple form work together to make the signup section feel more convincing.

Use this layout for blog posts, homepage sections, SaaS websites, resource libraries, eCommerce stores, footer newsletter blocks, creator websites, and any page where you want to build an email audience with a professional signup section.

20. Footer Layout

A footer layout is an essential CSS layout pattern for every modern website. It usually contains the brand area, short description, navigation links, contact details, social links, newsletter signup, legal links, and copyright information.

A good footer is not just the end of a page. It helps users continue navigating, find important information, build trust, and access key links. This layout uses CSS Grid to create a modern multi-column footer with a large brand block, grouped link columns, newsletter card, and bottom bar. On mobile screens, the columns stack into a clean single-column layout.

  • Perfect for business websites, blogs, SaaS websites, agencies, and eCommerce stores
  • Uses CSS Grid for a clean multi-column footer structure
  • Includes brand area, link columns, newsletter signup, social buttons, and bottom bar
  • Stacks cleanly on mobile screens for better readability
Footer Layout

Finish pages with a modern footer structure

Use a footer layout to organize important links, brand information, newsletter signup, social buttons, and legal details at the end of a page.

HTML

<section class="layout-footer">

  <div class="layout-footer-inner">

    <div class="layout-footer-header">

      <div class="layout-footer-kicker">Footer Layout</div>

      <h2 class="layout-footer-title">
        Finish pages with a <span>modern footer structure</span>
      </h2>

      <p class="layout-footer-text">
        Use a footer layout to organize important links, brand information,
        newsletter signup, social buttons, and legal details at the end of a page.
      </p>

    </div>

    <footer class="layout-footer-box">

      <div class="layout-footer-top">

        <div class="layout-footer-brand">

          <div class="layout-footer-logo">
            <div class="layout-footer-logo-mark"></div>
            <div>
              <strong>LayoutBase</strong>
              <span>Modern CSS UI</span>
            </div>
          </div>

          <p>
            Build responsive website sections with clean HTML,
            modern CSS layouts, and reusable design patterns.
          </p>

          <div class="layout-footer-social">
            <a href="#">X</a>
            <a href="#">in</a>
            <a href="#">Dr</a>
            <a href="#">Gh</a>
          </div>

        </div>

        <div class="layout-footer-column">
          <h3>Product</h3>
          <div class="layout-footer-links">
            <a href="#">Features</a>
            <a href="#">Pricing</a>
            <a href="#">Templates</a>
            <a href="#">Components</a>
          </div>
        </div>

        <div class="layout-footer-column">
          <h3>Resources</h3>
          <div class="layout-footer-links">
            <a href="#">Blog</a>
            <a href="#">CSS Guides</a>
            <a href="#">Documentation</a>
            <a href="#">Examples</a>
          </div>
        </div>

        <div class="layout-footer-column">
          <h3>Company</h3>
          <div class="layout-footer-links">
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Support</a>
            <a href="#">Careers</a>
          </div>
        </div>

      </div>

      <div class="layout-footer-newsletter">

        <div>
          <h3>Get modern layout ideas</h3>
          <p>Subscribe for CSS layout examples, UI patterns, and frontend tips.</p>
        </div>

        <form class="layout-footer-form">
          <input class="layout-footer-input" type="email" placeholder="Enter your email">
          <button class="layout-footer-submit" type="button">Subscribe</button>
        </form>

      </div>

      <div class="layout-footer-bottom">

        <p class="layout-footer-copy">© 2026 LayoutBase. All rights reserved.</p>

        <div class="layout-footer-legal">
          <a href="#">Privacy Policy</a>
          <a href="#">Terms</a>
          <a href="#">Cookies</a>
        </div>

      </div>

    </footer>

  </div>

</section>

CSS

.layout-footer{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-footer::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(168,85,247,.17),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(245,158,11,.13),transparent 38%);
pointer-events:none;
}

.layout-footer-inner{
position:relative;
z-index:2;
}

.layout-footer-header{
max-width:820px;
margin:0 0 30px;
}

.layout-footer-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-footer-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-footer-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#fbbf24) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-footer-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:760px;
}

.layout-footer-box{
position:relative;
border-radius:26px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
}

.layout-footer-box::before{
content:"";
position:absolute;
right:-70px;
top:-70px;
width:230px;
height:230px;
border-radius:999px;
background:rgba(34,211,238,.12);
filter:blur(2px);
pointer-events:none;
}

.layout-footer-top{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(260px,1.15fr) repeat(3,minmax(150px,.6fr));
gap:28px;
padding:30px;
border-bottom:1px solid rgba(255,255,255,.09);
}

.layout-footer-brand{
max-width:420px;
}

.layout-footer-logo{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}

.layout-footer-logo-mark{
width:46px;
height:46px;
border-radius:16px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
box-shadow:0 16px 36px rgba(34,211,238,.22);
position:relative;
}

.layout-footer-logo-mark::before{
content:"";
position:absolute;
inset:13px;
border-radius:10px;
background:rgba(255,255,255,.35);
}

.layout-footer-logo strong{
font-size:20px;
line-height:1.1;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.layout-footer-logo span{
display:block;
margin-top:3px;
font-size:12px;
font-weight:800;
color:#94a3b8;
letter-spacing:.04em;
text-transform:uppercase;
}

.layout-footer-brand p{
margin:0 0 20px;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.layout-footer-social{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.layout-footer-social a{
width:40px;
height:40px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#e2e8f0;
font-size:13px;
font-weight:950;
text-decoration:none;
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.layout-footer-social a:hover{
transform:translateY(-2px);
border-color:rgba(34,211,238,.28);
background:rgba(34,211,238,.12);
}

.layout-footer-column h3{
margin:0 0 14px;
font-size:15px;
line-height:1.25;
font-weight:950;
letter-spacing:.02em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-footer-links{
display:grid;
gap:10px;
}

.layout-footer-links a{
color:#94a3b8;
font-size:14px;
line-height:1.45;
font-weight:800;
text-decoration:none;
transition:color .2s ease,transform .2s ease;
}

.layout-footer-links a:hover{
color:#67e8f9;
transform:translateX(3px);
}

.layout-footer-newsletter{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.75fr);
gap:20px;
align-items:center;
padding:24px 30px;
border-bottom:1px solid rgba(255,255,255,.09);
background:rgba(2,6,23,.20);
}

.layout-footer-newsletter h3{
margin:0 0 8px;
font-size:24px;
line-height:1.15;
font-weight:950;
letter-spacing:-.035em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-footer-newsletter p{
margin:0;
font-size:15px;
line-height:1.6;
color:#cbd5e1;
}

.layout-footer-form{
display:flex;
gap:10px;
padding:8px;
border-radius:18px;
background:rgba(2,6,23,.45);
border:1px solid rgba(255,255,255,.10);
}

.layout-footer-input{
flex:1;
min-width:0;
height:48px;
border:0;
outline:none;
background:transparent;
color:#ffffff;
font-size:14px;
font-weight:750;
padding:0 12px;
}

.layout-footer-input::placeholder{
color:#64748b;
}

.layout-footer-submit{
flex:0 0 auto;
border:0;
height:48px;
padding:0 16px;
border-radius:14px;
background:linear-gradient(135deg,#22d3ee,#a78bfa,#fbbf24);
box-shadow:0 16px 36px rgba(34,211,238,.20);
color:#020617;
font-size:13px;
font-weight:950;
cursor:pointer;
transition:transform .2s ease,box-shadow .2s ease;
}

.layout-footer-submit:hover{
transform:translateY(-2px);
box-shadow:0 20px 46px rgba(168,85,247,.24);
}

.layout-footer-bottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:20px 30px;
}

.layout-footer-copy{
margin:0;
font-size:13px;
line-height:1.5;
font-weight:800;
color:#94a3b8;
}

.layout-footer-legal{
display:flex;
flex-wrap:wrap;
gap:14px;
}

.layout-footer-legal a{
color:#94a3b8;
font-size:13px;
font-weight:850;
text-decoration:none;
transition:color .2s ease;
}

.layout-footer-legal a:hover{
color:#67e8f9;
}

@media (max-width: 980px){
.layout-footer-top{
grid-template-columns:1fr 1fr;
}

.layout-footer-brand{
grid-column:1 / -1;
}

.layout-footer-newsletter{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.layout-footer{
padding:20px;
}

.layout-footer-title{
font-size:34px;
}

.layout-footer-text{
font-size:16px;
}

.layout-footer-box{
border-radius:22px;
}

.layout-footer-top{
grid-template-columns:1fr;
gap:24px;
padding:24px;
}

.layout-footer-newsletter{
padding:24px;
}

.layout-footer-form{
display:grid;
gap:8px;
}

.layout-footer-submit{
width:100%;
}

.layout-footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:20px 24px;
}

.layout-footer-legal{
display:grid;
gap:10px;
}
}

This footer layout is useful because it gives the bottom of the page a clear structure instead of treating it as an afterthought. The brand block explains the website, the link columns improve navigation, the newsletter form supports conversion, and the bottom bar handles legal information.

Use this layout for business websites, blogs, SaaS products, eCommerce stores, agency websites, portfolios, landing pages, and any website that needs a professional footer with useful navigation and conversion elements.

21. Full-Width CTA Layout

A full-width CTA layout is a conversion-focused CSS layout pattern used near the end of landing pages, service pages, SaaS websites, product pages, blogs, and homepage sections. It gives visitors a clear next step after they have read the main content.

This layout uses a full-width call-to-action block with strong typography, supporting text, trust indicators, and two buttons. The goal is to make the final action clear without making the section feel heavy or cluttered. On mobile screens, the buttons stack vertically and the content remains easy to read.

  • Perfect for landing pages, service pages, product pages, and blog posts
  • Uses CSS Grid and Flexbox for a balanced CTA structure
  • Includes headline, description, CTA buttons, trust indicators, and visual accents
  • Stacks cleanly on mobile screens for better conversion usability
Full-Width CTA

Drive action with a strong CTA section

Use a full-width CTA layout when you want to guide visitors toward the next step after they have explored your content, product, or service.

Ready to build better layouts?

Start creating modern website sections today

A strong CTA layout helps visitors understand what to do next. Use clear messaging, focused buttons, and trust indicators to improve conversions.

Get Started View Examples
No credit card required Responsive CSS Copy-friendly code
25+ Reusable layout patterns for real website projects.
✓ Clean HTML structure
✓ Responsive CSS rules
✓ Modern visual style

HTML

<section class="layout-cta">

  <div class="layout-cta-inner">

    <div class="layout-cta-header">

      <div class="layout-cta-kicker">Full-Width CTA</div>

      <h2 class="layout-cta-title">
        Drive action with a <span>strong CTA section</span>
      </h2>

      <p class="layout-cta-text">
        Use a full-width CTA layout when you want to guide visitors toward
        the next step after they have explored your content, product, or service.
      </p>

    </div>

    <section class="layout-cta-box">

      <div class="layout-cta-content">

        <div class="layout-cta-main">

          <div class="layout-cta-badge">Ready to build better layouts?</div>

          <h3>Start creating <span>modern website sections</span> today</h3>

          <p>
            A strong CTA layout helps visitors understand what to do next.
            Use clear messaging, focused buttons, and trust indicators to improve conversions.
          </p>

          <div class="layout-cta-actions">
            <a href="#" class="layout-cta-btn layout-cta-btn-primary">Get Started</a>
            <a href="#" class="layout-cta-btn layout-cta-btn-secondary">View Examples</a>
          </div>

          <div class="layout-cta-trust">
            <span class="layout-cta-trust-item">No credit card required</span>
            <span class="layout-cta-trust-item">Responsive CSS</span>
            <span class="layout-cta-trust-item">Copy-friendly code</span>
          </div>

        </div>

        <div class="layout-cta-side">

          <div class="layout-cta-stat">
            <strong>25+</strong>
            <span>Reusable layout patterns for real website projects.</span>
          </div>

          <div class="layout-cta-checks">

            <div class="layout-cta-check">
              <span>✓</span>
              Clean HTML structure
            </div>

            <div class="layout-cta-check">
              <span>✓</span>
              Responsive CSS rules
            </div>

            <div class="layout-cta-check">
              <span>✓</span>
              Modern visual style
            </div>

          </div>

        </div>

      </div>

    </section>

  </div>

</section>

CSS

.layout-cta{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-cta::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,197,94,.14),transparent 38%);
pointer-events:none;
}

.layout-cta-inner{
position:relative;
z-index:2;
}

.layout-cta-header{
max-width:820px;
margin:0 0 30px;
}

.layout-cta-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-cta-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-cta-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#22c55e) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-cta-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:760px;
}

.layout-cta-box{
position:relative;
border-radius:28px;
padding:34px;
overflow:hidden;
background:
linear-gradient(135deg,rgba(34,211,238,.16),rgba(168,85,247,.14),rgba(34,197,94,.10)),
linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
border:1px solid rgba(255,255,255,.12);
box-shadow:
0 28px 80px rgba(0,0,0,.36),
0 0 0 1px rgba(34,211,238,.06);
}

.layout-cta-box::before{
content:"";
position:absolute;
right:-110px;
top:-110px;
width:320px;
height:320px;
border-radius:999px;
background:rgba(255,255,255,.13);
filter:blur(2px);
pointer-events:none;
}

.layout-cta-box::after{
content:"";
position:absolute;
left:-90px;
bottom:-110px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(34,211,238,.12);
filter:blur(4px);
pointer-events:none;
}

.layout-cta-content{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.45fr);
gap:28px;
align-items:center;
}

.layout-cta-main{
max-width:760px;
}

.layout-cta-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(2,6,23,.48);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:18px;
backdrop-filter:blur(10px);
}

.layout-cta-main h3{
margin:0 0 16px;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.055em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-cta-main h3 span{
background:linear-gradient(90deg,#ffffff,#67e8f9,#c4b5fd) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-cta-main p{
margin:0 0 24px;
font-size:17px;
line-height:1.7;
color:#dbeafe;
max-width:680px;
}

.layout-cta-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}

.layout-cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:0 20px;
border-radius:14px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.layout-cta-btn-primary{
color:#020617;
background:linear-gradient(135deg,#22d3ee,#a78bfa,#22c55e);
box-shadow:0 18px 42px rgba(34,211,238,.24);
}

.layout-cta-btn-secondary{
color:#e2e8f0;
background:rgba(2,6,23,.44);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(10px);
}

.layout-cta-btn:hover{
transform:translateY(-2px);
}

.layout-cta-side{
display:grid;
gap:14px;
}

.layout-cta-stat{
position:relative;
padding:20px;
border-radius:22px;
background:rgba(2,6,23,.42);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 46px rgba(0,0,0,.22);
overflow:hidden;
}

.layout-cta-stat::before{
content:"";
position:absolute;
right:-35px;
top:-35px;
width:110px;
height:110px;
border-radius:999px;
background:rgba(34,211,238,.14);
pointer-events:none;
}

.layout-cta-stat strong{
position:relative;
z-index:2;
display:block;
margin-bottom:8px;
font-size:34px;
line-height:1;
font-weight:950;
letter-spacing:-.055em;
color:#ffffff;
}

.layout-cta-stat span{
position:relative;
z-index:2;
display:block;
font-size:13px;
line-height:1.45;
font-weight:850;
color:#cbd5e1;
}

.layout-cta-checks{
display:grid;
gap:10px;
}

.layout-cta-check{
display:flex;
align-items:center;
gap:10px;
padding:13px;
border-radius:16px;
background:rgba(255,255,255,.065);
border:1px solid rgba(255,255,255,.10);
color:#e2e8f0;
font-size:13px;
line-height:1.45;
font-weight:850;
}

.layout-cta-check span{
width:22px;
height:22px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(34,197,94,.15);
border:1px solid rgba(34,197,94,.24);
color:#86efac;
font-size:12px;
font-weight:950;
flex:0 0 auto;
}

.layout-cta-trust{
position:relative;
z-index:2;
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.10);
}

.layout-cta-trust-item{
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:900;
}

@media (max-width: 900px){
.layout-cta-content{
grid-template-columns:1fr;
}

.layout-cta-side{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width: 640px){
.layout-cta{
padding:20px;
}

.layout-cta-title{
font-size:34px;
}

.layout-cta-text{
font-size:16px;
}

.layout-cta-box{
padding:24px;
border-radius:22px;
}

.layout-cta-main h3{
font-size:34px;
}

.layout-cta-main p{
font-size:16px;
}

.layout-cta-actions{
align-items:stretch;
}

.layout-cta-btn{
width:100%;
box-sizing:border-box;
}

.layout-cta-side{
grid-template-columns:1fr;
}

.layout-cta-trust{
display:grid;
}
}

This full-width CTA layout is useful because it gives the page a clear conversion moment. After visitors read the content, compare options, or explore features, the CTA section tells them exactly what to do next with strong buttons and supporting trust signals.

Use this layout for landing pages, service pages, SaaS websites, product pages, blog posts, homepage sections, portfolio pages, quote request blocks, and any page where you want visitors to take a specific action.

22. Image + Content Alternating Layout

An image and content alternating layout is a modern CSS layout pattern used to present multiple sections where text and visuals alternate from left to right. It is commonly used on landing pages, service pages, product pages, SaaS websites, feature explanations, and storytelling pages.

This layout helps avoid repetitive page structure. Instead of placing every image on the same side, each row alternates the visual and text position. This creates rhythm, improves scanning, and makes longer pages feel more engaging. On mobile screens, every row stacks into a single-column layout.

  • Perfect for feature sections, service pages, landing pages, and product storytelling
  • Uses CSS Grid for image + content rows
  • Alternates the visual and text position for better rhythm
  • Stacks into a clean single-column layout on mobile screens
Alternating Layout

Tell a story with image and content rows

Use an alternating layout to explain features, services, or product benefits with visual rhythm instead of repeating the same section structure.

Step 01

Start with a clear visual and message

Place a strong image, mockup, illustration, or preview beside your content to explain the first benefit in a more memorable way.

✓ Use the visual side for screenshots, product previews, or illustrations.
✓ Keep the text side focused on one clear idea.
View section
Step 02

Alternate direction to create page rhythm

Switching the image and content position makes longer pages feel less repetitive and helps users move through the page naturally.

✓ Alternate rows when explaining multiple features or services.
✓ Keep spacing consistent so the page still feels structured.
View section
Step 03

Stack the layout cleanly on mobile

On small screens, each row becomes a simple vertical section so the image and text remain easy to read and touch-friendly.

✓ Use one column on mobile for better readability.
✓ Avoid forcing side-by-side content on narrow screens.
View section

HTML

<section class="layout-alternating">

  <div class="layout-alternating-inner">

    <div class="layout-alternating-header">

      <div class="layout-alternating-kicker">Alternating Layout</div>

      <h2 class="layout-alternating-title">
        Tell a story with <span>image and content rows</span>
      </h2>

      <p class="layout-alternating-text">
        Use an alternating layout to explain features, services, or product benefits
        with visual rhythm instead of repeating the same section structure.
      </p>

    </div>

    <div class="layout-alternating-list">

      <section class="layout-alternating-row">

        <div class="layout-alternating-visual">
          <div class="layout-alternating-ui">
            <div class="layout-alternating-ui-card"></div>
            <div class="layout-alternating-ui-card"></div>
          </div>
        </div>

        <div class="layout-alternating-content">

          <div class="layout-alternating-label">Step 01</div>

          <h3>Start with a clear visual and message</h3>

          <p>
            Place a strong image, mockup, illustration, or preview beside your
            content to explain the first benefit in a more memorable way.
          </p>

          <div class="layout-alternating-points">

            <div class="layout-alternating-point">
              <span>✓</span>
              <strong>Use the visual side for screenshots, product previews, or illustrations.</strong>
            </div>

            <div class="layout-alternating-point">
              <span>✓</span>
              <strong>Keep the text side focused on one clear idea.</strong>
            </div>

          </div>

          <a href="#" class="layout-alternating-link">View section</a>

        </div>

      </section>

      <section class="layout-alternating-row">

        <div class="layout-alternating-visual">
          <div class="layout-alternating-ui">
            <div class="layout-alternating-ui-card"></div>
            <div class="layout-alternating-ui-card"></div>
          </div>
        </div>

        <div class="layout-alternating-content">

          <div class="layout-alternating-label">Step 02</div>

          <h3>Alternate direction to create page rhythm</h3>

          <p>
            Switching the image and content position makes longer pages feel less
            repetitive and helps users move through the page naturally.
          </p>

          <div class="layout-alternating-points">

            <div class="layout-alternating-point">
              <span>✓</span>
              <strong>Alternate rows when explaining multiple features or services.</strong>
            </div>

            <div class="layout-alternating-point">
              <span>✓</span>
              <strong>Keep spacing consistent so the page still feels structured.</strong>
            </div>

          </div>

          <a href="#" class="layout-alternating-link">View section</a>

        </div>

      </section>

      <section class="layout-alternating-row">

        <div class="layout-alternating-visual">
          <div class="layout-alternating-ui">
            <div class="layout-alternating-ui-card"></div>
            <div class="layout-alternating-ui-card"></div>
          </div>
        </div>

        <div class="layout-alternating-content">

          <div class="layout-alternating-label">Step 03</div>

          <h3>Stack the layout cleanly on mobile</h3>

          <p>
            On small screens, each row becomes a simple vertical section so the
            image and text remain easy to read and touch-friendly.
          </p>

          <div class="layout-alternating-points">

            <div class="layout-alternating-point">
              <span>✓</span>
              <strong>Use one column on mobile for better readability.</strong>
            </div>

            <div class="layout-alternating-point">
              <span>✓</span>
              <strong>Avoid forcing side-by-side content on narrow screens.</strong>
            </div>

          </div>

          <a href="#" class="layout-alternating-link">View section</a>

        </div>

      </section>

    </div>

  </div>

</section>

CSS

.layout-alternating{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-alternating::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.18),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(245,158,11,.16),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(168,85,247,.17),transparent 38%);
pointer-events:none;
}

.layout-alternating-inner{
position:relative;
z-index:2;
}

.layout-alternating-header{
max-width:840px;
margin:0 auto 34px;
text-align:center;
}

.layout-alternating-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-alternating-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-alternating-title span{
background:linear-gradient(90deg,#22d3ee,#fbbf24,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-alternating-text{
margin:0 auto;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-alternating-list{
display:grid;
gap:22px;
}

.layout-alternating-row{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:24px;
align-items:center;
border-radius:26px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
padding:24px;
}

.layout-alternating-row::before{
content:"";
position:absolute;
right:-70px;
top:-70px;
width:220px;
height:220px;
border-radius:999px;
background:rgba(34,211,238,.12);
filter:blur(2px);
pointer-events:none;
}

.layout-alternating-row:nth-child(2)::before{
left:-70px;
right:auto;
background:rgba(245,158,11,.13);
}

.layout-alternating-row:nth-child(3)::before{
background:rgba(168,85,247,.14);
}

.layout-alternating-row:nth-child(even) .layout-alternating-visual{
order:2;
}

.layout-alternating-row:nth-child(even) .layout-alternating-content{
order:1;
}

.layout-alternating-visual{
position:relative;
z-index:2;
min-height:320px;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(135deg,rgba(34,211,238,.22),rgba(168,85,247,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 22px 60px rgba(0,0,0,.28);
}

.layout-alternating-row:nth-child(2) .layout-alternating-visual{
background:
linear-gradient(135deg,rgba(245,158,11,.22),rgba(236,72,153,.17)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-alternating-row:nth-child(3) .layout-alternating-visual{
background:
linear-gradient(135deg,rgba(34,197,94,.20),rgba(34,211,238,.16)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}

.layout-alternating-visual::before{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:240px;
height:240px;
border-radius:999px;
background:rgba(255,255,255,.14);
}

.layout-alternating-visual::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:190px;
height:140px;
border-radius:30px;
transform:translate(-50%,-50%) rotate(-8deg);
background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.16);
box-shadow:0 24px 60px rgba(0,0,0,.25);
}

.layout-alternating-ui{
position:absolute;
left:28px;
right:28px;
bottom:28px;
z-index:3;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:12px;
}

.layout-alternating-ui-card{
height:74px;
border-radius:18px;
background:rgba(2,6,23,.42);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(10px);
position:relative;
overflow:hidden;
}

.layout-alternating-ui-card::before{
content:"";
position:absolute;
left:14px;
top:16px;
width:54%;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.32);
}

.layout-alternating-ui-card::after{
content:"";
position:absolute;
left:14px;
top:38px;
width:74%;
height:8px;
border-radius:999px;
background:rgba(148,163,184,.36);
}

.layout-alternating-content{
position:relative;
z-index:2;
padding:12px;
}

.layout-alternating-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#94a3b8;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:16px;
}

.layout-alternating-content h3{
margin:0 0 14px;
font-size:clamp(28px,4vw,44px);
line-height:1.08;
font-weight:950;
letter-spacing:-.045em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-alternating-content p{
margin:0 0 22px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
max-width:620px;
}

.layout-alternating-points{
display:grid;
gap:12px;
margin-bottom:24px;
}

.layout-alternating-point{
display:flex;
align-items:flex-start;
gap:10px;
padding:13px;
border-radius:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
}

.layout-alternating-point span{
width:22px;
height:22px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(34,211,238,.13);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:12px;
font-weight:950;
flex:0 0 auto;
}

.layout-alternating-point strong{
display:block;
font-size:14px;
line-height:1.45;
font-weight:900;
color:#e2e8f0;
}

.layout-alternating-link{
display:inline-flex;
align-items:center;
gap:8px;
color:#67e8f9;
font-size:14px;
font-weight:950;
text-decoration:none;
}

.layout-alternating-link::after{
content:"→";
transition:transform .2s ease;
}

.layout-alternating-link:hover::after{
transform:translateX(4px);
}

@media (max-width: 900px){
.layout-alternating-row{
grid-template-columns:1fr;
}

.layout-alternating-row:nth-child(even) .layout-alternating-visual,
.layout-alternating-row:nth-child(even) .layout-alternating-content{
order:initial;
}
}

@media (max-width: 640px){
.layout-alternating{
padding:20px;
}

.layout-alternating-header{
text-align:left;
margin-bottom:24px;
}

.layout-alternating-title{
font-size:34px;
}

.layout-alternating-text{
font-size:16px;
}

.layout-alternating-row{
padding:18px;
border-radius:22px;
gap:18px;
}

.layout-alternating-visual{
min-height:260px;
border-radius:20px;
}

.layout-alternating-ui{
left:18px;
right:18px;
bottom:18px;
grid-template-columns:1fr;
}

.layout-alternating-ui-card{
height:62px;
}

.layout-alternating-content{
padding:4px;
}

.layout-alternating-content h3{
font-size:30px;
}
}

This image and content alternating layout is useful because it creates movement and rhythm across longer pages. Instead of repeating the same visual structure, each section alternates the content and image position, which makes the page feel more intentional and easier to scan.

Use this layout for product feature pages, SaaS landing pages, service explanations, agency websites, case study sections, storytelling pages, app feature pages, and any page where multiple benefits need to be explained with supporting visuals.

23. Mobile App Showcase Layout

A mobile app showcase layout is a modern CSS layout pattern used to present mobile apps, SaaS tools, startup products, dashboards, AI apps, fitness apps, finance apps, productivity tools, and app landing pages.

This layout combines strong marketing text with a large mobile phone mockup and supporting feature cards. The goal is to make the app feel real, polished, and easy to understand. On mobile screens, the content stacks into one column and the app preview remains centered and readable.

  • Perfect for mobile apps, SaaS products, AI tools, and startup landing pages
  • Uses CSS Grid for a content + phone mockup layout
  • Includes app features, CTA buttons, stats, and a responsive phone preview
  • Stacks cleanly on mobile screens for better readability
Mobile App Showcase

Promote apps with a modern phone preview layout

Use a mobile app showcase layout to present app benefits, product features, screenshots, and calls to action in a polished landing page section.

New app experience

Manage everything from one beautiful mobile app

A strong app showcase layout helps visitors quickly understand what the app does, why it matters, and how to get started.

Download App Watch Demo
01
Live insights Show important app data in real time.
02
Easy actions Make common tasks fast and simple.
03
Clean UI Use a focused and mobile-first interface.
Real-time updates Keep users informed with clear status cards.
AppFlow Today overview
Total progress 84%
✓
Task completed Updated 2 min ago
↗
Growth increased Weekly report ready
Clean dashboard Highlight app screens without using real screenshots.

HTML

<section class="layout-appshowcase">

  <div class="layout-appshowcase-inner">

    <div class="layout-appshowcase-header">

      <div class="layout-appshowcase-kicker">Mobile App Showcase</div>

      <h2 class="layout-appshowcase-title">
        Promote apps with a <span>modern phone preview layout</span>
      </h2>

      <p class="layout-appshowcase-text">
        Use a mobile app showcase layout to present app benefits, product features,
        screenshots, and calls to action in a polished landing page section.
      </p>

    </div>

    <section class="layout-appshowcase-hero">

      <div class="layout-appshowcase-content">

        <div class="layout-appshowcase-badge">New app experience</div>

        <h3>Manage everything from one <span>beautiful mobile app</span></h3>

        <p>
          A strong app showcase layout helps visitors quickly understand what the app does,
          why it matters, and how to get started.
        </p>

        <div class="layout-appshowcase-actions">
          <a href="#" class="layout-appshowcase-btn layout-appshowcase-btn-primary">Download App</a>
          <a href="#" class="layout-appshowcase-btn layout-appshowcase-btn-secondary">Watch Demo</a>
        </div>

        <div class="layout-appshowcase-features">

          <div class="layout-appshowcase-feature">
            <div class="layout-appshowcase-feature-icon">01</div>
            <strong>Live insights</strong>
            <span>Show important app data in real time.</span>
          </div>

          <div class="layout-appshowcase-feature">
            <div class="layout-appshowcase-feature-icon">02</div>
            <strong>Easy actions</strong>
            <span>Make common tasks fast and simple.</span>
          </div>

          <div class="layout-appshowcase-feature">
            <div class="layout-appshowcase-feature-icon">03</div>
            <strong>Clean UI</strong>
            <span>Use a focused and mobile-first interface.</span>
          </div>

        </div>

      </div>

      <div class="layout-appshowcase-device-area">

        <div class="layout-appshowcase-floating-card layout-appshowcase-floating-left">
          <strong>Real-time updates</strong>
          <span>Keep users informed with clear status cards.</span>
        </div>

        <div class="layout-appshowcase-phone">

          <div class="layout-appshowcase-screen">

            <div class="layout-appshowcase-app-top">

              <div class="layout-appshowcase-app-title">
                <strong>AppFlow</strong>
                <span>Today overview</span>
              </div>

              <div class="layout-appshowcase-app-avatar"></div>

            </div>

            <div class="layout-appshowcase-balance">
              <span>Total progress</span>
              <strong>84%</strong>
            </div>

            <div class="layout-appshowcase-chart">
              <div class="layout-appshowcase-bar"></div>
              <div class="layout-appshowcase-bar"></div>
              <div class="layout-appshowcase-bar"></div>
              <div class="layout-appshowcase-bar"></div>
              <div class="layout-appshowcase-bar"></div>
              <div class="layout-appshowcase-bar"></div>
            </div>

            <div class="layout-appshowcase-list">

              <div class="layout-appshowcase-list-item">
                <div class="layout-appshowcase-list-icon">✓</div>
                <div>
                  <strong>Task completed</strong>
                  <span>Updated 2 min ago</span>
                </div>
              </div>

              <div class="layout-appshowcase-list-item">
                <div class="layout-appshowcase-list-icon">↗</div>
                <div>
                  <strong>Growth increased</strong>
                  <span>Weekly report ready</span>
                </div>
              </div>

            </div>

          </div>

        </div>

        <div class="layout-appshowcase-floating-card layout-appshowcase-floating-right">
          <strong>Clean dashboard</strong>
          <span>Highlight app screens without using real screenshots.</span>
        </div>

      </div>

    </section>

  </div>

</section>

CSS

.layout-appshowcase{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-appshowcase::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,197,94,.14),transparent 38%);
pointer-events:none;
}

.layout-appshowcase-inner{
position:relative;
z-index:2;
}

.layout-appshowcase-header{
max-width:820px;
margin:0 0 30px;
}

.layout-appshowcase-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-appshowcase-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-appshowcase-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#22c55e) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-appshowcase-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:760px;
}

.layout-appshowcase-hero{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
gap:28px;
align-items:center;
border-radius:28px;
padding:34px;
overflow:hidden;
background:
linear-gradient(135deg,rgba(34,211,238,.15),rgba(168,85,247,.13),rgba(34,197,94,.08)),
linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 80px rgba(0,0,0,.36);
}

.layout-appshowcase-hero::before{
content:"";
position:absolute;
right:-120px;
top:-120px;
width:360px;
height:360px;
border-radius:999px;
background:rgba(255,255,255,.12);
filter:blur(2px);
pointer-events:none;
}

.layout-appshowcase-hero::after{
content:"";
position:absolute;
left:-90px;
bottom:-110px;
width:280px;
height:280px;
border-radius:999px;
background:rgba(34,211,238,.12);
filter:blur(4px);
pointer-events:none;
}

.layout-appshowcase-content{
position:relative;
z-index:2;
max-width:720px;
}

.layout-appshowcase-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(2,6,23,.48);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:18px;
backdrop-filter:blur(10px);
}

.layout-appshowcase-content h3{
margin:0 0 16px;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.055em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-appshowcase-content h3 span{
background:linear-gradient(90deg,#ffffff,#67e8f9,#c4b5fd) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-appshowcase-content p{
margin:0 0 24px;
font-size:17px;
line-height:1.7;
color:#dbeafe;
max-width:650px;
}

.layout-appshowcase-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-bottom:26px;
}

.layout-appshowcase-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:0 20px;
border-radius:14px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.layout-appshowcase-btn-primary{
color:#020617;
background:linear-gradient(135deg,#22d3ee,#a78bfa,#22c55e);
box-shadow:0 18px 42px rgba(34,211,238,.24);
}

.layout-appshowcase-btn-secondary{
color:#e2e8f0;
background:rgba(2,6,23,.44);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(10px);
}

.layout-appshowcase-btn:hover{
transform:translateY(-2px);
}

.layout-appshowcase-features{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.layout-appshowcase-feature{
padding:16px;
border-radius:18px;
background:rgba(2,6,23,.38);
border:1px solid rgba(255,255,255,.10);
}

.layout-appshowcase-feature-icon{
width:34px;
height:34px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
box-shadow:0 12px 28px rgba(34,211,238,.20);
color:#ffffff;
font-size:13px;
font-weight:950;
margin-bottom:12px;
}

.layout-appshowcase-feature strong{
display:block;
margin-bottom:6px;
font-size:14px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.layout-appshowcase-feature span{
display:block;
font-size:12px;
line-height:1.5;
font-weight:800;
color:#94a3b8;
}

.layout-appshowcase-device-area{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
min-height:560px;
}

.layout-appshowcase-phone{
position:relative;
width:270px;
height:540px;
border-radius:42px;
padding:12px;
background:linear-gradient(180deg,#111827,#020617);
border:1px solid rgba(255,255,255,.18);
box-shadow:
0 34px 80px rgba(0,0,0,.46),
0 0 0 8px rgba(255,255,255,.035);
}

.layout-appshowcase-phone::before{
content:"";
position:absolute;
left:50%;
top:18px;
transform:translateX(-50%);
width:86px;
height:24px;
border-radius:999px;
background:#020617;
z-index:5;
}

.layout-appshowcase-screen{
position:relative;
height:100%;
border-radius:32px;
overflow:hidden;
background:
radial-gradient(circle at 30% 12%,rgba(34,211,238,.24),transparent 32%),
radial-gradient(circle at 90% 18%,rgba(168,85,247,.24),transparent 34%),
linear-gradient(180deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,.10);
padding:46px 18px 18px;
box-sizing:border-box;
}

.layout-appshowcase-app-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:20px;
}

.layout-appshowcase-app-title strong{
display:block;
font-size:18px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff;
}

.layout-appshowcase-app-title span{
display:block;
margin-top:3px;
font-size:11px;
font-weight:800;
color:#94a3b8;
}

.layout-appshowcase-app-avatar{
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
box-shadow:0 14px 30px rgba(34,197,94,.20);
}

.layout-appshowcase-balance{
padding:18px;
border-radius:22px;
background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(168,85,247,.16));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 18px 42px rgba(0,0,0,.22);
margin-bottom:14px;
}

.layout-appshowcase-balance span{
display:block;
margin-bottom:8px;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
color:#94a3b8;
}

.layout-appshowcase-balance strong{
display:block;
font-size:34px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff;
}

.layout-appshowcase-chart{
height:120px;
display:flex;
align-items:flex-end;
gap:7px;
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
margin-bottom:14px;
}

.layout-appshowcase-bar{
flex:1;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#22d3ee,#818cf8);
box-shadow:0 0 18px rgba(34,211,238,.18);
}

.layout-appshowcase-bar:nth-child(1){height:38%;}
.layout-appshowcase-bar:nth-child(2){height:62%;}
.layout-appshowcase-bar:nth-child(3){height:48%;}
.layout-appshowcase-bar:nth-child(4){height:78%;}
.layout-appshowcase-bar:nth-child(5){height:58%;}
.layout-appshowcase-bar:nth-child(6){height:90%;}

.layout-appshowcase-list{
display:grid;
gap:10px;
}

.layout-appshowcase-list-item{
display:flex;
align-items:center;
gap:10px;
padding:11px;
border-radius:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
}

.layout-appshowcase-list-icon{
width:28px;
height:28px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
color:#ffffff;
font-size:11px;
font-weight:950;
flex:0 0 auto;
}

.layout-appshowcase-list-item strong{
display:block;
font-size:12px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.layout-appshowcase-list-item span{
display:block;
margin-top:2px;
font-size:10px;
font-weight:800;
color:#94a3b8;
}

.layout-appshowcase-floating-card{
position:absolute;
z-index:4;
width:180px;
padding:14px;
border-radius:18px;
background:rgba(2,6,23,.72);
border:1px solid rgba(255,255,255,.13);
box-shadow:0 20px 50px rgba(0,0,0,.32);
backdrop-filter:blur(14px);
}

.layout-appshowcase-floating-card strong{
display:block;
margin-bottom:5px;
font-size:13px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.layout-appshowcase-floating-card span{
display:block;
font-size:12px;
line-height:1.45;
font-weight:800;
color:#94a3b8;
}

.layout-appshowcase-floating-left{
left:0;
top:120px;
}

.layout-appshowcase-floating-right{
right:0;
bottom:120px;
}

@media (max-width: 960px){
.layout-appshowcase-hero{
grid-template-columns:1fr;
}

.layout-appshowcase-device-area{
min-height:520px;
}

.layout-appshowcase-floating-left{
left:8%;
}

.layout-appshowcase-floating-right{
right:8%;
}
}

@media (max-width: 640px){
.layout-appshowcase{
padding:20px;
}

.layout-appshowcase-title{
font-size:34px;
}

.layout-appshowcase-text{
font-size:16px;
}

.layout-appshowcase-hero{
padding:24px;
border-radius:22px;
}

.layout-appshowcase-content h3{
font-size:34px;
}

.layout-appshowcase-content p{
font-size:16px;
}

.layout-appshowcase-actions{
align-items:stretch;
}

.layout-appshowcase-btn{
width:100%;
box-sizing:border-box;
}

.layout-appshowcase-features{
grid-template-columns:1fr;
}

.layout-appshowcase-device-area{
min-height:500px;
}

.layout-appshowcase-phone{
width:230px;
height:460px;
border-radius:36px;
}

.layout-appshowcase-screen{
border-radius:28px;
padding:42px 14px 14px;
}

.layout-appshowcase-balance strong{
font-size:28px;
}

.layout-appshowcase-chart{
height:90px;
}

.layout-appshowcase-floating-card{
display:none;
}
}

This mobile app showcase layout is useful because it combines product messaging with a visual app preview. The phone mockup makes the product feel more concrete, while the feature cards and CTA buttons explain why the app is valuable and what users should do next.

Use this layout for mobile app landing pages, SaaS tools, AI apps, finance apps, fitness apps, productivity apps, startup websites, product launch pages, and any page where a mobile product needs to be shown clearly and professionally.

24. Container Query Card Layout

A container query card layout is a modern CSS layout pattern that lets components respond to the size of their parent container instead of only the full browser viewport. This is especially useful for reusable cards, sidebars, dashboards, product blocks, blog cards, and component-based websites.

Unlike regular media queries, container queries allow the same card component to change layout depending on where it is placed. A card can appear horizontal in a wide container, compact in a sidebar, and stacked on smaller containers without writing separate page-specific CSS.

  • Perfect for reusable cards, dashboards, product sections, and responsive components
  • Uses container-type to make the card respond to its parent width
  • Changes from stacked to horizontal layout when the container is wide enough
  • Useful for modern component-based CSS architecture
Container Query Layout

Build smarter cards with container queries

Use container queries when a reusable component needs to adapt to the width of its parent container instead of only responding to the full viewport width.

Wide content area Container grows
Responsive Component

One card, different layouts

This card becomes horizontal when its parent container is wide enough. The layout changes because of the container size, not because of the browser viewport alone.

Container Query Reusable CSS Modern Layout
View Example Learn More
In this wider container, the same card has enough space to become a horizontal layout.
Narrow sidebar area Container shrinks
Same Component

Compact version

The same card stays stacked because this parent container is narrower.

Card Sidebar
Open Details
This sidebar version uses the same component class, but the parent container is smaller.

HTML

<section class="layout-containerquery">

  <div class="layout-containerquery-inner">

    <div class="layout-containerquery-header">

      <div class="layout-containerquery-kicker">Container Query Layout</div>

      <h2 class="layout-containerquery-title">
        Build smarter cards with <span>container queries</span>
      </h2>

      <p class="layout-containerquery-text">
        Use container queries when a reusable component needs to adapt to the width
        of its parent container instead of only responding to the full viewport width.
      </p>

    </div>

    <div class="layout-containerquery-demo-grid">

      <div class="layout-containerquery-area">

        <div class="layout-containerquery-area-label">
          <strong>Wide content area</strong>
          <span>Container grows</span>
        </div>

        <article class="layout-containerquery-card">

          <div class="layout-containerquery-visual"></div>

          <div class="layout-containerquery-card-content">

            <div class="layout-containerquery-card-label">Responsive Component</div>

            <h3>One card, different layouts</h3>

            <p>
              This card becomes horizontal when its parent container is wide enough.
              The layout changes because of the container size, not because of the browser viewport alone.
            </p>

            <div class="layout-containerquery-meta">
              <span>Container Query</span>
              <span>Reusable CSS</span>
              <span>Modern Layout</span>
            </div>

            <div class="layout-containerquery-actions">
              <a href="#" class="layout-containerquery-btn layout-containerquery-btn-primary">View Example</a>
              <a href="#" class="layout-containerquery-btn layout-containerquery-btn-secondary">Learn More</a>
            </div>

          </div>

        </article>

        <div class="layout-containerquery-note">
          In this wider container, the same card has enough space to become a horizontal layout.
        </div>

      </div>

      <div class="layout-containerquery-area layout-containerquery-sidebar">

        <div class="layout-containerquery-area-label">
          <strong>Narrow sidebar area</strong>
          <span>Container shrinks</span>
        </div>

        <article class="layout-containerquery-card">

          <div class="layout-containerquery-visual"></div>

          <div class="layout-containerquery-card-content">

            <div class="layout-containerquery-card-label">Same Component</div>

            <h3>Compact version</h3>

            <p>
              The same card stays stacked because this parent container is narrower.
            </p>

            <div class="layout-containerquery-meta">
              <span>Card</span>
              <span>Sidebar</span>
            </div>

            <div class="layout-containerquery-actions">
              <a href="#" class="layout-containerquery-btn layout-containerquery-btn-primary">Open</a>
              <a href="#" class="layout-containerquery-btn layout-containerquery-btn-secondary">Details</a>
            </div>

          </div>

        </article>

        <div class="layout-containerquery-note">
          This sidebar version uses the same component class, but the parent container is smaller.
        </div>

      </div>

    </div>

  </div>

</section>

CSS

.layout-containerquery{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-containerquery::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(34,197,94,.16),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(168,85,247,.17),transparent 38%);
pointer-events:none;
}

.layout-containerquery-inner{
position:relative;
z-index:2;
}

.layout-containerquery-header{
max-width:840px;
margin:0 auto 34px;
text-align:center;
}

.layout-containerquery-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-containerquery-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-containerquery-title span{
background:linear-gradient(90deg,#22d3ee,#22c55e,#a78bfa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-containerquery-text{
margin:0 auto;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:720px;
}

.layout-containerquery-demo-grid{
display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
gap:20px;
align-items:start;
}

.layout-containerquery-area{
position:relative;
border-radius:26px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.32);
overflow:hidden;
padding:22px;
container-type:inline-size;
container-name:cardarea;
}

.layout-containerquery-area::before{
content:"";
position:absolute;
right:-64px;
top:-64px;
width:190px;
height:190px;
border-radius:999px;
background:rgba(34,211,238,.13);
filter:blur(2px);
pointer-events:none;
}

.layout-containerquery-area-label{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
padding-bottom:16px;
border-bottom:1px solid rgba(255,255,255,.09);
}

.layout-containerquery-area-label strong{
font-size:15px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.layout-containerquery-area-label span{
display:inline-flex;
align-items:center;
justify-content:center;
height:30px;
padding:0 10px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#94a3b8;
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}

.layout-containerquery-card{
position:relative;
z-index:2;
display:grid;
gap:18px;
padding:18px;
border-radius:22px;
background:rgba(2,6,23,.42);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 20px 55px rgba(0,0,0,.24);
overflow:hidden;
}

.layout-containerquery-card::before{
content:"";
position:absolute;
right:-40px;
bottom:-40px;
width:130px;
height:130px;
border-radius:999px;
background:rgba(34,197,94,.12);
pointer-events:none;
}

.layout-containerquery-visual{
position:relative;
min-height:210px;
border-radius:20px;
overflow:hidden;
background:
linear-gradient(135deg,rgba(34,211,238,.24),rgba(168,85,247,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.12);
}

.layout-containerquery-visual::before{
content:"";
position:absolute;
right:-54px;
top:-54px;
width:170px;
height:170px;
border-radius:999px;
background:rgba(255,255,255,.14);
}

.layout-containerquery-visual::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:140px;
height:110px;
border-radius:28px;
transform:translate(-50%,-50%) rotate(-8deg);
background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.15);
box-shadow:0 24px 60px rgba(0,0,0,.25);
}

.layout-containerquery-card-content{
position:relative;
z-index:2;
}

.layout-containerquery-card-label{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:11px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:14px;
}

.layout-containerquery-card-content h3{
margin:0 0 12px;
font-size:28px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-containerquery-card-content p{
margin:0 0 18px;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.layout-containerquery-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:20px;
}

.layout-containerquery-meta span{
display:inline-flex;
align-items:center;
justify-content:center;
height:30px;
padding:0 10px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:11px;
font-weight:900;
}

.layout-containerquery-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.layout-containerquery-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 14px;
border-radius:13px;
font-size:13px;
font-weight:950;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease;
}

.layout-containerquery-btn-primary{
color:#020617;
background:linear-gradient(135deg,#22d3ee,#22c55e);
box-shadow:0 16px 36px rgba(34,211,238,.20);
}

.layout-containerquery-btn-secondary{
color:#e2e8f0;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
}

.layout-containerquery-btn:hover{
transform:translateY(-2px);
}

.layout-containerquery-note{
position:relative;
z-index:2;
margin-top:16px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
color:#94a3b8;
font-size:13px;
line-height:1.6;
font-weight:800;
}

.layout-containerquery-sidebar .layout-containerquery-visual{
min-height:150px;
}

.layout-containerquery-sidebar .layout-containerquery-card-content h3{
font-size:23px;
}

.layout-containerquery-sidebar .layout-containerquery-actions{
display:grid;
}

@container cardarea (min-width: 620px){
.layout-containerquery-card{
grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);
align-items:center;
}

.layout-containerquery-visual{
min-height:280px;
}

.layout-containerquery-card-content h3{
font-size:clamp(30px,6cqw,46px);
}

.layout-containerquery-card-content p{
font-size:16px;
}

.layout-containerquery-actions{
align-items:center;
}
}

@media (max-width: 900px){
.layout-containerquery-demo-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.layout-containerquery{
padding:20px;
}

.layout-containerquery-header{
text-align:left;
margin-bottom:24px;
}

.layout-containerquery-title{
font-size:34px;
}

.layout-containerquery-text{
font-size:16px;
}

.layout-containerquery-area{
padding:18px;
border-radius:22px;
}

.layout-containerquery-card{
border-radius:20px;
}

.layout-containerquery-card-content h3{
font-size:26px;
}

.layout-containerquery-actions{
display:grid;
}

.layout-containerquery-btn{
width:100%;
box-sizing:border-box;
}
}

This container query card layout is useful because it makes components more reusable. Instead of writing separate CSS for every page area, the card responds to the space it receives from its parent container. This is especially powerful for modern design systems, dashboards, sidebar cards, product cards, and reusable WordPress blocks.

Use this layout for component libraries, blog cards, product cards, dashboard widgets, sidebar blocks, homepage sections, reusable Gutenberg patterns, SaaS interfaces, and any modern website where the same component may appear in different container sizes.

25. Complete Landing Page Section Layout

A complete landing page section layout combines several modern CSS layout ideas into one polished section. It can include a hero message, call-to-action buttons, feature cards, statistics, visual mockups, trust indicators, and responsive structure.

This layout is useful when you want to create a strong first section for a homepage, SaaS landing page, product page, agency website, app website, or digital product. It uses CSS Grid and Flexbox together to create a professional landing page section that adapts cleanly across desktop, tablet, and mobile screens.

  • Perfect for SaaS websites, product pages, agencies, startups, and homepage hero sections
  • Combines hero text, CTA buttons, feature cards, stats, and a visual preview
  • Uses CSS Grid and Flexbox for a modern responsive structure
  • Stacks cleanly on mobile screens while keeping the design professional
Complete Landing Section

Combine layouts into a complete landing page section

Use a complete landing page section when you need a strong hero area with clear messaging, CTA buttons, trust signals, a visual preview, and supporting feature cards.

Modern website section

Launch a polished landing page experience

A complete landing page section brings together headline hierarchy, conversion buttons, product visuals, trust indicators, and feature cards in one professional responsive layout.

Start Building View Demo
Responsive CSS Copy-friendly HTML Modern layout system
Reusable sections Combine cards, stats, visuals, and CTAs.
Conversion focus Guide users toward one clear next step.
01
Hero message Use a strong headline and short explanation to make the value clear.
02
CTA buttons Give visitors clear actions such as start, view demo, or request a quote.
03
Visual preview Show a mockup, screenshot, product card, app preview, or dashboard area.
04
Feature proof Add supporting cards to explain benefits and improve trust.

HTML

<section class="layout-landing">

  <div class="layout-landing-inner">

    <div class="layout-landing-header">

      <div class="layout-landing-kicker">Complete Landing Section</div>

      <h2 class="layout-landing-title">
        Combine layouts into a <span>complete landing page section</span>
      </h2>

      <p class="layout-landing-text">
        Use a complete landing page section when you need a strong hero area
        with clear messaging, CTA buttons, trust signals, a visual preview,
        and supporting feature cards.
      </p>

    </div>

    <section class="layout-landing-section">

      <div class="layout-landing-top">

        <div class="layout-landing-copy">

          <div class="layout-landing-badge">Modern website section</div>

          <h3>Launch a polished <span>landing page experience</span></h3>

          <p>
            A complete landing page section brings together headline hierarchy,
            conversion buttons, product visuals, trust indicators, and feature cards.
          </p>

          <div class="layout-landing-actions">
            <a href="#" class="layout-landing-btn layout-landing-btn-primary">Start Building</a>
            <a href="#" class="layout-landing-btn layout-landing-btn-secondary">View Demo</a>
          </div>

          <div class="layout-landing-trust">
            <span>Responsive CSS</span>
            <span>Copy-friendly HTML</span>
            <span>Modern layout system</span>
          </div>

        </div>

        <div class="layout-landing-preview">

          <div class="layout-landing-floating-card layout-landing-floating-left">
            <strong>Reusable sections</strong>
            <span>Combine cards, stats, visuals, and CTAs.</span>
          </div>

          <div class="layout-landing-browser">

            <div class="layout-landing-browser-top">
              <div class="layout-landing-dot"></div>
              <div class="layout-landing-dot"></div>
              <div class="layout-landing-dot"></div>
              <div class="layout-landing-url"></div>
            </div>

            <div class="layout-landing-browser-body">

              <div class="layout-landing-browser-hero"></div>

              <div class="layout-landing-browser-grid">
                <div class="layout-landing-browser-card"></div>
                <div class="layout-landing-browser-card"></div>
                <div class="layout-landing-browser-card"></div>
              </div>

              <div class="layout-landing-browser-chart">
                <div class="layout-landing-browser-bar"></div>
                <div class="layout-landing-browser-bar"></div>
                <div class="layout-landing-browser-bar"></div>
                <div class="layout-landing-browser-bar"></div>
                <div class="layout-landing-browser-bar"></div>
                <div class="layout-landing-browser-bar"></div>
              </div>

            </div>

          </div>

          <div class="layout-landing-floating-card layout-landing-floating-right">
            <strong>Conversion focus</strong>
            <span>Guide users toward one clear next step.</span>
          </div>

        </div>

      </div>

      <div class="layout-landing-bottom">

        <div class="layout-landing-card">
          <div class="layout-landing-card-icon">01</div>
          <strong>Hero message</strong>
          <span>Use a strong headline and short explanation to make the value clear.</span>
        </div>

        <div class="layout-landing-card">
          <div class="layout-landing-card-icon">02</div>
          <strong>CTA buttons</strong>
          <span>Give visitors clear actions such as start, view demo, or request a quote.</span>
        </div>

        <div class="layout-landing-card">
          <div class="layout-landing-card-icon">03</div>
          <strong>Visual preview</strong>
          <span>Show a mockup, screenshot, product card, app preview, or dashboard area.</span>
        </div>

        <div class="layout-landing-card">
          <div class="layout-landing-card-icon">04</div>
          <strong>Feature proof</strong>
          <span>Add supporting cards to explain benefits and improve trust.</span>
        </div>

      </div>

    </section>

  </div>

</section>

CSS

.layout-landing{
background:#020617;
border-radius:18px;
padding:28px;
overflow:hidden;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(15,23,42,.45);
}

.layout-landing::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(circle at 18% 18%,rgba(34,211,238,.20),transparent 34%),
radial-gradient(circle at 84% 24%,rgba(168,85,247,.20),transparent 34%),
radial-gradient(circle at 52% 100%,rgba(34,197,94,.14),transparent 38%);
pointer-events:none;
}

.layout-landing-inner{
position:relative;
z-index:2;
}

.layout-landing-header{
max-width:840px;
margin:0 0 30px;
}

.layout-landing-kicker{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.11);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:18px;
}

.layout-landing-title{
margin:0 0 14px;
font-size:clamp(32px,5vw,54px);
line-height:1.05;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-landing-title span{
background:linear-gradient(90deg,#22d3ee,#a78bfa,#22c55e) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-landing-text{
margin:0;
font-size:17px;
line-height:1.7;
color:#cbd5e1;
max-width:760px;
}

.layout-landing-section{
position:relative;
overflow:hidden;
border-radius:28px;
padding:34px;
background:
linear-gradient(135deg,rgba(34,211,238,.15),rgba(168,85,247,.13),rgba(34,197,94,.08)),
linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 80px rgba(0,0,0,.36);
}

.layout-landing-section::before{
content:"";
position:absolute;
right:-130px;
top:-130px;
width:390px;
height:390px;
border-radius:999px;
background:rgba(255,255,255,.12);
filter:blur(2px);
pointer-events:none;
}

.layout-landing-section::after{
content:"";
position:absolute;
left:-100px;
bottom:-120px;
width:310px;
height:310px;
border-radius:999px;
background:rgba(34,211,238,.12);
filter:blur(4px);
pointer-events:none;
}

.layout-landing-top{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);
gap:32px;
align-items:center;
margin-bottom:26px;
}

.layout-landing-copy{
max-width:760px;
}

.layout-landing-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(2,6,23,.48);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:18px;
backdrop-filter:blur(10px);
}

.layout-landing-copy h3{
margin:0 0 16px;
font-size:clamp(36px,5.5vw,66px);
line-height:1.01;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.layout-landing-copy h3 span{
background:linear-gradient(90deg,#ffffff,#67e8f9,#c4b5fd) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.layout-landing-copy p{
margin:0 0 24px;
font-size:17px;
line-height:1.75;
color:#dbeafe;
max-width:660px;
}

.layout-landing-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-bottom:24px;
}

.layout-landing-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:0 20px;
border-radius:14px;
font-size:15px;
font-weight:950;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.layout-landing-btn-primary{
color:#020617;
background:linear-gradient(135deg,#22d3ee,#a78bfa,#22c55e);
box-shadow:0 18px 42px rgba(34,211,238,.24);
}

.layout-landing-btn-secondary{
color:#e2e8f0;
background:rgba(2,6,23,.44);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(10px);
}

.layout-landing-btn:hover{
transform:translateY(-2px);
}

.layout-landing-trust{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.layout-landing-trust span{
display:inline-flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
color:#cbd5e1;
font-size:12px;
font-weight:900;
}

.layout-landing-preview{
position:relative;
z-index:2;
min-height:430px;
border-radius:26px;
background:rgba(2,6,23,.45);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 26px 70px rgba(0,0,0,.34);
overflow:hidden;
padding:18px;
}

.layout-landing-browser{
height:100%;
min-height:394px;
border-radius:22px;
background:
radial-gradient(circle at 30% 14%,rgba(34,211,238,.22),transparent 32%),
radial-gradient(circle at 86% 18%,rgba(168,85,247,.22),transparent 34%),
linear-gradient(180deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,.10);
overflow:hidden;
}

.layout-landing-browser-top{
display:flex;
align-items:center;
gap:8px;
height:46px;
padding:0 16px;
border-bottom:1px solid rgba(255,255,255,.09);
background:rgba(255,255,255,.045);
}

.layout-landing-dot{
width:10px;
height:10px;
border-radius:999px;
background:rgba(255,255,255,.30);
}

.layout-landing-url{
margin-left:8px;
height:24px;
flex:1;
border-radius:999px;
background:rgba(2,6,23,.45);
border:1px solid rgba(255,255,255,.08);
}

.layout-landing-browser-body{
padding:18px;
display:grid;
gap:14px;
}

.layout-landing-browser-hero{
height:118px;
border-radius:20px;
background:
linear-gradient(135deg,rgba(34,211,238,.24),rgba(168,85,247,.18)),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.12);
position:relative;
overflow:hidden;
}

.layout-landing-browser-hero::before{
content:"";
position:absolute;
left:18px;
top:24px;
width:48%;
height:12px;
border-radius:999px;
background:rgba(255,255,255,.38);
box-shadow:0 22px 0 rgba(255,255,255,.16);
}

.layout-landing-browser-hero::after{
content:"";
position:absolute;
right:22px;
top:24px;
width:90px;
height:70px;
border-radius:22px;
background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.08));
border:1px solid rgba(255,255,255,.13);
}

.layout-landing-browser-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.layout-landing-browser-card{
height:86px;
border-radius:18px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
position:relative;
overflow:hidden;
}

.layout-landing-browser-card::before{
content:"";
position:absolute;
left:14px;
top:16px;
width:34px;
height:34px;
border-radius:12px;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
}

.layout-landing-browser-card::after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:18px;
height:8px;
border-radius:999px;
background:rgba(148,163,184,.32);
}

.layout-landing-browser-chart{
height:116px;
border-radius:20px;
display:flex;
align-items:flex-end;
gap:9px;
padding:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.09);
}

.layout-landing-browser-bar{
flex:1;
border-radius:999px 999px 8px 8px;
background:linear-gradient(180deg,#22d3ee,#818cf8);
box-shadow:0 0 18px rgba(34,211,238,.18);
}

.layout-landing-browser-bar:nth-child(1){height:42%;}
.layout-landing-browser-bar:nth-child(2){height:64%;}
.layout-landing-browser-bar:nth-child(3){height:52%;}
.layout-landing-browser-bar:nth-child(4){height:82%;}
.layout-landing-browser-bar:nth-child(5){height:58%;}
.layout-landing-browser-bar:nth-child(6){height:74%;}

.layout-landing-floating-card{
position:absolute;
z-index:5;
width:180px;
padding:14px;
border-radius:18px;
background:rgba(2,6,23,.72);
border:1px solid rgba(255,255,255,.13);
box-shadow:0 20px 50px rgba(0,0,0,.32);
backdrop-filter:blur(14px);
}

.layout-landing-floating-card strong{
display:block;
margin-bottom:5px;
font-size:13px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.layout-landing-floating-card span{
display:block;
font-size:12px;
line-height:1.45;
font-weight:800;
color:#94a3b8;
}

.layout-landing-floating-left{
left:-18px;
bottom:70px;
}

.layout-landing-floating-right{
right:-18px;
top:76px;
}

.layout-landing-bottom{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}

.layout-landing-card{
position:relative;
padding:18px;
border-radius:20px;
background:rgba(2,6,23,.40);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 46px rgba(0,0,0,.22);
overflow:hidden;
}

.layout-landing-card::before{
content:"";
position:absolute;
right:-34px;
top:-34px;
width:110px;
height:110px;
border-radius:999px;
background:rgba(34,211,238,.12);
pointer-events:none;
}

.layout-landing-card:nth-child(2)::before{
background:rgba(168,85,247,.13);
}

.layout-landing-card:nth-child(3)::before{
background:rgba(34,197,94,.12);
}

.layout-landing-card:nth-child(4)::before{
background:rgba(245,158,11,.13);
}

.layout-landing-card-icon{
position:relative;
z-index:2;
width:38px;
height:38px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#22d3ee,#a78bfa);
box-shadow:0 14px 34px rgba(34,211,238,.20);
color:#ffffff;
font-size:13px;
font-weight:950;
margin-bottom:14px;
}

.layout-landing-card strong{
position:relative;
z-index:2;
display:block;
margin-bottom:8px;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.layout-landing-card span{
position:relative;
z-index:2;
display:block;
font-size:13px;
line-height:1.55;
font-weight:800;
color:#94a3b8;
}

@media (max-width: 1020px){
.layout-landing-top{
grid-template-columns:1fr;
}

.layout-landing-preview{
min-height:400px;
}

.layout-landing-bottom{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width: 640px){
.layout-landing{
padding:20px;
}

.layout-landing-title{
font-size:34px;
}

.layout-landing-text{
font-size:16px;
}

.layout-landing-section{
padding:24px;
border-radius:22px;
}

.layout-landing-copy h3{
font-size:36px;
}

.layout-landing-copy p{
font-size:16px;
}

.layout-landing-actions{
align-items:stretch;
}

.layout-landing-btn{
width:100%;
box-sizing:border-box;
}

.layout-landing-trust{
display:grid;
}

.layout-landing-preview{
min-height:auto;
padding:14px;
border-radius:22px;
}

.layout-landing-browser{
min-height:340px;
border-radius:18px;
}

.layout-landing-browser-grid{
grid-template-columns:1fr;
}

.layout-landing-browser-card{
height:68px;
}

.layout-landing-browser-chart{
height:92px;
}

.layout-landing-floating-card{
display:none;
}

.layout-landing-bottom{
grid-template-columns:1fr;
}
}

If you want to continue learning modern CSS after these layout examples, it is useful to explore related UI patterns as well. Layouts are the foundation of a website, but real projects also need buttons, cards, menus, animations, text effects, and responsive content sections.

The following guides can help you build more complete website sections using HTML and CSS:

Want Modern CSS Layouts on Your Website?

If you want to implement modern CSS layouts, responsive sections, landing page blocks, product grids, dashboards, or custom WordPress layouts using HTML, CSS, Grid, Flexbox, and container queries, we can design, build, and integrate them for your website.

View our website update service

Best Practices for Modern CSS Layouts

Modern CSS layouts can make a website look polished, structured, and professional, but they should always be built with usability, responsiveness, performance, and maintainability in mind. The goal is not to create complex layouts only because CSS allows it. The goal is to create sections that help visitors understand the content faster and move through the page more easily.

When building layouts with CSS Grid, Flexbox, and container queries, the best approach is to choose the right tool for each job. Grid works well for larger section structures, Flexbox is excellent for alignment inside smaller components, and container queries are useful when reusable cards or blocks need to adapt to the size of their parent container.

When implementing modern CSS layouts, follow these best practices:

  • use CSS Grid for larger two-dimensional page structures
  • use Flexbox for buttons, tags, menus, icon rows, and smaller alignment tasks
  • use container queries when reusable components need to adapt to their parent width
  • avoid fixed widths that break on mobile screens
  • test every layout with real content, not only short demo text
  • keep spacing, border radius, and typography consistent across sections
  • make complex desktop layouts stack cleanly on mobile screens
  • keep text readable when using dark backgrounds, gradients, and glass effects
  • use unique class names when placing demo code inside WordPress or Gutenberg
  • avoid overloading a page with too many heavy visual effects at once

In professional web design, the best layouts are usually not the most complicated ones. A clean structure, strong spacing, clear hierarchy, and responsive behavior matter more than decorative complexity.

Performance tip

Need a fast environment to test modern CSS layouts?

To properly test CSS Grid layouts, responsive landing pages, product grids, dashboards, animations, and JavaScript interactions, you need fast hosting, staging environments, and reliable performance tools. This is especially important for modern WordPress websites and custom frontend projects.

Explore Kinsta Hosting

FAQ – Modern CSS Layouts

What are modern CSS layouts?

Modern CSS layouts are responsive page and component structures built with current CSS techniques such as CSS Grid, Flexbox, container queries, fluid spacing, responsive typography, and flexible card systems. They are used to create layouts that work well across desktop, tablet, and mobile screens.

Should I use CSS Grid or Flexbox?

Use CSS Grid when you need to control rows and columns together, such as feature grids, dashboards, pricing tables, galleries, and landing page structures. Use Flexbox when you need one-direction alignment, such as buttons, navigation links, tags, form rows, icon lists, and small card content.

Are container queries better than media queries?

Container queries are not a full replacement for media queries. Media queries are still useful for page-level responsive design, while container queries are better for reusable components that need to change based on the size of their parent container.

Can I use these layouts in WordPress?

Yes. These layouts can be used inside Gutenberg HTML blocks, custom WordPress themes, reusable patterns, landing page templates, or custom plugins. When adding layout demos inside WordPress, use unique CSS class names to avoid conflicts with your theme or other plugins.

Are modern CSS layouts good for SEO?

Modern CSS layouts do not directly rank a page by themselves, but they can improve readability, mobile usability, user experience, visual structure, and conversions. These improvements can support better engagement and make the page more useful for visitors.

What is the best layout for a landing page?

A strong landing page usually combines several layout patterns: a responsive hero layout, feature grid, comparison section, testimonials, FAQ section, CTA block, and footer. The best landing page layout depends on the product, offer, audience, and conversion goal.

How do I make CSS layouts responsive?

Use flexible units, responsive grid columns, fluid typography, sensible breakpoints, and mobile-first thinking. On smaller screens, multi-column layouts should usually stack into one column, buttons should become easier to tap, and spacing should be adjusted carefully.

Do modern layouts need JavaScript?

Most layout structures can be built with HTML and CSS only. JavaScript is only needed when the layout includes interactive behavior such as tabs, accordions, sliders, filters, dynamic dashboards, or scroll-based effects.

Conclusion

Modern CSS layouts are one of the most important parts of professional web design. They define how content is structured, how users move through a page, and how well a website adapts across different screen sizes.

In this guide, we explored 25 modern CSS layouts built with HTML and CSS. These examples include hero sections, split screens, feature grids, product grids, pricing tables, sidebars, dashboards, bento grids, portfolio galleries, testimonials, FAQ sections, contact layouts, newsletter sections, footer layouts, CTA blocks, app showcases, container query cards, and a complete landing page section.

The key is to use the right layout method for the right purpose. CSS Grid is excellent for larger section structures, Flexbox is perfect for alignment inside smaller UI elements, and container queries make reusable components much smarter and more flexible.

Whether you are building a blog, SaaS website, portfolio, eCommerce store, agency website, or WordPress landing page, these layout patterns can help you create sections that feel modern, responsive, and easier to maintain.

Experiment with the examples, customize the colors and spacing, replace placeholder content with real text, and use the patterns as a starting point for your own real-world website projects.

Developer note

Use these CSS layouts as reusable building blocks

These examples are designed as practical starting points. You can copy the HTML and CSS, replace the demo text, adjust the colors, and reuse the layout structure in WordPress, static websites, landing pages, SaaS websites, portfolios, and eCommerce projects.

Get help with your website layout
]]> https://veebilehed24.ee/en/blog/css-effects/modern-css-layouts-grid-flexbox-container-queries/feed/ 0