Skip to main content

Adding Text Overlays to Images with Cloudinary's Management Console



  • Luis Mendes

    This is great Sam, thanks. Is there any way to adjust for padding top and bottom if I'm using an overlay which has a border and background? I'd like it to be vertically centered over a white background with rounded corners.


  • Danny Valentine

    Hi Luis.

    There are a few ways to accomplish what you're trying to do. Could you please confirm if this is an image or text you're trying to overlay?

    You're welcome to raise a support ticket with us directly if you'd like us to use examples from your own cloud. To do so, you can fill out the form at this link.


  • Luis Mendes

    Hi Danny,

    I am not using an image, no because the string length will vary. I am currently using :


    ...which creates a rounded corner box behind the text with radius corners, but I cannot add more "padding" to the wire box top and bottom to provide more white area behind the text.

    I want this — 

    But can only get this using the method above — 

    The only workaround I've found is to use white text at a larger font size to make the white background, and then overlay the black text. But the fit is never as accurate as having "padding"... I would use something like "-splice" in Imagemagick to achieve this otherwise but need it done in Cloudinary, as text.


  • Eric Pasos

    Hi Luis,

    While the text transformation styling parameter does not support padding (i.e. like in CSS), Cloudinary does support the layering of components that would fit your use case requirements. Like the way you've already implemented, your need could be answered with that approach and, alternatively, I would recommend having an image that you could further manipulate as an overlay, for example:,r_150,w_300/fl_layer_apply/fl_text_no_trim,l_text:Arial_50_bold_italic:Smile%2521/fl_layer_apply/sample.jpg

    The transformation URL above contains at least 3 components, which include the main image (sample.jpg), text background image (container.jpg), and the text (smile!).

    The following sample code using Cloudinary Python SDK is used to generate the delivery URL above:

    # Note: sample.jpg is the main image
    # Overlay 1
    {'overlay': "container.jpg"},
    {'height': 100, 'width': 300, 'radius': 150},
    {'flags': "layer_apply"},

    # Overlay 2
    {'overlay': {
    'font_family': "Arial",
    'font_size': 50,
    'font_weight': "bold",
    'font_style': "italic",
    'text': "Smile%21",
    'flags': "text_no_trim",
    {'flags': "layer_apply"}

    The code is just an example in order to provide a better way of viewing how the dynamic URL was generated.

    You may refer to the following links for more information:

    Best regards,


Please sign in to leave a comment.