21 Tailwind CSS Pricing Sections
10 / 21

All 21 in 21 Tailwind CSS Pricing Sections

  1. 01Tailwind Classic Three Tier Pricing Section
  2. 02Tailwind Highlighted Popular Pricing Tier
  3. 03Tailwind Feature Comparison Pricing Table
  4. 04Tailwind Monthly Yearly Billing Toggle Pricing
  5. 05Tailwind Usage Slider Pricing Estimator
  6. 06Tailwind Single Premium Pricing Card
  7. 07Tailwind Bento Pricing Grid
  8. 08Tailwind Vertical Tier Timeline Pricing
  9. 09Tailwind Brutalist Print Pricing Zine
  10. 10Tailwind Glass Aurora Pricing Cards
  11. 11Tailwind Per-Seat Pricing Calculator
  12. 12Tailwind Animated Conic Border Pricing Cards
  13. 13Tailwind Editorial Two Column Pricing List
  14. 14Tailwind 3D Tilt Perspective Pricing Cards
  15. 15Tailwind Synthwave Neon Pricing Section
  16. 16Tailwind Pay What You Want Pricing Card
  17. 17Tailwind Currency Switcher Pricing Section
  18. 18Tailwind Social Proof Marquee Pricing
  19. 19Tailwind Feature Accordion Pricing Tiers
  20. 20Tailwind Cursor Spotlight Pricing Cards
  21. 21Tailwind Annual Savings Stripe Pricing
Pure TailwindMIT licensed

Tailwind Glass Aurora Pricing Cards

Frosted cards floating over three slow-drifting aurora blobs. The port keeps the whole glass recipe in the class list — bg-white/6, border-white/12, backdrop-blur-[20px] backdrop-saturate-150 — and moves the one genuinely CSS-only part, the drift keyframes, into an --animate-* theme token so the blobs read as animate-tps10-drift on the element.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="tps-10 relative w-full min-h-svh overflow-hidden [contain:layout_paint] bg-tps10-bg font-tps10-sans text-tps10-body px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <div class="absolute inset-0 z-0 overflow-hidden pointer-events-none" aria-hidden="true">
    <span class="absolute -top-[10%] -left-[10%] size-[380px] rounded-full blur-[60px] opacity-70 bg-[radial-gradient(circle,--theme(--color-tps10-sky)_0%,transparent_60%)] animate-tps10-drift [animation-delay:-3s] motion-reduce:animate-none"></span>
    <span class="absolute top-[20%] -right-[8%] size-[320px] rounded-full blur-[60px] opacity-70 bg-[radial-gradient(circle,--theme(--color-tps10-indigo)_0%,transparent_60%)] animate-tps10-drift [animation-delay:-8s] motion-reduce:animate-none"></span>
    <span class="absolute -bottom-[15%] left-[30%] size-[360px] rounded-full blur-[60px] opacity-70 bg-[radial-gradient(circle,--theme(--color-tps10-cyan)_0%,transparent_60%)] animate-tps10-drift [animation-delay:-14s] motion-reduce:animate-none"></span>
  </div>
  <header class="relative z-2 text-center mb-[clamp(28px,4vw,44px)]">
    <h2 class="m-0 mb-2 text-[clamp(24px,3.6vw,36px)] font-bold tracking-[-0.02em] text-white">Pricing, on the house.</h2>
    <p class="m-0 text-sm text-tps10-muted">Three tiers, all built on the same calm interface.</p>
  </header>
  <div class="relative z-2 grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] items-center gap-[18px] max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative flex flex-col px-[22px] pt-[26px] pb-[22px] rounded-[18px] bg-white/6 border border-white/12 backdrop-blur-[20px] backdrop-saturate-150 shadow-[0_18px_48px_rgba(0,0,0,0.25)]">
      <h3 class="m-0 mb-3 text-sm font-bold uppercase tracking-[0.1em] text-tps10-label">Drift</h3>
      <div class="flex items-baseline gap-1 mb-[18px] text-[42px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>0<span class="ml-1.5 text-[0.32em] font-medium opacity-65">free</span></div>
      <ul class="list-none p-0 m-0 mb-[22px] flex-1 text-[13.5px]/[1.9] text-tps10-body">
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Personal projects</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">1 GB storage</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Community access</li>
      </ul>
      <a href="#drift" class="block text-center px-4 py-2.75 rounded-[10px] bg-white/8 text-tps10-label no-underline text-[13.5px] font-semibold border border-tps10-label/30 transition-[background-color,color] duration-[180ms] hover:bg-white/18 hover:text-white focus-visible:outline-2 focus-visible:outline-tps10-sky focus-visible:outline-offset-[3px] motion-reduce:transition-none">Get started</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-[26px] pb-[22px] rounded-[18px] bg-white/10 border border-tps10-sky/40 backdrop-blur-[20px] backdrop-saturate-150 md:scale-[1.04] shadow-[inset_0_0_0_1px_--alpha(--color-tps10-sky/40),0_22px_56px_--alpha(--color-tps10-sky/18)]">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1.25 rounded-full bg-linear-90 from-tps10-sky to-tps10-indigo text-tps10-bg text-[10.5px] font-bold uppercase tracking-[0.08em]">Recommended</span>
      <h3 class="m-0 mb-3 text-sm font-bold uppercase tracking-[0.1em] text-tps10-label">Float</h3>
      <div class="flex items-baseline gap-1 mb-[18px] text-[42px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>18<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <ul class="list-none p-0 m-0 mb-[22px] flex-1 text-[13.5px]/[1.9] text-tps10-body">
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Unlimited projects</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">30 GB storage</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Priority email support</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Custom domains</li>
      </ul>
      <a href="#float" class="block text-center px-4 py-2.75 rounded-[10px] bg-linear-90 from-tps10-sky to-tps10-indigo text-tps10-bg no-underline text-[13.5px] font-semibold border border-transparent transition-[filter] duration-[180ms] hover:brightness-110 focus-visible:outline-2 focus-visible:outline-tps10-sky focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Float</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-[26px] pb-[22px] rounded-[18px] bg-white/6 border border-white/12 backdrop-blur-[20px] backdrop-saturate-150 shadow-[0_18px_48px_rgba(0,0,0,0.25)]">
      <h3 class="m-0 mb-3 text-sm font-bold uppercase tracking-[0.1em] text-tps10-label">Stratos</h3>
      <div class="flex items-baseline gap-1 mb-[18px] text-[42px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>56<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <ul class="list-none p-0 m-0 mb-[22px] flex-1 text-[13.5px]/[1.9] text-tps10-body">
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Everything in Float</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">SSO + audit logs</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Dedicated success manager</li>
      </ul>
      <a href="#stratos" class="block text-center px-4 py-2.75 rounded-[10px] bg-white/8 text-tps10-label no-underline text-[13.5px] font-semibold border border-tps10-label/30 transition-[background-color,color] duration-[180ms] hover:bg-white/18 hover:text-white focus-visible:outline-2 focus-visible:outline-tps10-sky focus-visible:outline-offset-[3px] motion-reduce:transition-none">Talk to sales</a>
    </article>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tps10-bg: #050a1a;
  --color-tps10-bg: oklch(0.14 0.04 265);
  --color-tps10-body: #d1ddee;
  --color-tps10-body: oklch(0.89 0.02 250);
  --color-tps10-muted: #b8c4dc;
  --color-tps10-muted: oklch(0.81 0.03 255);
  --color-tps10-label: #93c5fd;
  --color-tps10-label: oklch(0.81 0.1 250);
  --color-tps10-sky: #38bdf8;
  --color-tps10-sky: oklch(0.75 0.14 231);
  --color-tps10-indigo: #818cf8;
  --color-tps10-indigo: oklch(0.68 0.16 277);
  --color-tps10-cyan: #22d3ee;
  --color-tps10-cyan: oklch(0.79 0.14 202);
  --font-tps10-sans: 'Sora', system-ui, sans-serif;
  --animate-tps10-drift: tps10-drift 22s ease-in-out infinite alternate;
}
/* Keyframes have no utility form — the shorthand is a theme token
   (--animate-tps10-drift → animate-tps10-drift), the body lives here. */

@keyframes tps10-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -30px) scale(1.08);
  }

  100% {
    transform: translate(-30px, 30px) scale(0.95);
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is sized correctly in the moment before the
   browser build has compiled its utilities. */

.tps-10 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tps10-bg: #050a1a;
  --color-tps10-bg: oklch(0.14 0.04 265);
  --color-tps10-body: #d1ddee;
  --color-tps10-body: oklch(0.89 0.02 250);
  --color-tps10-muted: #b8c4dc;
  --color-tps10-muted: oklch(0.81 0.03 255);
  --color-tps10-label: #93c5fd;
  --color-tps10-label: oklch(0.81 0.1 250);
  --color-tps10-sky: #38bdf8;
  --color-tps10-sky: oklch(0.75 0.14 231);
  --color-tps10-indigo: #818cf8;
  --color-tps10-indigo: oklch(0.68 0.16 277);
  --color-tps10-cyan: #22d3ee;
  --color-tps10-cyan: oklch(0.79 0.14 202);
  --font-tps10-sans: 'Sora', system-ui, sans-serif;
  --animate-tps10-drift: tps10-drift 22s ease-in-out infinite alternate;
}
/* Keyframes have no utility form — the shorthand is a theme token
   (--animate-tps10-drift → animate-tps10-drift), the body lives here. */

@keyframes tps10-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -30px) scale(1.08);
  }

  100% {
    transform: translate(-30px, 30px) scale(0.95);
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is sized correctly in the moment before the
   browser build has compiled its utilities. */

.tps-10 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The drift animation is the one part that cannot be a utility alone, so it becomes a pair: --animate-tps10-drift in @theme (which mints animate-tps10-drift) plus the @keyframes body in CSS. Three per-blob rules collapse into three [animation-delay:…] utilities.
  • --alpha(--color-tps10-sky/40) inside the arbitrary shadow-[…] lets the mid card's inset ring and outer glow reference the same token as its border, rather than repeating an rgba() literal three times as the CSS does.
  • .ps-10__mid { transform: scale(1.04) } plus its transform: none media query becomes one md:scale-[1.04] — the lift is a desktop enhancement, so it is declared as one.
  • The ::before diamond bullet ports directly as before:content-['\25C7']; the escape sequence, not the literal glyph, keeps the class list ASCII-safe.
  • backdrop-blur-[20px] backdrop-saturate-150 compiles to a single composed backdrop-filter with the -webkit- prefix emitted for free — the CSS version hand-writes both lines.
  • [contain:layout_paint] stays as an arbitrary property: there is no contain-* utility, and the blurred blobs need it.
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 demo 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: Tailwind Glass Aurora Pricing Cards
Source: https://codefronts.com/layouts/tailwind-css-pricing-sections/tailwind-glass-aurora-pricing-cards/

Frosted cards floating over three slow-drifting aurora blobs. The port keeps the whole glass recipe in the class list &mdash; bg-white/6, border-white/12, backdrop-blur-[20px] backdrop-saturate-150 &mdash; and moves the one genuinely CSS-only part, the drift keyframes, into an --animate-* theme token so the blobs read as animate-tps10-drift on the element.
## HTML
```html
<section class="tps-10 relative w-full min-h-svh overflow-hidden [contain:layout_paint] bg-tps10-bg font-tps10-sans text-tps10-body px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <div class="absolute inset-0 z-0 overflow-hidden pointer-events-none" aria-hidden="true">
    <span class="absolute -top-[10%] -left-[10%] size-[380px] rounded-full blur-[60px] opacity-70 bg-[radial-gradient(circle,--theme(--color-tps10-sky)_0%,transparent_60%)] animate-tps10-drift [animation-delay:-3s] motion-reduce:animate-none"></span>
    <span class="absolute top-[20%] -right-[8%] size-[320px] rounded-full blur-[60px] opacity-70 bg-[radial-gradient(circle,--theme(--color-tps10-indigo)_0%,transparent_60%)] animate-tps10-drift [animation-delay:-8s] motion-reduce:animate-none"></span>
    <span class="absolute -bottom-[15%] left-[30%] size-[360px] rounded-full blur-[60px] opacity-70 bg-[radial-gradient(circle,--theme(--color-tps10-cyan)_0%,transparent_60%)] animate-tps10-drift [animation-delay:-14s] motion-reduce:animate-none"></span>
  </div>
  <header class="relative z-2 text-center mb-[clamp(28px,4vw,44px)]">
    <h2 class="m-0 mb-2 text-[clamp(24px,3.6vw,36px)] font-bold tracking-[-0.02em] text-white">Pricing, on the house.</h2>
    <p class="m-0 text-sm text-tps10-muted">Three tiers, all built on the same calm interface.</p>
  </header>
  <div class="relative z-2 grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] items-center gap-[18px] max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative flex flex-col px-[22px] pt-[26px] pb-[22px] rounded-[18px] bg-white/6 border border-white/12 backdrop-blur-[20px] backdrop-saturate-150 shadow-[0_18px_48px_rgba(0,0,0,0.25)]">
      <h3 class="m-0 mb-3 text-sm font-bold uppercase tracking-[0.1em] text-tps10-label">Drift</h3>
      <div class="flex items-baseline gap-1 mb-[18px] text-[42px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>0<span class="ml-1.5 text-[0.32em] font-medium opacity-65">free</span></div>
      <ul class="list-none p-0 m-0 mb-[22px] flex-1 text-[13.5px]/[1.9] text-tps10-body">
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Personal projects</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">1 GB storage</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Community access</li>
      </ul>
      <a href="#drift" class="block text-center px-4 py-2.75 rounded-[10px] bg-white/8 text-tps10-label no-underline text-[13.5px] font-semibold border border-tps10-label/30 transition-[background-color,color] duration-[180ms] hover:bg-white/18 hover:text-white focus-visible:outline-2 focus-visible:outline-tps10-sky focus-visible:outline-offset-[3px] motion-reduce:transition-none">Get started</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-[26px] pb-[22px] rounded-[18px] bg-white/10 border border-tps10-sky/40 backdrop-blur-[20px] backdrop-saturate-150 md:scale-[1.04] shadow-[inset_0_0_0_1px_--alpha(--color-tps10-sky/40),0_22px_56px_--alpha(--color-tps10-sky/18)]">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1.25 rounded-full bg-linear-90 from-tps10-sky to-tps10-indigo text-tps10-bg text-[10.5px] font-bold uppercase tracking-[0.08em]">Recommended</span>
      <h3 class="m-0 mb-3 text-sm font-bold uppercase tracking-[0.1em] text-tps10-label">Float</h3>
      <div class="flex items-baseline gap-1 mb-[18px] text-[42px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>18<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <ul class="list-none p-0 m-0 mb-[22px] flex-1 text-[13.5px]/[1.9] text-tps10-body">
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Unlimited projects</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">30 GB storage</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Priority email support</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Custom domains</li>
      </ul>
      <a href="#float" class="block text-center px-4 py-2.75 rounded-[10px] bg-linear-90 from-tps10-sky to-tps10-indigo text-tps10-bg no-underline text-[13.5px] font-semibold border border-transparent transition-[filter] duration-[180ms] hover:brightness-110 focus-visible:outline-2 focus-visible:outline-tps10-sky focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Float</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-[26px] pb-[22px] rounded-[18px] bg-white/6 border border-white/12 backdrop-blur-[20px] backdrop-saturate-150 shadow-[0_18px_48px_rgba(0,0,0,0.25)]">
      <h3 class="m-0 mb-3 text-sm font-bold uppercase tracking-[0.1em] text-tps10-label">Stratos</h3>
      <div class="flex items-baseline gap-1 mb-[18px] text-[42px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>56<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <ul class="list-none p-0 m-0 mb-[22px] flex-1 text-[13.5px]/[1.9] text-tps10-body">
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Everything in Float</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">SSO + audit logs</li>
        <li class="before:content-['\25C7'] before:inline-block before:w-5 before:text-tps10-sky">Dedicated success manager</li>
      </ul>
      <a href="#stratos" class="block text-center px-4 py-2.75 rounded-[10px] bg-white/8 text-tps10-label no-underline text-[13.5px] font-semibold border border-tps10-label/30 transition-[background-color,color] duration-[180ms] hover:bg-white/18 hover:text-white focus-visible:outline-2 focus-visible:outline-tps10-sky focus-visible:outline-offset-[3px] motion-reduce:transition-none">Talk to sales</a>
    </article>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tps10-bg: #050a1a;
  --color-tps10-bg: oklch(0.14 0.04 265);
  --color-tps10-body: #d1ddee;
  --color-tps10-body: oklch(0.89 0.02 250);
  --color-tps10-muted: #b8c4dc;
  --color-tps10-muted: oklch(0.81 0.03 255);
  --color-tps10-label: #93c5fd;
  --color-tps10-label: oklch(0.81 0.1 250);
  --color-tps10-sky: #38bdf8;
  --color-tps10-sky: oklch(0.75 0.14 231);
  --color-tps10-indigo: #818cf8;
  --color-tps10-indigo: oklch(0.68 0.16 277);
  --color-tps10-cyan: #22d3ee;
  --color-tps10-cyan: oklch(0.79 0.14 202);
  --font-tps10-sans: 'Sora', system-ui, sans-serif;
  --animate-tps10-drift: tps10-drift 22s ease-in-out infinite alternate;
}
/* Keyframes have no utility form — the shorthand is a theme token
   (--animate-tps10-drift → animate-tps10-drift), the body lives here. */

@keyframes tps10-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -30px) scale(1.08);
  }

  100% {
    transform: translate(-30px, 30px) scale(0.95);
  }
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is sized correctly in the moment before the
   browser build has compiled its utilities. */

.tps-10 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Animation becomes a token, keyframes stay CSS. v4 mints an animate-* utility from any --animate-* entry, so the shorthand lives in the theme and the element just names it:

@theme { --animate-tps10-drift: tps10-drift 22s ease-in-out infinite alternate; }
/* <span class="animate-tps10-drift [animation-delay:-8s]"> */

The @keyframes body has no utility equivalent and belongs in the stylesheet — that split is the honest answer, not a workaround.

Glass is four utilities that must agree. A translucent fill, a hairline border, the backdrop blur and a soft drop shadow. Holding them in one class list is the port's real gain: in the CSS version the fill lives in one rule and the blur in another, and tuning one without the other is how glass ends up looking like flat grey.

The blobs are decoration and say so. The wrapper is aria-hidden="true" and pointer-events-none; the section keeps overflow-hidden plus [contain:layout_paint] so 60px-blurred 380px circles cannot force the page to repaint outside the section.

Contrast over aesthetic. Body copy is text-tps10-body at full opacity rather than white at 60% — over a moving background, alpha text is the first thing to fail 4.5:1.

Make it yours

  • Blob hues: --color-tps10-sky, --color-tps10-indigo, --color-tps10-cyan. Keep them adjacent on the wheel or the aurora reads as a stain.
  • Drift speed: the 22s in --animate-tps10-drift. Under about 12s the movement becomes noticeable, which defeats the effect.
  • Glass strength: backdrop-blur-[20px] and bg-white/6 together. More blur needs more fill, or the card loses its edge.
  • Lift amount: md:scale-[1.04]. Past 1.06 the mid card's text visibly out-sizes its neighbours.
  • Drop the blobs entirely and the section still works on the flat bg-tps10-bg — the cards do not depend on them.

Gotchas — read before shipping

  • backdrop-filter needs something translucent above it. bg-white/6 is not decoration here; remove it and the blur has no visible effect.
  • Do not put overflow-hidden on the cards — the -top-3 pill would be clipped. The clipping belongs on the section.
  • [contain:layout_paint] on the section is a performance requirement, not a nicety: three 60px-blurred circles animating without it repaint far more than they should.
  • motion-reduce:animate-none on all three blobs. A slow ambient drift is exactly the kind of motion that triggers vestibular symptoms.
  • The gradient pill text is text-tps10-bg (near-black) on a sky→indigo fill. White there measures about 2.1:1.
  • Backdrop blur on a large card is GPU-expensive; keep it to the cards and never on a scrolling container.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is Baseline — Chrome 76, Safari 9 (prefixed until 18), Firefox 103 — and Tailwind emits the -webkit- prefix for the backdrop-blur-* utilities itself. Without it the cards fall back to their flat alpha fill, which still reads correctly.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗radial-gradient()tw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Plain CSSno Tailwind surface

@propertytw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →