How to make linear gradient fade with custom opacity level?

hjsong
hjsong Member Posts: 1 ✭
edited April 15 in Developer APIs

In photoshop, we used to make linear gradient as below.

Untitled (23).png

background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.06) 27.84%, rgba(0, 0, 0, 0.13) 53%, rgba(0, 0, 0, 0.34) 100%)

I couldn't find any other optioin except 'b_rgb' parameter but I want to make graident opacity.

At scroll depth 27.84%, opacity level should be 6%, and at scrolle depth 53%, opacity level should be 53%.

Can I custom opacity level of gradient fade like this?

Tagged:

Answers

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 150

    Hey @hjsong. Thanks for getting in touch.

    We do have the ability to make gradients, but not with the same level of specificity as image editing software like Photoshop. That being said, the documentation for e_gradient_fade can be found here: https://cloudinary.com/documentation/transformation_reference#e_gradient_fade and there are a few interesting examples available here:

    https://support.cloudinary.com/hc/en-us/articles/203585582-How-to-use-and-customize-the-Gradient-Fade-effect

    I hope this helps!

    Kind regards,

    -Danny

Categories