Hi @christian.adminIQ,

Thanks for posting here in the Unbounce Community!

The following CSS should be the correct one:

<style>
  .lp-pom-button {
    background: linear-gradient(to right, red , orange, yellow, green, blue, indigo, violet) !important;
  }
</style>

As you can see here on my test page, the rainbow colours are rendering correctly.

Let me know if you need any more help 

hello @Oliver_Lord u are the best, it works!!!!!!

so, i also want to set this gradient to a text color like this, that means only the text should have this gradient:

<style>
  .text_gradient {
      background: linear-gradient(to right, red , orange, yellow, green, blue, indigo, violet) !important;
      background-clip: text;
      color: transparent;
}
</style>

can you help again please?

Hi @christian.adminIQ,

You’re almost there - just a couple of extra bits:

<style>
  #lp-pom-text-16 {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>

Here it is in action. You just need to swap out the element ID (i.e. lp-pom-text-16) for your own text element ID.

To create a button with a linear gradient that transitions from one color to another from left to right using CSS, you can use the background property with the linear-gradient function. Here’s an example:

 

Explanation:

• .gradient-button: This class styles the button.

  • padding: Adds space inside the button.
  • font-size: Sets the font size.
  • color: Sets the text color to white.
  • border: Removes the default border.
  • border-radius: Rounds the corners of the button.
  • cursor: Changes the cursor to a pointer when hovering over the button.
  • background: Uses linear-gradient to create a gradient from #ff7e5f to #feb47b from left to right.
  • transition: Adds a smooth transition effect for the background when hovering.

• .gradient-button:hover: This changes the background gradient direction when the button is hovered over, creating a nice effect.

Feel free to customize the colors and other styles as needed.

Hi @christian.adminIQ , have you been able to fix that? If not, I can take a look for you.