post #5628

[Vídeo] Efeito Contorno Brilho Animado com CSS

Publicado em: 02/09/2024 / Atualizado em: 10/09/2024

Categorias: Blog CSS

Neste post vou mostrar como você pode criar um efeito de brilho em movimento usando apenas o CSS para isso. Basta apenas adicionar o CSS customizado em sua página, e depois adicionar a CLASS shadow no elemento que você deseja personalizar.

Segue abaixo código CSS customizado para adicionar na página:

<style>
  :root {
    --gradient-shadow: linear-gradient( 45deg, #fb0094, #0000ff, #da00ff, #ffaf00, #ac5900, #fb0094, #0000ff, #da00ff, #ffaf00, #ac5900 );
  }

  .shadow:before, .shadow:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    background: var(--gradient-shadow);
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    animation: animate 20s linear infinite;
  }

  .shadow:after {
    filter: blur(20px);
  }

  @keyframes animate {
    0% {
      background-position: 0 0;
    }

    50% {
      background-position: 300% 0;
    }

    100% {
      background-position: 0 0;
    }
  }
</style>

Resultado: