i am trying to create a block with generatepress and generateblocks where the background image is covered by a gradient.
Meaning: the background image is 100% viewable at the top and then fades out after maybe 10-20% of the block size. After that only the background color can be seen. So basically the opacity should be a gradient – from 0 to 1 the lower you get.
I tried around a lot to achieve that – but can’t seem to get the settings to cover the lower ~80 of the image.
Is that possible with gp and gb?
I uploaded a screenshot of my current state – where you can see background image + dark background color.
select the Container Block with the background image.
In Backgrounds – enable Use Gradient and set its Selector: Psuedo Element. This will place the gradient over the image.
Then set your two Gradient Colors to the same color.
Change the first colors opacity to 0 and second color to 100
Change the Rotation to 180deg.
Then edit the Stop Point of the second color – try setting it to 20