How to add a text overlay?

In order to create a text overlay, you can either pre-define a text style by your preference (e.g., font family, size, color, and more), or dynamically define one.

Pre-defining a text style:

You can create a text style by your choice of font family, size, color and many more parameters.
Fore more information:

Text styles can be generated via the API with our integration libraries as well. For example in PHP:

\Cloudinary\Uploader::text("Sample Name",
                           "public_id" => "dark_name",
                           "font_family" => "Arial", "font_size" => 12,
                           "font_color" => "black", "opacity" => 90));

After the text style has been created, any custom text string can be generated as a text overlay:

Also, you can dynamically change the font's color:

Dynamically generate a text style:

You can generate a text style by your requirements on-the-fly, including font family, size, decoration and more.

Here's an example of a URL with an on-the-fly generated text style:,o_30/l_text:Arial_35_bold:Hello%20World/sample.jpg

You can also set the color parameter (co in URLs) to dynamically color the font to your required color:,o_30/l_text:Arial_35_bold:Hello%20World,co_blue/sample.jpg

Have more questions? Submit a request


  • Avatar
    Raj Subramanian

    This is super helpful. Is there a way to do add a images and a text one below the other? So, an image, then some text and then another image below it and so on?

  • Avatar
    Itay Taragano

    Hi Raj,

    Were you referring to something similar to the following?:,y_-25,g_south/l_sample,g_south,w_200,y_-140/sample.jpg

    If so, you can have a look at the following for more information about text custom positioning:

  • Avatar
    iti tomar



    I have added  <img src="" data-src="sample.jpg" class="dynamic\_image" /> in my html and in my javascript 

    $.cloudinary.image("sample.jpg", {overlay: "text:Arial_45_bold:Hello%20sdfdfdfdfdf", gravity: "south"})


    it is showing the overlay image but not showimng up in the UI any idea why????



  • Avatar
    Itay Taragano

    Can you please share the URL generated by this code so we'll be able to further understand the issue?

  • Avatar
    Frankie Kam

    For the web browser URL code to enable overlay text that use Google Fonts with text outline or text shadow, go here:
    Hope this helps!

  • Avatar

    Hi there. In the angular 2 api, is it possible to add the overlay text dynamically? I tried with interpolation (as per code snippet below) but I get "Unhandled Promise rejection: Template parse errors: Can't bind to 'overlay' since it isn't a known property of 'cl-transformation'."

    This is what generates the error:

    `<cl-transformation overlay = "text:Verdana_75_bold_underline_letter_spacing_14:'{{myText}}'"></cl-transformation>`

    Edited by Siphiwe
  • Avatar
    Roee Ben-Ari

    Hi @Siphiwe. Please use attribute binding, such as: 

    <cl-transformation attr.overlay="text:Verdana_75_bold_underline_letter_spacing_14:{{myText}}"></cl-transformation> 

    See example here -

    Edited by Roee Ben-Ari
  • Avatar

    Thank you @Roee. That sorted me out

Powered by Zendesk