How to install the PULSE effect on an element

To install the pulse effect on an element of your page, follow this step by step below:

Go to your page editor;

Click the gear icon located in the top right corner of your screen;

Next, select the Javascript/Css option;

Click Adicionar código;

Give the code a name, classify it as funcionamento and install the code below:

<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>

Next, you will need to identify the ID of the element where the effect will be applied;

If you don't know how to identify the ID of an element in GreatPages, click here and see our tutorial.

After that, enter in the field highlighted below the code of the color you would like to apply with the pulse effect ;

If you don't know how to identify the code of a particular color, click here and see a site that helps you with this step.

Finally, click "Salvar".

Still have questions? Reach out to our team on Chat! We're always happy to help.

Updated on: 08/01/2026

Was this article helpful?

Thank you!