33 CSS Card Hover Effects
31 / 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

Prismatic Sweep

An optics/art card where a soft rainbow light bar sweeps diagonally across the surface in screen blend mode, like light refracting through glass. Ideal for art installations, science, premium tech, and visually rich landing cards.

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-31">
  <article class="card-31__card">
    <div class="card-31__sweep"></div>
    <div class="card-31__lines"></div>
    <div class="card-31__inner">
      <span class="card-31__eyebrow">Optics Lab</span>
      <h2 class="card-31__title">Refraction<br>No. 9</h2>
      <p class="card-31__desc">A coated-glass installation. Light enters white and leaves as a spectrum sweeping the wall.</p>
      <div class="card-31__meta">
        <span><b>540nm</b>peak</span>
        <span><b>1.52</b>index</span>
      </div>
    </div>
  </article>
</div>
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&family=Geist+Mono:wght@400;500&display=swap');

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

.card-31 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #06060c;
  font-family: 'Sora', sans-serif;
  padding: 2rem;
}

.card-31__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(160deg, #14141f, #0a0a12);
  border: 1px solid rgba(255,255,255,0.07);
}

.card-31__sweep {
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  z-index: 1;
  transform: rotate(22deg);
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255,0,128,0.5),
      rgba(255,200,0,0.5),
      rgba(0,255,170,0.5),
      rgba(0,170,255,0.5),
      rgba(180,80,255,0.5),
      transparent
    );
  filter: blur(8px);
  mix-blend-mode: screen;
  transition: left 0.7s cubic-bezier(0.4,0,0.2,1);
}

.card-31__card:hover .card-31__sweep {
  left: 160%;
}

.card-31__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
      115deg,
      transparent 0 40px,
      rgba(255,255,255,0.015) 40px 41px
    );
}

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

.card-31__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8b8fa6;
}

.card-31__title {
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
}

.card-31__desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #a3a7bd;
}

.card-31__meta {
  display: flex;
  gap: 1.4rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.74rem;
  color: #7c8197;
}

.card-31__meta span b {
  display: block;
  color: #eef0f7;
  font-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-31__sweep {
    transition: 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: Prismatic Sweep
Source: https://codefronts.com/motion/css-card-hover-effects/prismatic-sweep/

An optics/art card where a soft rainbow light bar sweeps diagonally across the surface in screen blend mode, like light refracting through glass. Ideal for art installations, science, premium tech, and visually rich landing cards.
## HTML
```html
<div class="card-31">
  <article class="card-31__card">
    <div class="card-31__sweep"></div>
    <div class="card-31__lines"></div>
    <div class="card-31__inner">
      <span class="card-31__eyebrow">Optics Lab</span>
      <h2 class="card-31__title">Refraction<br>No. 9</h2>
      <p class="card-31__desc">A coated-glass installation. Light enters white and leaves as a spectrum sweeping the wall.</p>
      <div class="card-31__meta">
        <span><b>540nm</b>peak</span>
        <span><b>1.52</b>index</span>
      </div>
    </div>
  </article>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&family=Geist+Mono:wght@400;500&display=swap');

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

.card-31 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #06060c;
  font-family: 'Sora', sans-serif;
  padding: 2rem;
}

.card-31__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(160deg, #14141f, #0a0a12);
  border: 1px solid rgba(255,255,255,0.07);
}

.card-31__sweep {
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  z-index: 1;
  transform: rotate(22deg);
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255,0,128,0.5),
      rgba(255,200,0,0.5),
      rgba(0,255,170,0.5),
      rgba(0,170,255,0.5),
      rgba(180,80,255,0.5),
      transparent
    );
  filter: blur(8px);
  mix-blend-mode: screen;
  transition: left 0.7s cubic-bezier(0.4,0,0.2,1);
}

.card-31__card:hover .card-31__sweep {
  left: 160%;
}

.card-31__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
      115deg,
      transparent 0 40px,
      rgba(255,255,255,0.015) 40px 41px
    );
}

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

.card-31__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8b8fa6;
}

.card-31__title {
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
}

.card-31__desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #a3a7bd;
}

.card-31__meta {
  display: flex;
  gap: 1.4rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.74rem;
  color: #7c8197;
}

.card-31__meta span b {
  display: block;
  color: #eef0f7;
  font-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-31__sweep {
    transition: none !important;
  }
}
```

How this works

The card gets a pseudo-element overlay whose background is a conic-gradient of prismatic hues — rainbow interpolation across the full 360deg. At rest opacity is zero.

On :hover, the overlay fades in and a @property-defined angle rotates the gradient, sweeping the prismatic colour across the card face like a light passing through a prism.

mix-blend-mode: overlay keeps underlying content readable — the prismatic sweep tints without washing out.

Make it yours

  • Rebrand the prismatic stops from --prism-a through --prism-e — sunset palette gives warm variants, cool palette gives moonlit ones.
  • Change sweep speed via @property --angle animation duration — 3s for calm, 800ms for energetic.
  • Tune peak overlay opacity — 0.3 subtle, 0.6 pronounced, above 0.7 can wash out text.
  • Add a matching bloom filter (filter: blur(20px) brightness(1.3)) on a duplicate pseudo-element for a &ldquo;light through a haze&rdquo; variant.
  • Change blend mode — screen for lightness, overlay for balanced, multiply for saturation punch.

Gotchas — read before shipping

  • @property is required for the conic-gradient angle animation — Chrome 85+, Safari 16.4+, Firefox 128+.
  • Continuous rotation must respect prefers-reduced-motion.
  • mix-blend-mode requires the parent to have an explicit background.
  • The overlay must have pointer-events: none.
  • Test the prismatic sweep against a dark card — light hues can wash out title text; add a text-shadow to preserve contrast.

Browser support

ChromeSafariFirefoxEdge
85+16.4+128+85+

@property for angle animation is the gating requirement. In older browsers the overlay appears at its initial angle without rotation.

Techniques used in this demo

mix-blend-modeMDN ↗filterMDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →