# Highlight Text

Customize the color of highlighted text, enhancing user interaction and design cohesiveness.

### Highlight V1

<figure><img src="https://3218217113-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9VzyehrjZZrwqcyJLvaZ%2Fuploads%2F2lynox0TB6UGxJneOaXF%2Fimage.png?alt=media&#x26;token=8640042f-a69b-49b2-b54c-573ebed61c7f" alt=""><figcaption></figcaption></figure>

```css
.highlight strong {
    background-color: yellow;
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
}
```

### Highlight V2

<figure><img src="https://3218217113-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9VzyehrjZZrwqcyJLvaZ%2Fuploads%2FzL50N0OE467hiFIN4wyc%2Fimage.png?alt=media&#x26;token=6f02a9a1-6736-4a65-a80e-f3a308a30685" alt=""><figcaption></figcaption></figure>

```css
.highlight strong {
    font-family: "Poppins", sans-serif;
    letter-spacing: 2px;
    padding: 0 5px;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        #fce041 50%
    );
}
```

### Funnel Instructions

1. Paste the code into the **`Custom CSS`** section of your funnel/website.
2. Click on the text element you want highlighted and navigate to **Advanced** and add **`highlight`** to the custom class input.
3. Bold the text you want highlighted.
4. Change the highlight color by changing `background: <your color>;`

<br>
