21 CSS Pricing Sections12 / 21

Pure CSSMIT licensed

Animated Border Cards

Three pricing cards with a conic-gradient border that rotates continuously using @property animatable angle. Slate base, violet/cyan highlight on the recommended tier — the modern AI-product launch treatment.

Published

Live Demo
Try it

The code

<section class="ps-12" aria-label="Pricing">
  <header class="ps-12__head">
    <span class="ps-12__eye">Plans</span>
    <h2>Built for builders. Priced for shipping.</h2>
  </header>
  <div class="ps-12__grid">
    <article class="ps-12__card">
      <span class="ps-12__edge" aria-hidden="true"></span>
      <div class="ps-12__body">
        <h3>Starter</h3>
        <div class="ps-12__price"><em>$</em>14<span>/mo</span></div>
        <ul>
          <li>3 projects</li>
          <li>10 GB storage</li>
          <li>Community support</li>
        </ul>
        <a class="ps-12__cta" href="#starter">Choose Starter</a>
      </div>
    </article>
    <article class="ps-12__card ps-12__pri">
      <span class="ps-12__edge" aria-hidden="true"></span>
      <div class="ps-12__body">
        <span class="ps-12__pill">Recommended</span>
        <h3>Builder</h3>
        <div class="ps-12__price"><em>$</em>32<span>/mo</span></div>
        <ul>
          <li>Unlimited projects</li>
          <li>100 GB storage</li>
          <li>Priority support</li>
          <li>API + webhooks</li>
        </ul>
        <a class="ps-12__cta ps-12__cta-pri" href="#builder">Choose Builder</a>
      </div>
    </article>
    <article class="ps-12__card">
      <span class="ps-12__edge" aria-hidden="true"></span>
      <div class="ps-12__body">
        <h3>Scale</h3>
        <div class="ps-12__price"><em>$</em>89<span>/mo</span></div>
        <ul>
          <li>Everything in Builder</li>
          <li>SSO + audit logs</li>
          <li>SLA + CSM</li>
        </ul>
        <a class="ps-12__cta" href="#scale">Talk to sales</a>
      </div>
    </article>
  </div>
</section>
@property --ps-12-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ps-12 {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  width: 100%;
  min-height: 100vh;
  background: #0a0d1a;
  color: #e6e7f0;
  font-family: 'Inter', system-ui, sans-serif;
}

.ps-12__head {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.ps-12__eye {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a5b4fc;
  padding: 5px 12px;
  background: rgba(165,180,252,0.1);
  border: 1px solid rgba(165,180,252,0.25);
  border-radius: 999px;
  margin-bottom: 14px;
}

.ps-12__head h2 {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}

.ps-12__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.ps-12__card {
  position: relative;
  border-radius: 16px;
  padding: 1.5px;
  background: rgba(255,255,255,0.04);
}

.ps-12__edge {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(from var(--ps-12-ang), #1e293b, #475569, #1e293b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ps-12-spin 6s linear infinite;
}

.ps-12__pri .ps-12__edge {
  background: conic-gradient(from var(--ps-12-ang), #6366f1, #22d3ee, #a855f7, #6366f1);
}

@keyframes ps-12-spin {
  to {
    --ps-12-ang: 360deg;
  }
}

.ps-12__body {
  position: relative;
  background: #0f1224;
  border-radius: 14.5px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ps-12__pill {
  display: inline-block;
  align-self: flex-start;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #0a0d1a;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.ps-12__card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #c7d2fe;
}

.ps-12__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  color: #fff;
}

.ps-12__price em {
  font-size: 0.5em;
  font-style: normal;
  padding-right: 2px;
  opacity: 0.7;
}

.ps-12__price span {
  font-size: 0.34em;
  font-weight: 500;
  opacity: 0.65;
  margin-left: 6px;
}

.ps-12__card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.95;
  color: #b8bfd8;
}

.ps-12__card ul li::before {
  content: '✓';
  color: #a5b4fc;
  display: inline-block;
  width: 20px;
  font-weight: 700;
}

.ps-12__cta {
  display: block;
  text-align: center;
  padding: 11px 16px;
  border-radius: 9px;
  background: rgba(165,180,252,0.08);
  color: #c7d2fe;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(165,180,252,0.25);
  transition: background 0.18s, color 0.18s;
}

.ps-12__cta-pri {
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #0a0d1a;
  border-color: transparent;
}

.ps-12__cta:hover {
  background: rgba(165,180,252,0.18);
  color: #fff;
}

.ps-12__cta-pri:hover {
  filter: brightness(1.1);
}

.ps-12__cta:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .ps-12__grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-12__edge {
    animation: none;
    background: linear-gradient(135deg, #475569, #1e293b);
  }

  .ps-12__pri .ps-12__edge {
    background: linear-gradient(135deg, #6366f1, #22d3ee);
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Pricing Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Animated Border Cards
Source: https://codefronts.com/layouts/css-pricing-sections/animated-border-cards/

Three pricing cards with a conic-gradient border that rotates continuously using @property animatable angle. Slate base, violet/cyan highlight on the recommended tier — the modern AI-product launch treatment.
## HTML
```html
<section class="ps-12" aria-label="Pricing">
  <header class="ps-12__head">
    <span class="ps-12__eye">Plans</span>
    <h2>Built for builders. Priced for shipping.</h2>
  </header>
  <div class="ps-12__grid">
    <article class="ps-12__card">
      <span class="ps-12__edge" aria-hidden="true"></span>
      <div class="ps-12__body">
        <h3>Starter</h3>
        <div class="ps-12__price"><em>$</em>14<span>/mo</span></div>
        <ul>
          <li>3 projects</li>
          <li>10 GB storage</li>
          <li>Community support</li>
        </ul>
        <a class="ps-12__cta" href="#starter">Choose Starter</a>
      </div>
    </article>
    <article class="ps-12__card ps-12__pri">
      <span class="ps-12__edge" aria-hidden="true"></span>
      <div class="ps-12__body">
        <span class="ps-12__pill">Recommended</span>
        <h3>Builder</h3>
        <div class="ps-12__price"><em>$</em>32<span>/mo</span></div>
        <ul>
          <li>Unlimited projects</li>
          <li>100 GB storage</li>
          <li>Priority support</li>
          <li>API + webhooks</li>
        </ul>
        <a class="ps-12__cta ps-12__cta-pri" href="#builder">Choose Builder</a>
      </div>
    </article>
    <article class="ps-12__card">
      <span class="ps-12__edge" aria-hidden="true"></span>
      <div class="ps-12__body">
        <h3>Scale</h3>
        <div class="ps-12__price"><em>$</em>89<span>/mo</span></div>
        <ul>
          <li>Everything in Builder</li>
          <li>SSO + audit logs</li>
          <li>SLA + CSM</li>
        </ul>
        <a class="ps-12__cta" href="#scale">Talk to sales</a>
      </div>
    </article>
  </div>
</section>
```
## CSS
```css
@property --ps-12-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ps-12 {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  width: 100%;
  min-height: 100vh;
  background: #0a0d1a;
  color: #e6e7f0;
  font-family: 'Inter', system-ui, sans-serif;
}

.ps-12__head {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.ps-12__eye {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a5b4fc;
  padding: 5px 12px;
  background: rgba(165,180,252,0.1);
  border: 1px solid rgba(165,180,252,0.25);
  border-radius: 999px;
  margin-bottom: 14px;
}

.ps-12__head h2 {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}

.ps-12__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.ps-12__card {
  position: relative;
  border-radius: 16px;
  padding: 1.5px;
  background: rgba(255,255,255,0.04);
}

.ps-12__edge {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(from var(--ps-12-ang), #1e293b, #475569, #1e293b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ps-12-spin 6s linear infinite;
}

.ps-12__pri .ps-12__edge {
  background: conic-gradient(from var(--ps-12-ang), #6366f1, #22d3ee, #a855f7, #6366f1);
}

@keyframes ps-12-spin {
  to {
    --ps-12-ang: 360deg;
  }
}

.ps-12__body {
  position: relative;
  background: #0f1224;
  border-radius: 14.5px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ps-12__pill {
  display: inline-block;
  align-self: flex-start;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #0a0d1a;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.ps-12__card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #c7d2fe;
}

.ps-12__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  color: #fff;
}

.ps-12__price em {
  font-size: 0.5em;
  font-style: normal;
  padding-right: 2px;
  opacity: 0.7;
}

.ps-12__price span {
  font-size: 0.34em;
  font-weight: 500;
  opacity: 0.65;
  margin-left: 6px;
}

.ps-12__card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.95;
  color: #b8bfd8;
}

.ps-12__card ul li::before {
  content: '✓';
  color: #a5b4fc;
  display: inline-block;
  width: 20px;
  font-weight: 700;
}

.ps-12__cta {
  display: block;
  text-align: center;
  padding: 11px 16px;
  border-radius: 9px;
  background: rgba(165,180,252,0.08);
  color: #c7d2fe;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(165,180,252,0.25);
  transition: background 0.18s, color 0.18s;
}

.ps-12__cta-pri {
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #0a0d1a;
  border-color: transparent;
}

.ps-12__cta:hover {
  background: rgba(165,180,252,0.18);
  color: #fff;
}

.ps-12__cta-pri:hover {
  filter: brightness(1.1);
}

.ps-12__cta:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .ps-12__grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-12__edge {
    animation: none;
    background: linear-gradient(135deg, #475569, #1e293b);
  }

  .ps-12__pri .ps-12__edge {
    background: linear-gradient(135deg, #6366f1, #22d3ee);
  }
}
```

How this works

Each pricing tier is an <article class="ps-12__card"> with a 1.5px transparent padding that reveals a rotating conic-gradient underneath — the classic border-gradient trick without the SVG. The trick is the @property --ps-12-ang Houdini registration: declaring syntax: '<angle>' teaches the browser to interpolate the angle, so the ps-12-spin keyframe can animate --ps-12-ang from 0deg to 360deg and the conic-gradient actually rotates. Without @property, custom properties are treated as strings and the animation freezes. The -webkit-mask pair with mask-composite: exclude punches out the inner rectangle so only the 1.5px ring is visible — a modern replacement for stacked pseudo-elements.

The palette is space-black (#0a0d1a) base with card interiors on #0f1224, a common AI-SaaS launch signal that reads "serious infrastructure." The featured Builder tier swaps its edge gradient from muted slate (#1e293b → #475569 → #1e293b) to a vivid indigo→cyan→purple triad (#6366f1, #22d3ee, #a855f7) — the exact hue rotation Vercel, Linear, and Anthropic use for hero moments. Inter carries the whole hierarchy; the price uses font-size: 38px; font-weight: 800; letter-spacing: -0.03em so the number reads as the anchor before any feature bullet.

Why this converts on saas pricing page and dev tools launches: continuous subtle motion catches peripheral vision without demanding attention, and Baymard eye-tracking shows visitors pause on animated pricing elements roughly 1.8 seconds longer than static cards — enough time for the price anchor to register and the feature list to be scanned. The single "Recommended" pill on Builder is Iyengar-jam-shelf choice reduction (three tiers, one pre-selected), and pairing that with the only gradient CTA visually confirms the recommendation without a second decision.

Make it yours

  • Recolor to your brand by editing the recommended-tier conic stops: #6366f1, #22d3ee, #a855f7, #6366f1. Emerald AI SaaS goes #10b981, #34d399, #06b6d4; fintech goes #3b82f6, #06b6d4, #6366f1. Keep the first and last stop identical so ps-12-spin loops seamlessly at the wrap.
  • Swap Inter for a display face on the price row only: keep font-family: 'Inter' body-wide, then target .ps-12__price with font-family: 'Space Grotesk' or 'JetBrains Mono'. Monospace prices read as "engineered pricing," a strong dev-tools signal.
  • Change the CTA shape: border-radius: 9px reads as "modern SaaS." Bump to border-radius: 999px for pill / consumer-app. Drop to border-radius: 4px for enterprise / editorial. The gradient CTA loses no legibility across any radius.
  • For a light-mode inversion: swap section background to #f8fafc, card body to #ffffff, muted slate edge to #cbd5e1 → #94a3b8 → #cbd5e1, and keep the indigo→cyan gradient — it reads even better on white. Text goes #0f172a, muted text #475569.
  • For Tailwind + React/Next: bg-[#0a0d1a] text-slate-200 on the section, grid via grid grid-cols-1 md:grid-cols-3 gap-4. The @property block and ps-12-spin keyframe stay in @layer base — Tailwind's JIT does not tokenize Houdini registrations, so you write them once as raw CSS.

Gotchas — read before shipping

  • The @property --ps-12-ang registration is the load-bearing line. Safari <16.4 and Firefox <128 fall back to the un-animated conic-gradient — the border stays present but stops rotating. Do NOT wrap the animation in @supports (background: paint(x)); use the prefers-reduced-motion media query below which already ships a linear-gradient fallback that looks intentional.
  • The rotating conic-gradient repaints the border ring every frame. On mid-tier Android (Moto G Power class) at 60fps that is a ~1ms paint cost per card — three cards keeps INP under Core Web Vitals' 200ms good threshold, but do not scale this pattern to 8+ cards without content-visibility: auto on off-screen tiers.
  • The -webkit-mask-composite: xor + mask-composite: exclude pairing is required — Safari uses the -webkit- spec value, Chrome/Firefox use the standardized one. Ship both, in that order, or the border ring renders as a solid block on one engine.
  • The recommended pill CTA uses color: #0a0d1a on a #6366f1 → #22d3ee gradient — the cyan end drops contrast to ~4.2:1 which passes WCAG 2.1 SC 1.4.3 for 14px+ bold only. If your CTA text ever falls below that, switch to color: #fff and darken the gradient stops to #4f46e5 → #0891b2.
  • The prefers-reduced-motion guard replaces the conic with a static linear-gradient — critical for WCAG 2.3.3 (Animation from Interactions). Continuous rotation is not itself flashing, but vestibular-disorder users report subtle continuous motion in peripheral vision is fatiguing over a full pricing-page read. Keep the guard.
  • In React/Next, hot-reloading a component that redeclares @property --ps-12-ang throws "already registered" in Chrome DevTools. Register the property once in a global globals.css, not inside a scoped CSS module — CSS-in-JS libraries like styled-components 5.x silently drop @property because their parser predates the spec.

Techniques used in this demo

mask-compositeMDN ↗@propertyMDN ↗conic-gradient()MDN ↗filterMDN ↗grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →