WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Tarjeta CSS brillante
1,997
lebdev
Abrir en el editor
Publica tu código
2
Recomendado
7 November 2024
CSS Aurora
14 May 2025
Formulario de inicio de sesión de degradado HTML CSS
4 November 2024
Plantilla de barra de navegación 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) */
