Create your own Duotone filter

A cool new design trend popularized by Shopify is Duotone imagery. There’s a good post on the Shopify blog covering this and some other trends so you can read that there if curious (4 Trendy Visual Design Trends - Shopify Blog). In the spirit of Cloudinary Cookbooks, we’re going to get right down to business.

Original

Original

Duotone Red

Duotone Red

Blue/Yellow

Blue/Yellow
Ruby:
Copy to clipboard
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
  {:quality=>"auto"},
  {:effect=>"grayscale"},
  {:effect=>"tint:50:red"}
  ])
PHP:
Copy to clipboard
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
  array("quality"=>"auto"),
  array("effect"=>"grayscale"),
  array("effect"=>"tint:50:red")
  )))
Python:
Copy to clipboard
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
  {'quality': "auto"},
  {'effect': "grayscale"},
  {'effect': "tint:50:red"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
React:
Copy to clipboard
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <Transformation quality="auto" />
  <Transformation effect="grayscale" />
  <Transformation effect="tint:50:red" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cld-transformation quality="auto" />
  <cld-transformation effect="grayscale" />
  <cld-transformation effect="tint:50:red" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
  <cl-transformation effect="grayscale">
  </cl-transformation>
  <cl-transformation effect="tint:50:red">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Chain()
  .Effect("grayscale").Chain()
  .Effect("tint:50:red")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").chain()
  .setEffect("grayscale").chain()
  .setEffect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
by Robert Moseley

Use images as text textures

Instead of coloring your text with a solid color, fill it with an image and give it an interesting texture. How? Choose an image as your text texture, dynamically add a text overlay as explained in the Dynamic text overlay blog post, and set the flags parameter to cutter (fl_cutter in URLs).

Original image

Original image

Text texture

Text texture

Fetch + texture

Fetch + texture
Ruby:
Copy to clipboard
cl_image_tag("yellow_tulip.png", :overlay=>{:font_family=>"Coustard", :font_size=>200, :font_weight=>"bold", :text=>"Flowers"}, :flags=>"cutter")
PHP:
Copy to clipboard
cl_image_tag("yellow_tulip.png", array("overlay"=>array("font_family"=>"Coustard", "font_size"=>200, "font_weight"=>"bold", "text"=>"Flowers"), "flags"=>"cutter"))
Python:
Copy to clipboard
CloudinaryImage("yellow_tulip.png").image(overlay={'font_family': "Coustard", 'font_size': 200, 'font_weight': "bold", 'text': "Flowers"}, flags="cutter")
Node.js:
Copy to clipboard
cloudinary.image("yellow_tulip.png", {overlay: {font_family: "Coustard", font_size: 200, font_weight: "bold", text: "Flowers"}, flags: "cutter"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers")).flags("cutter")).imageTag("yellow_tulip.png");
JS:
Copy to clipboard
cloudinary.imageTag('yellow_tulip.png', {overlay: new cloudinary.TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers"), flags: "cutter"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("yellow_tulip.png", {overlay: new cloudinary.TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers"), flags: "cutter"})
React:
Copy to clipboard
<Image publicId="yellow_tulip.png" >
  <Transformation overlay={{fontFamily: "Coustard", fontSize: 200, fontWeight: "bold", text: "Flowers"}} flags="cutter" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="yellow_tulip.png" >
  <cld-transformation overlay={{fontFamily: "Coustard", fontSize: 200, fontWeight: "bold", text: "Flowers"}} flags="cutter" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="yellow_tulip.png" >
  <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Coustard").FontSize(200).FontWeight("bold").Text("Flowers")).Flags("cutter")).BuildImageTag("yellow_tulip.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers")).flags("cutter")).generate("yellow_tulip.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Coustard_200_bold:Flowers").setFlags("cutter")).generate("yellow_tulip.png")!, cloudinary: cloudinary)
by Itay Taragano

Generate a profile completeness meter

Generate a great looking profile completeness meter to notify your users of their progress. Whether it's for profile page details, survey progress, or just to show your users the percentage of the completion of any task. Use Cloudinary's powerful manipulation tools to generate just what you need.

Badge meter

Badge meter

User's thumbnail

User's thumbnail

Avatar meter

Avatar meter
Ruby:
Copy to clipboard
cl_image_tag("avatar.jpg", :transformation=>[
  {:effect=>"trim"},
  {:effect=>"colorize", :color=>"white"},
  {:background=>"#D0CDCD"},
  {:overlay=>"avatar", :effect=>"trim", :width=>1.0, :height=>0.6, :gravity=>"south", :crop=>"crop"},
  {:flags=>"layer_apply", :gravity=>"south"},
  {:overlay=>{:font_family=>"Playball", :font_size=>40, :text=>"60%2525"}, :color=>"white", :y=>80},
  {:width=>200, :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_image_tag("avatar.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("effect"=>"colorize", "color"=>"white"),
  array("background"=>"#D0CDCD"),
  array("overlay"=>"avatar", "effect"=>"trim", "width"=>1.0, "height"=>0.6, "gravity"=>"south", "crop"=>"crop"),
  array("flags"=>"layer_apply", "gravity"=>"south"),
  array("overlay"=>array("font_family"=>"Playball", "font_size"=>40, "text"=>"60%2525"), "color"=>"white", "y"=>80),
  array("width"=>200, "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryImage("avatar.jpg").image(transformation=[
  {'effect': "trim"},
  {'effect': "colorize", 'color': "white"},
  {'background': "#D0CDCD"},
  {'overlay': "avatar", 'effect': "trim", 'width': 1.0, 'height': 0.6, 'gravity': "south", 'crop': "crop"},
  {'flags': "layer_apply", 'gravity': "south"},
  {'overlay': {'font_family': "Playball", 'font_size': 40, 'text': "60%2525"}, 'color': "white", 'y': 80},
  {'width': 200, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: {font_family: "Playball", font_size: 40, text: "60%2525"}, color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain()
  .width(200).crop("scale")).imageTag("avatar.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('avatar.jpg', {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="avatar.jpg" >
  <Transformation effect="trim" />
  <Transformation effect="colorize" color="white" />
  <Transformation background="#D0CDCD" />
  <Transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <Transformation flags="layer_apply" gravity="south" />
  <Transformation overlay={{fontFamily: "Playball", fontSize: 40, text: "60%2525"}} color="white" y="80" />
  <Transformation width="200" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="avatar.jpg" >
  <cld-transformation effect="trim" />
  <cld-transformation effect="colorize" color="white" />
  <cld-transformation background="#D0CDCD" />
  <cld-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <cld-transformation flags="layer_apply" gravity="south" />
  <cld-transformation overlay={{fontFamily: "Playball", fontSize: 40, text: "60%2525"}} color="white" y="80" />
  <cld-transformation width="200" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="avatar.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation effect="colorize" color="white">
  </cl-transformation>
  <cl-transformation background="#D0CDCD">
  </cl-transformation>
  <cl-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south">
  </cl-transformation>
  <cl-transformation overlay="text:Playball_40:60%2525" color="white" y="80">
  </cl-transformation>
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Effect("colorize").Color("white").Chain()
  .Background("#D0CDCD").Chain()
  .Overlay(new Layer().PublicId("avatar")).Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain()
  .Flags("layer_apply").Gravity("south").Chain()
  .Overlay(new TextLayer().FontFamily("Playball").FontSize(40).Text("60%2525")).Color("white").Y(80).Chain()
  .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain()
  .width(200).crop("scale")).generate("avatar.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("trim").chain()
  .setEffect("colorize").setColor("white").chain()
  .setBackground("#D0CDCD").chain()
  .setOverlay("avatar").setEffect("trim").setWidth(1.0).setHeight(0.6).setGravity("south").setCrop("crop").chain()
  .setFlags("layer_apply").setGravity("south").chain()
  .setOverlay("text:Playball_40:60%2525").setColor("white").setY(80).chain()
  .setWidth(200).setCrop("scale")).generate("avatar.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Rounded profile picture with initials

Automatically fetch social networks' profile pictures by setting the type parameter to the required network (e.g., facebook), apply any further transformations and add the user's initials as a text overlay.

Original

Original

Face detection

Face detection

With initials

With initials
Ruby:
Copy to clipboard
cl_image_tag("Beckham.jpg", :type=>"facebook", :transformation=>[
  {:width=>100, :height=>100, :gravity=>"face", :effect=>"blur:200", :radius=>"max", :crop=>"thumb"},
  {:overlay=>{:font_family=>"Arial", :font_size=>50, :font_weight=>"bold", :text=>"DB"}, :color=>"white"}
  ])
PHP:
Copy to clipboard
cl_image_tag("Beckham.jpg", array("type"=>"facebook", "transformation"=>array(
  array("width"=>100, "height"=>100, "gravity"=>"face", "effect"=>"blur:200", "radius"=>"max", "crop"=>"thumb"),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>50, "font_weight"=>"bold", "text"=>"DB"), "color"=>"white")
  )))
Python:
Copy to clipboard
CloudinaryImage("Beckham.jpg").image(type="facebook", transformation=[
  {'width': 100, 'height': 100, 'gravity': "face", 'effect': "blur:200", 'radius': "max", 'crop': "thumb"},
  {'overlay': {'font_family': "Arial", 'font_size': 50, 'font_weight': "bold", 'text': "DB"}, 'color': "white"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: {font_family: "Arial", font_size: 50, font_weight: "bold", text: "DB"}, color: "white"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").imageTag("Beckham.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('Beckham.jpg', {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"}
  ]})
React:
Copy to clipboard
<Image publicId="Beckham.jpg" type="facebook">
  <Transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 50, fontWeight: "bold", text: "DB"}} color="white" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="Beckham.jpg" type="facebook">
  <cld-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 50, fontWeight: "bold", text: "DB"}} color="white" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Beckham.jpg" type="facebook">
  <cl-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_50_bold:DB" color="white">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb").Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(50).FontWeight("bold").Text("DB")).Color("white")).Type("facebook").BuildImageTag("Beckham.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").generate("Beckham.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation()
  .setWidth(100).setHeight(100).setGravity("face").setEffect("blur:200").setRadius("max").setCrop("thumb").chain()
  .setOverlay("text:Arial_50_bold:DB").setColor("white")).generate("Beckham.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Fading in and out (+ visual noise)

By overlaying a video on top of itself, we can create the visual noise effect for a limited period of time. For that we’ll use the noise effect for 3 seconds in the start of the video. Let’s also add e_fade parameter, so the video will also fade in and out.

Original

Fade in & out

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:effect=>"noise:60", :start_offset=>"0", :end_offset=>"3", :overlay=>"video:dog", :flags=>"layer_apply"},
  {:effect=>"fade:2000"},
  {:effect=>"fade:-4000"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("effect"=>"noise:60", "start_offset"=>"0", "end_offset"=>"3", "overlay"=>"video:dog", "flags"=>"layer_apply"),
  array("effect"=>"fade:2000"),
  array("effect"=>"fade:-4000")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'effect': "noise:60", 'start_offset': "0", 'end_offset': "3", 'overlay': "video:dog", 'flags': "layer_apply"},
  {'effect': "fade:2000"},
  {'effect': "fade:-4000"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {effect: "noise:60", start_offset: "0", end_offset: "3", overlay: "video:dog", flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("noise:60").startOffset("0").endOffset("3").overlay(new Layer().publicId("video:dog")).flags("layer_apply").chain()
  .effect("fade:2000").chain()
  .effect("fade:-4000")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {effect: "noise:60", startOffset: "0", endOffset: "3", overlay: new cloudinary.Layer().publicId("video:dog"), flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {effect: "noise:60", start_offset: "0", end_offset: "3", overlay: new cloudinary.Layer().publicId("video:dog"), flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation effect="noise:60" startOffset="0" endOffset="3" overlay="video:dog" flags="layer_apply" />
  <Transformation effect="fade:2000" />
  <Transformation effect="fade:-4000" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation effect="noise:60" startOffset="0" endOffset="3" overlay="video:dog" flags="layer_apply" />
  <cld-transformation effect="fade:2000" />
  <cld-transformation effect="fade:-4000" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation effect="noise:60" start-offset="0" end-offset="3" overlay="video:dog" flags="layer_apply">
  </cl-transformation>
  <cl-transformation effect="fade:2000">
  </cl-transformation>
  <cl-transformation effect="fade:-4000">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("noise:60").StartOffset("0").EndOffset("3").Overlay(new Layer().PublicId("video:dog")).Flags("layer_apply").Chain()
  .Effect("fade:2000").Chain()
  .Effect("fade:-4000")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("noise:60").startOffset("0").endOffset("3").overlay(new Layer().publicId("video:dog")).flags("layer_apply").chain()
  .effect("fade:2000").chain()
  .effect("fade:-4000")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("noise:60").setStartOffset("0").setEndOffset("3").setOverlay("video:dog").setFlags("layer_apply").chain()
  .setEffect("fade:2000").chain()
  .setEffect("fade:-4000")).generate("dog.mp4")
by Maor Gariv

Video overlays

Place a video on top of another by using the overlay parameter while adding the ‘video:’ type to it (l_video in URLs).

Moving video overlay

Video overlay

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:width=>150, :effect=>"accelerate:100", :overlay=>"video:abbey_road"},
  {:gravity=>"west", :start_offset=>"0", :end_offset=>"2", :flags=>"layer_apply"},
  {:overlay=>"video:abbey_road"},
  {:width=>150, :effect=>"accelerate:100", :gravity=>"center", :start_offset=>"2", :end_offset=>"5", :flags=>"layer_apply", :crop=>"scale"},
  {:overlay=>"video:abbey_road"},
  {:width=>150, :effect=>"accelerate:100", :gravity=>"east", :start_offset=>"5", :flags=>"layer_apply", :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("width"=>150, "effect"=>"accelerate:100", "overlay"=>"video:abbey_road"),
  array("gravity"=>"west", "start_offset"=>"0", "end_offset"=>"2", "flags"=>"layer_apply"),
  array("overlay"=>"video:abbey_road"),
  array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"center", "start_offset"=>"2", "end_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale"),
  array("overlay"=>"video:abbey_road"),
  array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"east", "start_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'width': 150, 'effect': "accelerate:100", 'overlay': "video:abbey_road"},
  {'gravity': "west", 'start_offset': "0", 'end_offset': "2", 'flags': "layer_apply"},
  {'overlay': "video:abbey_road"},
  {'width': 150, 'effect': "accelerate:100", 'gravity': "center", 'start_offset': "2", 'end_offset': "5", 'flags': "layer_apply", 'crop': "scale"},
  {'overlay': "video:abbey_road"},
  {'width': 150, 'effect': "accelerate:100", 'gravity': "east", 'start_offset': "5", 'flags': "layer_apply", 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {width: 150, effect: "accelerate:100", overlay: "video:abbey_road"},
  {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"},
  {overlay: "video:abbey_road"},
  {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: "video:abbey_road"},
  {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain()
  .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {gravity: "west", startOffset: "0", endOffset: "2", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "center", startOffset: "2", endOffset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "east", startOffset: "5", flags: "layer_apply", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation width="150" effect="accelerate:100" overlay="video:abbey_road" />
  <Transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" />
  <Transformation overlay="video:abbey_road" />
  <Transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" />
  <Transformation overlay="video:abbey_road" />
  <Transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation width="150" effect="accelerate:100" overlay="video:abbey_road" />
  <cld-transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" />
  <cld-transformation overlay="video:abbey_road" />
  <cld-transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" />
  <cld-transformation overlay="video:abbey_road" />
  <cld-transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation width="150" effect="accelerate:100" overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation gravity="west" start-offset="0" end-offset="2" flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation width="150" effect="accelerate:100" gravity="center" start-offset="2" end-offset="5" flags="layer_apply" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation width="150" effect="accelerate:100" gravity="east" start-offset="5" flags="layer_apply" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(150).Effect("accelerate:100").Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Gravity("west").StartOffset("0").EndOffset("2").Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Width(150).Effect("accelerate:100").Gravity("center").StartOffset("2").EndOffset("5").Flags("layer_apply").Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Width(150).Effect("accelerate:100").Gravity("east").StartOffset("5").Flags("layer_apply").Crop("scale")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain()
  .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(150).setEffect("accelerate:100").setOverlay("video:abbey_road").chain()
  .setGravity("west").setStartOffset("0").setEndOffset("2").setFlags("layer_apply").chain()
  .setOverlay("video:abbey_road").chain()
  .setWidth(150).setEffect("accelerate:100").setGravity("center").setStartOffset("2").setEndOffset("5").setFlags("layer_apply").setCrop("scale").chain()
  .setOverlay("video:abbey_road").chain()
  .setWidth(150).setEffect("accelerate:100").setGravity("east").setStartOffset("5").setFlags("layer_apply").setCrop("scale")).generate("dog.mp4")
by Maor Gariv

Waveform creation

You can create a waveform from every uploaded audio or video (which includes an audio channel) file. Simply use the waveform flag (fl_waveform in URLs) and set the file’s extension to any image format you like.

Ruby:
Copy to clipboard
cl_video_tag("dog")
PHP:
Copy to clipboard
cl_video_tag("dog")
Python:
Copy to clipboard
CloudinaryVideo("dog").video()
Node.js:
Copy to clipboard
cloudinary.video("dog")
Java:
Copy to clipboard
cloudinary.url().videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog")
React:
Copy to clipboard
<Video publicId="dog" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp4")
by Maor Gariv

Accelerate or slow down a video

By using the accelerate effect (e_accelerate in URLs) you can determine how fast the video is going to run. Values are between -50 to 100, positive values for making the video faster and negative for slowing it down.

Original

Slow motion

Accelerated

Ruby:
Copy to clipboard
cl_video_tag("eagle", :effect=>"accelerate:-50")
PHP:
Copy to clipboard
cl_video_tag("eagle", array("effect"=>"accelerate:-50"))
Python:
Copy to clipboard
CloudinaryVideo("eagle").video(effect="accelerate:-50")
Node.js:
Copy to clipboard
cloudinary.video("eagle", {effect: "accelerate:-50"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("accelerate:-50")).videoTag("eagle");
JS:
Copy to clipboard
cloudinary.videoTag('eagle', {effect: "accelerate:-50"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("eagle", {effect: "accelerate:-50"})
React:
Copy to clipboard
<Video publicId="eagle" >
  <Transformation effect="accelerate:-50" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="eagle" >
  <cld-transformation effect="accelerate:-50" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="eagle" >
  <cl-transformation effect="accelerate:-50">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("accelerate:-50")).BuildVideoTag("eagle")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("accelerate:-50")).resourceType("video").generate("eagle.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("accelerate:-50")).generate("eagle.mp4")
by Maor Gariv

Boomerang effect

Playing a video in both directions - by applying the overlay parameter on the video and using the splice flag. For example, let’s create an instant replay of this bike stunt -

Original

Boomerang effect

Ruby:
Copy to clipboard
cl_video_tag("bike_stunt", :transformation=>[
  {:overlay=>"video:bike_stunt", :effect=>"reverse", :flags=>"splice"},
  {:overlay=>"video:bike_stunt", :effect=>"accelerate:-50", :flags=>"splice"}
  ])
PHP:
Copy to clipboard
cl_video_tag("bike_stunt", array("transformation"=>array(
  array("overlay"=>"video:bike_stunt", "effect"=>"reverse", "flags"=>"splice"),
  array("overlay"=>"video:bike_stunt", "effect"=>"accelerate:-50", "flags"=>"splice")
  )))
Python:
Copy to clipboard
CloudinaryVideo("bike_stunt").video(transformation=[
  {'overlay': "video:bike_stunt", 'effect': "reverse", 'flags': "splice"},
  {'overlay': "video:bike_stunt", 'effect': "accelerate:-50", 'flags': "splice"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("bike_stunt", {transformation: [
  {overlay: "video:bike_stunt", effect: "reverse", flags: "splice"},
  {overlay: "video:bike_stunt", effect: "accelerate:-50", flags: "splice"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("reverse").flags("splice").chain()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("accelerate:-50").flags("splice")).videoTag("bike_stunt");
JS:
Copy to clipboard
cloudinary.videoTag('bike_stunt', {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "reverse", flags: "splice"},
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "accelerate:-50", flags: "splice"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bike_stunt", {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "reverse", flags: "splice"},
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "accelerate:-50", flags: "splice"}
  ]})
React:
Copy to clipboard
<Video publicId="bike_stunt" >
  <Transformation overlay="video:bike_stunt" effect="reverse" flags="splice" />
  <Transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bike_stunt" >
  <cld-transformation overlay="video:bike_stunt" effect="reverse" flags="splice" />
  <cld-transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bike_stunt" >
  <cl-transformation overlay="video:bike_stunt" effect="reverse" flags="splice">
  </cl-transformation>
  <cl-transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("video:bike_stunt")).Effect("reverse").Flags("splice").Chain()
  .Overlay(new Layer().PublicId("video:bike_stunt")).Effect("accelerate:-50").Flags("splice")).BuildVideoTag("bike_stunt")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("reverse").flags("splice").chain()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("accelerate:-50").flags("splice")).resourceType("video").generate("bike_stunt.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("video:bike_stunt").setEffect("reverse").setFlags("splice").chain()
  .setOverlay("video:bike_stunt").setEffect("accelerate:-50").setFlags("splice")).generate("bike_stunt.mp4")
by Maor Gariv

Creating a Bevel effect

Add the Bevel effect to any image. We will create a generalized transformation URL, which could be used to apply the bevel effect to any image. In order to do this, we'll make use of variables, overlays, the colorize effect, the cut-out effect, and more. Here is the final result - The Bevel effect

The Bevel effect

The Bevel effect

Triangle Image

Triangle Image

Top Bevel

Top Bevel

Pixelate an image or a region

Apply a pixelization effect to an image by setting the effect parameter to pixelate (e_pixelate in URLs). You can choose to pixelate the whole image or just a certain region of the image, and the size of the squares is customizable.

Original

Original

Pixeling an image

Pixeling an image

Pixeling a region

Pixeling a region
Ruby:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate", :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate", "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate", type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("pixelate")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg', {effect: "pixelate", type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})
React:
Copy to clipboard
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <Transformation effect="pixelate" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cld-transformation effect="pixelate" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg" type="fetch">
  <cl-transformation effect="pixelate">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("pixelate")).type("fetch").generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setEffect("pixelate")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Color a picture

Color an image to any other color simply by setting the effect parameter to colorize (e_colorize in URLs), then set the color you want as the value of the color parameter (co in URLs). The color can be given by either it's name (e.g., green) or by an RGB value (e.g., 00FF00).

Original

Original

Solid colorizing

Solid colorizing

Custom intensity

Custom intensity
Ruby:
Copy to clipboard
cl_image_tag("smartphone.png", :effect=>"colorize", :color=>"purple")
PHP:
Copy to clipboard
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"purple"))
Python:
Copy to clipboard
CloudinaryImage("smartphone.png").image(effect="colorize", color="purple")
Node.js:
Copy to clipboard
cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("colorize").color("purple")).imageTag("smartphone.png");
JS:
Copy to clipboard
cloudinary.imageTag('smartphone.png', {effect: "colorize", color: "purple"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
React:
Copy to clipboard
<Image publicId="smartphone.png" >
  <Transformation effect="colorize" color="purple" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="smartphone.png" >
  <cld-transformation effect="colorize" color="purple" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="smartphone.png" >
  <cl-transformation effect="colorize" color="purple">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("purple")).BuildImageTag("smartphone.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("colorize").color("purple")).generate("smartphone.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("colorize").setColor("purple")).generate("smartphone.png")!, cloudinary: cloudinary)
by Itay Taragano

Add a border to images

Add a border to your images by setting the value of the border parameter (bo in URLs). The border's color, width and opacity can be customized dynamically, and borders can be applied either on main images or on overlaid images.

Original

Original

Bordered

Bordered

Colored circle

Colored circle
Ruby:
Copy to clipboard
cl_image_tag("face_top.jpg", :border=>"2px_solid_black")
PHP:
Copy to clipboard
cl_image_tag("face_top.jpg", array("border"=>"2px_solid_black"))
Python:
Copy to clipboard
CloudinaryImage("face_top.jpg").image(border="2px_solid_black")
Node.js:
Copy to clipboard
cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().border("2px_solid_black")).imageTag("face_top.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_top.jpg', {border: "2px_solid_black"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
React:
Copy to clipboard
<Image publicId="face_top.jpg" >
  <Transformation border="2px_solid_black" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_top.jpg" >
  <cld-transformation border="2px_solid_black" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_top.jpg" >
  <cl-transformation border="2px_solid_black">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("2px_solid_black")).BuildImageTag("face_top.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().border("2px_solid_black")).generate("face_top.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("2px_solid_black")).generate("face_top.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Trim photo background

Apply the trim filter to remove the edges around the image. Do this by setting the effect parameter to trim (e_trim in URLs). You can customize the color similarity tolerance between 0 and 100. The default level is10`.

Original

Original

Trimmed

Trimmed

Custom level

Custom level
Ruby:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", :effect=>"trim")
PHP:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", array("effect"=>"trim"))
Python:
Copy to clipboard
CloudinaryImage("business_man_padded.jpg").image(effect="trim")
Node.js:
Copy to clipboard
cloudinary.image("business_man_padded.jpg", {effect: "trim"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("business_man_padded.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('business_man_padded.jpg', {effect: "trim"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("business_man_padded.jpg", {effect: "trim"})
React:
Copy to clipboard
<Image publicId="business_man_padded.jpg" >
  <Transformation effect="trim" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="business_man_padded.jpg" >
  <cld-transformation effect="trim" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="business_man_padded.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("business_man_padded.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("trim")).generate("business_man_padded.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("trim")).generate("business_man_padded.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Adjust the hue value of images

Create a different mixture of colors for your images with the Hue filter. This can be applied by setting the effect parameter to hue (e_hue in URLs). The hue level can be customized.

Original

Original

Default level

Default level

Custom level

Custom level
Ruby:
Copy to clipboard
cl_image_tag("white_chicken.jpg", :effect=>"hue")
PHP:
Copy to clipboard
cl_image_tag("white_chicken.jpg", array("effect"=>"hue"))
Python:
Copy to clipboard
CloudinaryImage("white_chicken.jpg").image(effect="hue")
Node.js:
Copy to clipboard
cloudinary.image("white_chicken.jpg", {effect: "hue"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("hue")).imageTag("white_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('white_chicken.jpg', {effect: "hue"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("white_chicken.jpg", {effect: "hue"})
React:
Copy to clipboard
<Image publicId="white_chicken.jpg" >
  <Transformation effect="hue" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="white_chicken.jpg" >
  <cld-transformation effect="hue" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="white_chicken.jpg" >
  <cl-transformation effect="hue">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue")).BuildImageTag("white_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("hue")).generate("white_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("hue")).generate("white_chicken.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Increase fill light of photos

Fill your images with a lighting effect. This is very handy when dealing with darker images. How? Set the effect parameter to fill_light (e_fill_light in URLs). You can control the fill light level, the range is between -100 and 100. The default value is 0.

Original

Original

Default level

Default level

Custom level

Custom level
Ruby:
Copy to clipboard
cl_image_tag("8jsb1xofxdqamu2rzwt9q.jpg", :effect=>"fill_light")
PHP:
Copy to clipboard
cl_image_tag("8jsb1xofxdqamu2rzwt9q.jpg", array("effect"=>"fill_light"))
Python:
Copy to clipboard
CloudinaryImage("8jsb1xofxdqamu2rzwt9q.jpg").image(effect="fill_light")
Node.js:
Copy to clipboard
cloudinary.image("8jsb1xofxdqamu2rzwt9q.jpg", {effect: "fill_light"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("fill_light")).imageTag("8jsb1xofxdqamu2rzwt9q.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('8jsb1xofxdqamu2rzwt9q.jpg', {effect: "fill_light"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("8jsb1xofxdqamu2rzwt9q.jpg", {effect: "fill_light"})
React:
Copy to clipboard
<Image publicId="8jsb1xofxdqamu2rzwt9q.jpg" >
  <Transformation effect="fill_light" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="8jsb1xofxdqamu2rzwt9q.jpg" >
  <cld-transformation effect="fill_light" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="8jsb1xofxdqamu2rzwt9q.jpg" >
  <cl-transformation effect="fill_light">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("fill_light")).BuildImageTag("8jsb1xofxdqamu2rzwt9q.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("fill_light")).generate("8jsb1xofxdqamu2rzwt9q.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("fill_light")).generate("8jsb1xofxdqamu2rzwt9q.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Apply a sepia effect

Add a warm, antique feeling to your photos using the 'Sepia' filter effect. This is done by setting the effect parameter to sepia (e_sepia in URLs). You can also customize the strength of the Sepia effect.

Original

Original

Sepia

Sepia

Custom strength

Custom strength
Ruby:
Copy to clipboard
cl_image_tag("coast.jpg", :effect=>"sepia")
PHP:
Copy to clipboard
cl_image_tag("coast.jpg", array("effect"=>"sepia"))
Python:
Copy to clipboard
CloudinaryImage("coast.jpg").image(effect="sepia")
Node.js:
Copy to clipboard
cloudinary.image("coast.jpg", {effect: "sepia"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("sepia")).imageTag("coast.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('coast.jpg', {effect: "sepia"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("coast.jpg", {effect: "sepia"})
React:
Copy to clipboard
<Image publicId="coast.jpg" >
  <Transformation effect="sepia" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="coast.jpg" >
  <cld-transformation effect="sepia" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="coast.jpg" >
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia")).BuildImageTag("coast.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("sepia")).generate("coast.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sepia")).generate("coast.jpg")!, cloudinary: cloudinary)
by Itay Taragano

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.

Original

Original

Grayscale

Grayscale

Gradient fade

Gradient fade
Ruby:
Copy to clipboard
cl_image_tag("happy_dog.jpg", :effect=>"grayscale")
PHP:
Copy to clipboard
cl_image_tag("happy_dog.jpg", array("effect"=>"grayscale"))
Python:
Copy to clipboard
CloudinaryImage("happy_dog.jpg").image(effect="grayscale")
Node.js:
Copy to clipboard
cloudinary.image("happy_dog.jpg", {effect: "grayscale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("grayscale")).imageTag("happy_dog.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('happy_dog.jpg', {effect: "grayscale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("happy_dog.jpg", {effect: "grayscale"})
React:
Copy to clipboard
<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="happy_dog.jpg" >
  <cld-transformation effect="grayscale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("grayscale")).BuildImageTag("happy_dog.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("grayscale")).generate("happy_dog.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("grayscale")).generate("happy_dog.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Generate your photo collage online

Take your base image and use the overlay parameter (l in URLs) to add any further images. Set the required width and height (w and h in URLs) with the required crop mode, and add any further transformations, effects and texts.

Various images

Various images

Collage with text

Collage with text

Another collage

Another collage
Ruby:
Copy to clipboard
cl_image_tag("yellow_tulip.jpg", :transformation=>[
  {:width=>220, :height=>140, :crop=>"fill"},
  {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"},
  {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"},
  {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"},
  {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10},
  {:width=>400, :height=>260, :radius=>20, :crop=>"crop"},
  {:overlay=>{:font_family=>"Parisienne", :font_size=>35, :font_weight=>"bold", :text=>"Memories%20from%20our%20trip"}, :color=>"#990C47", :y=>155},
  {:effect=>"shadow"}
  ])
PHP:
Copy to clipboard
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array(
  array("width"=>220, "height"=>140, "crop"=>"fill"),
  array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"),
  array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"),
  array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"),
  array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10),
  array("width"=>400, "height"=>260, "radius"=>20, "crop"=>"crop"),
  array("overlay"=>array("font_family"=>"Parisienne", "font_size"=>35, "font_weight"=>"bold", "text"=>"Memories%20from%20our%20trip"), "color"=>"#990C47", "y"=>155),
  array("effect"=>"shadow")
  )))
Python:
Copy to clipboard
CloudinaryImage("yellow_tulip.jpg").image(transformation=[
  {'width': 220, 'height': 140, 'crop': "fill"},
  {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"},
  {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"},
  {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"},
  {'overlay': "butterfly.png", 'height': 200, 'x': -10, 'angle': 10},
  {'width': 400, 'height': 260, 'radius': 20, 'crop': "crop"},
  {'overlay': {'font_family': "Parisienne", 'font_size': 35, 'font_weight': "bold", 'text': "Memories%20from%20our%20trip"}, 'color': "#990C47", 'y': 155},
  {'effect': "shadow"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("yellow_tulip.jpg", {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: "butterfly.png", height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: {font_family: "Parisienne", font_size: 35, font_weight: "bold", text: "Memories%20from%20our%20trip"}, color: "#990C47", y: 155},
  {effect: "shadow"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain()
  .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155).chain()
  .effect("shadow")).imageTag("yellow_tulip.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155},
  {effect: "shadow"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("yellow_tulip.jpg", {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155},
  {effect: "shadow"}
  ]})
React:
Copy to clipboard
<Image publicId="yellow_tulip.jpg" >
  <Transformation width="220" height="140" crop="fill" />
  <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" />
  <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" />
  <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" />
  <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" />
  <Transformation width="400" height="260" radius="20" crop="crop" />
  <Transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" />
  <Transformation effect="shadow" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="yellow_tulip.jpg" >
  <cld-transformation width="220" height="140" crop="fill" />
  <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" />
  <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" />
  <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" />
  <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" />
  <cld-transformation width="400" height="260" radius="20" crop="crop" />
  <cld-transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" />
  <cld-transformation effect="shadow" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="yellow_tulip.jpg" >
  <cl-transformation width="220" height="140" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10">
  </cl-transformation>
  <cl-transformation width="400" height="260" radius="20" crop="crop">
  </cl-transformation>
  <cl-transformation overlay="text:Parisienne_35_bold:Memories%20from%20our%20trip" color="#990C47" y="155">
  </cl-transformation>
  <cl-transformation effect="shadow">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(220).Height(140).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10).Chain()
  .Width(400).Height(260).Radius(20).Crop("crop").Chain()
  .Overlay(new TextLayer().FontFamily("Parisienne").FontSize(35).FontWeight("bold").Text("Memories%20from%20our%20trip")).Color("#990C47").Y(155).Chain()
  .Effect("shadow")).BuildImageTag("yellow_tulip.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain()
  .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155).chain()
  .effect("shadow")).generate("yellow_tulip.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(220).setHeight(140).setCrop("fill").chain()
  .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain()
  .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain()
  .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain()
  .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10).chain()
  .setWidth(400).setHeight(260).setRadius(20).setCrop("crop").chain()
  .setOverlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").setColor("#990C47").setY(155).chain()
  .setEffect("shadow")).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Add a shadow effect to an image

Add a shadow effect to any image just by setting the effect parameter to shadow (e_shadow in URLs). You can customize the x and y offsets of the shadow and the blurring level. The shadow's color can be also changed by setting the color parameter (co in URLs).

Original

Original

Custom shadow

Custom shadow

Colored shadow

Colored shadow
Ruby:
Copy to clipboard
cl_image_tag("cloudinary_icon.png", :effect=>"shadow:90", :x=>15, :y=>15, :color=>"brown")
PHP:
Copy to clipboard
cl_image_tag("cloudinary_icon.png", array("effect"=>"shadow:90", "x"=>15, "y"=>15, "color"=>"brown"))
Python:
Copy to clipboard
CloudinaryImage("cloudinary_icon.png").image(effect="shadow:90", x=15, y=15, color="brown")
Node.js:
Copy to clipboard
cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "brown"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("shadow:90").x(15).y(15).color("brown")).imageTag("cloudinary_icon.png");
JS:
Copy to clipboard
cloudinary.imageTag('cloudinary_icon.png', {effect: "shadow:90", x: 15, y: 15, color: "brown"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "brown"})
React:
Copy to clipboard
<Image publicId="cloudinary_icon.png" >
  <Transformation effect="shadow:90" x="15" y="15" color="brown" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cloudinary_icon.png" >
  <cld-transformation effect="shadow:90" x="15" y="15" color="brown" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cloudinary_icon.png" >
  <cl-transformation effect="shadow:90" x="15" y="15" color="brown">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("shadow:90").X(15).Y(15).Color("brown")).BuildImageTag("cloudinary_icon.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("shadow:90").x(15).y(15).color("brown")).generate("cloudinary_icon.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("shadow:90").setX(15).setY(15).setColor("brown")).generate("cloudinary_icon.png")!, cloudinary: cloudinary)
by Itay Taragano