[Resolved] Wave with shadings

Home Forums Support [Resolved] Wave with shadings

Home Forums Support Wave with shadings

  • This topic has 3 replies, 2 voices, and was last updated 2 years ago by Fernando.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2146256
    Jean

    Hi,
    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?

    https://ibb.co/yB5p6Xm

    #2146304
    Fernando
    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! 🙂

    #2148631
    Jean

    Awesome thanks for the help! 🙂

    #2148878
    Fernando
    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.