Convert image to grayscale

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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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

Ruby:

cl_image_tag("happy_dog.jpg")

PHP v1:

cl_image_tag("happy_dog.jpg")

PHP v2:

(new ImageTag('happy_dog.jpg'));

Python:

CloudinaryImage("happy_dog.jpg").image()

Node.js:

cloudinary.image("happy_dog.jpg")

Java:

cloudinary.url().imageTag("happy_dog.jpg");

JS:

cloudinary.imageTag('happy_dog.jpg').toHtml();

jQuery:

$.cloudinary.image("happy_dog.jpg")

React:

<Image publicId="happy_dog.jpg" >

</Image>

Vue.js:

<cld-image publicId="happy_dog.jpg" >

</cld-image>

Angular:

<cl-image public-id="happy_dog.jpg" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("happy_dog.jpg")

Android:

MediaManager.get().url().generate("happy_dog.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("happy_dog.jpg")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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

Ruby:

cl_image_tag("happy_dog.jpg", :effect=>"grayscale")

PHP v1:

cl_image_tag("happy_dog.jpg", array("effect"=>"grayscale"))

PHP v2:

(new ImageTag('happy_dog.jpg'))
  ->effect(Effect::grayscale());

Python:

CloudinaryImage("happy_dog.jpg").image(effect="grayscale")

Node.js:

cloudinary.image("happy_dog.jpg", {effect: "grayscale"})

Java:

cloudinary.url().transformation(new Transformation().effect("grayscale")).imageTag("happy_dog.jpg");

JS:

cloudinary.imageTag('happy_dog.jpg', {effect: "grayscale"}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.jpg", {effect: "grayscale"})

React:

<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
</Image>

Vue.js:

<cld-image publicId="happy_dog.jpg" >
  <cld-transformation effect="grayscale" />
</cld-image>

Angular:

<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("grayscale")).BuildImageTag("happy_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("grayscale")).generate("happy_dog.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("grayscale")).generate("happy_dog.jpg")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/cloudinary_icon.png

Ruby:

cl_image_tag("cloudinary_icon.png")

PHP v1:

cl_image_tag("cloudinary_icon.png")

PHP v2:

(new ImageTag('cloudinary_icon.png'));

Python:

CloudinaryImage("cloudinary_icon.png").image()

Node.js:

cloudinary.image("cloudinary_icon.png")

Java:

cloudinary.url().imageTag("cloudinary_icon.png");

JS:

cloudinary.imageTag('cloudinary_icon.png').toHtml();

jQuery:

$.cloudinary.image("cloudinary_icon.png")

React:

<Image publicId="cloudinary_icon.png" >

</Image>

Vue.js:

<cld-image publicId="cloudinary_icon.png" >

</cld-image>

Angular:

<cl-image public-id="cloudinary_icon.png" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("cloudinary_icon.png")

Android:

MediaManager.get().url().generate("cloudinary_icon.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("cloudinary_icon.png")!, cloudinary: cloudinary)

We'll add it as a grayscaled overlay and make it half transparent by setting the opacity parameter to 50 (o_50 in URLs):

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,e_grayscale,w_1500,o_50/happy_dog.jpg

Ruby:

cl_image_tag("happy_dog.jpg", :overlay=>"cloudinary_icon", :effect=>"grayscale", :width=>1500, :opacity=>50)

PHP v1:

cl_image_tag("happy_dog.jpg", array("overlay"=>"cloudinary_icon", "effect"=>"grayscale", "width"=>1500, "opacity"=>50))

PHP v2:

(new ImageTag('happy_dog.jpg'))
  ->overlay(
      Overlay::source(Source::image('cloudinary_icon')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(1500))
          ->adjust(Adjust::opacity(50))
          ->effect(Effect::grayscale())
  )));

Python:

CloudinaryImage("happy_dog.jpg").image(overlay="cloudinary_icon", effect="grayscale", width=1500, opacity=50)

Node.js:

cloudinary.image("happy_dog.jpg", {overlay: "cloudinary_icon", effect: "grayscale", width: 1500, opacity: 50})

Java:

cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).effect("grayscale").width(1500).opacity(50)).imageTag("happy_dog.jpg");

JS:

cloudinary.imageTag('happy_dog.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), effect: "grayscale", width: 1500, opacity: 50}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), effect: "grayscale", width: 1500, opacity: 50})

React:

<Image publicId="happy_dog.jpg" >
  <Transformation overlay="cloudinary_icon" effect="grayscale" width="1500" opacity="50" />
</Image>

Vue.js:

<cld-image publicId="happy_dog.jpg" >
  <cld-transformation :overlay="cloudinary_icon" effect="grayscale" width="1500" opacity="50" />
</cld-image>

Angular:

<cl-image public-id="happy_dog.jpg" >
  <cl-transformation overlay="cloudinary_icon" effect="grayscale" width="1500" opacity="50">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon")).Effect("grayscale").Width(1500).Opacity(50)).BuildImageTag("happy_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).effect("grayscale").width(1500).opacity(50)).generate("happy_dog.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon").setEffect("grayscale").setWidth(1500).setOpacity(50)).generate("happy_dog.jpg")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,fl_cutter/happy_dog.png

Ruby:

cl_image_tag("happy_dog.png", :overlay=>"cloudinary_icon", :flags=>"cutter")

PHP v1:

cl_image_tag("happy_dog.png", array("overlay"=>"cloudinary_icon", "flags"=>"cutter"))

PHP v2:

(new ImageTag('happy_dog.png'))
  ->reshape(Reshape::cutByImage(Source::image('cloudinary_icon')));

Python:

CloudinaryImage("happy_dog.png").image(overlay="cloudinary_icon", flags="cutter")

Node.js:

cloudinary.image("happy_dog.png", {overlay: "cloudinary_icon", flags: "cutter"})

Java:

cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).flags("cutter")).imageTag("happy_dog.png");

JS:

cloudinary.imageTag('happy_dog.png', {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), flags: "cutter"}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.png", {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), flags: "cutter"})

React:

<Image publicId="happy_dog.png" >
  <Transformation overlay="cloudinary_icon" flags="cutter" />
</Image>

Vue.js:

<cld-image publicId="happy_dog.png" >
  <cld-transformation :overlay="cloudinary_icon" flags="cutter" />
</cld-image>

Angular:

<cl-image public-id="happy_dog.png" >
  <cl-transformation overlay="cloudinary_icon" flags="cutter">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon")).Flags("cutter")).BuildImageTag("happy_dog.png")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).flags("cutter")).generate("happy_dog.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon").setFlags("cutter")).generate("happy_dog.png")!, cloudinary: cloudinary)

Now we'll apply the grayscale effect:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_grayscale/l_cloudinary_icon,fl_cutter/happy_dog.png

Ruby:

cl_image_tag("happy_dog.png", :transformation=>[
  {:effect=>"grayscale"},
  {:overlay=>"cloudinary_icon", :flags=>"cutter"}
  ])

PHP v1:

cl_image_tag("happy_dog.png", array("transformation"=>array(
  array("effect"=>"grayscale"),
  array("overlay"=>"cloudinary_icon", "flags"=>"cutter")
  )))

PHP v2:

(new ImageTag('happy_dog.png'))
  ->effect(Effect::grayscale())
  ->reshape(Reshape::cutByImage(Source::image('cloudinary_icon')));

Python:

CloudinaryImage("happy_dog.png").image(transformation=[
  {'effect': "grayscale"},
  {'overlay': "cloudinary_icon", 'flags': "cutter"}
  ])

Node.js:

cloudinary.image("happy_dog.png", {transformation: [
  {effect: "grayscale"},
  {overlay: "cloudinary_icon", flags: "cutter"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).flags("cutter")).imageTag("happy_dog.png");

JS:

cloudinary.imageTag('happy_dog.png', {transformation: [
  {effect: "grayscale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), flags: "cutter"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.png", {transformation: [
  {effect: "grayscale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), flags: "cutter"}
  ]})

React:

<Image publicId="happy_dog.png" >
  <Transformation effect="grayscale" />
  <Transformation overlay="cloudinary_icon" flags="cutter" />
</Image>

Vue.js:

<cld-image publicId="happy_dog.png" >
  <cld-transformation effect="grayscale" />
  <cld-transformation :overlay="cloudinary_icon" flags="cutter" />
</cld-image>

Angular:

<cl-image public-id="happy_dog.png" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" flags="cutter">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("grayscale").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Flags("cutter")).BuildImageTag("happy_dog.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).flags("cutter")).generate("happy_dog.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("grayscale").chain()
  .setOverlay("cloudinary_icon").setFlags("cutter")).generate("happy_dog.png")!, cloudinary: cloudinary)

Finally, we'll add the original image as an 'underlay' to get the following cool result:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_grayscale/l_cloudinary_icon,fl_cutter.relative,w_0.7/u_happy_dog/happy_dog.jpg

Ruby:

cl_image_tag("happy_dog.jpg", :transformation=>[
  {:effect=>"grayscale"},
  {:overlay=>"cloudinary_icon", :flags=>["cutter", "relative"], :width=>0.7},
  {:underlay=>"happy_dog"}
  ])

PHP v1:

cl_image_tag("happy_dog.jpg", array("transformation"=>array(
  array("effect"=>"grayscale"),
  array("overlay"=>"cloudinary_icon", "flags"=>array("cutter", "relative"), "width"=>"0.7"),
  array("underlay"=>"happy_dog")
  )))

PHP v2:

(new ImageTag('happy_dog.jpg'))
  ->effect(Effect::grayscale())
  ->reshape(
      Reshape::cutByImage(Source::image('cloudinary_icon')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.7)->relative()))))
    ->underlay(Underlay::source(Source::image('happy_dog')));

Python:

CloudinaryImage("happy_dog.jpg").image(transformation=[
  {'effect': "grayscale"},
  {'overlay': "cloudinary_icon", 'flags': ["cutter", "relative"], 'width': "0.7"},
  {'underlay': "happy_dog"}
  ])

Node.js:

cloudinary.image("happy_dog.jpg", {transformation: [
  {effect: "grayscale"},
  {overlay: "cloudinary_icon", flags: ["cutter", "relative"], width: "0.7"},
  {underlay: "happy_dog"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).flags("cutter", "relative").width(0.7).chain()
  .underlay(new Layer().publicId("happy_dog"))).imageTag("happy_dog.jpg");

JS:

cloudinary.imageTag('happy_dog.jpg', {transformation: [
  {effect: "grayscale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), flags: ["cutter", "relative"], width: "0.7"},
  {underlay: new cloudinary.Layer().publicId("happy_dog")}
  ]}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.jpg", {transformation: [
  {effect: "grayscale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), flags: ["cutter", "relative"], width: "0.7"},
  {underlay: new cloudinary.Layer().publicId("happy_dog")}
  ]})

React:

<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
  <Transformation overlay="cloudinary_icon" flags={["cutter", "relative"]} width="0.7" />
  <Transformation underlay="happy_dog" />
</Image>

Vue.js:

<cld-image publicId="happy_dog.jpg" >
  <cld-transformation effect="grayscale" />
  <cld-transformation :overlay="cloudinary_icon" flags={["cutter", "relative"]} width="0.7" />
  <cld-transformation :underlay="happy_dog" />
</cld-image>

Angular:

<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" flags={{["cutter", "relative"]}} width="0.7">
  </cl-transformation>
  <cl-transformation underlay="happy_dog">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("grayscale").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Flags("cutter", "relative").Width(0.7).Chain()
  .Underlay(new Layer().PublicId("happy_dog"))).BuildImageTag("happy_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).flags("cutter", "relative").width(0.7).chain()
  .underlay(new Layer().publicId("happy_dog"))).generate("happy_dog.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("grayscale").chain()
  .setOverlay("cloudinary_icon").setFlags("cutter", "relative").setWidth(0.7).chain()
  .setUnderlay("happy_dog")).generate("happy_dog.jpg")!, cloudinary: cloudinary)

Note that you can use a similar practice to grayscale only certain parts of the image:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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

Ruby:

cl_image_tag("happy_dog.jpg", :transformation=>[
  {:overlay=>"happy_dog", :width=>2082, :height=>500, :gravity=>"north", :effect=>"grayscale", :crop=>"crop"},
  {:gravity=>"north", :flags=>"layer_apply"},
  {:overlay=>"happy_dog", :width=>2082, :height=>500, :effect=>"grayscale", :crop=>"crop"},
  {:flags=>"layer_apply"},
  {:overlay=>"happy_dog", :width=>2082, :height=>500, :gravity=>"south", :effect=>"grayscale", :crop=>"crop"},
  {:gravity=>"south", :flags=>"layer_apply"}
  ])

PHP v1:

cl_image_tag("happy_dog.jpg", array("transformation"=>array(
  array("overlay"=>"happy_dog", "width"=>2082, "height"=>500, "gravity"=>"north", "effect"=>"grayscale", "crop"=>"crop"),
  array("gravity"=>"north", "flags"=>"layer_apply"),
  array("overlay"=>"happy_dog", "width"=>2082, "height"=>500, "effect"=>"grayscale", "crop"=>"crop"),
  array("flags"=>"layer_apply"),
  array("overlay"=>"happy_dog", "width"=>2082, "height"=>500, "gravity"=>"south", "effect"=>"grayscale", "crop"=>"crop"),
  array("gravity"=>"south", "flags"=>"layer_apply")
  )))

PHP v2:

(new ImageTag('happy_dog.jpg'))
  ->overlay(
      Overlay::source(Source::image('happy_dog')
        ->transformation((new ImageTransformation())
          ->resize(Resize::crop()->width(2082)->height(500)->gravity(Gravity::compass(Compass::north())))
          ->effect(Effect::grayscale())))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::north()))))
    ->overlay(
        Overlay::source(Source::image('happy_dog')
          ->transformation((new ImageTransformation())
            ->resize(Resize::crop()->width(2082)->height(500))
            ->effect(Effect::grayscale()))))
          ->overlay(
              Overlay::source(Source::image('happy_dog')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::crop()->width(2082)->height(500)->gravity(Gravity::compass(Compass::south())))
                  ->effect(Effect::grayscale())))
              ->position((new Position())
                ->gravity(Gravity::compass(Compass::south()))
          
        
          ));

Python:

CloudinaryImage("happy_dog.jpg").image(transformation=[
  {'overlay': "happy_dog", 'width': 2082, 'height': 500, 'gravity': "north", 'effect': "grayscale", 'crop': "crop"},
  {'gravity': "north", 'flags': "layer_apply"},
  {'overlay': "happy_dog", 'width': 2082, 'height': 500, 'effect': "grayscale", 'crop': "crop"},
  {'flags': "layer_apply"},
  {'overlay': "happy_dog", 'width': 2082, 'height': 500, 'gravity': "south", 'effect': "grayscale", 'crop': "crop"},
  {'gravity': "south", 'flags': "layer_apply"}
  ])

Node.js:

cloudinary.image("happy_dog.jpg", {transformation: [
  {overlay: "happy_dog", width: 2082, height: 500, gravity: "north", effect: "grayscale", crop: "crop"},
  {gravity: "north", flags: "layer_apply"},
  {overlay: "happy_dog", width: 2082, height: 500, effect: "grayscale", crop: "crop"},
  {flags: "layer_apply"},
  {overlay: "happy_dog", width: 2082, height: 500, gravity: "south", effect: "grayscale", crop: "crop"},
  {gravity: "south", flags: "layer_apply"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("happy_dog")).width(2082).height(500).gravity("north").effect("grayscale").crop("crop").chain()
  .gravity("north").flags("layer_apply").chain()
  .overlay(new Layer().publicId("happy_dog")).width(2082).height(500).effect("grayscale").crop("crop").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("happy_dog")).width(2082).height(500).gravity("south").effect("grayscale").crop("crop").chain()
  .gravity("south").flags("layer_apply")).imageTag("happy_dog.jpg");

JS:

cloudinary.imageTag('happy_dog.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("happy_dog"), width: 2082, height: 500, gravity: "north", effect: "grayscale", crop: "crop"},
  {gravity: "north", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("happy_dog"), width: 2082, height: 500, effect: "grayscale", crop: "crop"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("happy_dog"), width: 2082, height: 500, gravity: "south", effect: "grayscale", crop: "crop"},
  {gravity: "south", flags: "layer_apply"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("happy_dog"), width: 2082, height: 500, gravity: "north", effect: "grayscale", crop: "crop"},
  {gravity: "north", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("happy_dog"), width: 2082, height: 500, effect: "grayscale", crop: "crop"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("happy_dog"), width: 2082, height: 500, gravity: "south", effect: "grayscale", crop: "crop"},
  {gravity: "south", flags: "layer_apply"}
  ]})

React:

<Image publicId="happy_dog.jpg" >
  <Transformation overlay="happy_dog" width="2082" height="500" gravity="north" effect="grayscale" crop="crop" />
  <Transformation gravity="north" flags="layer_apply" />
  <Transformation overlay="happy_dog" width="2082" height="500" effect="grayscale" crop="crop" />
  <Transformation flags="layer_apply" />
  <Transformation overlay="happy_dog" width="2082" height="500" gravity="south" effect="grayscale" crop="crop" />
  <Transformation gravity="south" flags="layer_apply" />
</Image>

Vue.js:

<cld-image publicId="happy_dog.jpg" >
  <cld-transformation :overlay="happy_dog" width="2082" height="500" gravity="north" effect="grayscale" crop="crop" />
  <cld-transformation gravity="north" flags="layer_apply" />
  <cld-transformation :overlay="happy_dog" width="2082" height="500" effect="grayscale" crop="crop" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation :overlay="happy_dog" width="2082" height="500" gravity="south" effect="grayscale" crop="crop" />
  <cld-transformation gravity="south" flags="layer_apply" />
</cld-image>

Angular:

<cl-image public-id="happy_dog.jpg" >
  <cl-transformation overlay="happy_dog" width="2082" height="500" gravity="north" effect="grayscale" crop="crop">
  </cl-transformation>
  <cl-transformation gravity="north" flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="happy_dog" width="2082" height="500" effect="grayscale" crop="crop">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="happy_dog" width="2082" height="500" gravity="south" effect="grayscale" crop="crop">
  </cl-transformation>
  <cl-transformation gravity="south" flags="layer_apply">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("happy_dog")).Width(2082).Height(500).Gravity("north").Effect("grayscale").Crop("crop").Chain()
  .Gravity("north").Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("happy_dog")).Width(2082).Height(500).Effect("grayscale").Crop("crop").Chain()
  .Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("happy_dog")).Width(2082).Height(500).Gravity("south").Effect("grayscale").Crop("crop").Chain()
  .Gravity("south").Flags("layer_apply")).BuildImageTag("happy_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("happy_dog")).width(2082).height(500).gravity("north").effect("grayscale").crop("crop").chain()
  .gravity("north").flags("layer_apply").chain()
  .overlay(new Layer().publicId("happy_dog")).width(2082).height(500).effect("grayscale").crop("crop").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("happy_dog")).width(2082).height(500).gravity("south").effect("grayscale").crop("crop").chain()
  .gravity("south").flags("layer_apply")).generate("happy_dog.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("happy_dog").setWidth(2082).setHeight(500).setGravity("north").setEffect("grayscale").setCrop("crop").chain()
  .setGravity("north").setFlags("layer_apply").chain()
  .setOverlay("happy_dog").setWidth(2082).setHeight(500).setEffect("grayscale").setCrop("crop").chain()
  .setFlags("layer_apply").chain()
  .setOverlay("happy_dog").setWidth(2082).setHeight(500).setGravity("south").setEffect("grayscale").setCrop("crop").chain()
  .setGravity("south").setFlags("layer_apply")).generate("happy_dog.jpg")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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

Ruby:

cl_image_tag("happy_dog.jpg", :transformation=>[
  {:effect=>"gradient_fade", :x=>0.9},
  {:underlay=>"happy_dog", :effect=>"grayscale"}
  ])

PHP v1:

cl_image_tag("happy_dog.jpg", array("transformation"=>array(
  array("effect"=>"gradient_fade", "x"=>"0.9"),
  array("underlay"=>"happy_dog", "effect"=>"grayscale")
  )))

PHP v2:

(new ImageTag('happy_dog.jpg'))
  ->effect(Effect::gradientFade()->horizontalStartPoint(0.9))
  ->underlay(
      Underlay::source(Source::image('happy_dog')
        ->transformation((new ImageTransformation())
          ->effect(Effect::grayscale())
  )));

Python:

CloudinaryImage("happy_dog.jpg").image(transformation=[
  {'effect': "gradient_fade", 'x': "0.9"},
  {'underlay': "happy_dog", 'effect': "grayscale"}
  ])

Node.js:

cloudinary.image("happy_dog.jpg", {transformation: [
  {effect: "gradient_fade", x: "0.9"},
  {underlay: "happy_dog", effect: "grayscale"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .effect("gradient_fade").x(0.9).chain()
  .underlay(new Layer().publicId("happy_dog")).effect("grayscale")).imageTag("happy_dog.jpg");

JS:

cloudinary.imageTag('happy_dog.jpg', {transformation: [
  {effect: "gradient_fade", x: "0.9"},
  {underlay: new cloudinary.Layer().publicId("happy_dog"), effect: "grayscale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("happy_dog.jpg", {transformation: [
  {effect: "gradient_fade", x: "0.9"},
  {underlay: new cloudinary.Layer().publicId("happy_dog"), effect: "grayscale"}
  ]})

React:

<Image publicId="happy_dog.jpg" >
  <Transformation effect="gradient_fade" x="0.9" />
  <Transformation underlay="happy_dog" effect="grayscale" />
</Image>

Vue.js:

<cld-image publicId="happy_dog.jpg" >
  <cld-transformation effect="gradient_fade" x="0.9" />
  <cld-transformation :underlay="happy_dog" effect="grayscale" />
</cld-image>

Angular:

<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="gradient_fade" x="0.9">
  </cl-transformation>
  <cl-transformation underlay="happy_dog" effect="grayscale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("gradient_fade").X(0.9).Chain()
  .Underlay(new Layer().PublicId("happy_dog")).Effect("grayscale")).BuildImageTag("happy_dog.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("gradient_fade").x(0.9).chain()
  .underlay(new Layer().publicId("happy_dog")).effect("grayscale")).generate("happy_dog.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("gradient_fade").setX(0.9).chain()
  .setUnderlay("happy_dog").setEffect("grayscale")).generate("happy_dog.jpg")!, cloudinary: cloudinary)