10 CSS Feature Sections 03 / 10

CSS Feature Section Dark Glassmorphism

Three animated radial-blob ambients behind a six-card frosted-glass grid on deep `#04040a`.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="fs03">
  <div class="fs03__blob fs03__blob--1"></div>
  <div class="fs03__blob fs03__blob--2"></div>
  <div class="fs03__blob fs03__blob--3"></div>

  <div class="fs03__inner">
    <div class="fs03__top">
      <div>
        <div class="fs03__badge">// PLATFORM_FEATURES v2.5</div>
        <h2 class="fs03__headline">Craft experiences<br>that feel <mark>alive</mark></h2>
      </div>
      <p class="fs03__right-text">Six core capabilities designed from the ground up for 2025 product teams. No bolt-ons, no legacy APIs — just clean, powerful primitives that do exactly what they say.</p>
    </div>

    <div class="fs03__grid">
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">01 / 06</div>
        <span class="fs03__card-icon">🧠</span>
        <div class="fs03__card-title">AI-Assisted Routing</div>
        <div class="fs03__card-body">Predict user intent and route requests to the optimal compute tier before they complete — reducing latency by up to 60%.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">02 / 06</div>
        <span class="fs03__card-icon">🔐</span>
        <div class="fs03__card-title">Passkey Authentication</div>
        <div class="fs03__card-body">Native WebAuthn support with biometric fallback. Drop password forms entirely — your users deserve better UX.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">03 / 06</div>
        <span class="fs03__card-icon">📡</span>
        <div class="fs03__card-title">Real-Time Sync Engine</div>
        <div class="fs03__card-body">CRDTs under the hood. Collaborative editing, offline-first state, and live cursors with zero config on your part.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">04 / 06</div>
        <span class="fs03__card-icon">⚙️</span>
        <div class="fs03__card-title">Workflow Automation</div>
        <div class="fs03__card-body">Trigger-action pipelines with branching logic, retry policies, and a visual debugger that shows exactly what ran.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">05 / 06</div>
        <span class="fs03__card-icon">📈</span>
        <div class="fs03__card-title">Growth Analytics</div>
        <div class="fs03__card-body">Funnel analysis, cohort retention, and A/B test significance — all computed in-platform with no data leaving your region.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">06 / 06</div>
        <span class="fs03__card-icon">🌍</span>
        <div class="fs03__card-title">Regional Compliance</div>
        <div class="fs03__card-body">GDPR, CCPA, and HIPAA data residency enforced at the storage layer. Compliance reports generated on demand.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
    </div>

    <div class="fs03__sep"></div>

    <div class="fs03__bottom">
      <div class="fs03__trust">
        <div class="fs03__dots">
          <div class="fs03__dot"></div>
          <div class="fs03__dot"></div>
          <div class="fs03__dot"></div>
        </div>
        Trusted by 4,200+ product teams globally
      </div>
      <div class="fs03__cta-row">
        <a href="#" class="fs03__btn fs03__btn--ghost">View docs</a>
        <a href="#" class="fs03__btn fs03__btn--primary">Get started free →</a>
      </div>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs03 {
  font-family: 'Space Grotesk', sans-serif;
  min-height: 100vh;
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
  background: #04040a;
  color: #e2e0f0;
}

/* Ambient blobs */
.fs03__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: fs03-pulse 8s ease-in-out infinite;
}
.fs03__blob--1 { width: 500px; height: 500px; background: #5b3cf7; opacity: .28; top: -100px; left: -100px; animation-delay: 0s; }
.fs03__blob--2 { width: 400px; height: 400px; background: #c73ef0; opacity: .22; top: 30%; right: -80px; animation-delay: -3s; }
.fs03__blob--3 { width: 350px; height: 350px; background: #1be8c8; opacity: .18; bottom: -60px; left: 30%; animation-delay: -5s; }

@keyframes fs03-pulse {
  0%, 100% { transform: scale(1) translate(0,0); }
  50% { transform: scale(1.12) translate(20px,-20px); }
}

.fs03__inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.fs03__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}

.fs03__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #1be8c8;
  background: rgba(27,232,200,0.08);
  border: 1px solid rgba(27,232,200,0.2);
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}

.fs03__headline {
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.fs03__headline mark {
  background: linear-gradient(90deg, #7b5cf7, #c73ef0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fs03__right-text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(226,224,240,0.55);
  padding-bottom: 4px;
}

.fs03__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fs03__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 32px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}

.fs03__card:hover {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-4px);
}

.fs03__card-glow {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  top: -60px; right: -40px;
  opacity: 0.35;
  transition: opacity 0.3s;
}

.fs03__card:hover .fs03__card-glow { opacity: 0.6; }

.fs03__card:nth-child(1) .fs03__card-glow { background: #7b5cf7; }
.fs03__card:nth-child(2) .fs03__card-glow { background: #c73ef0; }
.fs03__card:nth-child(3) .fs03__card-glow { background: #1be8c8; }
.fs03__card:nth-child(4) .fs03__card-glow { background: #f7a03c; }
.fs03__card:nth-child(5) .fs03__card-glow { background: #f74460; }
.fs03__card:nth-child(6) .fs03__card-glow { background: #3cb8f7; }

.fs03__card-num {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: rgba(226,224,240,0.3);
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

.fs03__card-icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
}

.fs03__card-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.fs03__card-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(226,224,240,0.5);
}

.fs03__card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s;
}

.fs03__card:nth-child(1) .fs03__card-link { color: #9e85f9; }
.fs03__card:nth-child(2) .fs03__card-link { color: #db80f7; }
.fs03__card:nth-child(3) .fs03__card-link { color: #1be8c8; }
.fs03__card:nth-child(4) .fs03__card-link { color: #f7a03c; }
.fs03__card:nth-child(5) .fs03__card-link { color: #f74460; }
.fs03__card:nth-child(6) .fs03__card-link { color: #3cb8f7; }

.fs03__card-link:hover { gap: 10px; }

/* Separator line */
.fs03__sep {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  margin: 56px 0;
}

.fs03__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.fs03__trust {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: rgba(226,224,240,0.45);
}

.fs03__dots {
  display: flex; gap: 6px;
}
.fs03__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.fs03__dot:nth-child(1) { background: #7b5cf7; }
.fs03__dot:nth-child(2) { background: #c73ef0; }
.fs03__dot:nth-child(3) { background: #1be8c8; }

.fs03__cta-row { display: flex; gap: 12px; }

.fs03__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
  cursor: pointer;
}
.fs03__btn:hover { transform: translateY(-2px); opacity: 0.9; }
.fs03__btn--primary { background: linear-gradient(135deg, #7b5cf7, #c73ef0); color: #fff; }
.fs03__btn--ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #e2e0f0; }

@media (max-width: 768px) {
  .fs03__top { grid-template-columns: 1fr; }
  .fs03__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .fs03__grid { grid-template-columns: 1fr; }
  .fs03__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .fs03__blob, .fs03__card, .fs03__card-link { animation: none; transition: none; }
}

More from 10 CSS Feature Sections

CSS Feature Section with Floating MockupCSS Animated Feature Cards Scroll RevealCSS Feature Section 3D Perspective CardsCSS Feature Section Timeline LayoutCSS Feature Section with Icon GridCSS Bento Grid Features LayoutCSS Feature Section with Code PreviewCSS Feature Comparison SectionCSS SaaS Features Section 2025
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →