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 y 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
To change whether to apply symmetry to the fade. Symmetric: Fade symmetrically from multiple edges:
https://res.cloudinary.com/demo/image/upload/w_200/e_gradient_fade:symmetric:10,x_0.5/sample.jpg
Or use symmetric_pad: Fade the image into the added padding
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:
Read more about Gradient Fade as well as other transformations via our documentation.
Comments
0 comments
Please sign in to leave a comment.