📛 Nombre en la Industria: Conic Gradient Border / Rotating Glow Card / Neon Border Animation
🎯 El Concepto
Este efecto crea la ilusión de energía pura rotando alrededor de una tarjeta. A diferencia de los bordes tradicionales, aquí utilizamos un gradiente cónico giratorio en el fondo y una “tapa” interna (inset) que oculta el centro, dejando pasar la luz solo por los bordes.
⚡ Demo en Vivo
Aquí tienes las 3 variantes: Cyan, Solar y Neon Night. Pasa el mouse sobre ellas para acelerar la rotación.
🛠️ La Ingeniería Detrás
El truco principal aquí es el uso de la propiedad CSS inset.
1. El Fondo Giratorio
Creamos pseudo-elementos (::before y ::after) que son el doble de grandes que la tarjeta. Les aplicamos un conic-gradient que tiene una gran parte transparente y solo una sección de color. Al rotar, parece un “cometa” girando.
2. La Técnica “Inset”
En lugar de usar border, colocamos un div hijo (.card-content) sobre el fondo giratorio. Usando inset: 3px, le decimos que se “encoja” 3 píxeles desde todos los bordes. Como este div tiene fondo negro, tapa el centro de la rotación y solo deja ver esos 3 píxeles del borde.
.card-content {
position: absolute;
/* Esto define el grosor del borde */
inset: 3px;
background: #1a1a1a; /* Color que tapa el centro */
z-index: 10;
}
