BrunoP.Blog
Guide 7 min read 503

Ready-to-copy CSS effects: glow, border-beam, animated gradient, scramble text and more

A live gallery of CSS effects you click, see running and copy the code — no mandatory framework. Glow, border-beam, animated gradient, hover shine, scramble text and aurora. Each one is a div and a handful of lines.

"Which CSS framework should I use?" is one of the most common questions I get. The honest answer is it depends — and it's rarely a holy war. A quick rundown of when each makes sense:

  • Tailwind CSS — utilities in the HTML. You move very fast and keep consistency without fighting class names. It's what I use here on bpso. Cost: the HTML gets "verbose".
  • Bootstrap — ready-made components (grid, modal, navbar). Great for internal dashboards, MVPs and legacy; the price is everything looking like a "Bootstrap site" if you don't customize.
  • Bulma — light, modern and JS-free. A good middle ground when you want components without bringing JavaScript along.
  • Plain CSS + Open Props — full control with variables (design tokens) and no framework. More work, maximum identity. For a brand site, I usually go here or Tailwind.

But picking the framework is just the start. What gives an interface soul is the details — the effects. Below are 6 I actually use, ready to copy and paste (they work in any framework, it's plain CSS). Each has a live demo and a "Copy" button. Use sparingly — and always respect 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