> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Text overlay transformations (video tutorial)

## Overview

This tutorial shows how to [overlay text](transformation_reference#l_text) onto a base image using Cloudinary's transformations. The steps are demonstrated from within the [Cloudinary Console](https://console.cloudinary.com/console), rather than [programmatically](programmable_media_overview).

## 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](https://console.cloudinary.com/console) and then [clicking on the Media Library option in the top navigation](https://console.cloudinary.com/console/media_library/).

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=14 :player=cld} | **Step 1:** Once you are in the Media Library, locate the image on which you want to add the overlay.  |

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=21 :player=cld} | **Step 2:** Hover over the desired asset, which will display several options. Choose the **Edit** icon to bring up the transformation editor. |

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=32 :player=cld} | **Step 3:** You can [change the image size](resizing_and_cropping#scale) in order to see the text more easily. If keeping a higher resolution, you should change the text size proportionately.|
 

### Apply text overlays

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=41 :player=cld} | **Step 1:** Select the  **Add overlay and watermark** link. |

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=55 :player=cld} | **Step 2:** Provide the transformation for the [text overlay](layers#text_overlays). 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](layers#layer_placement_gravity) and [styling the text](layers#text_layer_options).

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=1 :sec=50 :player=cld} | **Step 1:** Begin positioning the text by [using the **gravity** option](resizing_and_cropping#control_gravity). |

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=2 :sec=13 :player=cld} | **Step 2:** You can also adjust the [**X** and **Y** coordinates](transformation_reference#x_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. |

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=2 :sec=28 :player=cld} | **Step 3:** You can further define your overlay if you choose by applying a certain [style](transformation_reference#l_text) of a font-family, such as Montserrat Light or Bold. |

## Keep learning

> **READING**: - Develop a [text overlay creator](https://cloudinary.com/blog/introducing_a_text_overlay_creator) with instructions from our Solution Architects.
- Find out how to apply overlays programmatically, and use other image transformations in our [Fundamentals for Developers course](https://training.cloudinary.com/courses/cloudinary-fundamentals-for-developers).
- Review our [transformation reference](transformation_reference) to see all of the possibilities for transforming images and videos.

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

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

  
  
  
    Named Transformations
    Simplify & standardize complex delivery URLs 
  

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

&nbsp;

&nbsp;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.
&nbsp;