How to use and customize the Gradient Fade effect?

Cloudinary supports applying a Gradient Fade effect on images. This can be done by setting the effect parameter to gradient_fade (e_gradient_fade in URLs):

Changing the direction of the fade, including how much of the image will be faded, can be customized by setting by the x or parameters.
For example, in order to fade 50% of the left side, set the x parameter to 0.5:,x_0.5/sample.jpg

Use a negative value for the right side (e.g., -0.5):,x_-0.5/sample.jpg

Have the fade to the lower side of the image by setting the y parameter as a negative value, e.g.,:,y_-0.5/sample.jpg

To have a larger fading area, increase the x or y values, e.g.,:,y_-0.9/sample.jpg

You can set the image's background color by using the background parameter (b in URLs). For example:,y_-0.5,b_black/sample.jpg

Or by a custom RGB value:,y_-0.5,b_rgb:3E36B6/sample.jpg

The background doesn't have to be a solid color, it can be another image too:,y_-0.8/u_couple,w_200,h_133,c_fill/sample.jpg

Have more questions? Submit a request


Powered by Zendesk