• Use Cases
  • Text Overlays

Adding Text to an Image

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

Example

Sneakers with Cool Beans
<CldImage
  width="1335"
  height="891"
  src="images/sneakers"
  sizes="100vw"
  overlays={[{
    width: 2670 - 20,
    crop: 'fit',
    position: {
      x: 140,
      y: 140,
      angle: -20,
      gravity: 'south_east',
    },
    text: {
      color: 'blueviolet',
      fontFamily: 'Source Sans Pro',
      fontSize: 160,
      fontWeight: 'bold',
      textDecoration: 'underline',
      letterSpacing: 14,
      text: 'Cool Beans'
    }
  }]}
  alt="Sneakers with Cool Beans"
/>

Learn More