webdevpuneet.com

Related Snippets

148 in Cards category
1–6 of 60

Quiz Card

3D Pin Card

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

Feature Highlight Cards — Icon Grid with Glow HTML CSS

Feature Highlight Cards · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsSVGLanding PageCSS Grid

Copy & paste

Source Code

<div class="page">
  <div class="section-head">
    <span class="eyebrow">Why choose us</span>
    <h2 class="section-title">Everything you need to ship faster</h2>
    <p class="section-sub">Production-ready components for every step of your project — from layout to interaction.</p>
  </div>
  <div class="grid">
    <article class="card card-wide" data-glow="#6366f1">
      <div class="card-icon" style="--ic:#ede9fe;--stroke:#7c3aed">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><polygon points="12 2 2 7 12 22 22 7 12 2"/></svg>
      </div>
      <div>
        <div class="new-badge">New</div>
        <h3 class="card-title">175+ UI Snippets</h3>
        <p class="card-desc">Copy-paste HTML, CSS, and JS components with live previews — no build step, no dependencies.</p>
      </div>
      <div class="card-footer">
        <div class="tags"><span class="tag">HTML</span><span class="tag">CSS</span><span class="tag">JS</span></div>
        <a href="#" class="card-link">Explore <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a>
      </div>
    </article>

    <article class="card" data-glow="#0ea5e9">
      <div class="card-icon" style="--ic:#e0f2fe;--stroke:#0284c7">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      </div>
      <h3 class="card-title">Live Code Editor</h3>
      <p class="card-desc">Edit HTML, CSS, and JS in-browser. See changes instantly in the live preview pane.</p>
      <div class="card-footer">
        <div class="tags"><span class="tag">Editor</span><span class="tag">Preview</span></div>
        <a href="#" class="card-link">Try it <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a>
      </div>
    </article>

    <article class="card" data-glow="#10b981">
      <div class="card-icon" style="--ic:#d1fae5;--stroke:#059669">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      </div>
      <h3 class="card-title">Framework Exports</h3>
      <p class="card-desc">Export any snippet as React, Vue, Angular, or Tailwind with a single click — fully formatted.</p>
      <div class="card-footer">
        <div class="tags"><span class="tag">React</span><span class="tag">Vue</span></div>
        <a href="#" class="card-link">Learn <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a>
      </div>
    </article>

    <article class="card" data-glow="#f59e0b">
      <div class="card-icon" style="--ic:#fef3c7;--stroke:#d97706">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      </div>
      <h3 class="card-title">Auto Save to GitHub</h3>
      <p class="card-desc">Sync your custom snippets to a private GitHub Gist — access your code from anywhere.</p>
      <div class="card-footer">
        <div class="tags"><span class="tag">GitHub</span><span class="tag">Sync</span></div>
        <a href="#" class="card-link">Connect <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a>
      </div>
    </article>

    <article class="card" data-glow="#ec4899">
      <div class="card-icon" style="--ic:#fce7f3;--stroke:#be185d">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      </div>
      <h3 class="card-title">12,000+ Developers</h3>
      <p class="card-desc">A growing community of frontend developers using webdevpuneet.com to ship faster every day.</p>
      <div class="card-footer">
        <div class="tags"><span class="tag">Community</span></div>
        <a href="#" class="card-link">Join <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a>
      </div>
    </article>

    <article class="card card-dark" data-glow="#818cf8">
      <div class="card-icon" style="--ic:rgba(99,102,241,.2);--stroke:#a5b4fc">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
      </div>
      <h3 class="card-title">Free Forever</h3>
      <p class="card-desc">No paywalls. No subscriptions. Every snippet, tool, and export is 100% free — now and always.</p>
      <div class="card-footer">
        <div class="tags"><span class="tag tag-dark">Open</span><span class="tag tag-dark">Free</span></div>
        <a href="#" class="card-link">Start <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a>
      </div>
    </article>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Mouse-tracking radial glow
--mx and --my CSS custom properties track the cursor percentage position within each card. The ::before gradient centres on these values — a spotlight that follows the cursor.
CSS custom property icon colours
--ic (background) and --stroke (icon colour) are set inline per card — one HTML attribute controls the entire icon colour palette for each card.
Wide card variant
.card-wide applies grid-column: span 2 — the hero feature card takes double width. Reverts to single column on mobile automatically.
Dark card variant
.card-dark uses a deep indigo gradient background with light text — the "Free Forever" standout card uses it to break the visual pattern.
Arrow link micro-interaction
.card-link:hover increases gap from 4px to 7px — the arrow nudges right on hover via CSS transition, indicating the link destination.
Tag chip system
Small grey pill tags below each description provide secondary metadata (technology, category) without cluttering the card's primary message.
Hover lift with border highlight
translateY(-3px) + box-shadow + border-color: #c7d2fe on hover — a three-property lift that makes cards feel interactive and slightly elevated.
Responsive CSS Grid
Three-column repeat(3, 1fr) on desktop, two-column on tablet, single-column on mobile — the wide card reverts gracefully at each breakpoint.

About this UI Snippet

Feature Cards — Mouse-Tracking Radial Glow, CSS Custom Property Grid & Icon Badge System

Screenshot of the Feature Highlight Cards snippet rendered live

Feature highlight cards are a cornerstone of SaaS landing pages — presenting product capabilities in a scannable, visually distinct grid. This snippet builds a six-card feature grid with a mouse-tracking radial glow effect, colour-coded icon badge system, tag chips, arrow CTA links, a wide (spanning two columns) card variant for the hero feature, and a dark gradient card for the standout "Free Forever" proposition.

Feature card grids appear on virtually every SaaS, developer tool, and product landing page. The design challenge is making each card feel distinct while maintaining visual cohesion. Icon colour coding, tag chips, and the CTA arrow link pattern solve this — plus the mouse-tracking glow adds a premium interactive feel that differentiates from static card grids.

Mouse-tracking radial glow per card

Each card's ::before pseudo-element renders a radial-gradient centred at CSS custom properties --mx and --my. The mousemove event listener reads the mouse position relative to the card's getBoundingClientRect and sets these properties as percentage values. The gradient appears at opacity: 0 by default and transitions to opacity: 1 on hover. The result is a "spotlight" effect that follows the cursor within each card — a pattern used in Linear, Vercel, and Raycast landing pages.

The key implementation detail is setting --mx and --my on the element (not in a stylesheet) — inline custom properties override the 50% 50% default set in CSS, placing the gradient precisely under the cursor. This requires only one getBoundingClientRect call per mousemove event and no requestAnimationFrame throttling for smooth 60fps behaviour.

Colour-coded icon badge system

Each card's icon container uses two CSS custom properties: --ic (background) and --stroke (icon colour). These are set inline on each card's .card-icon element. The palette — indigo, sky, emerald, amber, pink, indigo-dark — is drawn from a consistent design token system. This approach means adding a new colour variant is a one-line HTML change.

Wide card with grid-column: span 2

The "175+ UI Snippets" card spans two columns via grid-column: span 2. This creates visual hierarchy — the most important feature gets double the width. The card layout adapts without additional CSS because the flex column stretches naturally within the wider container. On mobile (max-width: 640px), the grid switches to single column and the wide card reverts to normal width. Pair with a bento grid for more complex asymmetric feature layouts.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSSix feature cards appear in a 3-column grid on a light background. The first card spans two columns. The last card has a dark gradient background.
  2. 2
    Move your mouse slowly across a cardA radial glow follows your cursor within the card boundary — the spotlight effect centres exactly under the pointer and fades out when you leave.
  3. 3
    Hover over the arrow linksThe gap between the link text and arrow icon increases on hover — a subtle micro-interaction that communicates interactivity.
  4. 4
    Inspect the icon colour systemEach card's icon has a different background and stroke colour defined via --ic and --stroke CSS custom properties inline on the element.
  5. 5
    Update card contentSwap icon SVGs, change titles, descriptions, and tag chips. Change the glow colour by adjusting the rgba in the ::before gradient in CSS.
  6. 6
    Add or remove cardsAdd <article class="card"> to the grid. Use card-wide for a card that spans 2 columns. Use card-dark for the dark variant. The grid adapts automatically.

Real-world uses

Common Use Cases

SaaS product feature sections
The primary use case — a "Why choose us" or "Features" section on a SaaS landing page. Each card covers one key capability with icon, description, and a learn-more link.
Developer tool and API landing pages
Code editors, deployment platforms, and API services use feature cards to communicate capabilities to technical buyers. Icon colour coding maps to feature categories.
Pricing page feature comparison
A feature card grid above or alongside a pricing table explains what each feature does in plain language, reducing support questions about plan differences.
Service offering pages for agencies
Agency "Services" pages use feature cards for each service offering: branding, web design, development, SEO. Each card links to the dedicated service page.
Onboarding feature tours
A feature grid shown during app onboarding gives users a map of what they can do. The wide card highlights the most important first action.
App store and download landing pages
Mobile app landing pages use feature cards to explain key capabilities below the hero section — the standard pattern for iOS/Android app download pages.
Related: Offer Letter Preview Card
See the Offer Letter Preview Card for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The glow colour is hardcoded as rgba(99,102,241,.12) in the ::before gradient in CSS. To make it per-card, add a --glow CSS custom property to each card: card.style.setProperty('--glow', 'rgba(16,185,129,.12)'). In CSS: radial-gradient(circle..., var(--glow, rgba(99,102,241,.12))....

Use an IntersectionObserver: observe all cards and add an .in-view class when they enter the viewport. In CSS: .card { opacity:0; transform:translateY(20px); transition:opacity .5s,transform .5s } and .card.in-view { opacity:1; transform:none }. Add staggered delays based on the card index.

Define a FeatureCard component accepting {icon, iconBg, iconColor, title, desc, tags, link, wide, dark} props. The grid is the parent component mapping a features data array. The mouse-tracking uses onMouseMove and useRef to access the card's bounding rect.

Change grid-template-columns: repeat(3, 1fr) to repeat(2, 1fr) and remove the .card-wide class or change it to grid-column: span 1. Adjust card widths via max-width on the grid container.