CldImage Examples

Effects

  • Background Removal

    removeBackground
    Background removal requires the Cloudinary AI Background Removal Add-On
  • Generative Fill

    width="960"
    height="600" // Original 1440
    crop="pad" // Returns the given size with padding
    fillBackground // Uses AI to extend image
    The generative fill transformation is currently in Beta. Learn more.
  • Zoom & Pan

    zoompan="loop"
  • Blur

    blur="1200"
  • Pixelate

    pixelate
  • Grayscale

    grayscale
  • Tint

    tint="equalize:80:blue:blueviolet"
  • Opacity

    opacity="50"
  • Shear

    shear="40:0"
  • Border

    border="40px_solid_purple"
  • Background

    removeBackground
    background="blue"
  • Trim

    trim
  • Multiple Effects

    effects={[
      {
        background: 'green'
      },
      {
        gradientFade: true
      },
      {
        gradientFade: 'symetric,x_0.5'
      }
    ]}

Cropping

  • Original

  • Thumbnail with Auto Gravity

    crop="thumb"
    gravity="auto"
  • Thumbnail with Faces Gravity

    crop="thumb"
    gravity="faces"
  • Thumbnail with Faces Gravity and Zoom

    crop="thumb"
    gravity="faces"
    zoom="0.5"

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
        }
      ]
    }]}
  • Overlay with Multiply Effect

    overlays={[{
      publicId: `images/earth`,
      effects: [
        {
          crop: 'fill',
          gravity: 'auto',
          width: 960,
          height: 600
        }
      ],
      appliedEffects: [
        {
          multiply: true
        }
      ]
    }]}
  • Overlay with Screen Effect

    overlays={[{
      publicId: `images/earth`,
      effects: [
        {
          crop: 'fill',
          gravity: 'auto',
          width: 960,
          height: 600
        }
      ],
      appliedEffects: [
        {
          screen: true
        }
      ]
    }]}
  • Overlay with Overlay Effect

    overlays={[{
      publicId: `images/earth`,
      effects: [
        {
          crop: 'fill',
          gravity: 'auto',
          width: 960,
          height: 600
        }
      ],
      appliedEffects: [
        {
          overlay: true
        }
      ]
    }]}

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: 160,
        fontWeight: 'bold',
        textDecoration: 'underline',
        letterSpacing: 14,
        text: 'Cool Beans'
      }
    }]}
  • Text Overlay with Effects

    overlays={[{
      text: {
        color: 'white',
        fontFamily: 'Source Sans Pro',
        fontSize: 160,
        fontWeight: 'bold',
        text: 'Cool Beans'
      },
      effects: [
        {
          shear: '40:0',
          opacity: 50
        }
      ]
    }]}

Other

  • Named Transformations

    transformations={[
      'svelte-cloudinary-named-transformation'
    ]}
  • Raw Transformations

    rawTransformations={[
      // Example from Cloudinary Media Editor widget
      'c_crop,h_359,w_517,x_1483,y_0/c_scale,h_359,w_517/f_auto,q_auto'
    ]}
  • Preserve Transformations

    src={`https://res.cloudinary.com/<Cloud Name>/image/upload/c_fill,h_300,w_250/e_blur:1000/v1/<Public ID>`}
    preserveTransformations
    tint="equalize:80:blue:blueviolet"

MIT 2023 ©