Image & Video APIs
Menu

Text overlay transformations (video tutorial)

Last updated: Nov-24-2025

Overview

This tutorial shows how to overlay text onto a base image using Cloudinary's transformations. The steps are demonstrated from within the Cloudinary Console, rather than programmatically.

Video tutorial


This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Access the transformation editor

To access the transformation editor for a particular asset, begin by logging into the Cloudinary Console and then clicking on the Media Library option in the top navigation.
Jump to this spot in the video 0:14 Step 1: Once you are in the Media Library, locate the image on which you want to add the overlay.
Jump to this spot in the video 0:21 Step 2: Hover over the desired asset, which will display several options. Choose the Edit icon to bring up the transformation editor.
Jump to this spot in the video 0:32 Step 3: You can change the image size in order to see the text more easily. If keeping a higher resolution, you should change the text size proportionately.

Apply text overlays

Jump to this spot in the video 0:41 Step 1: Select the Add overlay and watermark link.
Jump to this spot in the video 0:55 Step 2: Provide the transformation for the text overlay. The pattern for this input is text:<FONT FAMILY>_<FONT SIZE>:<CUSTOM TEXT>.

Adjust the text overlay's positioning and style

Let's look at some options for positioning and styling the text.
Jump to this spot in the video 1:50 Step 1: Begin positioning the text by using the gravity option.
Jump to this spot in the video 2:13 Step 2: You can also adjust the X and Y coordinates relative to the gravity position. This can help to provide a margin for the text, so its not up against the edge of the image.
Jump to this spot in the video 2:28 Step 3: You can further define your overlay if you choose by applying a certain style of a font-family, such as Montserrat Light or Bold.

Keep learning

Related topics

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

AltStyle によって変換されたページ (->オリジナル) /

✔️ Feedback sent!

✖️
How helpful was this doc page?

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

*

Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Rate this page: