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 transform 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

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more