Convert image to grayscale
Convert image to grayscale
Filters and effects
Creative
Photography
Beginner

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

https://res.cloudinary.com/demo/image/upload/happy_dog.jpg

Here's how to apply the 'grayscale' effect: Grayscale

https://res.cloudinary.com/demo/image/upload/e_grayscale/happy_dog.jpg

You can also apply the grayscale effect on overlay images. For example, here's Cloudinary's logo: Cloudinary's logo

https://res.cloudinary.com/demo/image/upload/cloudinary_icon.png
We'll add it as a grayscaled overlay and make it half transparent by setting the opacity parameter to 50 (o_50 in URLs): 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): Logo cutter

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,fl_cutter/happy_dog.png
Now we'll apply the grayscale effect: Grayscale logo
https://res.cloudinary.com/demo/image/upload/e_grayscale/l_cloudinary_icon,fl_cutter/happy_dog.png
Finally, we'll add the original image as an 'underlay' to get the following cool result: 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: Grayscale overlays

https://res.cloudinary.com/demo/image/upload/l_happy_dog,w_2082,h_500,c_crop,g_north,e_grayscale/g_north,fl_layer_apply/l_happy_dog,w_2082,h_500,c_crop,e_grayscale/fl_layer_apply/l_happy_dog,w_2082,h_500,c_crop,g_south,e_grayscale/g_south,fl_layer_apply/happy_dog.jpg

Here's another example of using the gradient_fade effect (e_gradient in URLs) to create a smooth transition from grayscale to color: Gradient fade

https://res.cloudinary.com/demo/image/upload/e_gradient_fade,x_0.9/u_happy_dog,e_grayscale/happy_dog.jpg