Next Cloudinary v6 now available! View Changelog

Guides
Text Overlays

Adding Text to an Image

You can add text on top of your image with text-based overlays.

Example

Sneakers with text With Style
 import { CldImage } from 'next-cloudinary';    <CldImage  width="1335"  height="891"  src="images/sneakers"  sizes="100vw"  overlays={[  {  position: {  x: 160,  y: 120,  angle: -20,  gravity: 'south_east',  },  text: {  color: 'magenta',  fontFamily: 'Source Sans Pro',  fontSize: 280,  fontWeight: 'black',  text: 'WITH STYLE'  }  },  {  position: {  x: 140,  y: 140,  angle: -20,  gravity: 'south_east',  },  text: {  color: 'white',  fontFamily: 'Source Sans Pro',  fontSize: 280,  fontWeight: 'black',  text: 'WITH STYLE'  }  },  ]}  alt="Sneakers with text With Style"  />

Learn More