Cloudinary Blog

Overlaying Text on Images, Pixel Perfect With No CSS Or HTML

Overlaying Text on Images, Pixel Perfect With No CSS Or HTML

Overlaying text on images is a versatile and effective way in which to spotlight captions, names, copyright watermarks, and such. You can also overlay text over dynamic images (advertisement banners, coupons, greeting cards, business cards) in e-commerce-oriented emails.

Our customers frequently ask about how to dynamically overlay text on images. One common approach is to do that with HTML elements, CSS, or native mobile-UI controls. Oftentimes, however, it’s more efficient to overlay text on images while creating them, simplifying the process of displaying them on channels and devices later on.

By leveraging Cloudinary's cloud-based media-management service, you can upload images or videos, specify text, and dynamically overlay it over them on the fly with authenticated API calls. You can also build dynamic banners with text layers.


Sign up for Cloudinary free today!


Dynamic Styles

Newly available from Cloudinary are dynamic URLs through which you can overlay text—in a font of your choice—to images in real time. You can also further customize and manipulate text layers for the look and feel you desire. The entire process occurs in the cloud with no need for authenticated API calls.

For example, the following dynamic URL for a previously-uploaded image named sea_shell.jpg and labeled Sea Shell contains the l_text: parameter with the following attributes:

  • The font name (arial)
  • The font size in pixels (60)
  • The label (Sea Shell)
  • The positioning of the overlay (20), i.e., 20 pixels from the top of the image, as defined by the gravity parameter, which is set to north (g_north in the URL)

Ruby:
Copy to clipboard
cl_image_tag("sea_shell.jpg", :transformation=>[
  {:width=>400, :quality=>"auto", :crop=>"scale"},
  {:overlay=>{:font_family=>"arial", :font_size=>60, :text=>"Sea%20Shell"}, :gravity=>"north", :y=>20}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("sea_shell.jpg", array("transformation"=>array(
  array("width"=>400, "quality"=>"auto", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"arial", "font_size"=>60, "text"=>"Sea%20Shell"), "gravity"=>"north", "y"=>20)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('sea_shell.jpg'))
  ->resize(Resize::scale()->width(400))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()))
  ->overlay(Overlay::source(Source::text('Sea Shell', (new TextStyle('arial', 60))))
    ->position((new Position())
      ->gravity(Gravity::compass(Compass::north()))
      ->offsetY(20)));
Python:
Copy to clipboard
CloudinaryImage("sea_shell.jpg").image(transformation=[
  {'width': 400, 'quality': "auto", 'crop': "scale"},
  {'overlay': {'font_family': "arial", 'font_size': 60, 'text': "Sea%20Shell"}, 'gravity': "north", 'y': 20}
  ])
Node.js:
Copy to clipboard
cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: {font_family: "arial", font_size: 60, text: "Sea%20Shell"}, gravity: "north", y: 20}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(60).text("Sea%20Shell")).gravity("north").y(20)).imageTag("sea_shell.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sea_shell.jpg', {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(60).text("Sea%20Shell"), gravity: "north", y: 20}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(60).text("Sea%20Shell"), gravity: "north", y: 20}
  ]})
React:
Copy to clipboard
<Image publicId="sea_shell.jpg" >
  <Transformation width="400" quality="auto" crop="scale" />
  <Transformation overlay={{fontFamily: "arial", fontSize: 60, text: "Sea%20Shell"}} gravity="north" y="20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sea_shell.jpg" >
  <cld-transformation width="400" quality="auto" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'arial', fontSize: 60, text: 'Sea%20Shell'}" gravity="north" y="20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation width="400" quality="auto" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:arial_60:Sea%20Shell" gravity="north" y="20">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Quality("auto").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("arial").FontSize(60).Text("Sea%20Shell")).Gravity("north").Y(20)).BuildImageTag("sea_shell.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(60).text("Sea%20Shell")).gravity("north").y(20)).generate("sea_shell.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setQuality("auto").setCrop("scale").chain()
  .setOverlay("text:arial_60:Sea%20Shell").setGravity("north").setY(20)).generate("sea_shell.jpg")!, cloudinary: cloudinary)
Photo Overlaid With Caption “Sea Shell”

Cloudinary offers hundreds of fonts, including Google Fonts. To specify a font choice, add its name (case insensitive) to the URL as shown in the above example. For further customization, append one or more of these attributes: bold, italic, underline, strikethrough, center, left, and right.

Below is again the photo labeled Sea Shell, now in Courier font, boldfaced, italicized, and underlined.

Ruby:
Copy to clipboard
cl_image_tag("sea_shell.jpg", :transformation=>[
  {:width=>400, :quality=>"auto", :crop=>"scale"},
  {:overlay=>{:font_family=>"courier", :font_size=>60, :font_weight=>"bold", :font_style=>"italic", :text_decoration=>"underline", :text=>"Sea%20Shell"}, :gravity=>"north", :y=>20}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("sea_shell.jpg", array("transformation"=>array(
  array("width"=>400, "quality"=>"auto", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"courier", "font_size"=>60, "font_weight"=>"bold", "font_style"=>"italic", "text_decoration"=>"underline", "text"=>"Sea%20Shell"), "gravity"=>"north", "y"=>20)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('sea_shell.jpg'))
  ->resize(Resize::scale()->width(400))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()))
  ->overlay(
      Overlay::source(
          Source::text('Sea Shell', (new TextStyle('courier', 60))
            ->fontWeight(FontWeight::bold())
            ->fontStyle(FontStyle::italic())
            ->textDecoration(TextDecoration::underline())))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::north()))
          ->offsetY(20)
      
      ));
Python:
Copy to clipboard
CloudinaryImage("sea_shell.jpg").image(transformation=[
  {'width': 400, 'quality': "auto", 'crop': "scale"},
  {'overlay': {'font_family': "courier", 'font_size': 60, 'font_weight': "bold", 'font_style': "italic", 'text_decoration': "underline", 'text': "Sea%20Shell"}, 'gravity': "north", 'y': 20}
  ])
Node.js:
Copy to clipboard
cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: {font_family: "courier", font_size: 60, font_weight: "bold", font_style: "italic", text_decoration: "underline", text: "Sea%20Shell"}, gravity: "north", y: 20}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("courier").fontSize(60).fontWeight("bold").fontStyle("italic").textDecoration("underline").text("Sea%20Shell")).gravity("north").y(20)).imageTag("sea_shell.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sea_shell.jpg', {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("courier").fontSize(60).fontWeight("bold").fontStyle("italic").textDecoration("underline").text("Sea%20Shell"), gravity: "north", y: 20}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("courier").fontSize(60).fontWeight("bold").fontStyle("italic").textDecoration("underline").text("Sea%20Shell"), gravity: "north", y: 20}
  ]})
React:
Copy to clipboard
<Image publicId="sea_shell.jpg" >
  <Transformation width="400" quality="auto" crop="scale" />
  <Transformation overlay={{fontFamily: "courier", fontSize: 60, fontWeight: "bold", fontStyle: "italic", textDecoration: "underline", text: "Sea%20Shell"}} gravity="north" y="20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sea_shell.jpg" >
  <cld-transformation width="400" quality="auto" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'courier', fontSize: 60, fontWeight: 'bold', fontStyle: 'italic', textDecoration: 'underline', text: 'Sea%20Shell'}" gravity="north" y="20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation width="400" quality="auto" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:courier_60_bold_italic_underline:Sea%20Shell" gravity="north" y="20">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Quality("auto").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("courier").FontSize(60).FontWeight("bold").FontStyle("italic").TextDecoration("underline").Text("Sea%20Shell")).Gravity("north").Y(20)).BuildImageTag("sea_shell.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("courier").fontSize(60).fontWeight("bold").fontStyle("italic").textDecoration("underline").text("Sea%20Shell")).gravity("north").y(20)).generate("sea_shell.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setQuality("auto").setCrop("scale").chain()
  .setOverlay("text:courier_60_bold_italic_underline:Sea%20Shell").setGravity("north").setY(20)).generate("sea_shell.jpg")!, cloudinary: cloudinary)
Photo Overlaid With Caption “Sea Shell” in Courier Font , Boldfaced, Italicized, and Underlined

Colors and Opacity

You can also modify image colors and opacity with Cloudinary.

  • To specify the color of a text overlay, set the color parameter (co for URLs) to the name of the color or its RGB representation. See the example below with a blue caption in boldfaced, 80-pixel Helvetica font.

Ruby:
Copy to clipboard
cl_image_tag("sea_shell.jpg", :transformation=>[
  {:width=>400, :quality=>"auto", :crop=>"scale"},
  {:overlay=>{:font_family=>"helvetica", :font_size=>80, :font_weight=>"bold", :text=>"Sea%20Shell"}, :gravity=>"north", :y=>20, :color=>"blue"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("sea_shell.jpg", array("transformation"=>array(
  array("width"=>400, "quality"=>"auto", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"helvetica", "font_size"=>80, "font_weight"=>"bold", "text"=>"Sea%20Shell"), "gravity"=>"north", "y"=>20, "color"=>"blue")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('sea_shell.jpg'))
  ->resize(Resize::scale()->width(400))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()))
  ->overlay(
      Overlay::source(
          Source::text('Sea Shell', (new TextStyle('helvetica', 80))
            ->fontWeight(FontWeight::bold()))
          ->textColor(Color::BLUE))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::north()))
          ->offsetY(20)
      
      ));
Python:
Copy to clipboard
CloudinaryImage("sea_shell.jpg").image(transformation=[
  {'width': 400, 'quality': "auto", 'crop': "scale"},
  {'overlay': {'font_family': "helvetica", 'font_size': 80, 'font_weight': "bold", 'text': "Sea%20Shell"}, 'gravity': "north", 'y': 20, 'color': "blue"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: {font_family: "helvetica", font_size: 80, font_weight: "bold", text: "Sea%20Shell"}, gravity: "north", y: 20, color: "blue"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("helvetica").fontSize(80).fontWeight("bold").text("Sea%20Shell")).gravity("north").y(20).color("blue")).imageTag("sea_shell.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sea_shell.jpg', {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("helvetica").fontSize(80).fontWeight("bold").text("Sea%20Shell"), gravity: "north", y: 20, color: "blue"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("helvetica").fontSize(80).fontWeight("bold").text("Sea%20Shell"), gravity: "north", y: 20, color: "blue"}
  ]})
React:
Copy to clipboard
<Image publicId="sea_shell.jpg" >
  <Transformation width="400" quality="auto" crop="scale" />
  <Transformation overlay={{fontFamily: "helvetica", fontSize: 80, fontWeight: "bold", text: "Sea%20Shell"}} gravity="north" y="20" color="blue" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sea_shell.jpg" >
  <cld-transformation width="400" quality="auto" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'helvetica', fontSize: 80, fontWeight: 'bold', text: 'Sea%20Shell'}" gravity="north" y="20" color="blue" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation width="400" quality="auto" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:helvetica_80_bold:Sea%20Shell" gravity="north" y="20" color="blue">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Quality("auto").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("helvetica").FontSize(80).FontWeight("bold").Text("Sea%20Shell")).Gravity("north").Y(20).Color("blue")).BuildImageTag("sea_shell.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("helvetica").fontSize(80).fontWeight("bold").text("Sea%20Shell")).gravity("north").y(20).color("blue")).generate("sea_shell.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setQuality("auto").setCrop("scale").chain()
  .setOverlay("text:helvetica_80_bold:Sea%20Shell").setGravity("north").setY(20).setColor("blue")).generate("sea_shell.jpg")!, cloudinary: cloudinary)
Blue Text Overlay in Helvetica Font

  • To fine-tune the opaqueness of the text in an overlay, set the opacity parameter (or o for URLs) to a value between 0 and 100. The example below shows an overlay with a semitransparent caption in red.

Ruby:
Copy to clipboard
cl_image_tag("sea_shell.jpg", :transformation=>[
  {:width=>400, :quality=>"auto", :crop=>"scale"},
  {:overlay=>{:font_family=>"helvetica", :font_size=>80, :font_weight=>"bold", :text=>"Sea%20Shell"}, :gravity=>"north", :y=>20, :color=>"#8b0f02", :opacity=>50}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("sea_shell.jpg", array("transformation"=>array(
  array("width"=>400, "quality"=>"auto", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"helvetica", "font_size"=>80, "font_weight"=>"bold", "text"=>"Sea%20Shell"), "gravity"=>"north", "y"=>20, "color"=>"#8b0f02", "opacity"=>50)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('sea_shell.jpg'))
  ->resize(Resize::scale()->width(400))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()))
  ->overlay(
      Overlay::source(
          Source::text('Sea Shell', (new TextStyle('helvetica', 80))
            ->fontWeight(FontWeight::bold()))
          ->textColor(Color::rgb('8b0f02'))
          ->transformation((new ImageTransformation())
            ->adjust(Adjust::opacity(50))))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::north()))
          ->offsetY(20)
      
      ));
Python:
Copy to clipboard
CloudinaryImage("sea_shell.jpg").image(transformation=[
  {'width': 400, 'quality': "auto", 'crop': "scale"},
  {'overlay': {'font_family': "helvetica", 'font_size': 80, 'font_weight': "bold", 'text': "Sea%20Shell"}, 'gravity': "north", 'y': 20, 'color': "#8b0f02", 'opacity': 50}
  ])
Node.js:
Copy to clipboard
cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: {font_family: "helvetica", font_size: 80, font_weight: "bold", text: "Sea%20Shell"}, gravity: "north", y: 20, color: "#8b0f02", opacity: 50}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("helvetica").fontSize(80).fontWeight("bold").text("Sea%20Shell")).gravity("north").y(20).color("#8b0f02").opacity(50)).imageTag("sea_shell.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sea_shell.jpg', {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("helvetica").fontSize(80).fontWeight("bold").text("Sea%20Shell"), gravity: "north", y: 20, color: "#8b0f02", opacity: 50}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("helvetica").fontSize(80).fontWeight("bold").text("Sea%20Shell"), gravity: "north", y: 20, color: "#8b0f02", opacity: 50}
  ]})
React:
Copy to clipboard
<Image publicId="sea_shell.jpg" >
  <Transformation width="400" quality="auto" crop="scale" />
  <Transformation overlay={{fontFamily: "helvetica", fontSize: 80, fontWeight: "bold", text: "Sea%20Shell"}} gravity="north" y="20" color="#8b0f02" opacity="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sea_shell.jpg" >
  <cld-transformation width="400" quality="auto" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'helvetica', fontSize: 80, fontWeight: 'bold', text: 'Sea%20Shell'}" gravity="north" y="20" color="#8b0f02" opacity="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation width="400" quality="auto" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:helvetica_80_bold:Sea%20Shell" gravity="north" y="20" color="#8b0f02" opacity="50">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Quality("auto").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("helvetica").FontSize(80).FontWeight("bold").Text("Sea%20Shell")).Gravity("north").Y(20).Color("#8b0f02").Opacity(50)).BuildImageTag("sea_shell.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("helvetica").fontSize(80).fontWeight("bold").text("Sea%20Shell")).gravity("north").y(20).color("#8b0f02").opacity(50)).generate("sea_shell.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setQuality("auto").setCrop("scale").chain()
  .setOverlay("text:helvetica_80_bold:Sea%20Shell").setGravity("north").setY(20).setColor("#8b0f02").setOpacity(50)).generate("sea_shell.jpg")!, cloudinary: cloudinary)
Semitransparent Text Overlay

A common use for text overlays is to add a caption with a description and credits. The overlay in the example above credits the photographer. In the example below, the credit caption in white is in Doppio font with a semitransparent, black overlay that makes the caption stand out.

Ruby:
Copy to clipboard
cl_image_tag("sea_shell.jpg", :transformation=>[
  {:width=>400, :quality=>"auto", :crop=>"scale"},
  {:overlay=>"black_bar", :gravity=>"south", :width=>1.0, :height=>0.12, :flags=>"relative", :opacity=>60},
  {:overlay=>{:font_family=>"One", :font_size=>20, :text=>"Photographer"}, :gravity=>"south_west", :y=>5, :x=>10, :color=>"#eee"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("sea_shell.jpg", array("transformation"=>array(
  array("width"=>400, "quality"=>"auto", "crop"=>"scale"),
  array("overlay"=>"black_bar", "gravity"=>"south", "width"=>"1.0", "height"=>"0.12", "flags"=>"relative", "opacity"=>60),
  array("overlay"=>array("font_family"=>"One", "font_size"=>20, "text"=>"Photographer"), "gravity"=>"south_west", "y"=>5, "x"=>10, "color"=>"#eee")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('sea_shell.jpg'))
  ->resize(Resize::scale()->width(400))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(1.0)->height(0.12)->relative())
          ->adjust(Adjust::opacity(60))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::south()))))
    ->overlay(
        Overlay::source(Source::text('Photographer', (new TextStyle('Doppio One', 20)))
          ->textColor(Color::rgb('eee')))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::southWest()))
          ->offsetX(10)->offsetY(5)
      
    ));
Python:
Copy to clipboard
CloudinaryImage("sea_shell.jpg").image(transformation=[
  {'width': 400, 'quality': "auto", 'crop': "scale"},
  {'overlay': "black_bar", 'gravity': "south", 'width': "1.0", 'height': "0.12", 'flags': "relative", 'opacity': 60},
  {'overlay': {'font_family': "One", 'font_size': 20, 'text': "Photographer"}, 'gravity': "south_west", 'y': 5, 'x': 10, 'color': "#eee"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: "black_bar", gravity: "south", width: "1.0", height: "0.12", flags: "relative", opacity: 60},
  {overlay: {font_family: "One", font_size: 20, text: "Photographer"}, gravity: "south_west", y: 5, x: 10, color: "#eee"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).gravity("south").width(1.0).height(0.12).flags("relative").opacity(60).chain()
  .overlay(new TextLayer().fontFamily("One").fontSize(20).text("Photographer")).gravity("south_west").y(5).x(10).color("#eee")).imageTag("sea_shell.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sea_shell.jpg', {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), gravity: "south", width: "1.0", height: "0.12", flags: "relative", opacity: 60},
  {overlay: new cloudinary.TextLayer().fontFamily("One").fontSize(20).text("Photographer"), gravity: "south_west", y: 5, x: 10, color: "#eee"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sea_shell.jpg", {transformation: [
  {width: 400, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), gravity: "south", width: "1.0", height: "0.12", flags: "relative", opacity: 60},
  {overlay: new cloudinary.TextLayer().fontFamily("One").fontSize(20).text("Photographer"), gravity: "south_west", y: 5, x: 10, color: "#eee"}
  ]})
React:
Copy to clipboard
<Image publicId="sea_shell.jpg" >
  <Transformation width="400" quality="auto" crop="scale" />
  <Transformation overlay="black_bar" gravity="south" width="1.0" height="0.12" flags="relative" opacity="60" />
  <Transformation overlay={{fontFamily: "One", fontSize: 20, text: "Photographer"}} gravity="south_west" y="5" x="10" color="#eee" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sea_shell.jpg" >
  <cld-transformation width="400" quality="auto" crop="scale" />
  <cld-transformation :overlay="black_bar" gravity="south" width="1.0" height="0.12" flags="relative" opacity="60" />
  <cld-transformation :overlay="{fontFamily: 'One', fontSize: 20, text: 'Photographer'}" gravity="south_west" y="5" x="10" color="#eee" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation width="400" quality="auto" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="black_bar" gravity="south" width="1.0" height="0.12" flags="relative" opacity="60">
  </cl-transformation>
  <cl-transformation overlay="text:Doppio%20One_20:Photographer:%20Jonathan%20Doe" gravity="south_west" y="5" x="10" color="#eee">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Quality("auto").Crop("scale").Chain()
  .Overlay(new Layer().PublicId("black_bar")).Gravity("south").Width(1.0).Height(0.12).Flags("relative").Opacity(60).Chain()
  .Overlay(new TextLayer().FontFamily("One").FontSize(20).Text("Photographer")).Gravity("south_west").Y(5).X(10).Color("#eee")).BuildImageTag("sea_shell.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).quality("auto").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).gravity("south").width(1.0).height(0.12).flags("relative").opacity(60).chain()
  .overlay(new TextLayer().fontFamily("One").fontSize(20).text("Photographer")).gravity("south_west").y(5).x(10).color("#eee")).generate("sea_shell.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setQuality("auto").setCrop("scale").chain()
  .setOverlay("black_bar").setGravity("south").setWidth(1.0).setHeight(0.12).setFlags("relative").setOpacity(60).chain()
  .setOverlay("text:Doppio%20One_20:Photographer:%20Jonathan%20Doe").setGravity("south_west").setY(5).setX(10).setColor("#eee")).generate("sea_shell.jpg")!, cloudinary: cloudinary)
Credit Caption With a Semitransparent, Black Overlay

Justification and Wrapping of Multiline Text

For multiline text embedded in images, you’d want to see automatic line wraps and to be able to align the text as you desire.

The example below shows seven lines of text, automatically wrapped and center aligned, overlaid on an uploaded image named ‘envelope.jpg’. Here are the parameter settings in its URL:

  • The fit crop mode, defined with a maximum width of 200 pixels, which tells Cloudinary to automatically wrap the text
  • The angle parameter (a in the URL), with a nine-degree rotation for the text layer so that it fits better in the background image
  • The I_text parameter with an attribute of Neucha_16_center, which stands for the Neucha font, a 16-pixel size, and center alignment

Ruby:
Copy to clipboard
cl_image_tag("envelope.jpg", :transformation=>[
  {:width=>300, :quality=>"auto", :crop=>"scale"},
  {:gravity=>"north", :x=>0, :y=>54, :width=>200, :angle=>9, :overlay=>{:font_family=>"Neucha", :font_size=>16, :text_align=>"center", :text=>"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."}, :crop=>"fit"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("envelope.jpg", array("transformation"=>array(
  array("width"=>300, "quality"=>"auto", "crop"=>"scale"),
  array("gravity"=>"north", "x"=>0, "y"=>54, "width"=>200, "angle"=>9, "overlay"=>array("font_family"=>"Neucha", "font_size"=>16, "text_align"=>"center", "text"=>"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."), "crop"=>"fit")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('envelope.jpg'))
  ->resize(Resize::scale()->width(300))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()))
  ->overlay(
      Overlay::source(
          Source::text('Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', (new TextStyle('Neucha', 16))
            ->textAlignment(TextAlignment::center()))
          ->transformation((new ImageTransformation())
            ->rotate(Rotate::byAngle(9))
            ->resize(Resize::fit()->width(200))))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::north()))
          ->offsetX(0)->offsetY(54)
      
      ));
Python:
Copy to clipboard
CloudinaryImage("envelope.jpg").image(transformation=[
  {'width': 300, 'quality': "auto", 'crop': "scale"},
  {'gravity': "north", 'x': 0, 'y': 54, 'width': 200, 'angle': 9, 'overlay': {'font_family': "Neucha", 'font_size': 16, 'text_align': "center", 'text': "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."}, 'crop': "fit"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("envelope.jpg", {transformation: [
  {width: 300, quality: "auto", crop: "scale"},
  {gravity: "north", x: 0, y: 54, width: 200, angle: 9, overlay: {font_family: "Neucha", font_size: 16, text_align: "center", text: "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."}, crop: "fit"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(300).quality("auto").crop("scale").chain()
  .gravity("north").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily("Neucha").fontSize(16).textAlign("center").text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.")).crop("fit")).imageTag("envelope.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('envelope.jpg', {transformation: [
  {width: 300, quality: "auto", crop: "scale"},
  {gravity: "north", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(16).textAlign("center").text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."), crop: "fit"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("envelope.jpg", {transformation: [
  {width: 300, quality: "auto", crop: "scale"},
  {gravity: "north", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(16).textAlign("center").text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."), crop: "fit"}
  ]})
React:
Copy to clipboard
<Image publicId="envelope.jpg" >
  <Transformation width="300" quality="auto" crop="scale" />
  <Transformation gravity="north" x="0" y="54" width="200" angle="9" overlay={{fontFamily: "Neucha", fontSize: 16, textAlign: "center", text: "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."}} crop="fit" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="envelope.jpg" >
  <cld-transformation width="300" quality="auto" crop="scale" />
  <cld-transformation gravity="north" x="0" y="54" width="200" angle="9" :overlay="{fontFamily: 'Neucha', fontSize: 16, textAlign: 'center', text: 'Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.'}" crop="fit" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="envelope.jpg" >
  <cl-transformation width="300" quality="auto" crop="scale">
  </cl-transformation>
  <cl-transformation gravity="north" x="0" y="54" width="200" angle="9" overlay="text:Neucha_16_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat." crop="fit">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Quality("auto").Crop("scale").Chain()
  .Gravity("north").X(0).Y(54).Width(200).Angle(9).Overlay(new TextLayer().FontFamily("Neucha").FontSize(16).TextAlign("center").Text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.")).Crop("fit")).BuildImageTag("envelope.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(300).quality("auto").crop("scale").chain()
  .gravity("north").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily("Neucha").fontSize(16).textAlign("center").text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.")).crop("fit")).generate("envelope.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setQuality("auto").setCrop("scale").chain()
  .setGravity("north").setX(0).setY(54).setWidth(200).setAngle(9).setOverlay("text:Neucha_16_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.").setCrop("fit")).generate("envelope.jpg")!, cloudinary: cloudinary)
A Rotated, Multiline Text Overlay

Print Material With Multiple Text Layers

All the examples above showcase a single text overlay only. You can also chain multiple overlays by setting parameters in Cloudinary’s URLs, generating optimized images for delivery to your audience through a content delivery network (CDN).

To build chained transformation URLs with multiple text overlays, use Cloudinary’s client libraries or separate the URL components with the slash symbol (/).

Below is the envelope.jpg image again, this time with three text overlays, each formatted with a different font family, font size, color, and positioning. Doesn’t it look cool and professional?

Ruby:
Copy to clipboard
cl_image_tag("envelope.jpg", :transformation=>[
  {:width=>300, :quality=>"auto", :crop=>"scale"},
  {:overlay=>{:font_family=>"Courgette", :font_size=>22, :text=>"Dear%20customer"}, :angle=>9, :opacity=>80, :gravity=>"north_west", :y=>25, :x=>64, :color=>"#671537"},
  {:overlay=>{:font_family=>"Niconne", :font_size=>20, :text=>"Sincerely%20yours"}, :gravity=>"south", :x=>-10, :y=>120, :color=>"#15376f", :angle=>9},
  {:gravity=>"north", :x=>0, :y=>54, :width=>200, :angle=>9, :overlay=>{:font_family=>"Neucha", :font_size=>16, :text=>"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."}, :crop=>"fit"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("envelope.jpg", array("transformation"=>array(
  array("width"=>300, "quality"=>"auto", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Courgette", "font_size"=>22, "text"=>"Dear%20customer"), "angle"=>9, "opacity"=>80, "gravity"=>"north_west", "y"=>25, "x"=>64, "color"=>"#671537"),
  array("overlay"=>array("font_family"=>"Niconne", "font_size"=>20, "text"=>"Sincerely%20yours"), "gravity"=>"south", "x"=>-10, "y"=>120, "color"=>"#15376f", "angle"=>9),
  array("gravity"=>"north", "x"=>0, "y"=>54, "width"=>200, "angle"=>9, "overlay"=>array("font_family"=>"Neucha", "font_size"=>16, "text"=>"Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."), "crop"=>"fit")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('envelope.jpg'))
  ->resize(Resize::scale()->width(300))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()))
  ->overlay(
      Overlay::source(Source::text('Dear customer', (new TextStyle('Courgette', 22)))
        ->textColor(Color::rgb('671537'))
        ->transformation((new ImageTransformation())
          ->rotate(Rotate::byAngle(9))
          ->adjust(Adjust::opacity(80))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::northWest()))
        ->offsetX(64)->offsetY(25)))
    ->overlay(
        Overlay::source(Source::text('Sincerely yours', (new TextStyle('Niconne', 20)))
          ->textColor(Color::rgb('15376f'))
          ->transformation((new ImageTransformation())
            ->rotate(Rotate::byAngle(9))))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::south()))
          ->offsetX(-10)->offsetY(120)))
          ->overlay(
              Overlay::source(Source::text('Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', (new TextStyle('Neucha', 16)))
                ->transformation((new ImageTransformation())
                  ->rotate(Rotate::byAngle(9))
                  ->resize(Resize::fit()->width(200))))
              ->position((new Position())
                ->gravity(Gravity::compass(Compass::north()))
                ->offsetX(0)->offsetY(54)
          
        
          ));
Python:
Copy to clipboard
CloudinaryImage("envelope.jpg").image(transformation=[
  {'width': 300, 'quality': "auto", 'crop': "scale"},
  {'overlay': {'font_family': "Courgette", 'font_size': 22, 'text': "Dear%20customer"}, 'angle': 9, 'opacity': 80, 'gravity': "north_west", 'y': 25, 'x': 64, 'color': "#671537"},
  {'overlay': {'font_family': "Niconne", 'font_size': 20, 'text': "Sincerely%20yours"}, 'gravity': "south", 'x': -10, 'y': 120, 'color': "#15376f", 'angle': 9},
  {'gravity': "north", 'x': 0, 'y': 54, 'width': 200, 'angle': 9, 'overlay': {'font_family': "Neucha", 'font_size': 16, 'text': "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."}, 'crop': "fit"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("envelope.jpg", {transformation: [
  {width: 300, quality: "auto", crop: "scale"},
  {overlay: {font_family: "Courgette", font_size: 22, text: "Dear%20customer"}, angle: 9, opacity: 80, gravity: "north_west", y: 25, x: 64, color: "#671537"},
  {overlay: {font_family: "Niconne", font_size: 20, text: "Sincerely%20yours"}, gravity: "south", x: -10, y: 120, color: "#15376f", angle: 9},
  {gravity: "north", x: 0, y: 54, width: 200, angle: 9, overlay: {font_family: "Neucha", font_size: 16, text: "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."}, crop: "fit"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(300).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Courgette").fontSize(22).text("Dear%20customer")).angle(9).opacity(80).gravity("north_west").y(25).x(64).color("#671537").chain()
  .overlay(new TextLayer().fontFamily("Niconne").fontSize(20).text("Sincerely%20yours")).gravity("south").x(-10).y(120).color("#15376f").angle(9).chain()
  .gravity("north").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily("Neucha").fontSize(16).text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.")).crop("fit")).imageTag("envelope.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('envelope.jpg', {transformation: [
  {width: 300, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Courgette").fontSize(22).text("Dear%20customer"), angle: 9, opacity: 80, gravity: "north_west", y: 25, x: 64, color: "#671537"},
  {overlay: new cloudinary.TextLayer().fontFamily("Niconne").fontSize(20).text("Sincerely%20yours"), gravity: "south", x: -10, y: 120, color: "#15376f", angle: 9},
  {gravity: "north", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(16).text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."), crop: "fit"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("envelope.jpg", {transformation: [
  {width: 300, quality: "auto", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Courgette").fontSize(22).text("Dear%20customer"), angle: 9, opacity: 80, gravity: "north_west", y: 25, x: 64, color: "#671537"},
  {overlay: new cloudinary.TextLayer().fontFamily("Niconne").fontSize(20).text("Sincerely%20yours"), gravity: "south", x: -10, y: 120, color: "#15376f", angle: 9},
  {gravity: "north", x: 0, y: 54, width: 200, angle: 9, overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(16).text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."), crop: "fit"}
  ]})
React:
Copy to clipboard
<Image publicId="envelope.jpg" >
  <Transformation width="300" quality="auto" crop="scale" />
  <Transformation overlay={{fontFamily: "Courgette", fontSize: 22, text: "Dear%20customer"}} angle="9" opacity="80" gravity="north_west" y="25" x="64" color="#671537" />
  <Transformation overlay={{fontFamily: "Niconne", fontSize: 20, text: "Sincerely%20yours"}} gravity="south" x="-10" y="120" color="#15376f" angle="9" />
  <Transformation gravity="north" x="0" y="54" width="200" angle="9" overlay={{fontFamily: "Neucha", fontSize: 16, text: "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat."}} crop="fit" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="envelope.jpg" >
  <cld-transformation width="300" quality="auto" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Courgette', fontSize: 22, text: 'Dear%20customer'}" angle="9" opacity="80" gravity="north_west" y="25" x="64" color="#671537" />
  <cld-transformation :overlay="{fontFamily: 'Niconne', fontSize: 20, text: 'Sincerely%20yours'}" gravity="south" x="-10" y="120" color="#15376f" angle="9" />
  <cld-transformation gravity="north" x="0" y="54" width="200" angle="9" :overlay="{fontFamily: 'Neucha', fontSize: 16, text: 'Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.'}" crop="fit" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="envelope.jpg" >
  <cl-transformation width="300" quality="auto" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Courgette_22:Dear%20customer" angle="9" opacity="80" gravity="north_west" y="25" x="64" color="#671537">
  </cl-transformation>
  <cl-transformation overlay="text:Niconne_20:Sincerely%20yours" gravity="south" x="-10" y="120" color="#15376f" angle="9">
  </cl-transformation>
  <cl-transformation gravity="north" x="0" y="54" width="200" angle="9" overlay="text:Neucha_16:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat." crop="fit">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Quality("auto").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Courgette").FontSize(22).Text("Dear%20customer")).Angle(9).Opacity(80).Gravity("north_west").Y(25).X(64).Color("#671537").Chain()
  .Overlay(new TextLayer().FontFamily("Niconne").FontSize(20).Text("Sincerely%20yours")).Gravity("south").X(-10).Y(120).Color("#15376f").Angle(9).Chain()
  .Gravity("north").X(0).Y(54).Width(200).Angle(9).Overlay(new TextLayer().FontFamily("Neucha").FontSize(16).Text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.")).Crop("fit")).BuildImageTag("envelope.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(300).quality("auto").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Courgette").fontSize(22).text("Dear%20customer")).angle(9).opacity(80).gravity("north_west").y(25).x(64).color("#671537").chain()
  .overlay(new TextLayer().fontFamily("Niconne").fontSize(20).text("Sincerely%20yours")).gravity("south").x(-10).y(120).color("#15376f").angle(9).chain()
  .gravity("north").x(0).y(54).width(200).angle(9).overlay(new TextLayer().fontFamily("Neucha").fontSize(16).text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.")).crop("fit")).generate("envelope.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setQuality("auto").setCrop("scale").chain()
  .setOverlay("text:Courgette_22:Dear%20customer").setAngle(9).setOpacity(80).setGravity("north_west").setY(25).setX(64).setColor("#671537").chain()
  .setOverlay("text:Niconne_20:Sincerely%20yours").setGravity("south").setX(-10).setY(120).setColor("#15376f").setAngle(9).chain()
  .setGravity("north").setX(0).setY(54).setWidth(200).setAngle(9).setOverlay("text:Neucha_16:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.").setCrop("fit")).generate("envelope.jpg")!, cloudinary: cloudinary)
Multiline Text Overlays In Different Styles

Summary

As attested by many of our customers, text overlays on images are an excellent feature for many use cases. Cloudinary’s capability of adding text styles on the fly to images uploaded to your media library on our platform is simple and dynamic. You can embed transformed images in your website, mobile apps, or marketing emails, rest assured that your audience can view them without having to configure their browser or device.

Cloudinary’s overlay-related capabilities described in this post are available in all our subscription plans, including the free tier. Do sign up for a free account and have a try.

Comments? Questions? Fill out the form below or contact us on Facebook or Twitter.


Want to learn more about image editing?

Have a look at these articles:

Recent Blog Posts

The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more

Building Display Ads With Transparent Video

By Afzaal Ahmad Zeeshan
Build Web Ads With Transparent Video to Attract User Engagement

Billions of views on the Internet every day drive one of the biggest industries on the planet: advertising. The sheer size of that market and the competitive nature of vying for consumer attention results in a constant need for innovation. Readers are jaded, and display ads are blind spots.

Read more
How Cloudinary's Media Optimizer Helps E-Businesses Deliver Superior Web Performance

As a technology company, Cloudinary owes its success to its ability to build solutions that address the most critical challenges you, our customers, face. The companies we serve run the gamut of digital businesses—retailers and direct-to-consumer brands, media and entertainment, travel and hospitality—which, coincidentally, all care about the same things.

Read more
How to Auto-Tag Video With Markers on Cloudinary for Easy Navigation

A picture is worth a thousand words, and that also holds true for video, one minute of which, according to Dr. James McQuivey of Forrester Research, is worth 1.8 million words. That's why online stores rely on rich media to promote products and sales. Images and videos impart a real sense of involvement with a purchase—a car, a vacation getaway, an apartment rental—setting your business apart from the competition.

Read more