33 CSS Card Hover Effects
21 / 33

All 33 in 33 CSS Card Hover Effects

  1. 013D Tilt & Parallax Card Effects
  2. 02Glowing Gradient & Glassmorphic Borders
  3. 03Image Zoom with Content Reveal / Slide-Up
  4. 043D Flip Cards (Front to Back)
  5. 05Parent Blur / Sibling De-emphasis (Focus States)
  6. 06Minimalist Elevation & Dynamic Shadows
  7. 07Elastic Lift
  8. 08Gradient Border Draw
  9. 09Stacked Reveal
  10. 10Holographic Shimmer
  11. 11Curtain Reveal
  12. 12Corner Peel
  13. 13Neon Sign
  14. 14Scanline
  15. 15Depth Parallax
  16. 16Spotlight
  17. 173D Tilt
  18. 18Slide Up Content
  19. 19Flip Card
  20. 20Glitch Card
  21. 21Gradient Rotate
  22. 22Border Morph
  23. 23Magnetic Float
  24. 24Typewriter Reveal
  25. 25Overlay Slide
  26. 26Grain Texture
  27. 27Frosted Glass Intensify
  28. 28Blueprint Reveal
  29. 29Shockwave
  30. 30Color Burn
  31. 31Prismatic Sweep
  32. 32Book Open
  33. 33Aurora
Pure CSSMIT licensed

Gradient Rotate

A creative-suite card framed by a blurred conic gradient that rotates behind a masked inner panel, leaving a glowing animated ring. Great for AI tools, creative apps, and SaaS landing cards needing an energetic, "alive" aura.

Live Demo
Plain CSSTailwind v4
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="card-21">
  <article class="card-21__card">
    <div class="card-21__inner">
      <span class="card-21__eyebrow">AI · CREATIVE SUITE</span>
      <h2 class="card-21__title">Spectra<br>Studio</h2>
      <p class="card-21__desc">Generate, remix, and color-grade in one canvas. The aura rotates while the engine warms up.</p>
      <span class="card-21__cta">→ START FREE TRIAL</span>
    </div>
  </article>
</div>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&family=Azeret+Mono:wght@400;500&display=swap');

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

.card-21,
.card-21 *,
.card-21 *::before,
.card-21 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card-21 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0a0a0f;
  font-family: 'Outfit', sans-serif;
  padding: 2rem;
}

.card-21__card {
  position: relative;
  width: 330px;
  height: 430px;
  border-radius: 24px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background: #111118;
}

.card-21__card::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: conic-gradient(
      from var(--card-21-gr),
      #ff4d6d, #ffa64d, #ffe14d, #4dffa6, #4dd2ff, #b04dff, #ff4d6d
    );
  filter: blur(40px) saturate(1.2);
  opacity: 0.65;
  transition: opacity 0.5s ease;
  animation: card-21-spin 6s linear infinite paused;
}

@keyframes card-21-spin {
  to {
    --card-21-gr: 360deg;
  }
}

.card-21__card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.card-21__card::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 22px;
  background: linear-gradient(160deg, #15151e, #0c0c12);
}

.card-21__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f2f2f7;
}

.card-21__eyebrow {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #9a9ab0;
}

.card-21__title {
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  background: linear-gradient(120deg, #ff8aa0, #ffd24d, #6ad6ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-21__desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a6a6bc;
  font-weight: 300;
}

.card-21__cta {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: #ffd24d;
}

@media (prefers-reduced-motion: reduce) {
  .card-21__card::before {
    animation: none !important;
  }
}
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 Card Hover Effect 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: Gradient Rotate
Source: https://codefronts.com/motion/css-card-hover-effects/gradient-rotate/

A creative-suite card framed by a blurred conic gradient that rotates behind a masked inner panel, leaving a glowing animated ring. Great for AI tools, creative apps, and SaaS landing cards needing an energetic, "alive" aura.
## HTML
```html
<div class="card-21">
  <article class="card-21__card">
    <div class="card-21__inner">
      <span class="card-21__eyebrow">AI · CREATIVE SUITE</span>
      <h2 class="card-21__title">Spectra<br>Studio</h2>
      <p class="card-21__desc">Generate, remix, and color-grade in one canvas. The aura rotates while the engine warms up.</p>
      <span class="card-21__cta">→ START FREE TRIAL</span>
    </div>
  </article>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&family=Azeret+Mono:wght@400;500&display=swap');

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

.card-21,
.card-21 *,
.card-21 *::before,
.card-21 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card-21 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0a0a0f;
  font-family: 'Outfit', sans-serif;
  padding: 2rem;
}

.card-21__card {
  position: relative;
  width: 330px;
  height: 430px;
  border-radius: 24px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background: #111118;
}

.card-21__card::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: conic-gradient(
      from var(--card-21-gr),
      #ff4d6d, #ffa64d, #ffe14d, #4dffa6, #4dd2ff, #b04dff, #ff4d6d
    );
  filter: blur(40px) saturate(1.2);
  opacity: 0.65;
  transition: opacity 0.5s ease;
  animation: card-21-spin 6s linear infinite paused;
}

@keyframes card-21-spin {
  to {
    --card-21-gr: 360deg;
  }
}

.card-21__card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.card-21__card::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 22px;
  background: linear-gradient(160deg, #15151e, #0c0c12);
}

.card-21__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f2f2f7;
}

.card-21__eyebrow {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #9a9ab0;
}

.card-21__title {
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  background: linear-gradient(120deg, #ff8aa0, #ffd24d, #6ad6ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-21__desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a6a6bc;
  font-weight: 300;
}

.card-21__cta {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: #ffd24d;
}

@media (prefers-reduced-motion: reduce) {
  .card-21__card::before {
    animation: none !important;
  }
}
```

How this works

A pseudo-element wraps the card's border with a linear-gradient painted as a stripe. An @property-defined angle rotates the stripe around the card via background.

Different from Demo 08 (which uses a conic-gradient ring), this variant animates a solid stripe of colour that sweeps around the card edge — one bright band chasing the perimeter.

The mask trick clips the gradient to only the border area so the sweep reads as a chase around the frame, not a fill across the card face.

Make it yours

  • Rebrand the stripe colour from --stripe on .card-21.
  • Tune stripe width by adjusting the gradient stops (e.g. linear-gradient(90deg, transparent 40%, var(--stripe) 50%, transparent 60%) for a narrow band).
  • Change rotation direction by reversing the animation's angle values.
  • Tune sweep speed via the @property --angle animation duration — 2s for calm chase, 800ms for energetic.
  • Layer two stripes with different colours and offset angles for a duplicate chase effect.

Gotchas — read before shipping

  • @property is required for animatable angle — Chrome 85+, Safari 16.4+, Firefox 128+. Older browsers show the stripe at its initial angle.
  • The card MUST have overflow: hidden to clip the pseudo-element extending beyond the border.
  • Continuous rotation must respect prefers-reduced-motion.
  • Test on mobile Safari — deep-composited linear-gradient rotations can drop framerate.
  • Keep the stripe's contrast against the card face high so the chase reads clearly.

Browser support

ChromeSafariFirefoxEdge
85+16.4+128+85+

Animatable gradient angles need @property. Falls back gracefully in older browsers — the stripe appears static.

Techniques used in this demo

background-clip: textMDN ↗@propertyMDN ↗conic-gradient()MDN ↗filterMDN ↗@keyframesMDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →