WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effet de lueur de carte CSS
710
kevekıbhack
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
10 February 2025
informations sur la carte
15 June 2025
Police de caractères dansante
15 May 2025
Modèle de site Web de commerce électronique HTML CSS
HTML
Copy
<div class="card">Card Glow</div>
CSS
Copy
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .card { overflow: hidden; position: relative; width: min(12.5em, 80vmin); aspect-ratio: 1; border-radius: 0.5em; place-self: center; place-content: center; padding: 0.5em; color: #ededed; font: clamp(1em, 2vw + 2vh, 2em) sans-serif; text-align: center; text-transform: uppercase; text-wrap: balance; } .card::before { position: absolute; z-index: -1; inset: -1em; border: solid 1.25em; border-image: conic-gradient(from var(--a), #7997e8, #f6d3ff) 1; filter: blur(0.75em); animation: a 4s linear infinite; content: ""; } @keyframes a { to { --a: 1turn ; } } html, body, div { display: grid; } html { min-height: 100%; } body { background-color: black; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
