Advanced gradient with CSS

MayaBee
8 Posts
MayaBee posted this 14 November 2020
Ask a Question

Hi, I'm trying to add an advanced gradient to a Nicepage block. Advanced in the sense that it cannot be done with Nicepage buttons only.

Here's how I do it:

  1. Defining class for the block

In the field CSS class I name my block as client-gradient-block

  1. Adding style to CSS class

I open the Edit CSS filed and write in there:

.client-gradient-block {
background-image: linear-gradient(red, yellow, green);
}

I expect my block to become three-coloured gradient. But it does not. Not even in the Quick preview.

Is there something I'm doing wrong?

Hi, I'm trying to add an advanced gradient to a Nicepage block. Advanced in the sense that it cannot be done with Nicepage buttons only. Here's how I do it: 1. Defining class for the block In the field CSS class I name my block as client-gradient-block 2. Adding style to CSS class I open the Edit CSS filed and write in there: .client-gradient-block { background-image: linear-gradient(red, yellow, green); } *** I expect my block to become three-coloured gradient. But it does not. Not even in the Quick preview. Is there something I'm doing wrong?
custom-css gradient-fill
Vote to pay developers attention to this features or issue.
4 Replies
Order By: Standard | Newest
MayaBee
8 Posts
MayaBee posted this 14 November 2020

Hey, it works perfectly. My problem was that I had a Nicepage gradient from before.

You can do it this way, but make sure that before you do it, a background to a block is sent to no background (default option). Otherwise the two gradient rules collapse.

And yes, the change is only visible in a Preview, not inside Nicepage editor.

Hey, it works perfectly. My problem was that I had a Nicepage gradient from before. You can do it this way, but make sure that before you do it, a background to a block is sent to no background (default option). Otherwise the two gradient rules collapse. And yes, the change is only visible in a Preview, not inside Nicepage editor.

Last edited 14 November 2020 by MayaBee

Support Team
Support Team posted this 16 November 2020

MayaBee,

Thank you for the feedback.

...................................................
Sincerely,
Allen R.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

MayaBee, Thank you for the feedback. ................................................... Sincerely, Allen R. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
LGALLP
348 Posts
LGALLP posted this 21 December 2020

Hello, MayaBee.

Your example helped me to apply a gradient background from a website wich generates pretty ones and was trying to do it. Thank you.

I´m sharing the link if someone else would like to test generating pretty gradients and color pallettes for their websites:
https://mycolor.space/

Hello, MayaBee. Your example helped me to apply a gradient background from a website wich generates pretty ones and was trying to do it. Thank you. I´m sharing the link if someone else would like to test generating pretty gradients and color pallettes for their websites: https://mycolor.space/
MayaBee
8 Posts
MayaBee posted this 21 December 2020

Much appreciated :) It looks very nice, your new website. Congrats!

Much appreciated :) It looks very nice, your new website. Congrats!
You must log in or register to leave comments

Company
Product
Themes & Templates
Nicepage
Web Design