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

Top Five Web-Video Formats of 2021

By William Imoh
The Five Most Popular Web-Video Formats and Streaming Protocols

Over the past 15 years, the video industry has undergone a significant change in video formats on the web. In particular, in the early 2010s, the 3GP format, which the 3rd Generation Partnership Project (3GPP) created for 3G-enabled mobile devices, went nearly extinct. The advancement of mobile devices and cellular networks has brought about the need for pioneers to build better formats for a faster user experience.

Read more
Cloudinary Introduces Integration With SAP Commerce Cloud

We’re excited to announce Cloudinary’s integration with SAP Commerce Cloud, through which the latter’s customers can significantly boost the visual media experience on their website or app.

SAP Commerce Cloud powers some of the largest e-commerce sites (B2C, B2B, and B2B2C businesses), complete with building blocks like storefront design and order management. Reinforced with Cloudinary’s laser-sharp focus on optimizing, managing, and delivering images and videos, the new extension will enable SAP Commerce Cloud customers to create unique and engaging visual experiences effortlessly.

Read more
Personalizing Video Email for Marketing Campaigns With Cloudinary

As critical as it is to engage with shoppers in order to succeed in e-commerce, old-style, boring emails are far from being effective. In fact, they tend to be annoying because no one likes to read formulaic, generic messages that are sent en masse. For better results, rethink your email marketing campaigns and try out creative strategies.

Read more
Muted Videos and Subtitles

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We’re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we’d like to buy in our free time.

Read more

Building a Roommate-Matching App With Cloudinary and Jamstack

By Marcelo Ricardo de Oliveira
Building a Roommate-Matching App With Cloudinary and Jamstack

Roommate matching can be a pain—especially during the COVID pandemic when people don't want to meet in person. Matching apps like Flatmates, Roomster, and roommates.com are helpful, and if you're in the roommate-matching space, you know that great video is essential for those seeking roommates. Fortunately, Cloudinary can help.

Read more