[Resolved] Wave with shadings

Home Forums Support [Resolved] Wave with shadings

Home Forums Support Wave with shadings

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #2146256

    How is it possible to make this red background section shading like attached image? There is no problem making the wave but how do you make it shade like this?


    Customer Support

    Hi Jean,

    This is possible, and one approach you may do to achieve this is to have multiple shapes of the same style as such: https://share.getcloudapp.com/lluEmqPk

    Then you may alter their position, color and opacity with custom CSS:

    .gb-shapes .gb-shape.gb-shape-3 {
        color: rgba(255, 255, 255, 24%);
        bottom: 12px;
    .gb-shapes .gb-shape.gb-shape-1 {
        color: rgba(255, 255, 255, 100%);
        bottom: -1px;
    .gb-shapes .gb-shape.gb-shape-2 {
        color: rgba(255, 255, 255, 30%);
        bottom: 22px;

    In this instance, I set all shapes to have the color of white with varying opacity values. Then I set their bottom to different value as well to position them differently.

    Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

    Adding it through additional CSS should work.

    This may help in picking colors: https://rgbacolorpicker.com/

    Hope this helps! 🙂


    Awesome thanks for the help! 🙂

    Customer Support

    You’re welcome Jean! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.