Programmable Media

Image effects and enhancements

Last updated: Sep-26-2023

Cloudinary's visual effects and enhancements are a great way to easily change the way your images look within your site or application. For example, you can change the shape of your images, blur and pixelate them, apply quality improvements, make color adjustments, change the look and feel with fun effects, apply filters, and much more. You can also apply multiple effects to an image by applying each effect as a separate chained transformation.

Some transformations use fairly simple syntax, whereas others require more explanation - examples of these types of transformations are shown in the advanced syntax examples.

Besides the examples on this page, there are many more effects available and you can find a full list of them, including examples, by checking out our URL transformation reference.

Here are some popular options for using effects and artistic enhancements. Click each image to see the URL parameters applied in each case:

Cartoonify your images Cartoonify
your images
Add a vignette to your images Add a vignette to
your images
Create low quality image placeholders Generate low quality
image placeholders
Add image outlines Add image
outlines

Simple syntax examples

Here are some examples of effects and enhancements that use a simple transformation syntax. Click the links to see the full syntax for each transformation in the URL transformation reference.

Artistic filters

Apply an artistic filter using the art effect, specifying one of the filters shown.

Available filters

Original image:

Original image, no filter

Filters:

al_dente artistic filter al_dente athena artistic filter athena audrey artistic filter audrey aurora artistic filter aurora daguerre artistic filter daguerre eucalyptus artistic filter eucalyptus fes artistic filter fes frost artistic filter frost hairspray artistic filter hairspray hokusai artistic filter hokusai incognito artistic filter incognito linen artistic filter linen peacock artistic filter peacock primavera artistic filter primavera quartz artistic filter quartz red_rock artistic filter red_rock refresh artistic filter refresh sizzle artistic filter sizzle sonnet artistic filter sonnet ukulele artistic filter ukulele zorro artistic filter zorro

See full syntax: e_art in the Transformation Reference.

Cartoonify

Make an image look more like a cartoon using the cartoonify effect.

Image with cartoonify effect

See full syntax: e_cartoonify in the Transformation Reference.

Opacity

Adjust the opacity of an image using the opacity transformation (o in URLs). Specify a value between 0 and 100, representing the percentage of transparency, where 100 means completely opaque and 0 is completely transparent. In this case the image is delivered with 30% opacity:

Image delivered with 30% opacity

See full syntax: o (opacity) in the Transformation Reference.

Pixelate

Pixelate an image using the pixelate effect.

Pixelated image

See full syntax: e_pixelate in the Transformation Reference.

Sepia

Change the colors of an image to shades of sepia using the sepia effect.

Sepia effect applied to an image

See full syntax: e_sepia in the Transformation Reference.

Vignette

Fade the edges of images into the background using the vignette effect.

Horse image with vignette

See full syntax: e_vignette in the Transformation Reference.

Advanced syntax examples

In general, most of the visual effects and enhancements can take an additional option to tailor the effect to your liking. For some, however, you may need to provide additional syntax and use some more complex concepts. It is important to understand how these advanced transformations work when attempting to use them. The sections below outline some of the more advanced transformations and help you to use these with your own assets.

Remember, there are many more transformations available and you can find a full list of them, including examples, by checking out our URL transformation reference.

Tip
You can use MediaFlows, Cloudinary’s low-code workflow builder, to automatically generate variants of any image in different colors and styles. MediaFlows is currently in public beta – learn more and sign up here.

3D LUTs

3D lookup tables (3D LUTs) are used to map one color space to another. They can be used to adjust colors, contrast, and/or saturation, so that you can correct contrast, fix a camera's inability to see a particular color shade, or give a final finished look or a particular style to your image.

After uploading a .3dl file to your product environment as a raw file, you can apply it to any image using the lut property of the layer parameter ( l_lut: in URLs), followed by the LUT file name (including the .3dl extension).

Below you can see the ladybug_top.jpg image file in its original color, compared to the video with different LUT files applied. Below these is the code for applying one of the LUTs.

Original Original image with iwltbap_sedona LUT with 'iwltbap_sedona' LUT image with iwltbap_aspen LUT with 'iwltbap_aspen' LUT

See full syntax: l_lut in the Transformation Reference.

Background color

Use the background parameter (b in URLs) to set the background color of the image. The image background is visible when padding is added with one of the padding crop modes, when rounding corners, when adding overlays, and with semi-transparent PNGs and GIFs.

An opaque color can be set as an RGB hex triplet (e.g., b_rgb:3e2222), a 3-digit RGB hex (e.g., b_rgb:777) or a named color (e.g., b_green). Cloudinary's client libraries also support a # shortcut for RGB (e.g., setting background to #3e2222 which is then translated to rgb:3e2222).

For example, the uploaded image named sample padded to a width and height of 300 pixels with a green background:

Image padded to a width and height of 300 pixels with green background

You can also use a 4-digit or 8-digit RGBA hex quadruplet for the background color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240 results in 25% opacity).

Note
When using the background parameter to set the background color of a text overlay, you can also set the color to predominant_contrast. This selects the strongest contrasting color to the predominant color while taking all pixels in the image into account. For example, l_text:Arial_30:foo,b_predominant_contrast.

See full syntax: b (background) in the Transformation Reference.

Content-aware padding

You can automatically set the background color to the most prominent color in the image when applying one of the padding crop modes (pad, lpad, mpad or fill_pad) by setting the background parameter to auto (b_auto in URLs). The parameter can also accept an additional value as follows:

  • b_auto:border - selects the predominant color while taking only the image border pixels into account. This is the default option for b_auto.
  • b_auto:predominant - selects the predominant color while taking all pixels in the image into account.
  • b_auto:border_contrast - selects the strongest contrasting color to the predominant color while taking only the image border pixels into account.
  • b_auto:predominant_contrast - selects the strongest contrasting color to the predominant color while taking all pixels in the image into account.
border b_auto:border predominant b_auto:predominant border_contrast b_auto:border_contrast predominant_contrast b_auto:predominant_contrast

For example, padding the sample image to a width and height of 300 pixels, and with the background color set to the predominant color in the image:

Pad to 300x300 with the predominant color set as the background color

Tip
To use generative AI to extend the image into the padded areas, see generative fill.

See full syntax: b_auto in the Transformation Reference.

Gradient fade

You can also apply a padding gradient fade effect with the predominant colors in the image by adjusting the value of the b_auto parameter as follows:

b_auto:[gradient_type]:[number]:[direction]

Where:

  • gradient_type - one of the following values:
    • predominant_gradient - base the gradient fade effect on the predominant colors in the image
    • predominant_gradient_contrast - base the effect on the colors that contrast the predominant colors in the image
    • border_gradient - base the gradient fade effect on the predominant colors in the border pixels of the image
    • border_gradient_contrast - base the effect on the colors that contrast the predominant colors in the border pixels of the image
  • number - the number of predominant colors to select. Possible values: 2 or 4. Default: 2
  • direction - if 2 colors are selected, this parameter specifies the direction to blend the 2 colors together (if 4 colors are selected each gets interpolated between the four corners). Possible values: horizontal, vertical, diagonal_desc, and diagonal_asc. Default: horizontal
predominant predominant_gradient:2:diagonal_desc border_contrast predominant_gradient_contrast:4

Custom color palette

Add a custom palette to limit the selected color to one of the colors in the palette that you provide. Once the predominant color has been calculated then the closest color from the available palette is selected. Append a colon and then the value palette followed by a list of colors, each separated by an underscore. For example, to automatically add padding and a palette that limits the possible choices to green, red and blue: b_auto:palette_red_green_blue

The palette can be used in combination with any of the various values for b_auto, and the same color in the palette can be selected more than once when requesting multiple predominant colors. For example, padding to a width and height of 300 pixels, with a 4 color gradient fade in the auto colored padding, and limiting the possible colors to red, green, blue, and orange:

Pad to 300x300 with 4 color gradient fade from given palette
Gradient fade into padding

Fade the image into the added padding by adding the gradient_fade effect with a value of symmetric_pad (e_gradient_fade:symmetric_pad in URLs). The padding blends into the edge of the image with a strength indicated by an additional value, separated by a colon (Range: 0 to 100, Default: 20). Values for x and y can also be specified as a percentage (range: 0.0 to 1.0), or in pixels (integer values) to indicate how far into the image to apply the gradient effect. By default, the gradient is applied 30% into the image (x_0.3).

For example, padding the sample image to a width and height of 300 pixels, with the background color set to the predominant color, and with a gradient fade effect, between the added padding and 50% into the image.

Pad to 300x300 with the predominant color set as the background color and gradient fade into padding

See full syntax: e_gradient_fade in the Transformation Reference.

Borders

Add a solid border around images with the border parameter (bo in URLs). The parameter accepts a value with a CSS-like format: width_style_color (e.g., 3px_solid_black).

An opaque color can be set as an RGB hex triplet (e.g., rgb:3e2222), a 3-digit RGB hex (e.g., rgb:777) or a named color (e.g., green).

You can also use a 4-digit or 8-digit RGBA hex quadruplet for the color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240 results in 25% opacity).

Additionally, Cloudinary's client libraries also support a # shortcut for RGB (e.g., setting color to #3e2222 which is then translated to rgb:3e2222), and when using Cloudinary's client libraries, you can optionally set the border values programmatically instead of as a single string (e.g., :border => { :width => 4, :color => 'black' }).

Note
Currently only the 'solid' border style is supported.

For example, the uploaded jpeg image named sample delivered with a 5 pixel red border:

Image delivered with 5 pixel red border

Borders are also useful for adding to overlays to clearly define the overlaying image, and also automatically adapt to any rounded corner transformations. For example, the base image given rounded corners with a 10 pixel grey border, and an overlay of the image of young_couple resized to a 150x150 thumbnail with face detection and a black 3 pixel border, added to the northeast corner:

Base image with rounded corners + overlay

Note
When using the border parameter to set the border color of a text overlay, you can also set the color to predominant_contrast. This selects the strongest contrasting color to the predominant color while taking all pixels in the image into account. For example, l_text:Arial_30:foo,bo_3px_solid_predominant_contrast

See full syntax: bo (border) in the Transformation Reference.

Color blind effects

Cloudinary has a number of features that can help you to choose the best images as well as to transform problematic images to ones that are more accessible to color blind people. You can use Cloudinary to:

  • Simulate how an image would look to people with different color blind conditions.
  • Assist people with color blind conditions to help differentiate problematic colors.
  • Analyze images to provide color blind accessibility scores and information on which colors are the hardest to differentiate.

Simulate color blind conditions

You can simulate a number of different color blind conditions using the simulate_colorblind effect. For full syntax and supported conditions, see the e_simulate_colorblind parameter in the Transformation URL API Reference.

Simulate the way an image would appear to someone with deuteranopia (most common form of) color blindness:

Red and green image Original image Red and green image when simulating color blind condition Deuteranopia simulation

See full syntax: e_simulate_colorblind in the Transformation Reference.

Assist people with color blind conditions

Use the assist_colorblind effect (e_assist_colorblind in URLs) to help people with color blind conditions to differentiate between colors.

You can add stripes in different directions and thicknesses to different colors, making them easier to differentiate, for example:

Help a color blind user differentiate similar colors with stripes

A color blind person would see the stripes like this:

Stripe color-blind assistance with simulation

Alternatively, you can use color shifts to make colors easier to distinguish by specifying the xray assist type, for example:

Help a colorblind user differentiate similar colors with color shifts

See full syntax: e_assist_colorblind in the Transformation Reference.

Displacement maps

You can displace pixels in a source image based on the intensity of pixels in a displacement map image using the e_displace effect in conjunction with a displacement map image specified as an overlay. This can be useful to create interesting effects in a select area of an image or to warp the entire image to fit a needed design or texture. For example, to make an image wrap around a coffee cup or appear to be printed on a textured canvas.

The displace effect (e_displace in URLs) algorithm displaces the pixels in an image according to the color channels of the pixels in another specified image (a gradient map specified with the overlay parameter). The displace effect is added in the same component as the layer_apply flag. The red channel controls horizontal displacement, green controls vertical displacement, and the blue channel is ignored.

The final displacement of each pixel in the base image is determined by a combination of the red and green color channels, together with the configured x and/or y parameters:

x Red Channel Pixel Displacement
Positive 0 - 127 Right
Positive 128 - 255 Left
Negative 0 - 127 Left
Negative 128 - 255 Right
y Green Channel Pixel Displacement
Positive 0 - 127 Down
Positive 128 - 255 Up
Negative 0 - 127 Up
Negative 128 - 255 Down

The displacement of pixels is proportional to the channel values, with the extreme values giving the most displacement, and values closer to 128 giving the least displacement.

The displacement formulae are:

  • x displacement = (127-red channel)*(x parameter)/127
  • y displacement = (127-green channel)*(y parameter)/127

Positive displacement is right and down, and negative displacement is up and left.

For example, specifying an x value of 500, at red channel values of 0 and 255, the base image pixels are displaced by 500 pixels horizontally, whereas at 114 and 141 (127 - 10% and 128 + 10%) the base image pixels are displaced by 50 pixels horizontally.

x Red Channel Pixel Displacement
500 0 500 pixels right
500 114 50 pixels right
500 141 50 pixels left
500 255 500 pixels left

Note
Values of x and y must be between -999 and 999.

This is a standard displacement map algorithm used by popular image editing tools, so you can upload existing displacement maps found on the internet or created by your graphic artists to your product environment and specify them as the overlay asset, enabling you to dynamically apply the displacement effect on other images in your product environment or those uploaded by your end users.

Several sample use-case of this layer-based effect are shown in the sections below.

See full syntax: e_displace in the Transformation Reference.

Use case: Warp an image to fit a 3-dimensional product

Use a displacement map to warp the perspective of an overlay image for final placement as an overlay on a mug:

displacement map for image overlay

Using this overlay transformation for placement on a mug:

Zoom displacement map

Use case: Create a zoom effect

To displace the sample image by using a displacement map, creating a zoom effect:

displacement map for a zoom effect

You could take this a step further by applying this displacement along with another overlay component that adds a magnifying glass. In this example, the same displacement map as above is used on a different base image and offset to a different location.

zoomed in image

Use case: Apply a texture to your image

displacement map for a zoom effect

Interactive texture demo

For more details on displacement mapping with the displace effect, see the article on Displacement Maps for Easy Image Transformations with Cloudinary. The article includes a variety of examples, as well as an interactive demo.

Distort

Using the distort effect, you can change the shape of an image, distorting its dimensions and the image itself. It works in one of two modes: you can either change the positioning of each of the corners, or you can warp the image into an arc.

To change the positioning of each of the corners, it is helpful to have in mind a picture like the one below. The solid rectangle shows the coordinates of the corners of the original image. The intended result of the distortion is represented by the dashed shape. The new corner coordinates are specified in the distort effect as x,y pairs, clockwise from top-left. For example:

Distortion coordinates

Image distorted to new shape

For more details on perspective warping with the distort effect, see the article on How to dynamically distort images to fit your graphic design.

To curve an image, you can specify arc and the number of degrees in the distort effect, instead of the corner coordinates. If you specify a positive value for the number of degrees, the image is curved upwards, like a frown. Negative values curve the image downwards, like a smile.

You can distort text in the same way as images, for example, to add curved text to the frisbee image (e_distort:arc:-120):

Curved text distortion

See full syntax: e_distort in the Transformation Reference.

Text distortion demo

The CLOUDINARY text in the following demo was created using the text method of the Upload API. Try distorting it by entering different values for the corner coordinates.

Select one of the options or manually change the corner coordinates then generate the new distorted text.

Original     Slant     Distance     Narrow     Squash     Grow

,

,


,

,

Generative AI effects

Cloudinary has a number of transformations that make use of generative AI:

You can use natural language in each of these transformations as prompts to guide the generation process.

Generative fill (Beta)

When resizing images using one of the padding crop modes (pad, lpad, mpad or fill_pad), rather than specifying a background color or using content-aware padding, you can seamlessly extend the existing image into the padded area.

Important
The generative fill transformation is currently in Beta. Some implementation details may change before the official release. We invite you to share any feedback via our support team.

Using generative AI, you can automatically add visually realistic pixels to either or both dimensions of the image. Optionally specify a prompt to guide the result of the generation.

To extend the width of an image, specify the aspect ratio such that the width needs padding. For example, change the following portrait image to be landscape by specifying an aspect ratio of 16:9 with a padding crop, then fill in the extended width using the gen_fill background option (b_gen_fill in URLs):

Original image of a moped in a street Original image Extended street Seamlessly fill the extended width

Similarly, you can change a landscape image into portrait dimensions by specifying the aspect ratio such that the height needs padding:

Original image of a bench outside a house Original image Extended house Seamlessly fill the extended height

To extend both the width and the height of an image, you can use the minimum pad mode, ensuring that the dimensions you specify are greater than the original image dimensions. For example, extend this 640 x 480 pixel image to fill a 1100 x 1100 pixel square:

Original image of a Gaudi mosaic Original image Extended mosaic Seamlessly fill both extended dimensions

When using padding modes, you can use the gravity parameter to position the original image within the padding, for example, perhaps with the first example, you only want to extend the image to the left, you can position the original image to the right by setting gravity to east:

Moped in a street - extend west

If you want to see something specific in the generated parts of the image, you can specify a prompt using natural language. For example, add a mug of coffee and cookies to the extended regions (b_gen_fill:prompt_mug%20of%20coffee%20and%20cookies):

Original image of a kid's desk Original image
Extended desktop with coffee and cookies Include coffee and cookies
Extended desktop No prompt

If you want to ensure that the background is extended in a natural fashion, without taking elements of the foreground into account, then you can set the ignore-foreground parameter to true. This is in fact the default behavior, unless a foreground object touches the edge of the image. You can see in the following example that the bike wheel touches the edge of the image, so in this case the foreground would not be ignored, however, this has consequences of the bike being generated in the extended image. Therefore, in this case it is better to force the foreground to be ignored:

Original image of a girl with a bike Original image
Extend the image taking the foreground into account Default behavior
Extend the image without taking the foreground into account ignore-foreground_true

Notes and limitations:

See full syntax: b_gen_fill in the Transformation Reference.

Generative recolor (Beta)

Recolor elements of your images using generative AI.

Important
The generative recolor effect is currently in Beta. Some implementation details may change before the official release. We invite you to share any feedback via our support team.

Use natural language to describe what you want to recolor in the image. For example, turn the jacket on the right pink (e_gen_recolor:prompt_the%20jacket%20on%20the%20right;to-color_pink):

Original image of three people in jackets Original image Right jacket recolored pink Right jacket recolored pink

To recolor all instances of the prompt in the image, specify multiple_true, for example, recolor all the devices in the following image to a particular orange color, with hex code EA672A:

Original image of people on devices Original image All devices recolored orange All devices recolored orange

Tip
Consider using Replace color if you want to recolor everything of a particular color in your image, rather than specific elements.

If there are a number of different things that you want to recolor, you can specify more than one prompt. Note that when you specify more than one prompt, multiple instances of each prompt are recolored, regardless of the multiple parameter setting. For example, in this image, all devices and both people's hair are recolored:

Devices and hair recolored

Notes and limitations:
  • You can combine the generative recolor effect with other transformation parameters, but it must be the first component in the chain.
  • The generative recolor effect can only be used on non-transparent images.
  • The use of generative AI means that results may not be 100% accurate.
  • The generative recolor effect works best on simple objects that are clearly visible.
  • Very small objects and very large objects may not be detected.
  • Output images are downscaled to a maximum of 2048 x 2048 pixels.
  • When you specify more than one prompt, all the objects specified in each of the prompts will be recolored whether or not multiple_true is specified in the URL.
  • There is a special transformation count for the generative recolor effect.
  • The generative recolor effect is not supported for fetched images or incoming transformations.

See full syntax: e_gen_recolor in the Transformation Reference.

Generative remove (Beta)

This effect uses generative AI to remove an object from an image and fill in the space with artificially generated, visually realistic pixels.

Important
The generative remove effect is currently in Beta. Some implementation details may change before the official release. We invite you to share any feedback via our support team.

Use natural language to describe what you want to remove from the image, for example, remove the stick from this image of a dog with a stick in its mouth (e_gen_remove:prompt_the%20stick):

Original image of dog with stick Original image Dog with stick removed Remove the stick

The natural language lets you be specific about what you want to remove. In the following example, specifying only 'the child' removes the child in the middle, whereas specifying the 'the child in green' removes the child wearing the green jacket:

Original image of family Original image
Family with middle child removed Remove the child Family with child in green removed Remove the child in green

If there are many of the same thing in the image, you can remove them all using by setting multiple to true. For example, remove all the geese in this image (e_gen_remove:prompt_goose;multiple_true):

Original image with geese Original image Scene  with geese removed Remove all the geese

Otherwise, only one is removed:

One goose removed from the picture

If there are a number of different things that you want to remove, you can specify more than one prompt. Note that when you specify more than one prompt, multiple instances of each prompt are removed regardless of the multiple parameter setting. For example, in this image, all phones are removed, together with the mouse and keyboard:

Original image with gadgets Original image Scene  with geese removed Remove specified gadgets

You can also specify one or more region if you know the co-ordinates of the pixels that you want to remove. For each region, specify the x,y co-ordinates of the top left of the region, plus its width and height in pixels. For example, remove the objects from the top left and bottom right of the image:

Various objects Original image Remove two regions Remove specified regions

By default, shadows and reflections cast by objects specified in the prompt are also removed. However, if you want to keep the shadow/reflection, perhaps for an artistic effect or because you intend to overlay something in its place that would cast the same shadow, you can request to keep it by setting the remove-shadow parameter to false:

Family on a beach Original image
Remove the dog Remove the dog
(and the shadow by default)
Remove the dog but not its shadow Remove the dog
(but not its shadow)

Notes and limitations:
  • You can combine the generative remove effect with other transformation parameters, but it must be the first component in the chain.
  • The generative remove effect can only be used on non-transparent images.
  • The use of generative AI means that results may not be 100% accurate.
  • The generative remove effect works best on simple objects that are clearly visible.
  • Very small objects and very large objects may not be detected.
  • Do not attempt to remove faces, hands or text.
  • Output images are downscaled to a maximum of 2048 x 2048 pixels.
  • When you specify more than one prompt, all the objects specified in each of the prompts will be removed whether or not multiple_true is specified in the URL.
  • There is a special transformation count for the generative remove effect.
  • The generative remove effect is not supported for fetched images or incoming transformations.

See full syntax: e_gen_remove in the Transformation Reference.

Generative replace (Beta)

This effect uses generative AI to replace objects in images with other objects.

Important
The generative replace effect is currently in Beta. Some implementation details may change before the official release. We invite you to share any feedback via our support team.

Use natural language to describe what you want to replace in the image, and what to replace it with.

For example, replace "the picture" with "a mirror with a silver frame" (e_gen_replace:from_the%20picture;to_a%20mirror%20with%20a%20silver%20frame):

Original image with a picture on the wall Original image Picture replaced with mirror Picture replaced
with mirror

If you want to maintain the shape of the object you're replacing, set the preserve-geometry parameter to true. For example, below, notice the difference between the position of the sleeves and neckline of the sweater, with and without preserving the geometry when the shirt is replaced with a cable knit sweater:

Comparison of with and without preserve-geometry

Replace shirt with sweater - compare with and without preserving geometry
Original image of a woman in a shirt Original Shirt replaced with sweater Geometry
not preserved
Shirt replaced with sweater Geometry
preserved

Notes and limitations:
  • You can combine the generative replace effect with other transformation parameters, but it must be the first component in the chain.
  • The generative replace effect can only be used on non-transparent images.
  • The use of generative AI means that results may not be 100% accurate.
  • The generative replace effect works best on simple objects that are clearly visible.
  • Very small objects and very large objects may not be detected.
  • Do not attempt to replace faces, hands or text.
  • Output images are downscaled to a maximum of 2048 x 2048 pixels.
  • There is a special transformation count for the generative replace effect.
  • The generative replace effect is not supported for fetched images or incoming transformations.

See full syntax: e_gen_replace in the Transformation Reference.

Generative restore (Beta)

Revitalize degraded and poor quality images using generative AI.

Important
The generative restore effect is currently in Beta. Some implementation details may change before the official release. We invite you to share any feedback via our support team.

You can use the gen_restore effect (e_gen_restore in URLs) to improve images that have become degraded through repeated processing and compression, in addition to enhancing old images by improving sharpness and reducing noise.

Particularly useful for user generated content (UGC), generative restore can:

  • Remove severe compression artifacts
  • Reduce noise from grainy images
  • Sharpen blurred images

Use the slider in this example to see the difference between the original image on the left and the restored image on the right:

Original image Restored image

You can use the generative restore effect together with the improve effect for even better results. While generative restore tries to rectify compression artifacts, the improve effect addresses color, contrast and brightness.

Original image Restored and improved image

Notes and limitations:
  • You can combine the generative restore effect with other transformation parameters, but it must be the first component in the chain.
  • The generative restore effect can only be used on non-transparent images.
  • The use of generative AI means that results may not be 100% accurate.
  • There is a special transformation count for the generative restore effect.
  • The generative restore effect is not supported for fetched images or incoming transformations.

See full syntax: e_gen_restore in the Transformation Reference.

Layer blending and masking

Effects: screen, multiply, overlay, mask, anti_removal

These effects are used for blending an overlay with an image.

For example, to make each pixel of the sample image brighter according to the pixel value of the overlaid cloudinary_icon_blue image:

Image made brighter according to overlay

See full syntax: e_screen, e_multiply, e_overlay, e_mask, e_anti_removal in the Transformation Reference.

Outline

The outline effect (e_outline in URLs) enables you to add an outline to your transparent images. The parameter can also be passed additional values as follows:

  • mode - how to apply the outline effect which can be one of the following values: inner, inner_fill, outer, fill. Default value: inner and outer.
  • width - the first integer supplied applies to the thickness of the outline in pixels. Default value: 5. Range: 1 - 100
  • blur - the second integer supplied applies to the level of blur of the outline. Default value: 0. Range: 0 - 2000
Original Original e_outline e_outline e_outline:inner e_outline:inner e_outline:inner_fill e_outline:inner_fill e_outline:outer e_outline:outer e_outline:fill e_outline:fill

Use the color parameter (co in URLs) to define a new color for the outline (the default is black). The color can be specified as an RGB hex triplet (e.g., rgb:3e2222), a 3-digit RGB hex (e.g., rgb:777) or a named color (e.g., green). For example, to add an orange outline:

multiple outlines

You can also add a multi-colored outline by creating successive outline effect components. For example:

multiple outlines

See full syntax: e_outline in the Transformation Reference.

Replace color

You can replace a color in an image using the replace_color effect. Unless you specify otherwise, the most prominent high-saturation color in an image is selected as the color to change. By default, a tolerance of 50 is applied to this color, representing a radius in the LAB color space, so that similar shades are also replaced, achieving a more natural effect.

Tip
Consider using Generative recolor if you want to specify particular elements in your image to recolor, rather than everything with the same color.

For example, without specifying a color to change, the most prominent color is changed to the specified maroon:

Original image with blue color Original blue bag Predominant color recolored to maroon shades Predominant color recolored

Adding a tolerance value of 10 (e_replace_color:maroon:10) prevents the handle also changing color:

Original image with blue color Original blue bag Handle not recolored Handle not recolored

Specifying blue as the color to replace (to a tolerance of 80 from the color #2b38aa) replaces the blue sides with parallel shades of maroon, taking into account shadows, lighting, etc:

Original image with blue color Original blue bag Blues recolored to maroon shades Blues recolored to maroon shades

See full syntax: e_replace_color in the Transformation Reference.

Rotation

Rotate an image by any arbitrary angle in degrees with the angle parameter (a in URLs). A positive integer value rotates the image clockwise, and a negative integer value rotates the image counterclockwise. If the angle is not a multiple of 90 then a rectangular transparent bounding box is added containing the rotated image and empty space. In these cases, it's recommended to deliver the image in a transparent format if the background is not white.

Note
If either the width or height of an image exceeds 3000 pixels, the image is automatically downscaled first, and then rotated. This applies to the image that is the input to the rotation, be it the output of a chained transformation or the original image.

You can also take advantage of special angle-rotation modes, such as a_hflip / a_vflip to horizontally or vertically mirror flip an image, a_auto_right / a_auto_left to rotate an image 90 degrees only if the requested aspect ratio is different than the original image's aspect ratio, or a_ignore to prevent Cloudinary from automatically rotating images based on the images's stored EXIF details.

For details on these rotation modes, see the Transformation Reference.

Rotaation examples

The following images apply various rotation options to the sample image:

  1. Rotate the image by 90 degrees:
    Image rotated 90 degrees clockwise
  2. Rotate the image by -20 degrees (automatically adds a transparent bounding box):
    Image rotated 20 degrees counterclockwise
  3. Vertically mirror flip the image and rotate by 45 degrees (automatically adds a transparent bounding box):
    Image vertically flipped and rotated 45 degrees clockwise
  4. Crop the image to a 200x200 circle, then rotate the image by 30 degrees (automatically adds a transparent bounding box) and finally trim the extra whitespace added:
    image cropped to a 200x200 circle, rotated 30 degrees clockwise and trimmed

See full syntax: a (angle) in the Transformation Reference.

Rounding

Many website designs need images with rounded corners, while some websites require images with a complete circular or oval (ellipse) crop. Twitter, for example, uses rounded corners for its users' profile pictures.

Programmatically, rounded corners can be achieved using the original rectangular images combined with modern CSS properties or image masking overlays. However, it is sometimes useful to deliver images with rounded corners in the first place. This is particularly helpful when you want to embed images inside an email (most mail clients can't add CSS based rounded corners), a PDF or a mobile application. Delivering images with already rounded corners is also useful if you want to simplify your CSS and markup or when you need to support older browsers.

Transforming an image to a rounded version is done using the radius parameter (r in URLs). You can manually specify the amount to round various corners, or you can set it to automatically round to an exact ellipse or circle.

Note
To deliver a rounded image with a transparent background, deliver as PNG. Formats that do not support transparency will be delivered by default with a white background, which can be adjusted with the background transformation parameter. Keep in mind that the PNG format produces larger files than the JPEG format. For more information, see the article on PNG optimization - saving bandwidth on transparent PNGs with dynamic underlay.

Manually setting rounding values

To manually control the rounding, use the radius parameter with between 1 and 4 values defining the rounding amount (in pixels, separated by colons), following the same concept as the border-radius CSS property. When specifying multiple values, keep a corner untouched by specifying '0'.

  • One value: Symmetrical. All four corners are rounded equally according to the specified value.
  • Two values: Opposites are symmetrical. The first value applies to the top-left and bottom-right corners. The second value applies to the top-right and bottom-left corners.
  • Three values: One set of corners is symmetrical. The first value applies to the top-left. The second value applies to the top-right and bottom-left corners. The third value applies to the bottom-right.
  • Four values: The rounding for each corner is specified separately, in clockwise order, starting with the top-left.

For example:

1 value: r_20 r_20 2 values: r_25:0 r_25:0    3 values: r_10:40:25 r_10:40:25    4 values: r_30:0:30:30 r_30:0:30:30   

Automatically rounding to an ellipse or circle

Rather than specifying specific rounding values, you can automatically crop images to the shape of an ellipse (if the requested image size is a rectangle) or a circle (if the requested image size is a square). Simply pass max as the value of the radius parameter instead of numeric values.

The following example transforms an uploaded JPEG to a 250x150 PNG with maximum radius cropping, which generates the ellipse shape with a transparent background:

150x100 ellipsoid image

As the following example shows, displaying pictures of your web site's users as circle headshots is very easy to achieve with Cloudinary using face gravity with max radius:

100x100 face thumbnail with max radius

You can also overlay circular pictures of your users on other images using the layer_apply flag that tells Cloudinary to apply the rounding (and other transformations) to the overlay image and not to the base image:

Face thumbnail on base image

See full syntax: r (round corners) in the Transformation Reference.

Shadow

There are two ways to add shadow to your images:

  • Use the shadow effect to apply a shadow to the edge of the image.
  • Use the dropshadow effect to apply a shadow to objects in the image.

Shadow effect

The shadow effect (e_shadow in URLs) applies a shadow to the edge of the image. You can use this effect to make it look like your image is hovering slightly above the page.

In this example, a dark blue shadow with medium blurring of its edges (co_rgb:483d8b,e_shadow:50) is added with an offset of 60 pixels to the top right of the photo (x_60,y_-60):

Photo of Stockholm with shadow effect

If your image has transparency, the shadow is added to the edge of the non-transparent part, for example, adding the same shadow to the lipstick in this image:

Transparent photo of lipstick with shadow effect

For a more realistic shadow, use the dropshadow effect.

See full syntax: e_shadow in the Transformation Reference.

Dropshadow effect

The dropshadow effect (e_dropshadow in URLs) uses AI to apply a realistic shadow to an object or objects in the image.

You can use this effect to apply consistent shadows across a set of product images, where background removal has been used.

To create the shadow, specify the position of the light source, using azimuth and elevation as shown in this diagram, where north (0 / 360 degrees) is behind the object:

Diagram showing azimuth and elevation

You can also specify a spread from 0 to 100, where the smaller the number, the closer the light source is to 'point' light, and larger numbers mean 'area' light.

The following example has a light source set up at an azimuth of 220 degrees, an elevation of 40 degrees above 'ground' and where the spread of the light source is 20% (e_dropshadow:azimuth_220;elevation_40;spread_20):

Lipstick without shadow Original Lipstick with shadow With dropshadow effect

Notes
  • Either:
    • the original image must include transparency, for example where the background has already been removed and it has been stored in a format that supports transparency, such as PNG, or
    • the dropshadow effect must be chained immediately after the background_removal effect, for example:

  • You can combine the dropshadow effect with other transformation parameters, but the dropshadow effect must be the first component in the chain, unless used with the background_removal effect.

See background removal and drop shadow being applied to product images on the fly in a React app.

See full syntax: e_dropshadow in the Transformation Reference.

Dropshadow effect demo

Try out the different dropshadow effect settings on an image of a bench.

Use the controls to set up the light source, then generate the shadow!

Azimuth (0 to 360): 215

Elevation (0 to 90): 45

Spread (0 to 100): 50