BrunoP.Blog
Guía 7 min de lectura 501

Efectos CSS listos para copiar: glow, border-beam, gradiente animado, texto scramble y más

Una galería viva de efectos CSS que haces clic, ves funcionando y copias el código — sin framework obligatorio. Glow, border-beam, gradiente animado, brillo en hover, texto scramble y aurora. Cada uno es un div y un puñado de líneas.

"¿Qué framework CSS uso?" es una de las preguntas que más llegan. La respuesta honesta es depende — y casi nunca es una guerra santa. Un resumen rápido de cuándo tiene sentido cada uno:

  • Tailwind CSS — utilidades en el HTML. Vas muy rápido y mantenés consistencia sin pelear con nombres de clase. Es lo que uso aquí en bpso. Costo: el HTML queda "verboso".
  • Bootstrap — componentes listos (grid, modal, navbar). Ideal para paneles internos, MVP y legado; el precio es que todo parezca "sitio Bootstrap" si no lo personalizás.
  • Bulma — liviano, moderno y sin JS. Buen punto medio cuando querés componentes sin traer JavaScript.
  • CSS puro + Open Props — control total con variables (design tokens) y sin framework. Más trabajo, máxima identidad. Para un sitio de marca, suelo ir por aquí o por Tailwind.

Pero elegir el framework es solo el comienzo. Lo que le da alma a una interfaz son los detalles — los efectos. Abajo dejé 6 que uso de verdad, listos para copiar y pegar (funcionan en cualquier framework, es CSS puro). Cada uno tiene demo en vivo y el botón "Copiar". Usá con moderación — y respetando siempre prefers-reduced-motion.

Glow

1 · Glow / neon

.glow {
  color: #fff;
  text-shadow:
    0 0 8px  #8b5cf6,
    0 0 22px #8b5cf6,
    0 0 44px rgba(139,92,246,.6);
}
CTA com border-beam

2 · Border-beam (o do CTA)

@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { position: relative; border-radius: 12px; isolation: isolate; }
.beam::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--beam), transparent 0 70%, #38bdf8 85%, #818cf8 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 4s linear infinite;
}
@keyframes beam-spin { to { --beam: 360deg; } }
Gradiente

3 · Texto com gradiente animado

.grad-text {
  background: linear-gradient(90deg,#8b5cf6,#ec4899,#38bdf8,#8b5cf6);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad 6s linear infinite;
}
@keyframes grad { to { background-position: 300% 0; } }
Passe o mouse

4 · Shine (brilho varrendo no hover)

.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
}
.shine:hover::after { transition: transform .8s ease; transform: translateX(130%); }
bpso.com.br

5 · Scramble / decode (texto)

function scramble(el, text, speed = 38) {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ0123456789!<>-_/*';
  let frame = 0;
  const id = setInterval(() => {
    el.textContent = text.split('').map((c, i) =>
      i < frame / 2 ? c : chars[Math.floor(Math.random() * chars.length)]
    ).join('');
    if (frame / 2 >= text.length) clearInterval(id);
    frame++;
  }, speed);
}
// scramble(el, 'bpso.com.br');

6 · Aurora (fundo gradiente animado)

.aurora {
  background: linear-gradient(125deg,#1e1b4b,#4c1d95,#1e3a8a,#1e1b4b);
  background-size: 300% 300%;
  animation: aurora 12s ease infinite;
}
@keyframes aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Ver esses efeitos em ação nos projetos