Border Beam

Faisceau lumineux qui parcourt la bordure d'une card en boucle. Conic-gradient anime.

autoCSScardglowpremium

Trigger: Automatique (boucle)

CSS requis: Non

Difficulte: medium

Preview live

Code

/* Border Beam — faisceau lumineux sur la bordure */

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

@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}

<div style={{
  padding: "2px",
  borderRadius: "16px",
  background: `conic-gradient(from var(--beam-angle), transparent 60%, #E1FF6C 75%, transparent 90%)`,
  animation: "beam-rotate 3s linear infinite",
}}>
  <div style={{ borderRadius: "14px", background: "#0d0d0d", padding: "24px" }}>
    Contenu de la card
  </div>
</div>

CSS requis

@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}

Instructions

Meme technique que border-spin mais avec un faisceau plus etroit (60%-90% transparent). Le @property CSS permet d'animer l'angle du conic-gradient. Le div interne masque le centre.