Archived topic
How to apply a fading effect between containers?
3 replies · Started by Sascha on March 16, 2021
Hi
I want to apply the webdesign from https://xd.adobe.com/view/7cd972f6-7e9f-4d3c-8886-6b07fb2c7206-298a/ via GeneratePress & GenerateBlocks.
I have already created the header successfully and applied the image as a background. But now I need to apply the container with a sold blue color, which will "fade" into the image above. I hope this screenshot will illustrate better what I mean: http://media.macbay.de/_support/luzvasdfkuzsdrg_2600D264.png
Would be happe if you can help me with this, I'm a long time user of GP Premium and also have license for GP-Blocks-Pro.
Thank you and kind regards,
Sascha
Hi there,
this is really a question for the GenerateBlocks forum... but to cover here quicky.
1. Select the Container Block and add Background > Image - leave the Selector as: Element
2. In the same settings Enable Gradient and set the Selector as Pseudo Element.
2.1 Set the first Gradient stop to a color and set its opacity to 0 and increase the stop point to say 60.
2.2 Set the second Gradient stop to a solid color.
2.3 Set the Direction to 180 degrees.
Hi there, I was not aware of another GB-Forum, so special thanks for still replying to my issue here 🙏. Your hint is gold and has worked out very well :) Thanks a lot!
Glad to hear that!
You may want to join our GB Community as well:
