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 by Public ID
```
removeBackground
underlay="images/galaxy"
```
Background removal requires the Cloudinary AI Background Removal Add-On
Background Removal with Multiple Underlays
```
removeBackground
underlays={[
  {
    publicId: 'images/galaxy',
    width: 480,
    height: 600,
    crop: 'fill',
    position: {
      gravity: 'north_west'
    }
  },
  {
    publicId: 'images/mountain',
    width: 480,
    height: 600,
    crop: 'fill',
    position: {
      gravity: 'south_east'
    }
  },
]}
```
Background removal requires the Cloudinary AI Background Removal Add-On

Text Overlays

Text Overlay with text prop
```
text="Cool Beans"
```
Text Overlay with text string
```
overlays={[{
  text: 'Cool Beans'
}]}
```
Text Overlay with overlay configuration
```
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

Named Transformations
```
transformations={[
  'next-cloudinary-named-transformation'
]}
```
Raw Transformations
```
rawTransformations={[
  'e_blur:2000',
  'e_tint:100:0000FF:0p:FF1493:100p'
]}
```