> ## 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).

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

1. Go to your page editor;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/editdesign_b3jxj1.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/settings_zyp35q.png)

3. Next, select the **Javascript/Css** option;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/addjavascript_h4263c.png)

4. Click **Add code**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1etjq86.png)

5. Give the code a name, classify it as **functionality** and install the code below:

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1xelcgn.png)

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

6. 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](https://ajuda.greatsoftwares.com.br/pt-br/article/como-identificar-a-id-de-um-elemento-no-greatpages-ed3509/).

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

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

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](https://docs.microsoft.com/pt-br/power-apps/maker/canvas-apps/functions/function-colors).

8. Finally, click **"Save"**.

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