Border Spin

Bordure conic-gradient rotative revelee au hover. Effet premium sur les cards.

hoverCSSgradientcardglow

Trigger: Hover

CSS requis: Oui

Difficulte: easy

Preview live

Code

<div className="group">
  <div className="relative rounded-[14px] p-[2px] animate-border-spin"
    style={{ background: "conic-gradient(from var(--border-angle), transparent 30%, #888 50%, #E1FF6C 70%, transparent 90%)" }}>
    {/* Masque au repos */}
    <div className="absolute inset-0 rounded-[14px] bg-white transition-opacity group-hover:opacity-0" />
    {/* Contenu */}
    <div className="relative rounded-[13px] bg-white p-6">...</div>
  </div>
</div>

CSS requis

@property --border-angle {
  syntax: "<angle>"; initial-value: 0deg; inherits: false;
}
@keyframes border-spin { to { --border-angle: 360deg; } }
.animate-border-spin { animation: border-spin 2s linear infinite; }

Instructions

Le conic-gradient tourne via @property --border-angle. Le masque blanc cache l'effet au repos et disparait au hover du group. Ajustez les couleurs du gradient et la vitesse (2s).