Generador de efecto de brillo CSS
Crea una animación de brillo diagonal para tarjetas y botones
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta permite ajustar el ángulo, la velocidad, la opacidad y el color con controles deslizantes para diseñar un efecto de brillo diagonal en tarjetas o botones, viéndolo en vivo antes de copiar el CSS final. Resulta útil para diseñadores y desarrolladores front-end que buscan elementos de interfaz con aspecto premium, y todo el proceso ocurre en el navegador sin enviar datos a ningún servidor.
Cómo usar
- Ajusta el ángulo, la duración, la opacidad y el color del brillo con los controles deslizantes y el selector de color.
- Observa la tarjeta de vista previa para ver el brillo desplazarse en diagonal en tiempo real.
- Activa o desactiva la animación continua y usa el botón Reproducir para verla de nuevo.
- Copia el CSS generado y pégalo en el pseudoelemento ::after de tu elemento.
Preguntas frecuentes
- ¿Puedo aplicar este CSS a cualquier elemento?
- El elemento debe tener position: relative y overflow: hidden para que el degradado de brillo quede recortado dentro de sus límites.
- ¿Puedo hacer que el brillo aparezca solo al pasar el cursor?
- Sí, al desmarcar 'Animar continuamente' el CSS generado activa el brillo solo con hover en lugar de en bucle.
- ¿Puedo usar velocidades distintas en varias tarjetas?
- Sí, asigna una clase distinta a cada tarjeta y genera aquí el CSS de cada una con una duración diferente.