CldImage Examples

Effects

Background Removal
```
removeBackground
```
Background removal requires the Cloudinary AI Background Removal Add-On
Zoom & Pan
```
zoompan="loop"
```
Blur
```
blur="1200"
```
Pixelate
```
pixelate
```
Grayscale
```
grayscale
```
Tint
```
tint="equalize:80:blue:blueviolet"
```

See all supported effects on github.com.

Cropping

Original
Thumbnail with Auto Gravity
```
crop="thumb"
gravity="auto"
```
Thumbnail with Faces Gravity
```
crop="thumb"
gravity="faces"
```

Placeholders

Blur
```
placeholder="blur"
```
Grayscale
```
placeholder="grayscale"
```
Color
```
placeholder="color:blueviolet"
```

Image Overlays

Overlay Image by Public ID
```
overlays={[{
  publicId: 'images/earth',
  position: {
    x: 10,
    y: 10,
    gravity: 'north_west',
  },
  effects: [
    {
      crop: 'fill',
      gravity: 'auto',
      width: 500,
      height: 500
    }
  ]
}]}
```

Image Underlays

Background Removal with Underlay
```
removeBackground
underlays={[{
  publicId: 'images/galaxy',
  width: 1920,
  height: 1200,
  crop: 'fill'
}]}
```
Background removal requires the Cloudinary AI Background Removal Add-On

Text Overlays

Text Overlay
```
overlays={[{
  width: 2670 - 20,
  crop: 'fit',
  position: {
    x: 10,
    y: 10,
    gravity: 'north_west',
  },
  text: {
    color: 'blueviolet',
    fontFamily: 'Source Sans Pro',
    fontSize: 120,
    fontWeight: 'bold',
    textDecoration: 'underline',
    letterSpacing: 14,
    text: 'Cool Beans'
  }
}]}
```

Other

Raw Transformations
```
rawTransformations={[
  'e_blur:2000',
  'e_tint:100:0000FF:0p:FF1493:100p'
]}
```