Convert images to grayscale by setting the effect
parameter to grayscale
(e_grayscale
in URLs). You can add further transformations in order to achieve the exact result you need.
Here's an original image for example:
Here's how to apply the 'grayscale' effect:
You can also apply the grayscale effect on overlay images. For example, here's Cloudinary's logo:
opacity
parameter to 50
(o_50
in URLs):
![thumb:h_500, skip:true Grayscale overlay](https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,e_grayscale,w_1500,o_50/happy_dog.jpg)
Here's a more advanced and interesting example of applying the grayscale effect on overlays. This time, we'll use the dog's image as a texture to the logo (Using the same technique as the recipe - Use images as text textures):
![skip:true, thumb:w_300 Grayscale logo](https://res.cloudinary.com/demo/image/upload/e_grayscale/l_cloudinary_icon,fl_cutter/happy_dog.png)
![skip:true, thumb:h_500 Grayscale logo overlay](https://res.cloudinary.com/demo/image/upload/e_grayscale/l_cloudinary_icon,fl_cutter.relative,w_0.7/u_happy_dog/happy_dog.jpg)
Note that you can use a similar practice to grayscale only certain parts of the image:
Here's another example of using the gradient_fade
effect (e_gradient
in URLs) to create a smooth transition from grayscale to color: