Generador de efecto brillo (shine) en CSS
Crea un destello CSS que recorre tus tarjetas en diagonal
Herramienta para diseñar ese efecto de brillo (shine) que atraviesa una tarjeta o un botón: ajústalo con deslizadores, compruébalo en la vista previa y copia el CSS ya terminado. Resulta muy útil para diseñadores y desarrolladores front-end que quieren tarjetas con aire premium o botones destacados. Todo el cálculo se hace al instante dentro del navegador, sin enviar datos a ningún servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Ajusta los deslizadores de ángulo, velocidad, nitidez e intensidad y el selector de color de la luz hasta lograr el efecto que buscas.
- Observa en la tarjeta de vista previa cómo el destello recorre la diagonal en tiempo real.
- Activa o desactiva la animación continua y, si lo necesitas, vuelve a verla con el botón de reproducción.
- Copia el CSS resultante con el botón de copiar y pégalo en el elemento que quieras (::after).
Preguntas frecuentes
- ¿Puedo aplicar el CSS generado a cualquier elemento?
- El elemento al que lo apliques necesita position: relative y overflow: hidden para que el degradado del destello se vea solo dentro de la tarjeta.
- ¿Se puede hacer que brille solo al pasar el ratón?
- Sí. Si desmarcas la opción de animación continua, el CSS pasa a mostrar el destello únicamente en el hover.
- ¿Puedo aplicarlo a varias tarjetas con velocidades distintas?
- Sí. Dale una clase distinta a cada tarjeta y genera un CSS para cada una cambiando aquí los valores de velocidad y ángulo.