WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efecto de brillo de tarjeta CSS
881
kevekıbhack
Abrir en el editor
Video
Publica tu código
0
Recomendado
15 May 2025
Botones de neón
22 August 2025
Fragmento de código de animación de corazón CSS
22 August 2025
Servicios de Diseño Web, Marketing Digital y Vídeo
HTML
Copy
Card Glow
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) */