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:
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=>"text:Playball_40: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"=>"text:Playball_40: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": "text:Playball_40: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: "text:Playball_40: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("avatar").effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay("text:Playball_40:60%2525").color("white").y(80).chain()
  .width(200).crop("scale")).imageTag("avatar.jpg")
JS:
cl.imageTag('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: "text:Playball_40: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: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: "text:Playball_40: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="text:Playball_40: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("avatar").Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain()
  .Flags("layer_apply").Gravity("south").Chain()
  .Overlay("text:Playball_40:60%2525").Color("white").Y(80).Chain()
  .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")
by Itay Taragano

Image rotation

Rotate an image by setting the angle parameter (a in URLs) to a given value representing the degree of rotation. A positive value rotates the image clockwise while a negative value rotates it counterclockwise.

Original

Original

Rotated 90°

Rotated 90°

Rotated overlay

Rotated overlay
Ruby:
cl_image_tag("sea_shell.jpg", :angle=>90)
PHP:
cl_image_tag("sea_shell.jpg", array("angle"=>90))
Python:
CloudinaryImage("sea_shell.jpg").image(angle=90)
Node.js:
cloudinary.image("sea_shell.jpg", {angle: 90})
Java:
cloudinary.url().transformation(new Transformation().angle(90)).imageTag("sea_shell.jpg")
JS:
cl.imageTag('sea_shell.jpg', {angle: 90}).toHtml();
jQuery:
$.cloudinary.image("sea_shell.jpg", {angle: 90})
React:
<Image publicId="sea_shell.jpg" >
  <Transformation angle="90" />
</Image>
Angular:
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("sea_shell.jpg")
by Itay Taragano

Overlay an image over detected faces

Overlay another image of your choice on top of the faces which are automatically detected in your image. This is done by setting the overlay parameter (l in URLs) to the overlay image's public ID while setting the gravity parameter to faces (g_faces in URLs).

Original

Original

Faces overlay

Faces overlay

Funny overlay

Funny overlay
Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", :overlay=>"badge", :gravity=>"faces", :width=>30, :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", array("overlay"=>"badge", "gravity"=>"faces", "width"=>30, "type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg").image(overlay="badge", gravity="faces", width=30, type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: "badge", gravity: "faces", width: 30, type: "fetch"})
Java:
cloudinary.url().transformation(new Transformation().overlay("badge").gravity("faces").width(30)).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")
JS:
cl.imageTag('http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg', {overlay: "badge", gravity: "faces", width: 30, type: "fetch"}).toHtml();
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg", {overlay: "badge", gravity: "faces", width: 30, type: "fetch"})
React:
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <Transformation overlay="badge" gravity="faces" width="30" />
</Image>
Angular:
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg" type="fetch">
  <cl-transformation overlay="badge" gravity="faces" width="30">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("badge").Gravity("faces").Width(30)).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")
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:
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:
cl.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")
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:
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:
cl.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")
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:
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:
cl.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")
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:
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:
cl.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")
by Itay Taragano

Extract frames from an animated GIF

Extract frames from an animated GIF, you can choose which frame to deliver, apply any further image manipulations including resizing, cropping, overlays and much more.

Original

Original

1st frame-Default

1st frame-Default

10th frame

10th frame
Ruby:
cl_image_tag("bored_animation.jpg")
PHP:
cl_image_tag("bored_animation.jpg")
Python:
CloudinaryImage("bored_animation.jpg").image()
Node.js:
cloudinary.image("bored_animation.jpg")
Java:
cloudinary.url().imageTag("bored_animation.jpg")
JS:
cl.imageTag('bored_animation.jpg').toHtml();
jQuery:
$.cloudinary.image("bored_animation.jpg")
React:
<Image publicId="bored_animation.jpg" >

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

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.jpg")
by Itay Taragano

Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Original

Original

Rotated

Rotated

Adding text

Adding text
Ruby:
cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")
PHP:
cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))
Python:
CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")
Node.js:
cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif")
JS:
cl.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
React:
<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>
Angular:
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")
by Itay Taragano

Adding watermarks as an overlay

Add your watermark as an overlay on top of any image by setting the overlay parameter (l in URLs) as your watermark image's public ID. The overlaid image's size and position is customizable.

Overlaying

Overlaying

Scale and position

Scale and position

Semi-transparent

Semi-transparent
Ruby:
cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")
PHP:
cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))
Python:
CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon")
Node.js:
cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon")).imageTag("envelope.jpg")
JS:
cl.imageTag('envelope.jpg', {overlay: "cloudinary_icon"}).toHtml();
jQuery:
$.cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
React:
<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>
Angular:
<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon")).BuildImageTag("envelope.jpg")
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:
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=>"text:Parisienne_35_bold: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"=>"text:Parisienne_35_bold: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": "text:Parisienne_35_bold: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: "text:Parisienne_35_bold:Memories%20from%20our%20trip", color: "#990C47", y: 155},
  {effect: "shadow"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay("brown_sheep").width(220).height(140).x(220).crop("fill").chain()
  .overlay("horses").width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay("white_chicken").width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay("butterfly.png").height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").color("#990C47").y(155).chain()
  .effect("shadow")).imageTag("yellow_tulip.jpg")
JS:
cl.imageTag('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: "text:Parisienne_35_bold: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: "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: "text:Parisienne_35_bold: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="text:Parisienne_35_bold: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("brown_sheep").Width(220).Height(140).X(220).Crop("fill").Chain()
  .Overlay("horses").Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain()
  .Overlay("white_chicken").Width(220).Height(140).Y(70).X(110).Crop("fill").Chain()
  .Overlay("butterfly.png").Height(200).X(-10).Angle(10).Chain()
  .Width(400).Height(260).Radius(20).Crop("crop").Chain()
  .Overlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").Color("#990C47").Y(155).Chain()
  .Effect("shadow")).BuildImageTag("yellow_tulip.jpg")
by Itay Taragano

Text overlay positioning

Customize text overlay's position by setting the gravity (g in URLs) and the optional offset of the x and y. While the default text positioning ('gravity') is center, you can place your text in any other area of the image (tip: even outside the image's boundaries).

Default - center

Default - center

South gravity

South gravity

Custom position

Custom position
Ruby:
cl_image_tag("face_center.jpg", :overlay=>"text:Arial_45_bold:Hello%20World", :gravity=>"north_west", :x=>20, :y=>20)
PHP:
cl_image_tag("face_center.jpg", array("overlay"=>"text:Arial_45_bold:Hello%20World", "gravity"=>"north_west", "x"=>20, "y"=>20))
Python:
CloudinaryImage("face_center.jpg").image(overlay="text:Arial_45_bold:Hello%20World", gravity="north_west", x=20, y=20)
Node.js:
cloudinary.image("face_center.jpg", {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Arial_45_bold:Hello%20World").gravity("north_west").x(20).y(20)).imageTag("face_center.jpg")
JS:
cl.imageTag('face_center.jpg', {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20}).toHtml();
jQuery:
$.cloudinary.image("face_center.jpg", {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20})
React:
<Image publicId="face_center.jpg" >
  <Transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20" />
</Image>
Angular:
<cl-image public-id="face_center.jpg" >
  <cl-transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_45_bold:Hello%20World").Gravity("north_west").X(20).Y(20)).BuildImageTag("face_center.jpg")
by Itay Taragano

Add a text to an image

Add dynamic text on top of any image, on-the-fly. You can use any one of the hundreds of fonts available by Google Fonts, or even use your own custom font. Embed the text by setting the overlay parameter (l in URLs) to text<text_params>.

Dynamic style

Dynamic style

Colored text

Colored text

Pre-defined style

Pre-defined style
Ruby:
cl_image_tag("site_bg_bright_small.jpg", :overlay=>"text:Arial_24_bold:Dynamic%20style")
PHP:
cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>"text:Arial_24_bold:Dynamic%20style"))
Python:
CloudinaryImage("site_bg_bright_small.jpg").image(overlay="text:Arial_24_bold:Dynamic%20style")
Node.js:
cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Arial_24_bold:Dynamic%20style")).imageTag("site_bg_bright_small.jpg")
JS:
cl.imageTag('site_bg_bright_small.jpg', {overlay: "text:Arial_24_bold:Dynamic%20style"}).toHtml();
jQuery:
$.cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})
React:
<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay="text:Arial_24_bold:Dynamic%20style" />
</Image>
Angular:
<cl-image public-id="site_bg_bright_small.jpg" >
  <cl-transformation overlay="text:Arial_24_bold:Dynamic%20style">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_24_bold:Dynamic%20style")).BuildImageTag("site_bg_bright_small.jpg")
by Itay Taragano