Cloudinary cookbook background

Cloudinary Cookbook

Recipes of the Effect tag

← View popular recipes
Find recipes by tags:
View all tags

Create your own Duotone filter

A cool new design trend popularized by Spotify 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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/e_grayscale/e_tint:50:red/18882410261_e4f9d25780_b_lked9y.jpg
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
  {:quality=>"auto"},
  {:effect=>"grayscale"},
  {:effect=>"tint:50:red"}
  ])
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
  array("quality"=>"auto"),
  array("effect"=>"grayscale"),
  array("effect"=>"tint:50:red")
  )))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
  {'quality': "auto"},
  {'effect': "grayscale"},
  {'effect': "tint:50:red"}
  ])
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <Transformation quality="auto" />
  <Transformation effect="grayscale" />
  <Transformation effect="tint:50:red" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Chain()
  .Effect("grayscale").Chain()
  .Effect("tint:50:red")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").chain()
  .setEffect("grayscale").chain()
  .setEffect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
Read more
by Robert Moseley
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_text:Coustard_200_bold:Flowers,fl_cutter/yellow_tulip.png
Ruby:
cl_image_tag("yellow_tulip.png", :overlay=>{:font_family=>"Coustard", :font_size=>200, :font_weight=>"bold", :text=>"Flowers"}, :flags=>"cutter")
PHP:
cl_image_tag("yellow_tulip.png", array("overlay"=>array("font_family"=>"Coustard", "font_size"=>200, "font_weight"=>"bold", "text"=>"Flowers"), "flags"=>"cutter"))
Python:
CloudinaryImage("yellow_tulip.png").image(overlay={'font_family': "Coustard", 'font_size': 200, 'font_weight': "bold", 'text': "Flowers"}, flags="cutter")
Node.js:
cloudinary.image("yellow_tulip.png", {overlay: {font_family: "Coustard", font_size: 200, font_weight: "bold", text: "Flowers"}, flags: "cutter"})
Java:
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers")).flags("cutter")).imageTag("yellow_tulip.png");
JS:
cloudinary.imageTag('yellow_tulip.png', {overlay: new cloudinary.TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers"), flags: "cutter"}).toHtml();
jQuery:
$.cloudinary.image("yellow_tulip.png", {overlay: new cloudinary.TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers"), flags: "cutter"})
React:
<Image publicId="yellow_tulip.png" >
  <Transformation overlay={{fontFamily: "Coustard", fontSize: 200, fontWeight: "bold", text: "Flowers"}} flags="cutter" />
</Image>
Angular:
<cl-image public-id="yellow_tulip.png" >
  <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Coustard").FontSize(200).FontWeight("bold").Text("Flowers")).Flags("cutter")).BuildImageTag("yellow_tulip.png")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Coustard").fontSize(200).fontWeight("bold").text("Flowers")).flags("cutter")).generate("yellow_tulip.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Coustard_200_bold:Flowers").setFlags("cutter")).generate("yellow_tulip.png")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_trim/e_colorize,co_white/b_rgb:D0CDCD/l_avatar,e_trim,w_1.0,h_0.6,c_crop,g_south/fl_layer_apply,g_south/l_text:Playball_40:60%25,co_white,y_80/w_200,c_scale/avatar.jpg
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/fetch/e_pixelate/http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_colorize,co_purple/smartphone.png
Ruby:
cl_image_tag("smartphone.png", :effect=>"colorize", :color=>"purple")
PHP:
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"purple"))
Python:
CloudinaryImage("smartphone.png").image(effect="colorize", color="purple")
Node.js:
cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
Java:
cloudinary.url().transformation(new Transformation().effect("colorize").color("purple")).imageTag("smartphone.png");
JS:
cloudinary.imageTag('smartphone.png', {effect: "colorize", color: "purple"}).toHtml();
jQuery:
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
React:
<Image publicId="smartphone.png" >
  <Transformation effect="colorize" color="purple" />
</Image>
Angular:
<cl-image public-id="smartphone.png" >
  <cl-transformation effect="colorize" color="purple">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("purple")).BuildImageTag("smartphone.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("colorize").color("purple")).generate("smartphone.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("colorize").setColor("purple")).generate("smartphone.png")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/bo_2px_solid_black/face_top.jpg
Ruby:
cl_image_tag("face_top.jpg", :border=>"2px_solid_black")
PHP:
cl_image_tag("face_top.jpg", array("border"=>"2px_solid_black"))
Python:
CloudinaryImage("face_top.jpg").image(border="2px_solid_black")
Node.js:
cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
Java:
cloudinary.url().transformation(new Transformation().border("2px_solid_black")).imageTag("face_top.jpg");
JS:
cloudinary.imageTag('face_top.jpg', {border: "2px_solid_black"}).toHtml();
jQuery:
$.cloudinary.image("face_top.jpg", {border: "2px_solid_black"})
React:
<Image publicId="face_top.jpg" >
  <Transformation border="2px_solid_black" />
</Image>
Angular:
<cl-image public-id="face_top.jpg" >
  <cl-transformation border="2px_solid_black">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("2px_solid_black")).BuildImageTag("face_top.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().border("2px_solid_black")).generate("face_top.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("2px_solid_black")).generate("face_top.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_trim/business_man_padded.jpg
Ruby:
cl_image_tag("business_man_padded.jpg", :effect=>"trim")
PHP:
cl_image_tag("business_man_padded.jpg", array("effect"=>"trim"))
Python:
CloudinaryImage("business_man_padded.jpg").image(effect="trim")
Node.js:
cloudinary.image("business_man_padded.jpg", {effect: "trim"})
Java:
cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("business_man_padded.jpg");
JS:
cloudinary.imageTag('business_man_padded.jpg', {effect: "trim"}).toHtml();
jQuery:
$.cloudinary.image("business_man_padded.jpg", {effect: "trim"})
React:
<Image publicId="business_man_padded.jpg" >
  <Transformation effect="trim" />
</Image>
Angular:
<cl-image public-id="business_man_padded.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("business_man_padded.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("trim")).generate("business_man_padded.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("trim")).generate("business_man_padded.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_hue/white_chicken.jpg
Ruby:
cl_image_tag("white_chicken.jpg", :effect=>"hue")
PHP:
cl_image_tag("white_chicken.jpg", array("effect"=>"hue"))
Python:
CloudinaryImage("white_chicken.jpg").image(effect="hue")
Node.js:
cloudinary.image("white_chicken.jpg", {effect: "hue"})
Java:
cloudinary.url().transformation(new Transformation().effect("hue")).imageTag("white_chicken.jpg");
JS:
cloudinary.imageTag('white_chicken.jpg', {effect: "hue"}).toHtml();
jQuery:
$.cloudinary.image("white_chicken.jpg", {effect: "hue"})
React:
<Image publicId="white_chicken.jpg" >
  <Transformation effect="hue" />
</Image>
Angular:
<cl-image public-id="white_chicken.jpg" >
  <cl-transformation effect="hue">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue")).BuildImageTag("white_chicken.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("hue")).generate("white_chicken.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("hue")).generate("white_chicken.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_fill_light/8jsb1xofxdqamu2rzwt9q.jpg
Ruby:
cl_image_tag("8jsb1xofxdqamu2rzwt9q.jpg", :effect=>"fill_light")
PHP:
cl_image_tag("8jsb1xofxdqamu2rzwt9q.jpg", array("effect"=>"fill_light"))
Python:
CloudinaryImage("8jsb1xofxdqamu2rzwt9q.jpg").image(effect="fill_light")
Node.js:
cloudinary.image("8jsb1xofxdqamu2rzwt9q.jpg", {effect: "fill_light"})
Java:
cloudinary.url().transformation(new Transformation().effect("fill_light")).imageTag("8jsb1xofxdqamu2rzwt9q.jpg");
JS:
cloudinary.imageTag('8jsb1xofxdqamu2rzwt9q.jpg', {effect: "fill_light"}).toHtml();
jQuery:
$.cloudinary.image("8jsb1xofxdqamu2rzwt9q.jpg", {effect: "fill_light"})
React:
<Image publicId="8jsb1xofxdqamu2rzwt9q.jpg" >
  <Transformation effect="fill_light" />
</Image>
Angular:
<cl-image public-id="8jsb1xofxdqamu2rzwt9q.jpg" >
  <cl-transformation effect="fill_light">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("fill_light")).BuildImageTag("8jsb1xofxdqamu2rzwt9q.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("fill_light")).generate("8jsb1xofxdqamu2rzwt9q.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("fill_light")).generate("8jsb1xofxdqamu2rzwt9q.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_sepia/coast.jpg
Ruby:
cl_image_tag("coast.jpg", :effect=>"sepia")
PHP:
cl_image_tag("coast.jpg", array("effect"=>"sepia"))
Python:
CloudinaryImage("coast.jpg").image(effect="sepia")
Node.js:
cloudinary.image("coast.jpg", {effect: "sepia"})
Java:
cloudinary.url().transformation(new Transformation().effect("sepia")).imageTag("coast.jpg");
JS:
cloudinary.imageTag('coast.jpg', {effect: "sepia"}).toHtml();
jQuery:
$.cloudinary.image("coast.jpg", {effect: "sepia"})
React:
<Image publicId="coast.jpg" >
  <Transformation effect="sepia" />
</Image>
Angular:
<cl-image public-id="coast.jpg" >
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia")).BuildImageTag("coast.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("sepia")).generate("coast.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sepia")).generate("coast.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_grayscale/happy_dog.jpg
Ruby:
cl_image_tag("happy_dog.jpg", :effect=>"grayscale")
PHP:
cl_image_tag("happy_dog.jpg", array("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>
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)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/w_400,h_260,c_crop,r_20/l_text:Parisienne_35_bold:Memories from our trip,co_rgb:990C47,y_155/e_shadow/yellow_tulip.jpg
Ruby:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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)
Read more
by Itay Taragano
Tags:

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
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_shadow:90,x_15,y_15,co_brown/cloudinary_icon.png
Ruby:
cl_image_tag("cloudinary_icon.png", :effect=>"shadow:90", :x=>15, :y=>15, :color=>"brown")
PHP:
cl_image_tag("cloudinary_icon.png", array("effect"=>"shadow:90", "x"=>15, "y"=>15, "color"=>"brown"))
Python:
CloudinaryImage("cloudinary_icon.png").image(effect="shadow:90", x=15, y=15, color="brown")
Node.js:
cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "brown"})
Java:
cloudinary.url().transformation(new Transformation().effect("shadow:90").x(15).y(15).color("brown")).imageTag("cloudinary_icon.png");
JS:
cloudinary.imageTag('cloudinary_icon.png', {effect: "shadow:90", x: 15, y: 15, color: "brown"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "brown"})
React:
<Image publicId="cloudinary_icon.png" >
  <Transformation effect="shadow:90" x="15" y="15" color="brown" />
</Image>
Angular:
<cl-image public-id="cloudinary_icon.png" >
  <cl-transformation effect="shadow:90" x="15" y="15" color="brown">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("shadow:90").X(15).Y(15).Color("brown")).BuildImageTag("cloudinary_icon.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("shadow:90").x(15).y(15).color("brown")).generate("cloudinary_icon.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("shadow:90").setX(15).setY(15).setColor("brown")).generate("cloudinary_icon.png")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Automatically improve photos

Automatically improve the visual quality of your images using Cloudinary. Image improving is done by setting the effect parameter to improve (e_improve in URLs). All images and thumbnails of your website would seamlessly look much clearer and vivid.

Original

Original

Improved

Improved

Improved, cropped

Improved, cropped
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_improve/gray_mountain.jpg
Ruby:
cl_image_tag("gray_mountain.jpg", :effect=>"improve")
PHP:
cl_image_tag("gray_mountain.jpg", array("effect"=>"improve"))
Python:
CloudinaryImage("gray_mountain.jpg").image(effect="improve")
Node.js:
cloudinary.image("gray_mountain.jpg", {effect: "improve"})
Java:
cloudinary.url().transformation(new Transformation().effect("improve")).imageTag("gray_mountain.jpg");
JS:
cloudinary.imageTag('gray_mountain.jpg', {effect: "improve"}).toHtml();
jQuery:
$.cloudinary.image("gray_mountain.jpg", {effect: "improve"})
React:
<Image publicId="gray_mountain.jpg" >
  <Transformation effect="improve" />
</Image>
Angular:
<cl-image public-id="gray_mountain.jpg" >
  <cl-transformation effect="improve">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("improve")).BuildImageTag("gray_mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("improve")).generate("gray_mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("improve")).generate("gray_mountain.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Adjust image brightness

Dynamically adjust the brightness of an image. Either manually set the brightness level, or tell Cloudinary to automatically balance the brightness level. Brightness level change can be manually applied by setting the effect parameter to brightness (e_brightness in URLs), or by using the auto_brightness effect for automatic brightness adjustment.

Original

Original

30% brighter

30% brighter

50% darker

50% darker
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_brightness:30/mountain.jpg
Ruby:
cl_image_tag("mountain.jpg", :effect=>"brightness:30")
PHP:
cl_image_tag("mountain.jpg", array("effect"=>"brightness:30"))
Python:
CloudinaryImage("mountain.jpg").image(effect="brightness:30")
Node.js:
cloudinary.image("mountain.jpg", {effect: "brightness:30"})
Java:
cloudinary.url().transformation(new Transformation().effect("brightness:30")).imageTag("mountain.jpg");
JS:
cloudinary.imageTag('mountain.jpg', {effect: "brightness:30"}).toHtml();
jQuery:
$.cloudinary.image("mountain.jpg", {effect: "brightness:30"})
React:
<Image publicId="mountain.jpg" >
  <Transformation effect="brightness:30" />
</Image>
Angular:
<cl-image public-id="mountain.jpg" >
  <cl-transformation effect="brightness:30">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness:30")).BuildImageTag("mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("brightness:30")).generate("mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("brightness:30")).generate("mountain.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Customize color saturation

Saturation level of images can be easily increased or decreased on-the-fly. This can be done by setting the effect parameter to saturation (e_saturation in URLs). Saturation levels can be customized by specifying the saturation percentage, either positive or negative.

Original

Original

+60% Saturation

+60% Saturation

-60% Saturation

-60% Saturation
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_saturation:60/vegetable_soup.jpg
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:60")
PHP:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:60"))
Python:
CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:60")
Node.js:
cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})
Java:
cloudinary.url().transformation(new Transformation().effect("saturation:60")).imageTag("vegetable_soup.jpg");
JS:
cloudinary.imageTag('vegetable_soup.jpg', {effect: "saturation:60"}).toHtml();
jQuery:
$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})
React:
<Image publicId="vegetable_soup.jpg" >
  <Transformation effect="saturation:60" />
</Image>
Angular:
<cl-image public-id="vegetable_soup.jpg" >
  <cl-transformation effect="saturation:60">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:60")).BuildImageTag("vegetable_soup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("saturation:60")).generate("vegetable_soup.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:60")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Sharpen an image

Use Cloudinary to sharpen your images easily and dynamically. Image sharpening can be applied by setting the effect parameter to sharpen (e_sharpen in URLs). A custom sharpen level can be set in order to get the exact effect you need.

Original

Original

Sharpened

Sharpened

Sharpened more

Sharpened more
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_sharpen/front_face.jpg
Ruby:
cl_image_tag("front_face.jpg", :effect=>"sharpen")
PHP:
cl_image_tag("front_face.jpg", array("effect"=>"sharpen"))
Python:
CloudinaryImage("front_face.jpg").image(effect="sharpen")
Node.js:
cloudinary.image("front_face.jpg", {effect: "sharpen"})
Java:
cloudinary.url().transformation(new Transformation().effect("sharpen")).imageTag("front_face.jpg");
JS:
cloudinary.imageTag('front_face.jpg', {effect: "sharpen"}).toHtml();
jQuery:
$.cloudinary.image("front_face.jpg", {effect: "sharpen"})
React:
<Image publicId="front_face.jpg" >
  <Transformation effect="sharpen" />
</Image>
Angular:
<cl-image public-id="front_face.jpg" >
  <cl-transformation effect="sharpen">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sharpen")).BuildImageTag("front_face.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("sharpen")).generate("front_face.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sharpen")).generate("front_face.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Streamlining the Process of Product Image Creation

Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages.

Photo with Background Removed

Photo with Background Removed

Photo with Background Removed

Photo with Background Removed

Processed Product Photo

Processed Product Photo
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/wood_chair_orig.jpg
Ruby:
cl_image_tag("wood_chair_orig.jpg")
PHP:
cl_image_tag("wood_chair_orig.jpg")
Python:
CloudinaryImage("wood_chair_orig.jpg").image()
Node.js:
cloudinary.image("wood_chair_orig.jpg")
Java:
cloudinary.url().imageTag("wood_chair_orig.jpg");
JS:
cloudinary.imageTag('wood_chair_orig.jpg').toHtml();
jQuery:
$.cloudinary.image("wood_chair_orig.jpg")
React:
<Image publicId="wood_chair_orig.jpg" >

</Image>
Angular:
<cl-image public-id="wood_chair_orig.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("wood_chair_orig.jpg")
Android:
MediaManager.get().url().generate("wood_chair_orig.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("wood_chair_orig.jpg")!, cloudinary: cloudinary)
Read more
by Josh Slivken
Tags: