21 / 33

All 33 in 33 Tailwind CSS Card Hover Effects

Pure TailwindMIT licensed

Tailwind Rotating Conic Aura Card with Blurred Gradient Bloom

A creative-suite card sitting inside a heavily blurred conic gradient that rotates behind an inset inner panel, so the card wears a live rainbow aura. Same @property machinery as demo 08, but the gradient is oversized and blurred rather than masked — a softer, cheaper ring.

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-21 w-full min-h-svh grid place-items-center bg-tch21-bg font-tch21-sans p-8">
  <article class="group relative w-[330px] h-[430px] rounded-3xl overflow-hidden isolate cursor-pointer bg-tch21-card
    before:content-[''] before:absolute before:-inset-[40%] before:z-0 before:opacity-65 before:blur-[40px] before:saturate-[1.2] before:transition-opacity before:duration-500 group-hover:before:opacity-100 group-focus-within:before:opacity-100 before:bg-[conic-gradient(from_var(--tch21-angle,0deg),#ff4d6d,#ffa64d,#ffe14d,#4dffa6,#4dd2ff,#b04dff,#ff4d6d)] before:animate-tch21-spin before:[animation-play-state:paused] group-hover:before:[animation-play-state:running] motion-reduce:before:animate-none
    after:content-[''] after:absolute after:inset-0.5 after:z-1 after:rounded-[22px] after:bg-[linear-gradient(160deg,#15151e,#0c0c12)]">
    <div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between text-tch21-ink">
      <span class="font-tch21-mono text-[0.72rem] tracking-[0.2em] text-tch21-mut">AI · CREATIVE SUITE</span>
      <h2 class="font-bold text-[2.6rem] leading-none bg-[linear-gradient(120deg,#ff8aa0,#ffd24d,#6ad6ff)] bg-clip-text text-transparent">Spectra<br>Studio</h2>
      <p class="font-light text-[0.88rem] leading-[1.6] text-tch21-body">Generate, remix, and color-grade in one canvas. The aura rotates while the engine warms up.</p>
      <a href="#" class="inline-flex items-center min-h-11 font-tch21-mono text-[0.78rem] tracking-[0.1em] text-tch21-acc no-underline rounded transition-colors duration-200 hover:text-white focus-visible:outline-2 focus-visible:outline-tch21-acc focus-visible:outline-offset-2">→ START FREE TRIAL</a>
    </div>
  </article>
</section>

<section class="tch-21 w-full min-h-svh grid place-items-center bg-tch21-bg font-tch21-sans p-8">
  <article class="group relative w-[330px] h-[430px] rounded-3xl overflow-hidden isolate cursor-pointer bg-tch21-card
    before:content-[''] before:absolute before:-inset-[40%] before:z-0 before:opacity-65 before:blur-[40px] before:saturate-[1.2] before:transition-opacity before:duration-500 group-hover:before:opacity-100 group-focus-within:before:opacity-100 before:bg-[conic-gradient(from_var(--tch21-angle,0deg),#ff4d6d,#ffa64d,#ffe14d,#4dffa6,#4dd2ff,#b04dff,#ff4d6d)] before:animate-tch21-spin before:[animation-play-state:paused] group-hover:before:[animation-play-state:running] motion-reduce:before:animate-none
    after:content-[''] after:absolute after:inset-0.5 after:z-1 after:rounded-[22px] after:bg-[linear-gradient(160deg,#15151e,#0c0c12)]">
    <div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between text-tch21-ink">
      <span class="font-tch21-mono text-[0.72rem] tracking-[0.2em] text-tch21-mut">AI · CREATIVE SUITE</span>
      <h2 class="font-bold text-[2.6rem] leading-none bg-[linear-gradient(120deg,#ff8aa0,#ffd24d,#6ad6ff)] bg-clip-text text-transparent">Spectra<br>Studio</h2>
      <p class="font-light text-[0.88rem] leading-[1.6] text-tch21-body">Generate, remix, and color-grade in one canvas. The aura rotates while the engine warms up.</p>
      <a href="#" class="inline-flex items-center min-h-11 font-tch21-mono text-[0.78rem] tracking-[0.1em] text-tch21-acc no-underline rounded transition-colors duration-200 hover:text-white focus-visible:outline-2 focus-visible:outline-tch21-acc focus-visible:outline-offset-2">→ START FREE TRIAL</a>
    </div>
  </article>
</section>

@import "tailwindcss";

@property --tch21-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch21-spin {
  to {
    --tch21-angle: 360deg;
  }
}

@theme {
  --color-tch21-bg: #0a0a0f;
  --color-tch21-bg: oklch(0.11 0.006 285);
  --color-tch21-card: #111118;
  --color-tch21-card: oklch(0.15 0.008 285);
  --color-tch21-ink: #f2f2f7;
  --color-tch21-ink: oklch(0.96 0.003 285);
  --color-tch21-body: #a6a6bc;
  --color-tch21-body: oklch(0.72 0.02 285);
  --color-tch21-mut: #9a9ab0;
  --color-tch21-mut: oklch(0.67 0.02 285);
  --color-tch21-acc: #ffd24d;
  --color-tch21-acc: oklch(0.88 0.15 88);
  --font-tch21-sans: 'Outfit', system-ui, sans-serif;
  --font-tch21-mono: 'Azeret Mono', ui-monospace, monospace;
  --animate-tch21-spin: tch21-spin 6s linear infinite;
}

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

@import "tailwindcss";

@property --tch21-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch21-spin {
  to {
    --tch21-angle: 360deg;
  }
}

@theme {
  --color-tch21-bg: #0a0a0f;
  --color-tch21-bg: oklch(0.11 0.006 285);
  --color-tch21-card: #111118;
  --color-tch21-card: oklch(0.15 0.008 285);
  --color-tch21-ink: #f2f2f7;
  --color-tch21-ink: oklch(0.96 0.003 285);
  --color-tch21-body: #a6a6bc;
  --color-tch21-body: oklch(0.72 0.02 285);
  --color-tch21-mut: #9a9ab0;
  --color-tch21-mut: oklch(0.67 0.02 285);
  --color-tch21-acc: #ffd24d;
  --color-tch21-acc: oklch(0.88 0.15 88);
  --font-tch21-sans: 'Outfit', system-ui, sans-serif;
  --font-tch21-mono: 'Azeret Mono', ui-monospace, monospace;
  --animate-tch21-spin: tch21-spin 6s linear infinite;
}

.tch-21 {
  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";

@property --tch21-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch21-spin {
  to {
    --tch21-angle: 360deg;
  }
}

@theme {
  --color-tch21-bg: #0a0a0f;
  --color-tch21-bg: oklch(0.11 0.006 285);
  --color-tch21-card: #111118;
  --color-tch21-card: oklch(0.15 0.008 285);
  --color-tch21-ink: #f2f2f7;
  --color-tch21-ink: oklch(0.96 0.003 285);
  --color-tch21-body: #a6a6bc;
  --color-tch21-body: oklch(0.72 0.02 285);
  --color-tch21-mut: #9a9ab0;
  --color-tch21-mut: oklch(0.67 0.02 285);
  --color-tch21-acc: #ffd24d;
  --color-tch21-acc: oklch(0.88 0.15 88);
  --font-tch21-sans: 'Outfit', system-ui, sans-serif;
  --font-tch21-mono: 'Azeret Mono', ui-monospace, monospace;
  --animate-tch21-spin: tch21-spin 6s linear infinite;
}

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

@import "tailwindcss";

@property --tch21-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch21-spin {
  to {
    --tch21-angle: 360deg;
  }
}

@theme {
  --color-tch21-bg: #0a0a0f;
  --color-tch21-bg: oklch(0.11 0.006 285);
  --color-tch21-card: #111118;
  --color-tch21-card: oklch(0.15 0.008 285);
  --color-tch21-ink: #f2f2f7;
  --color-tch21-ink: oklch(0.96 0.003 285);
  --color-tch21-body: #a6a6bc;
  --color-tch21-body: oklch(0.72 0.02 285);
  --color-tch21-mut: #9a9ab0;
  --color-tch21-mut: oklch(0.67 0.02 285);
  --color-tch21-acc: #ffd24d;
  --color-tch21-acc: oklch(0.88 0.15 88);
  --font-tch21-sans: 'Outfit', system-ui, sans-serif;
  --font-tch21-mono: 'Azeret Mono', ui-monospace, monospace;
  --animate-tch21-spin: tch21-spin 6s linear infinite;
}

.tch-21 {
  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=Outfit:wght@300;500;700&family=Azeret+Mono:wght@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=Outfit:wght@300;500;700&family=Azeret+Mono:wght@400;500&display=swap">

What changed in the port

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

Blur-and-cover is the poor-relation version of demo 08's masked ring, and it is better in two ways: no mask-composite support needed, and the glow reads as light rather than as a stroke.
isolate is one utility that prevents a whole category of stacking bug. It belongs on anything with an overhanging blurred child.
UI change from the CSS original: the CTA is a real link with a 44px target and the aura brightens on group-focus-within:.

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 Rotating Conic Aura Card with Blurred Gradient Bloom
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-rotating-conic-aura-card/

A creative-suite card sitting inside a heavily blurred conic gradient that rotates behind an inset inner panel, so the card wears a live rainbow aura. Same @property machinery as demo 08, but the gradient is oversized and blurred rather than masked &mdash; a softer, cheaper ring.
## HTML
```html
<section class="tch-21 w-full min-h-svh grid place-items-center bg-tch21-bg font-tch21-sans p-8">
  <article class="group relative w-[330px] h-[430px] rounded-3xl overflow-hidden isolate cursor-pointer bg-tch21-card
    before:content-[''] before:absolute before:-inset-[40%] before:z-0 before:opacity-65 before:blur-[40px] before:saturate-[1.2] before:transition-opacity before:duration-500 group-hover:before:opacity-100 group-focus-within:before:opacity-100 before:bg-[conic-gradient(from_var(--tch21-angle,0deg),#ff4d6d,#ffa64d,#ffe14d,#4dffa6,#4dd2ff,#b04dff,#ff4d6d)] before:animate-tch21-spin before:[animation-play-state:paused] group-hover:before:[animation-play-state:running] motion-reduce:before:animate-none
    after:content-[''] after:absolute after:inset-0.5 after:z-1 after:rounded-[22px] after:bg-[linear-gradient(160deg,#15151e,#0c0c12)]">
    <div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between text-tch21-ink">
      <span class="font-tch21-mono text-[0.72rem] tracking-[0.2em] text-tch21-mut">AI · CREATIVE SUITE</span>
      <h2 class="font-bold text-[2.6rem] leading-none bg-[linear-gradient(120deg,#ff8aa0,#ffd24d,#6ad6ff)] bg-clip-text text-transparent">Spectra<br>Studio</h2>
      <p class="font-light text-[0.88rem] leading-[1.6] text-tch21-body">Generate, remix, and color-grade in one canvas. The aura rotates while the engine warms up.</p>
      <a href="#" class="inline-flex items-center min-h-11 font-tch21-mono text-[0.78rem] tracking-[0.1em] text-tch21-acc no-underline rounded transition-colors duration-200 hover:text-white focus-visible:outline-2 focus-visible:outline-tch21-acc focus-visible:outline-offset-2">→ START FREE TRIAL</a>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@property --tch21-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch21-spin {
  to {
    --tch21-angle: 360deg;
  }
}

@theme {
  --color-tch21-bg: #0a0a0f;
  --color-tch21-bg: oklch(0.11 0.006 285);
  --color-tch21-card: #111118;
  --color-tch21-card: oklch(0.15 0.008 285);
  --color-tch21-ink: #f2f2f7;
  --color-tch21-ink: oklch(0.96 0.003 285);
  --color-tch21-body: #a6a6bc;
  --color-tch21-body: oklch(0.72 0.02 285);
  --color-tch21-mut: #9a9ab0;
  --color-tch21-mut: oklch(0.67 0.02 285);
  --color-tch21-acc: #ffd24d;
  --color-tch21-acc: oklch(0.88 0.15 88);
  --font-tch21-sans: 'Outfit', system-ui, sans-serif;
  --font-tch21-mono: 'Azeret Mono', ui-monospace, monospace;
  --animate-tch21-spin: tch21-spin 6s linear infinite;
}

.tch-21 {
  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 Rotating Conic Aura Card with Blurred Gradient Bloom
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-rotating-conic-aura-card/

A creative-suite card sitting inside a heavily blurred conic gradient that rotates behind an inset inner panel, so the card wears a live rainbow aura. Same @property machinery as demo 08, but the gradient is oversized and blurred rather than masked &mdash; a softer, cheaper ring.
## HTML
```html
<section class="tch-21 w-full min-h-svh grid place-items-center bg-tch21-bg font-tch21-sans p-8">
  <article class="group relative w-[330px] h-[430px] rounded-3xl overflow-hidden isolate cursor-pointer bg-tch21-card
    before:content-[''] before:absolute before:-inset-[40%] before:z-0 before:opacity-65 before:blur-[40px] before:saturate-[1.2] before:transition-opacity before:duration-500 group-hover:before:opacity-100 group-focus-within:before:opacity-100 before:bg-[conic-gradient(from_var(--tch21-angle,0deg),#ff4d6d,#ffa64d,#ffe14d,#4dffa6,#4dd2ff,#b04dff,#ff4d6d)] before:animate-tch21-spin before:[animation-play-state:paused] group-hover:before:[animation-play-state:running] motion-reduce:before:animate-none
    after:content-[''] after:absolute after:inset-0.5 after:z-1 after:rounded-[22px] after:bg-[linear-gradient(160deg,#15151e,#0c0c12)]">
    <div class="relative z-2 h-full p-[2.4rem] flex flex-col justify-between text-tch21-ink">
      <span class="font-tch21-mono text-[0.72rem] tracking-[0.2em] text-tch21-mut">AI · CREATIVE SUITE</span>
      <h2 class="font-bold text-[2.6rem] leading-none bg-[linear-gradient(120deg,#ff8aa0,#ffd24d,#6ad6ff)] bg-clip-text text-transparent">Spectra<br>Studio</h2>
      <p class="font-light text-[0.88rem] leading-[1.6] text-tch21-body">Generate, remix, and color-grade in one canvas. The aura rotates while the engine warms up.</p>
      <a href="#" class="inline-flex items-center min-h-11 font-tch21-mono text-[0.78rem] tracking-[0.1em] text-tch21-acc no-underline rounded transition-colors duration-200 hover:text-white focus-visible:outline-2 focus-visible:outline-tch21-acc focus-visible:outline-offset-2">→ START FREE TRIAL</a>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@property --tch21-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tch21-spin {
  to {
    --tch21-angle: 360deg;
  }
}

@theme {
  --color-tch21-bg: #0a0a0f;
  --color-tch21-bg: oklch(0.11 0.006 285);
  --color-tch21-card: #111118;
  --color-tch21-card: oklch(0.15 0.008 285);
  --color-tch21-ink: #f2f2f7;
  --color-tch21-ink: oklch(0.96 0.003 285);
  --color-tch21-body: #a6a6bc;
  --color-tch21-body: oklch(0.72 0.02 285);
  --color-tch21-mut: #9a9ab0;
  --color-tch21-mut: oklch(0.67 0.02 285);
  --color-tch21-acc: #ffd24d;
  --color-tch21-acc: oklch(0.88 0.15 88);
  --font-tch21-sans: 'Outfit', system-ui, sans-serif;
  --font-tch21-mono: 'Azeret Mono', ui-monospace, monospace;
  --animate-tch21-spin: tch21-spin 6s linear infinite;
}

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

How this works

The aura is a blur, not a mask. A conic gradient inset by -40% (so it overhangs the card on all sides), blurred 40px, sitting at 0.65 opacity at rest. An inner panel at inset-0.5 covers the middle, leaving only the bloom visible around the edge. Compared to demo 08's mask-composite ring this is fuzzier and far more forgiving — no mask support required.

Rotation needs @property again. --tch21-angle is registered as an <angle> so the conic's from value can tween; the keyframe drives it 0→360deg over six seconds.

Paused, not conditional. The animation is attached at rest with [animation-play-state:paused], so hover resumes rather than restarts it — the aura picks up where it left off.

Make it yours

Aura softness: the blur-[40px] value. 20px gives a defined ring, 60px a diffuse halo.
Ring thickness is the inner panel's inset — inset-0.5 is a hairline, inset-1.5 a band.
Speed: the duration inside --animate-tch21-spin. 6s is a slow warm-up glow.

Gotchas — read before shipping

isolate matters: without its own stacking context, a blurred oversized child can paint over neighbouring cards in a grid.
A 40px blur over an overhanging layer is the most expensive paint in this demo — do not put twelve of these above the fold.
@property is required for the rotation; without it the aura still renders, just static.
motion-reduce: stops the spin and leaves the aura at its resting angle, which is still a handsome card.

Browser support

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

@property gates the rotation (Chrome 85, Safari 16.4, Firefox 128) and Tailwind v4 requires it anyway; older browsers show a static aura.

Techniques used in this demo

Utilitiesfirst-class utility or variant

conic-gradient()tw ↗background-clip: texttw ↗prefers-reduced-motiontw ↗

Plain CSSno Tailwind surface

@propertytw ↗@keyframestw ↗