33 / 33

All 33 in 33 Tailwind CSS Card Hover Effects

Pure TailwindMIT licensed

Tailwind Drifting Aurora Ribbons Card with Blurred Gradient Bands

Two blurred gradient ribbons drift across a starfield and sharpen on hover — the blur drops from 28px to 20px and the opacity climbs, so the aurora seems to gather strength. The second band reuses the first's keyframe with a longer duration and reverse direction, which is what breaks the symmetry.

Live DemoSep 18, 2026

Plain CSSTailwind v4

Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tch-33 w-full min-h-svh grid place-items-center bg-tch33-bg font-tch33-sans p-8">
  <article tabindex="0" class="group relative w-[340px] h-[450px] rounded-[22px] overflow-hidden cursor-pointer outline-none bg-[linear-gradient(180deg,#050b1a_0%,#02040a_100%)] border border-tch33-a/10 focus-visible:outline-2 focus-visible:outline-tch33-a focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:opacity-70 before:bg-[radial-gradient(1px_1px_at_20%_30%,#fff,transparent),radial-gradient(1px_1px_at_70%_20%,#ccffee,transparent),radial-gradient(1px_1px_at_40%_60%,#fff,transparent),radial-gradient(1px_1px_at_85%_75%,#ddffff,transparent),radial-gradient(1px_1px_at_55%_85%,#fff,transparent),radial-gradient(1px_1px_at_10%_80%,#cceeff,transparent)]">
    <div class="absolute -inset-x-[30%] top-[5%] h-3/5 z-1 pointer-events-none opacity-55 blur-[28px] animate-tch33-drift transition-[opacity,filter] duration-600 group-hover:opacity-85 group-hover:blur-[20px] group-focus-visible:opacity-85 group-focus-visible:blur-[20px] motion-reduce:animate-none bg-[radial-gradient(ellipse_60%_100%_at_30%_50%,#2cffa6_0%,transparent_60%),radial-gradient(ellipse_50%_100%_at_60%_40%,#3ad0ff_0%,transparent_60%),radial-gradient(ellipse_55%_100%_at_80%_60%,#b06cff_0%,transparent_60%)]"></div>
    <div class="absolute -inset-x-[30%] top-[20%] h-3/5 z-1 pointer-events-none opacity-40 blur-[28px] animate-tch33-drift [animation-duration:13s] [animation-direction:reverse] transition-[opacity,filter] duration-600 group-hover:opacity-65 group-hover:blur-[20px] group-focus-visible:opacity-65 motion-reduce:animate-none bg-[radial-gradient(ellipse_50%_100%_at_50%_50%,#5affc4_0%,transparent_60%),radial-gradient(ellipse_50%_100%_at_75%_40%,#6a8cff_0%,transparent_60%)]"></div>
    <div class="relative z-2 h-full p-[2.6rem] flex flex-col justify-end text-tch33-ink">
      <span class="text-[0.72rem] font-medium tracking-[0.3em] uppercase text-tch33-a">Arctic Expeditions</span>
      <h2 class="font-tch33-display font-medium text-[3rem] leading-none mt-2.5 mb-3">Chasing<br>the Lights</h2>
      <p class="font-light text-[0.9rem] leading-[1.65] text-tch33-body">Seven nights in Tromsø under the polar sky. Glass-roof cabins, dog sleds, and the slow green fire overhead.</p>
      <div class="flex justify-between mt-6 pt-4 text-[0.78rem] tracking-[0.08em] text-tch33-a border-t border-tch33-a/20"><span>Sept – March</span><span>from $2,400</span></div>
    </div>
  </article>
</section>

<section class="tch-33 w-full min-h-svh grid place-items-center bg-tch33-bg font-tch33-sans p-8">
  <article tabindex="0" class="group relative w-[340px] h-[450px] rounded-[22px] overflow-hidden cursor-pointer outline-none bg-[linear-gradient(180deg,#050b1a_0%,#02040a_100%)] border border-tch33-a/10 focus-visible:outline-2 focus-visible:outline-tch33-a focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:opacity-70 before:bg-[radial-gradient(1px_1px_at_20%_30%,#fff,transparent),radial-gradient(1px_1px_at_70%_20%,#ccffee,transparent),radial-gradient(1px_1px_at_40%_60%,#fff,transparent),radial-gradient(1px_1px_at_85%_75%,#ddffff,transparent),radial-gradient(1px_1px_at_55%_85%,#fff,transparent),radial-gradient(1px_1px_at_10%_80%,#cceeff,transparent)]">
    <div class="absolute -inset-x-[30%] top-[5%] h-3/5 z-1 pointer-events-none opacity-55 blur-[28px] animate-tch33-drift transition-[opacity,filter] duration-600 group-hover:opacity-85 group-hover:blur-[20px] group-focus-visible:opacity-85 group-focus-visible:blur-[20px] motion-reduce:animate-none bg-[radial-gradient(ellipse_60%_100%_at_30%_50%,#2cffa6_0%,transparent_60%),radial-gradient(ellipse_50%_100%_at_60%_40%,#3ad0ff_0%,transparent_60%),radial-gradient(ellipse_55%_100%_at_80%_60%,#b06cff_0%,transparent_60%)]"></div>
    <div class="absolute -inset-x-[30%] top-[20%] h-3/5 z-1 pointer-events-none opacity-40 blur-[28px] animate-tch33-drift [animation-duration:13s] [animation-direction:reverse] transition-[opacity,filter] duration-600 group-hover:opacity-65 group-hover:blur-[20px] group-focus-visible:opacity-65 motion-reduce:animate-none bg-[radial-gradient(ellipse_50%_100%_at_50%_50%,#5affc4_0%,transparent_60%),radial-gradient(ellipse_50%_100%_at_75%_40%,#6a8cff_0%,transparent_60%)]"></div>
    <div class="relative z-2 h-full p-[2.6rem] flex flex-col justify-end text-tch33-ink">
      <span class="text-[0.72rem] font-medium tracking-[0.3em] uppercase text-tch33-a">Arctic Expeditions</span>
      <h2 class="font-tch33-display font-medium text-[3rem] leading-none mt-2.5 mb-3">Chasing<br>the Lights</h2>
      <p class="font-light text-[0.9rem] leading-[1.65] text-tch33-body">Seven nights in Tromsø under the polar sky. Glass-roof cabins, dog sleds, and the slow green fire overhead.</p>
      <div class="flex justify-between mt-6 pt-4 text-[0.78rem] tracking-[0.08em] text-tch33-a border-t border-tch33-a/20"><span>Sept – March</span><span>from $2,400</span></div>
    </div>
  </article>
</section>

@import "tailwindcss";

@keyframes tch33-drift {
  0%,
    100% {
    transform: translateX(-6%) translateY(0) skewX(-6deg);
  }

  50% {
    transform: translateX(8%) translateY(-12px) skewX(4deg);
  }
}

@theme {
  --color-tch33-bg: #03060d;
  --color-tch33-bg: oklch(0.08 0.01 250);
  --color-tch33-ink: #eafff6;
  --color-tch33-ink: oklch(0.97 0.02 165);
  --color-tch33-body: #b9d6cc;
  --color-tch33-body: oklch(0.84 0.03 170);
  --color-tch33-a: #7ff0c4;
  --color-tch33-a: oklch(0.89 0.12 165);
  --color-tch33-b: #3ad0ff;
  --color-tch33-b: oklch(0.81 0.13 225);
  --color-tch33-c: #b06cff;
  --color-tch33-c: oklch(0.65 0.21 295);
  --font-tch33-sans: 'Jost', system-ui, sans-serif;
  --font-tch33-display: 'Cormorant Garamond', Georgia, serif;
  --animate-tch33-drift: tch33-drift 9s ease-in-out infinite;
}

.tch-33 {
  width: 100%;
  min-height: 100svh;
}

@import "tailwindcss";

@keyframes tch33-drift {
  0%,
    100% {
    transform: translateX(-6%) translateY(0) skewX(-6deg);
  }

  50% {
    transform: translateX(8%) translateY(-12px) skewX(4deg);
  }
}

@theme {
  --color-tch33-bg: #03060d;
  --color-tch33-bg: oklch(0.08 0.01 250);
  --color-tch33-ink: #eafff6;
  --color-tch33-ink: oklch(0.97 0.02 165);
  --color-tch33-body: #b9d6cc;
  --color-tch33-body: oklch(0.84 0.03 170);
  --color-tch33-a: #7ff0c4;
  --color-tch33-a: oklch(0.89 0.12 165);
  --color-tch33-b: #3ad0ff;
  --color-tch33-b: oklch(0.81 0.13 225);
  --color-tch33-c: #b06cff;
  --color-tch33-c: oklch(0.65 0.21 295);
  --font-tch33-sans: 'Jost', system-ui, sans-serif;
  --font-tch33-display: 'Cormorant Garamond', Georgia, serif;
  --animate-tch33-drift: tch33-drift 9s ease-in-out infinite;
}

.tch-33 {
  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>

<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.

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist

@import "tailwindcss";

@keyframes tch33-drift {
  0%,
    100% {
    transform: translateX(-6%) translateY(0) skewX(-6deg);
  }

  50% {
    transform: translateX(8%) translateY(-12px) skewX(4deg);
  }
}

@theme {
  --color-tch33-bg: #03060d;
  --color-tch33-bg: oklch(0.08 0.01 250);
  --color-tch33-ink: #eafff6;
  --color-tch33-ink: oklch(0.97 0.02 165);
  --color-tch33-body: #b9d6cc;
  --color-tch33-body: oklch(0.84 0.03 170);
  --color-tch33-a: #7ff0c4;
  --color-tch33-a: oklch(0.89 0.12 165);
  --color-tch33-b: #3ad0ff;
  --color-tch33-b: oklch(0.81 0.13 225);
  --color-tch33-c: #b06cff;
  --color-tch33-c: oklch(0.65 0.21 295);
  --font-tch33-sans: 'Jost', system-ui, sans-serif;
  --font-tch33-display: 'Cormorant Garamond', Georgia, serif;
  --animate-tch33-drift: tch33-drift 9s ease-in-out infinite;
}

.tch-33 {
  width: 100%;
  min-height: 100svh;
}

@import "tailwindcss";

@keyframes tch33-drift {
  0%,
    100% {
    transform: translateX(-6%) translateY(0) skewX(-6deg);
  }

  50% {
    transform: translateX(8%) translateY(-12px) skewX(4deg);
  }
}

@theme {
  --color-tch33-bg: #03060d;
  --color-tch33-bg: oklch(0.08 0.01 250);
  --color-tch33-ink: #eafff6;
  --color-tch33-ink: oklch(0.97 0.02 165);
  --color-tch33-body: #b9d6cc;
  --color-tch33-body: oklch(0.84 0.03 170);
  --color-tch33-a: #7ff0c4;
  --color-tch33-a: oklch(0.89 0.12 165);
  --color-tch33-b: #3ad0ff;
  --color-tch33-b: oklch(0.81 0.13 225);
  --color-tch33-c: #b06cff;
  --color-tch33-c: oklch(0.65 0.21 295);
  --font-tch33-sans: 'Jost', system-ui, sans-serif;
  --font-tch33-display: 'Cormorant Garamond', Georgia, serif;
  --animate-tch33-drift: tch33-drift 9s ease-in-out infinite;
}

.tch-33 {
  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=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500&display=swap">

<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=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500&display=swap">

What changed in the port

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

[animation-duration:13s] [animation-direction:reverse] on the second band is the whole reason this demo needs only one keyframe block. Overriding animation longhands is an underused utility trick.
Sharpening the blur on hover instead of only raising opacity is a small change with a large perceptual payoff — the lights feel like they gather rather than brighten.
UI change from the CSS original: focusable card, the aurora responds to group-focus-visible:, and both bands now animate filter as well as opacity (the original changed blur only on the first band's hover rule).

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 Drifting Aurora Ribbons Card with Blurred Gradient Bands
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-drifting-aurora-ribbons-card/

Two blurred gradient ribbons drift across a starfield and sharpen on hover &mdash; the blur drops from 28px to 20px and the opacity climbs, so the aurora seems to gather strength. The second band reuses the first's keyframe with a longer duration and reverse direction, which is what breaks the symmetry.
## HTML
```html
<section class="tch-33 w-full min-h-svh grid place-items-center bg-tch33-bg font-tch33-sans p-8">
  <article tabindex="0" class="group relative w-[340px] h-[450px] rounded-[22px] overflow-hidden cursor-pointer outline-none bg-[linear-gradient(180deg,#050b1a_0%,#02040a_100%)] border border-tch33-a/10 focus-visible:outline-2 focus-visible:outline-tch33-a focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:opacity-70 before:bg-[radial-gradient(1px_1px_at_20%_30%,#fff,transparent),radial-gradient(1px_1px_at_70%_20%,#ccffee,transparent),radial-gradient(1px_1px_at_40%_60%,#fff,transparent),radial-gradient(1px_1px_at_85%_75%,#ddffff,transparent),radial-gradient(1px_1px_at_55%_85%,#fff,transparent),radial-gradient(1px_1px_at_10%_80%,#cceeff,transparent)]">
    <div class="absolute -inset-x-[30%] top-[5%] h-3/5 z-1 pointer-events-none opacity-55 blur-[28px] animate-tch33-drift transition-[opacity,filter] duration-600 group-hover:opacity-85 group-hover:blur-[20px] group-focus-visible:opacity-85 group-focus-visible:blur-[20px] motion-reduce:animate-none bg-[radial-gradient(ellipse_60%_100%_at_30%_50%,#2cffa6_0%,transparent_60%),radial-gradient(ellipse_50%_100%_at_60%_40%,#3ad0ff_0%,transparent_60%),radial-gradient(ellipse_55%_100%_at_80%_60%,#b06cff_0%,transparent_60%)]"></div>
    <div class="absolute -inset-x-[30%] top-[20%] h-3/5 z-1 pointer-events-none opacity-40 blur-[28px] animate-tch33-drift [animation-duration:13s] [animation-direction:reverse] transition-[opacity,filter] duration-600 group-hover:opacity-65 group-hover:blur-[20px] group-focus-visible:opacity-65 motion-reduce:animate-none bg-[radial-gradient(ellipse_50%_100%_at_50%_50%,#5affc4_0%,transparent_60%),radial-gradient(ellipse_50%_100%_at_75%_40%,#6a8cff_0%,transparent_60%)]"></div>
    <div class="relative z-2 h-full p-[2.6rem] flex flex-col justify-end text-tch33-ink">
      <span class="text-[0.72rem] font-medium tracking-[0.3em] uppercase text-tch33-a">Arctic Expeditions</span>
      <h2 class="font-tch33-display font-medium text-[3rem] leading-none mt-2.5 mb-3">Chasing<br>the Lights</h2>
      <p class="font-light text-[0.9rem] leading-[1.65] text-tch33-body">Seven nights in Tromsø under the polar sky. Glass-roof cabins, dog sleds, and the slow green fire overhead.</p>
      <div class="flex justify-between mt-6 pt-4 text-[0.78rem] tracking-[0.08em] text-tch33-a border-t border-tch33-a/20"><span>Sept – March</span><span>from $2,400</span></div>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@keyframes tch33-drift {
  0%,
    100% {
    transform: translateX(-6%) translateY(0) skewX(-6deg);
  }

  50% {
    transform: translateX(8%) translateY(-12px) skewX(4deg);
  }
}

@theme {
  --color-tch33-bg: #03060d;
  --color-tch33-bg: oklch(0.08 0.01 250);
  --color-tch33-ink: #eafff6;
  --color-tch33-ink: oklch(0.97 0.02 165);
  --color-tch33-body: #b9d6cc;
  --color-tch33-body: oklch(0.84 0.03 170);
  --color-tch33-a: #7ff0c4;
  --color-tch33-a: oklch(0.89 0.12 165);
  --color-tch33-b: #3ad0ff;
  --color-tch33-b: oklch(0.81 0.13 225);
  --color-tch33-c: #b06cff;
  --color-tch33-c: oklch(0.65 0.21 295);
  --font-tch33-sans: 'Jost', system-ui, sans-serif;
  --font-tch33-display: 'Cormorant Garamond', Georgia, serif;
  --animate-tch33-drift: tch33-drift 9s ease-in-out infinite;
}

.tch-33 {
  width: 100%;
  min-height: 100svh;
}
```

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 Drifting Aurora Ribbons Card with Blurred Gradient Bands
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-drifting-aurora-ribbons-card/

Two blurred gradient ribbons drift across a starfield and sharpen on hover &mdash; the blur drops from 28px to 20px and the opacity climbs, so the aurora seems to gather strength. The second band reuses the first's keyframe with a longer duration and reverse direction, which is what breaks the symmetry.
## HTML
```html
<section class="tch-33 w-full min-h-svh grid place-items-center bg-tch33-bg font-tch33-sans p-8">
  <article tabindex="0" class="group relative w-[340px] h-[450px] rounded-[22px] overflow-hidden cursor-pointer outline-none bg-[linear-gradient(180deg,#050b1a_0%,#02040a_100%)] border border-tch33-a/10 focus-visible:outline-2 focus-visible:outline-tch33-a focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:opacity-70 before:bg-[radial-gradient(1px_1px_at_20%_30%,#fff,transparent),radial-gradient(1px_1px_at_70%_20%,#ccffee,transparent),radial-gradient(1px_1px_at_40%_60%,#fff,transparent),radial-gradient(1px_1px_at_85%_75%,#ddffff,transparent),radial-gradient(1px_1px_at_55%_85%,#fff,transparent),radial-gradient(1px_1px_at_10%_80%,#cceeff,transparent)]">
    <div class="absolute -inset-x-[30%] top-[5%] h-3/5 z-1 pointer-events-none opacity-55 blur-[28px] animate-tch33-drift transition-[opacity,filter] duration-600 group-hover:opacity-85 group-hover:blur-[20px] group-focus-visible:opacity-85 group-focus-visible:blur-[20px] motion-reduce:animate-none bg-[radial-gradient(ellipse_60%_100%_at_30%_50%,#2cffa6_0%,transparent_60%),radial-gradient(ellipse_50%_100%_at_60%_40%,#3ad0ff_0%,transparent_60%),radial-gradient(ellipse_55%_100%_at_80%_60%,#b06cff_0%,transparent_60%)]"></div>
    <div class="absolute -inset-x-[30%] top-[20%] h-3/5 z-1 pointer-events-none opacity-40 blur-[28px] animate-tch33-drift [animation-duration:13s] [animation-direction:reverse] transition-[opacity,filter] duration-600 group-hover:opacity-65 group-hover:blur-[20px] group-focus-visible:opacity-65 motion-reduce:animate-none bg-[radial-gradient(ellipse_50%_100%_at_50%_50%,#5affc4_0%,transparent_60%),radial-gradient(ellipse_50%_100%_at_75%_40%,#6a8cff_0%,transparent_60%)]"></div>
    <div class="relative z-2 h-full p-[2.6rem] flex flex-col justify-end text-tch33-ink">
      <span class="text-[0.72rem] font-medium tracking-[0.3em] uppercase text-tch33-a">Arctic Expeditions</span>
      <h2 class="font-tch33-display font-medium text-[3rem] leading-none mt-2.5 mb-3">Chasing<br>the Lights</h2>
      <p class="font-light text-[0.9rem] leading-[1.65] text-tch33-body">Seven nights in Tromsø under the polar sky. Glass-roof cabins, dog sleds, and the slow green fire overhead.</p>
      <div class="flex justify-between mt-6 pt-4 text-[0.78rem] tracking-[0.08em] text-tch33-a border-t border-tch33-a/20"><span>Sept – March</span><span>from $2,400</span></div>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@keyframes tch33-drift {
  0%,
    100% {
    transform: translateX(-6%) translateY(0) skewX(-6deg);
  }

  50% {
    transform: translateX(8%) translateY(-12px) skewX(4deg);
  }
}

@theme {
  --color-tch33-bg: #03060d;
  --color-tch33-bg: oklch(0.08 0.01 250);
  --color-tch33-ink: #eafff6;
  --color-tch33-ink: oklch(0.97 0.02 165);
  --color-tch33-body: #b9d6cc;
  --color-tch33-body: oklch(0.84 0.03 170);
  --color-tch33-a: #7ff0c4;
  --color-tch33-a: oklch(0.89 0.12 165);
  --color-tch33-b: #3ad0ff;
  --color-tch33-b: oklch(0.81 0.13 225);
  --color-tch33-c: #b06cff;
  --color-tch33-c: oklch(0.65 0.21 295);
  --font-tch33-sans: 'Jost', system-ui, sans-serif;
  --font-tch33-display: 'Cormorant Garamond', Georgia, serif;
  --animate-tch33-drift: tch33-drift 9s ease-in-out infinite;
}

.tch-33 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Blur is the aurora. The bands are three overlapping radial gradients in mint, cyan and violet. Unblurred they are obvious blobs; at 28px they become atmosphere. Hover tightens the blur to 20px, which reads as the lights sharpening, not merely getting brighter — a better cue than opacity alone.

One keyframe, two behaviours. Both bands run animate-tch33-drift. The second adds [animation-duration:13s] and [animation-direction:reverse], so the two ribbons cross rather than move in lockstep. Overriding animation longhands with arbitrary properties is the utility answer to a second keyframe block.

The card face stays dark. A near-black vertical gradient under everything keeps the copy at full contrast no matter where the ribbons drift.

Make it yours

Palette: --color-tch33-a/b/c — mint/cyan/violet is arctic; pink/orange/violet is a sunset variant with no structural change.
Drift speed: the duration in the theme entry and the band's override. 9s and 13s is a slow, uncorrelated pair.
Blur range: 40px→30px is smoky; 15px→10px turns the ribbons into defined shapes.

Gotchas — read before shipping

Blurred, oversized, animated layers are the most GPU-expensive thing here — two bands is the budget, not a starting point.
Gate the drift behind motion-reduce:animate-none; continuous ambient motion is exactly what the preference asks about.
Keep the bands behind the content and keep the card's base dark, or the body copy fails contrast over the bright ribbon cores.
The bands must extend past the card (-inset-x-[30%]) or their drift exposes hard vertical edges.

Browser support

Chrome	Safari	Firefox	Edge
111+	16.4+	128+	111+

Radial gradients, filter: blur() and keyframes are universally supported and GPU-accelerated; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

radial-gradient()tw ↗transitionstw ↗prefers-reduced-motiontw ↗

Plain CSSno Tailwind surface

@keyframestw ↗