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):

http://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade/sample.jpg

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:
http://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade,x_0.5/sample.jpg

Use a negative value for the right side (e.g., -0.5):
http://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade,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.,:
http://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade,y_-0.5/sample.jpg

To have a larger fading area, increase the x or y values, e.g.,:

http://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade,y_-0.9/sample.jpg

You can set the image's background color by using the background parameter (b in URLs). For example:
http://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade,y_-0.5,b_black/sample.jpg

Or by a custom RGB value:
http://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade,y_-0.5,b_rgb:3E36B6/sample.jpg

The background doesn't have to be a solid color, it can be another image too:

http://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade,y_-0.8/u_couple,w_200,h_133,c_fill/sample.jpg

Have more questions? Submit a request

Comments

Powered by Zendesk