10 CSS Feature Sections 01 / 10

CSS Feature Section with Icon Grid

A dark-mode icon-grid platform feature section — six cards on a `#09090f` background, each with a coloured icon badge, per-card radial glow on hover, and a stats strip with 99.99% uptime, 300+ nodes, and <30s deploy time. Syne display + Inter body.

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

The code

<section class="fs01">
  <div class="fs01__inner">
    <div class="fs01__eyebrow">Platform capabilities</div>
    <h2 class="fs01__headline">Everything you need to<br><span>ship faster</span></h2>
    <p class="fs01__sub">A complete toolkit for modern teams. Automate the repetitive, focus on what matters, and deploy with confidence — every single time.</p>

    <div class="fs01__grid">
      <div class="fs01__card">
        <div class="fs01__icon-wrap">⚡</div>
        <div class="fs01__card-title">Instant Deployments</div>
        <div class="fs01__card-body">Push to main and go live in under 30 seconds. Zero-downtime rollouts with automatic health checks built in.</div>
        <span class="fs01__card-tag">Infrastructure</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">🛡️</div>
        <div class="fs01__card-title">Edge Security</div>
        <div class="fs01__card-body">DDoS protection, WAF rules, and bot mitigation run at the network edge — before traffic ever reaches your app.</div>
        <span class="fs01__card-tag">Security</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">📊</div>
        <div class="fs01__card-title">Real-Time Analytics</div>
        <div class="fs01__card-body">P99 latencies, error budgets, and user flows surface automatically. No instrumentation required on your end.</div>
        <span class="fs01__card-tag">Observability</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">🔁</div>
        <div class="fs01__card-title">Smart Rollbacks</div>
        <div class="fs01__card-body">Detect regressions automatically and roll back to the last stable release — database migrations included.</div>
        <span class="fs01__card-tag">Reliability</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">🌐</div>
        <div class="fs01__card-title">Global CDN</div>
        <div class="fs01__card-body">Static assets and edge functions served from 300+ PoPs worldwide. Sub-20ms cache hits across six continents.</div>
        <span class="fs01__card-tag">Performance</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">🤝</div>
        <div class="fs01__card-title">Team Workflows</div>
        <div class="fs01__card-body">Preview environments per pull request, role-based access, and audit logs that satisfy even your strictest compliance team.</div>
        <span class="fs01__card-tag">Collaboration</span>
      </div>
    </div>

    <div class="fs01__bottom">
      <a href="#" class="fs01__cta">Start for free →</a>
      <div class="fs01__stats">
        <div>
          <div class="fs01__stat-num">99.99%</div>
          <div class="fs01__stat-label">Uptime SLA</div>
        </div>
        <div>
          <div class="fs01__stat-num">300+</div>
          <div class="fs01__stat-label">Edge nodes</div>
        </div>
        <div>
          <div class="fs01__stat-num">&lt;30s</div>
          <div class="fs01__stat-label">Deploy time</div>
        </div>
      </div>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs01 {
  --bg: #09090f;
  --surface: #111118;
  --border: rgba(255,255,255,0.07);
  --text: #e8e8f0;
  --muted: #6b6b85;
  --accent1: #7c6dfa;
  --accent2: #e05aff;
  --accent3: #00e5c3;
  --card-bg: #13131c;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 96px 24px;
  min-height: 100vh;
}

.fs01__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.fs01__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent1);
  background: rgba(124,109,250,0.1);
  border: 1px solid rgba(124,109,250,0.25);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.fs01__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent1);
  box-shadow: 0 0 8px var(--accent1);
}

.fs01__headline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: 680px;
}

.fs01__headline span {
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fs01__sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 72px;
}

.fs01__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.fs01__card {
  background: var(--card-bg);
  padding: 36px 32px;
  position: relative;
  transition: background 0.25s;
  cursor: default;
}

.fs01__card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(circle at 50% 0%, rgba(124,109,250,0.08), transparent 70%);
}

.fs01__card:hover { background: #16162000; }
.fs01__card:hover::after { opacity: 1; }

.fs01__icon-wrap {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
  position: relative;
  z-index: 1;
}

.fs01__card:nth-child(1) .fs01__icon-wrap { background: rgba(124,109,250,0.15); }
.fs01__card:nth-child(2) .fs01__icon-wrap { background: rgba(224,90,255,0.15); }
.fs01__card:nth-child(3) .fs01__icon-wrap { background: rgba(0,229,195,0.15); }
.fs01__card:nth-child(4) .fs01__icon-wrap { background: rgba(255,160,64,0.15); }
.fs01__card:nth-child(5) .fs01__icon-wrap { background: rgba(255,80,120,0.15); }
.fs01__card:nth-child(6) .fs01__icon-wrap { background: rgba(64,180,255,0.15); }

.fs01__card-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
  position: relative;
  z-index: 1;
}

.fs01__card-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

.fs01__card-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

.fs01__card:nth-child(1) .fs01__card-tag { color: var(--accent1); background: rgba(124,109,250,0.1); }
.fs01__card:nth-child(2) .fs01__card-tag { color: var(--accent2); background: rgba(224,90,255,0.1); }
.fs01__card:nth-child(3) .fs01__card-tag { color: var(--accent3); background: rgba(0,229,195,0.1); }
.fs01__card:nth-child(4) .fs01__card-tag { color: #ffa040; background: rgba(255,160,64,0.1); }
.fs01__card:nth-child(5) .fs01__card-tag { color: #ff5078; background: rgba(255,80,120,0.1); }
.fs01__card:nth-child(6) .fs01__card-tag { color: #40b4ff; background: rgba(64,180,255,0.1); }

.fs01__bottom {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.fs01__cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}

.fs01__cta:hover { opacity: 0.9; transform: translateY(-1px); }

.fs01__stats {
  display: flex; gap: 32px;
}

.fs01__stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fs01__stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .fs01__grid { grid-template-columns: 1fr; }
  .fs01__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .fs01__card, .fs01__card::after, .fs01__cta { transition: none; }
}

More from 10 CSS Feature Sections

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

Search CodeFronts

Loading…

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