33 CSS Card Hover Effects08 / 33

Pure CSSMIT licensed

Gradient Border Draw

A dark edge-compute product card where a multi-color conic gradient traces a live circuit around the border on hover, powered by the modern @property animated angle. Great for tech, SaaS, or developer-tool cards that want a premium "powered-on" signal without distracting from the content.

Published Updated

Live Demo
Try it

The code

<div class="card-08">
  <article class="card-08__card">
    <div class="card-08__inner">
      <span class="card-08__eyebrow">/ Edge Compute</span>
      <h2 class="card-08__title">Halo<br>Runtime</h2>
      <p class="card-08__desc">A serverless mesh that traces a live circuit around every active deployment region.</p>
      <div class="card-08__meta">
        <span>v3.2.0</span>
        <span>99.99% SLA</span>
      </div>
    </div>
  </article>
</div>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=DM+Mono:wght@400;500&display=swap');

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

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

.card-08 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #07080d;
  font-family: 'DM Mono', monospace;
  padding: 2rem;
}

.card-08__card {
  --card-08-b: 2px;
  position: relative;
  width: 340px;
  height: 420px;
  border-radius: 20px;
  background: #0d0f17;
  cursor: pointer;
  isolation: isolate;
}

.card-08__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--card-08-b);
  background: conic-gradient(
      from var(--card-08-angle, 0deg),
      transparent 0deg,
      transparent 70deg,
      #00f0ff 130deg,
      #7b5cff 200deg,
      #ff4dd8 250deg,
      transparent 320deg,
      transparent 360deg
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: card-08-spin 4s linear infinite paused;
}

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

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

.card-08__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--card-08-b) solid rgba(255,255,255,0.06);
  pointer-events: none;
}

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

.card-08__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6f7488;
}

.card-08__title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1.05;
  background: linear-gradient(90deg, #00f0ff, #7b5cff, #ff4dd8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-08__desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #9499ab;
}

.card-08__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #6f7488;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-08__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 Border Draw
Source: https://codefronts.com/motion/css-card-hover-effects/gradient-border-draw/

A dark edge-compute product card where a multi-color conic gradient traces a live circuit around the border on hover, powered by the modern @property animated angle. Great for tech, SaaS, or developer-tool cards that want a premium "powered-on" signal without distracting from the content.
## HTML
```html
<div class="card-08">
  <article class="card-08__card">
    <div class="card-08__inner">
      <span class="card-08__eyebrow">/ Edge Compute</span>
      <h2 class="card-08__title">Halo<br>Runtime</h2>
      <p class="card-08__desc">A serverless mesh that traces a live circuit around every active deployment region.</p>
      <div class="card-08__meta">
        <span>v3.2.0</span>
        <span>99.99% SLA</span>
      </div>
    </div>
  </article>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=DM+Mono:wght@400;500&display=swap');

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

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

.card-08 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #07080d;
  font-family: 'DM Mono', monospace;
  padding: 2rem;
}

.card-08__card {
  --card-08-b: 2px;
  position: relative;
  width: 340px;
  height: 420px;
  border-radius: 20px;
  background: #0d0f17;
  cursor: pointer;
  isolation: isolate;
}

.card-08__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--card-08-b);
  background: conic-gradient(
      from var(--card-08-angle, 0deg),
      transparent 0deg,
      transparent 70deg,
      #00f0ff 130deg,
      #7b5cff 200deg,
      #ff4dd8 250deg,
      transparent 320deg,
      transparent 360deg
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: card-08-spin 4s linear infinite paused;
}

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

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

.card-08__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--card-08-b) solid rgba(255,255,255,0.06);
  pointer-events: none;
}

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

.card-08__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6f7488;
}

.card-08__title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1.05;
  background: linear-gradient(90deg, #00f0ff, #7b5cff, #ff4dd8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-08__desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #9499ab;
}

.card-08__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #6f7488;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1rem;
}

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

How this works

A pseudo-element positioned absolutely around the card's border draws a conic-gradient ring. At rest, the ring is invisible (or dimmed via low opacity). On :hover, an animated @property-defined angle drives the conic-gradient's rotation, and the ring's opacity ramps up.

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; } is what makes the angle animatable — without @property, the browser treats gradient angles as strings and refuses to interpolate.

The border sits behind the card face via a lower z-index, extending a few pixels beyond the card's edges. That extension is what creates the visible ring — clip via border-radius matched to the card.

Make it yours

  • Rebrand the ring's gradient stops from --ring-a, --ring-b, --ring-c on .card-08.
  • Change ring thickness by adjusting the pseudo-element's inset offset (e.g. inset: -3px for a thick ring, -1px for a hairline).
  • Tune rotation speed via the animation duration — 4s for calm sweep, 1.5s for energetic.
  • Change gradient type from conic to linear for a stripe sweep across one edge, or radial for a spotlight ring.
  • Add a matching inner glow via filter: blur(6px) on a duplicate pseudo-element behind the first for a neon-bloom variant.

Gotchas — read before shipping

  • @property is required for angle animation — Firefox 128+ (July 2024), Chrome 85+, Safari 16.4+. Older browsers show the ring at its initial angle without rotation.
  • The conic-gradient border technique needs overflow: hidden on the card to clip the extended pseudo-element cleanly.
  • The animation runs continuously on hover — pair with @media (prefers-reduced-motion: reduce) { animation: none } so vestibular users see a static ring at rest.
  • Test on mobile Safari — deep-composited conic-gradients can drop framerate on older iPhones.
  • Keep the ring's contrast against the card face high enough to remain visible without triggering vibration — three-stop gradients (light, dark, accent) read cleaner than two-stop rainbows.

Browser support

ChromeSafariFirefoxEdge
85+16.4+128+85+

The animatable-angle technique requires @property — Chrome 85, Safari 16.4, Firefox 128. In older browsers the border ring shows at its initial angle without rotation, so the demo degrades gracefully.

Techniques used in this demo

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

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →