Radial Gradients in Unbounce?

  • 23 September 2018
  • 2 replies
  • 124 views

Hi!

Is there a stylehsheet code i can use to change a background gradient from linear to radial?
Additional controll would also be super nice! (placement of the center, width/height of radial etc).

Thanks!


2 replies

Userlevel 7
Badge +4

Hi, you can actually do this using a third party gradient creator tool such as https://gradienthunt.com/

You simply choose “create gradient,” then enter in the colors you want, choose “radial,” set the placement, etc., and it will generate the CSS code for you.

Then, you can use that code for any section or element in Unbounce, by placing it in the CSS section and targeting the proper element.

For example, if I wanted to target a background section called #lp-pom-block-322, I could generate a gradient code using the link above, and then I’d paste this into the CSS section in Unbounce:

<style>
#lp-pom-block-322 {
  background-image: linear-gradient( 108.3deg,  rgba(252,198,41,1) 11.2%, rgba(209,5,5,1) 84.1% );
}
</style>

I hope this is helpful!

This looks great. Is it possible to do this in combination with having a background image?

Reply