> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como instalar o EFEITO PULSE (pulsar) em um elemento

Para instalar o **efeito de pulsar** em algum elemento de sua página, siga este passo a passo abaixo: 

1. Acesse o seu editor de páginas;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_gsfka1.png =650x385)

2. Clique no **ícone de engrenagem** localizado no canto superior direito da sua tela;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_o0m274.png =650x182)

3. Em seguida, selecione a opção **Javascript & CSS**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_kwthvy.png =650x407)

4. Clique em **Adicionar código**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_fpgkjs.png =650x414)

5. Dê um nome ao código, classifique-o como **Funcionamento** e instale o código abaixo:

```
<style>

  #e0000000 .c {
    
    --pulsar: 0 0 0 0 #7fff00;
    animation: pulsar 3s infinite;
    -webkit-animation: pulsar 3s infinite;
    -moz-animation: pulsar 3s infinite;
    -o-animation: pulsar 3s infinite;
  }

   @-webkit-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-o-keyframes pulse {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-ms-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-moz-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

</style>
```

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-11-as-_1uhlo08.png =650x738)

6. Em seguida, você vai precisar identificar o **ID do elemento** em que o efeito será aplicado;

Caso você não saiba como identificar o ID de um elemento no GreatPages, [clique aqui e veja nosso tutorial](https://ajuda.greatsoftwares.com.br/pt-br/article/como-identificar-a-id-de-um-elemento-no-greatpages-ed3509/).

7. Depois disso, informe no campo destacado abaixo o código da cor que gostaria de aplicar com o efeito de pulsar ;

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/capturarpng2png_tzsikh.png)

Caso não saiba como identificar o código de uma determinada cor, [clique aqui e veja um site que te ajuda neste passo](https://docs.microsoft.com/pt-br/power-apps/maker/canvas-apps/functions/function-colors). 

8. Por fim, clique em **"Salvar"**.

Ficou com alguma dúvida? Chame nossa equipe no Chat! Estamos sempre prontos para ajudar. :-D