> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If you also need details relating to other Cloudinary products for your current use case, see the parent index at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Generative AI transformations


Cloudinary offers a range of transformations powered by generative AI, including generative background replace for creating alternative backgrounds, generative fill to naturally extend images to fit new dimensions, generative recolor to adjust image hues, generative remove for seamless removal of elements, generative replace to substitute items within images, and generative restore to revitalize degraded visuals.

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

> **TIP**: To generate entirely new images from text prompts rather than transforming existing ones, see [Image Generation](image_generation_addon).

Here are some examples of generative AI transformations on the same image. Click each image to see the URL parameters applied in each case:

Recolor the shorts 

Extend the image

Replace the shirt

> **TIP**: See [AI in Action](ai_in_action) for more uses of AI within Cloudinary.

## Generative background replace (Beta)
Use AI to generate an alternative background for your images. The new background takes into account the foreground elements, positioning them naturally within the scene.

> **INFO**:
>
> **Generative background replace** is currently in Beta. There may be minor changes in functionality before the general access release. We would appreciate any feedback via our [support team](https://support.cloudinary.com/hc/en-us/requests/new).

For images with transparency, the generated background replaces the transparent area. For images without transparency, the effect first determines the foreground elements and leaves those areas intact, while replacing the background. 

You can use generative background replace without a prompt, and let the AI decide what to show in the background, based on the foreground elements. For example, replace the background of this image (`e_gen_background_replace`):

![Background replaced in image of a model](https://res.cloudinary.com/demo/image/upload/e_gen_background_replace/docs/woman-sitting.jpg "with_image:false")

```nodejs
cloudinary.image("docs/woman-sitting.jpg", {effect: "gen_background_replace"})
```

```react
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace()
);
```

```vue
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace()
);
```

```angular
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace()
);
```

```js
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace()
);
```

```python
CloudinaryImage("docs/woman-sitting.jpg").image(effect="gen_background_replace")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/woman-sitting.jpg'))
	->effect(Effect::generativeBackgroundReplace());
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_background_replace")).imageTag("docs/woman-sitting.jpg");
```

```ruby
cl_image_tag("docs/woman-sitting.jpg", effect: "gen_background_replace")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_background_replace")).BuildImageTag("docs/woman-sitting.jpg")
```

```dart
cloudinary.image('docs/woman-sitting.jpg').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_background_replace")).generate("docs/woman-sitting.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_background_replace")).generate("docs/woman-sitting.jpg");
```

```flutter
cloudinary.image('docs/woman-sitting.jpg').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace()));
```

```kotlin
cloudinary.image {
	publicId("docs/woman-sitting.jpg")
	 effect(Effect.generativeBackgroundReplace()) 
}.generate()
```

```jquery
$.cloudinary.image("docs/woman-sitting.jpg", {effect: "gen_background_replace"})
```

```react_native
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace()
);
```

Original image

Replace the background

Alternatively, you can use a natural language prompt to guide the AI and describe what you want to see in the background. For example, place the model in front of an old castle (`e_gen_background_replace:prompt_an%20old%20castle`):

![Background replaced in image of a model](https://res.cloudinary.com/demo/image/upload/e_gen_background_replace:prompt_an%20old%20castle/docs/woman-sitting.jpg "thumb:c_scale,w_300, width:300")

```nodejs
cloudinary.image("docs/woman-sitting.jpg", {effect: "gen_background_replace:prompt_an old castle"})
```

```react
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle")
);
```

```vue
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle")
);
```

```angular
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle")
);
```

```js
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle")
);
```

```python
CloudinaryImage("docs/woman-sitting.jpg").image(effect="gen_background_replace:prompt_an old castle")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/woman-sitting.jpg'))
	->effect(Effect::generativeBackgroundReplace()->prompt("an old castle"));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_background_replace:prompt_an old castle")).imageTag("docs/woman-sitting.jpg");
```

```ruby
cl_image_tag("docs/woman-sitting.jpg", effect: "gen_background_replace:prompt_an old castle")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_background_replace:prompt_an old castle")).BuildImageTag("docs/woman-sitting.jpg")
```

```dart
cloudinary.image('docs/woman-sitting.jpg').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace().prompt("an old castle")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_background_replace:prompt_an old castle")).generate("docs/woman-sitting.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_background_replace:prompt_an old castle")).generate("docs/woman-sitting.jpg");
```

```flutter
cloudinary.image('docs/woman-sitting.jpg').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace().prompt("an old castle")));
```

```kotlin
cloudinary.image {
	publicId("docs/woman-sitting.jpg")
	 effect(Effect.generativeBackgroundReplace() { prompt("an old castle") }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/woman-sitting.jpg", {effect: "gen_background_replace:prompt_an old castle"})
```

```react_native
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle")
);
```

### Generate different backgrounds

The same background is generated every time you use the same prompt (and keep any preceding transformations the same). You can generate a different background with the same prompt (or no prompt) by setting the`seed` parameter. A different result is generated for each value you set. For example, regenerate the background for the old castle example (`e_gen_background_replace:prompt_an%20old%20castle;seed_1`):

![Background replaced in image of a model](https://res.cloudinary.com/demo/image/upload/e_gen_background_replace:prompt_an%20old%20castle;seed_1/docs/woman-sitting.jpg "thumb:c_scale,w_300, width:300")

```nodejs
cloudinary.image("docs/woman-sitting.jpg", {effect: "gen_background_replace:prompt_an old castle;seed_1"})
```

```react
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle").seed(1)
);
```

```vue
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle").seed(1)
);
```

```angular
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle").seed(1)
);
```

```js
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle").seed(1)
);
```

```python
CloudinaryImage("docs/woman-sitting.jpg").image(effect="gen_background_replace:prompt_an old castle;seed_1")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/woman-sitting.jpg'))
	->effect(Effect::generativeBackgroundReplace()->prompt("an old castle")
->seed(1));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_background_replace:prompt_an old castle;seed_1")).imageTag("docs/woman-sitting.jpg");
```

```ruby
cl_image_tag("docs/woman-sitting.jpg", effect: "gen_background_replace:prompt_an old castle;seed_1")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_background_replace:prompt_an old castle;seed_1")).BuildImageTag("docs/woman-sitting.jpg")
```

```dart
cloudinary.image('docs/woman-sitting.jpg').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace().prompt("an old castle")
.seed(1)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_background_replace:prompt_an old castle;seed_1")).generate("docs/woman-sitting.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_background_replace:prompt_an old castle;seed_1")).generate("docs/woman-sitting.jpg");
```

```flutter
cloudinary.image('docs/woman-sitting.jpg').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace().prompt("an old castle")
.seed(1)));
```

```kotlin
cloudinary.image {
	publicId("docs/woman-sitting.jpg")
	 effect(Effect.generativeBackgroundReplace() { prompt("an old castle")
 seed(1) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/woman-sitting.jpg", {effect: "gen_background_replace:prompt_an old castle;seed_1"})
```

```react_native
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-sitting.jpg").effect(
  generativeBackgroundReplace().prompt("an old castle").seed(1)
);
```

If you want to reproduce a background, use the same seed value, and make sure to keep any preceding transformation parameters the same. Subsequent parameters can be different, for example, scale down the same image:

![Background replaced in image of a model and scaled down](https://res.cloudinary.com/demo/image/upload/e_gen_background_replace:prompt_an%20old%20castle;seed_1/c_scale,w_200/docs/woman-sitting.jpg "width: 200")

```nodejs
cloudinary.image("docs/woman-sitting.jpg", {transformation: [
  {effect: "gen_background_replace:prompt_an old castle;seed_1"},
  {width: 200, crop: "scale"}
  ]})
```

```react
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/woman-sitting.jpg")
  .effect(generativeBackgroundReplace().prompt("an old castle").seed(1))
  .resize(scale().width(200));
```

```vue
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/woman-sitting.jpg")
  .effect(generativeBackgroundReplace().prompt("an old castle").seed(1))
  .resize(scale().width(200));
```

```angular
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/woman-sitting.jpg")
  .effect(generativeBackgroundReplace().prompt("an old castle").seed(1))
  .resize(scale().width(200));
```

```js
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/woman-sitting.jpg")
  .effect(generativeBackgroundReplace().prompt("an old castle").seed(1))
  .resize(scale().width(200));
```

```python
CloudinaryImage("docs/woman-sitting.jpg").image(transformation=[
  {'effect': "gen_background_replace:prompt_an old castle;seed_1"},
  {'width': 200, 'crop': "scale"}
  ])
```

```php
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/woman-sitting.jpg'))
	->effect(Effect::generativeBackgroundReplace()->prompt("an old castle")
->seed(1))
	->resize(Resize::scale()->width(200));
```

```java
cloudinary.url().transformation(new Transformation()
  .effect("gen_background_replace:prompt_an old castle;seed_1").chain()
  .width(200).crop("scale")).imageTag("docs/woman-sitting.jpg");
```

```ruby
cl_image_tag("docs/woman-sitting.jpg", transformation: [
  {effect: "gen_background_replace:prompt_an old castle;seed_1"},
  {width: 200, crop: "scale"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("gen_background_replace:prompt_an old castle;seed_1").Chain()
  .Width(200).Crop("scale")).BuildImageTag("docs/woman-sitting.jpg")
```

```dart
cloudinary.image('docs/woman-sitting.jpg').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace().prompt("an old castle")
.seed(1))
	.resize(Resize.scale().width(200)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("gen_background_replace:prompt_an old castle;seed_1").chain()
  .setWidth(200).setCrop("scale")).generate("docs/woman-sitting.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .effect("gen_background_replace:prompt_an old castle;seed_1").chain()
  .width(200).crop("scale")).generate("docs/woman-sitting.jpg");
```

```flutter
cloudinary.image('docs/woman-sitting.jpg').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace().prompt("an old castle")
.seed(1))
	.resize(Resize.scale().width(200)));
```

```kotlin
cloudinary.image {
	publicId("docs/woman-sitting.jpg")
	 effect(Effect.generativeBackgroundReplace() { prompt("an old castle")
 seed(1) })
	 resize(Resize.scale() { width(200) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/woman-sitting.jpg", {transformation: [
  {effect: "gen_background_replace:prompt_an old castle;seed_1"},
  {width: 200, crop: "scale"}
  ]})
```

```react_native
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/woman-sitting.jpg")
  .effect(generativeBackgroundReplace().prompt("an old castle").seed(1))
  .resize(scale().width(200));
```

### Replace transparent backgrounds 

In this next example, the transparent background of the original image is replaced to give context to the motorbike (`e_gen_background_replace:prompt_a%20deserted%20street`):

![Background replaced with a deserted street](https://res.cloudinary.com/demo/image/upload/e_gen_background_replace:prompt_a%20deserted%20street/docs/motorbike.png "with_image:false")

```nodejs
cloudinary.image("docs/motorbike.png", {effect: "gen_background_replace:prompt_a deserted street"})
```

```react
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/motorbike.png").effect(
  generativeBackgroundReplace().prompt("a deserted street")
);
```

```vue
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/motorbike.png").effect(
  generativeBackgroundReplace().prompt("a deserted street")
);
```

```angular
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/motorbike.png").effect(
  generativeBackgroundReplace().prompt("a deserted street")
);
```

```js
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/motorbike.png").effect(
  generativeBackgroundReplace().prompt("a deserted street")
);
```

```python
CloudinaryImage("docs/motorbike.png").image(effect="gen_background_replace:prompt_a deserted street")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/motorbike.png'))
	->effect(Effect::generativeBackgroundReplace()->prompt("a deserted street"));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_background_replace:prompt_a deserted street")).imageTag("docs/motorbike.png");
```

```ruby
cl_image_tag("docs/motorbike.png", effect: "gen_background_replace:prompt_a deserted street")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_background_replace:prompt_a deserted street")).BuildImageTag("docs/motorbike.png")
```

```dart
cloudinary.image('docs/motorbike.png').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace().prompt("a deserted street")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_background_replace:prompt_a deserted street")).generate("docs/motorbike.png")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_background_replace:prompt_a deserted street")).generate("docs/motorbike.png");
```

```flutter
cloudinary.image('docs/motorbike.png').transformation(Transformation()
	.effect(Effect.generativeBackgroundReplace().prompt("a deserted street")));
```

```kotlin
cloudinary.image {
	publicId("docs/motorbike.png")
	 effect(Effect.generativeBackgroundReplace() { prompt("a deserted street") }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/motorbike.png", {effect: "gen_background_replace:prompt_a deserted street"})
```

```react_native
import { generativeBackgroundReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/motorbike.png").effect(
  generativeBackgroundReplace().prompt("a deserted street")
);
```

Original image

Replace the background

> **NOTE**:
>
> :title=Notes and limitations:

> * The use of generative AI means that results may not be 100% accurate.

> * There's a [special transformation count](transformation_counts#special_effect_calculations) for the generative background replace effect.

> * If you get blurred results when using this feature, it's likely that the built-in NSFW (Not Safe For Work) check has detected something inappropriate. You can [contact support](https://support.cloudinary.com/hc/en-us/requests/new) to disable this check if you believe it's too sensitive.

> * The generative background replace effect isn't supported for [animated](animated_images) images or [fetched](fetch_remote_images#fetch_and_deliver_remote_files) images.

> * When Cloudinary is generating a derived version, you may get a 423 response returned until the version is ready. You can prepare derived versions in advance using an [eager transformation](eager_and_incoming_transformations#eager_transformations).

> * When Cloudinary is generating an [incoming transformation](eager_and_incoming_transformations#incoming_transformations), you may get a 420 response returned, with status `pending` until the asset is ready.

> * If you're using our [Asia Pacific data center](admin_api#alternative_data_centers_and_endpoints_premium_feature), you currently can't apply the generative background replace effect.
**See full syntax**: [e_gen_background_replace](transformation_reference#e_gen_background_replace) in the _Transformation Reference_.

**Try it out**: [Generative background replace](https://console.cloudinary.com/app/image/home/generative-background-replace?media=image&collection=objects&sample=me%2Fgen-bgr-object-1&prompt=Minimalist+background+with+a+soft+pastel+gradient+even+lighting).

## Generative fill
When resizing images using one of the padding crop modes ([pad](image_padding_modes#pad), [lpad](image_padding_modes#lpad_limit_pad), [mpad](image_padding_modes#mpad_minimum_pad) or [fill_pad](image_crop_modes#fill_pad)), rather than specifying a [background color](color_effects#setting_background_color) or using [content-aware padding](color_effects#content_aware_padding), you can seamlessly extend the existing image into the padded area.

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):

![Moped in a street](https://res.cloudinary.com/demo/image/upload/ar_16:9,b_gen_fill,c_pad,w_1250/docs/moped.jpg "with_image:false")

```nodejs
cloudinary.image("docs/moped.jpg", {aspect_ratio: "16:9", background: "gen_fill", width: 1250, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .background(generativeFill())
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .background(generativeFill())
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .background(generativeFill())
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .background(generativeFill())
);
```

```python
CloudinaryImage("docs/moped.jpg").image(aspect_ratio="16:9", background="gen_fill", width=1250, crop="pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\AspectRatio;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/moped.jpg'))
	->resize(Resize::pad()->width(1250)
	->aspectRatio(
	AspectRatio::ar16X9())
	->background(
	Background::generativeFill())
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("16:9").background("gen_fill").width(1250).crop("pad")).imageTag("docs/moped.jpg");
```

```ruby
cl_image_tag("docs/moped.jpg", aspect_ratio: "16:9", background: "gen_fill", width: 1250, crop: "pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("16:9").Background("gen_fill").Width(1250).Crop("pad")).BuildImageTag("docs/moped.jpg")
```

```dart
cloudinary.image('docs/moped.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1250)
	.aspectRatio(
	AspectRatio.ar16X9())
	.background(
	Background.generativeFill())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("16:9").setBackground("gen_fill").setWidth(1250).setCrop("pad")).generate("docs/moped.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("16:9").background("gen_fill").width(1250).crop("pad")).generate("docs/moped.jpg");
```

```flutter
cloudinary.image('docs/moped.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1250)
	.aspectRatio(
	AspectRatio.ar16X9())
	.background(
	Background.generativeFill())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/moped.jpg")
	 resize(Resize.pad() { width(1250)
	 aspectRatio(
	AspectRatio.ar16X9())
	 background(
	Background.generativeFill())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/moped.jpg", {aspect_ratio: "16:9", background: "gen_fill", width: 1250, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .background(generativeFill())
);
```

Original image

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:

![Bench outside a house](https://res.cloudinary.com/demo/image/upload/ar_9:16,b_gen_fill,c_pad,h_1250/docs/bench-house.jpg "with_image:false")

```nodejs
cloudinary.image("docs/bench-house.jpg", {aspect_ratio: "9:16", background: "gen_fill", height: 1250, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .height(1250)
    .aspectRatio("9:16")
    .background(generativeFill())
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .height(1250)
    .aspectRatio("9:16")
    .background(generativeFill())
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .height(1250)
    .aspectRatio("9:16")
    .background(generativeFill())
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .height(1250)
    .aspectRatio("9:16")
    .background(generativeFill())
);
```

```python
CloudinaryImage("docs/bench-house.jpg").image(aspect_ratio="9:16", background="gen_fill", height=1250, crop="pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/bench-house.jpg'))
	->resize(Resize::pad()->height(1250)
->aspectRatio("9:16")
	->background(
	Background::generativeFill())
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("9:16").background("gen_fill").height(1250).crop("pad")).imageTag("docs/bench-house.jpg");
```

```ruby
cl_image_tag("docs/bench-house.jpg", aspect_ratio: "9:16", background: "gen_fill", height: 1250, crop: "pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("9:16").Background("gen_fill").Height(1250).Crop("pad")).BuildImageTag("docs/bench-house.jpg")
```

```dart
cloudinary.image('docs/bench-house.jpg').transformation(Transformation()
	.resize(Resize.pad().height(1250)
.aspectRatio("9:16")
	.background(
	Background.generativeFill())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("9:16").setBackground("gen_fill").setHeight(1250).setCrop("pad")).generate("docs/bench-house.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("9:16").background("gen_fill").height(1250).crop("pad")).generate("docs/bench-house.jpg");
```

```flutter
cloudinary.image('docs/bench-house.jpg').transformation(Transformation()
	.resize(Resize.pad().height(1250)
.aspectRatio("9:16")
	.background(
	Background.generativeFill())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/bench-house.jpg")
	 resize(Resize.pad() { height(1250)
 aspectRatio("9:16")
	 background(
	Background.generativeFill())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/bench-house.jpg", {aspect_ratio: "9:16", background: "gen_fill", height: 1250, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .height(1250)
    .aspectRatio("9:16")
    .background(generativeFill())
);
```

Original image

Seamlessly fill theextended height 

To extend both the width and the height of an image, you can use the [minimum pad](image_padding_modes#mpad_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:

![Gaudi mosaic](https://res.cloudinary.com/demo/image/upload/b_gen_fill,c_mpad,h_1100,w_1100/docs/gaudi.jpg "with_image:false")

```nodejs
cloudinary.image("docs/gaudi.jpg", {background: "gen_fill", height: 1100, width: 1100, crop: "mpad"})
```

```react
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/gaudi.jpg").resize(
  minimumPad()
    .width(1100)
    .height(1100)
    .background(generativeFill())
);
```

```vue
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/gaudi.jpg").resize(
  minimumPad()
    .width(1100)
    .height(1100)
    .background(generativeFill())
);
```

```angular
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/gaudi.jpg").resize(
  minimumPad()
    .width(1100)
    .height(1100)
    .background(generativeFill())
);
```

```js
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/gaudi.jpg").resize(
  minimumPad()
    .width(1100)
    .height(1100)
    .background(generativeFill())
);
```

```python
CloudinaryImage("docs/gaudi.jpg").image(background="gen_fill", height=1100, width=1100, crop="mpad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/gaudi.jpg'))
	->resize(Resize::minimumPad()->width(1100)
->height(1100)
	->background(
	Background::generativeFill())
	);
```

```java
cloudinary.url().transformation(new Transformation().background("gen_fill").height(1100).width(1100).crop("mpad")).imageTag("docs/gaudi.jpg");
```

```ruby
cl_image_tag("docs/gaudi.jpg", background: "gen_fill", height: 1100, width: 1100, crop: "mpad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("gen_fill").Height(1100).Width(1100).Crop("mpad")).BuildImageTag("docs/gaudi.jpg")
```

```dart
cloudinary.image('docs/gaudi.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(1100)
.height(1100)
	.background(
	Background.generativeFill())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("gen_fill").setHeight(1100).setWidth(1100).setCrop("mpad")).generate("docs/gaudi.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().background("gen_fill").height(1100).width(1100).crop("mpad")).generate("docs/gaudi.jpg");
```

```flutter
cloudinary.image('docs/gaudi.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(1100)
.height(1100)
	.background(
	Background.generativeFill())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/gaudi.jpg")
	 resize(Resize.minimumPad() { width(1100)
 height(1100)
	 background(
	Background.generativeFill())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/gaudi.jpg", {background: "gen_fill", height: 1100, width: 1100, crop: "mpad"})
```

```react_native
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/gaudi.jpg").resize(
  minimumPad()
    .width(1100)
    .height(1100)
    .background(generativeFill())
);
```

Original image

Seamlessly fill bothextended dimensions 

### Extend an image in one direction

When using padding modes, you can use the [gravity](image_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](https://res.cloudinary.com/demo/image/upload/ar_16:9,b_gen_fill,c_pad,g_east,w_1250/docs/moped.jpg "thumb:h_200, height:200")

```nodejs
cloudinary.image("docs/moped.jpg", {aspect_ratio: "16:9", background: "gen_fill", gravity: "east", width: 1250, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .gravity(compass("east"))
    .background(generativeFill())
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .gravity(compass("east"))
    .background(generativeFill())
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .gravity(compass("east"))
    .background(generativeFill())
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .gravity(compass("east"))
    .background(generativeFill())
);
```

```python
CloudinaryImage("docs/moped.jpg").image(aspect_ratio="16:9", background="gen_fill", gravity="east", width=1250, crop="pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\AspectRatio;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Background;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/moped.jpg'))
	->resize(Resize::pad()->width(1250)
	->aspectRatio(
	AspectRatio::ar16X9())
	->gravity(
	Gravity::compass(
	Compass::east()))
	->background(
	Background::generativeFill())
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("16:9").background("gen_fill").gravity("east").width(1250).crop("pad")).imageTag("docs/moped.jpg");
```

```ruby
cl_image_tag("docs/moped.jpg", aspect_ratio: "16:9", background: "gen_fill", gravity: "east", width: 1250, crop: "pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("16:9").Background("gen_fill").Gravity("east").Width(1250).Crop("pad")).BuildImageTag("docs/moped.jpg")
```

```dart
cloudinary.image('docs/moped.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1250)
	.aspectRatio(
	AspectRatio.ar16X9())
	.gravity(
	Gravity.compass(
	Compass.east()))
	.background(
	Background.generativeFill())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("16:9").setBackground("gen_fill").setGravity("east").setWidth(1250).setCrop("pad")).generate("docs/moped.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("16:9").background("gen_fill").gravity("east").width(1250).crop("pad")).generate("docs/moped.jpg");
```

```flutter
cloudinary.image('docs/moped.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1250)
	.aspectRatio(
	AspectRatio.ar16X9())
	.gravity(
	Gravity.compass(
	Compass.east()))
	.background(
	Background.generativeFill())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/moped.jpg")
	 resize(Resize.pad() { width(1250)
	 aspectRatio(
	AspectRatio.ar16X9())
	 gravity(
	Gravity.compass(
	Compass.east()))
	 background(
	Background.generativeFill())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/moped.jpg", {aspect_ratio: "16:9", background: "gen_fill", gravity: "east", width: 1250, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/moped.jpg").resize(
  pad()
    .width(1250)
    .aspectRatio(ar16X9())
    .gravity(compass("east"))
    .background(generativeFill())
);
```

### Extend an image with specific elements

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 box of cookies to the extended region (`b_gen_fill:prompt_box%20of%20cookies`):

![Kid's desk](https://res.cloudinary.com/demo/image/upload/b_gen_fill:prompt_box%20of%20cookies,c_pad,h_400,w_1500/docs/play.jpg "with_image:false")

```nodejs
cloudinary.image("docs/play.jpg", {background: "gen_fill:prompt_box of cookies", height: 400, width: 1500, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg").resize(
  pad()
    .width(1500)
    .height(400)
    .background(generativeFill().prompt("box of cookies"))
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg").resize(
  pad()
    .width(1500)
    .height(400)
    .background(generativeFill().prompt("box of cookies"))
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg").resize(
  pad()
    .width(1500)
    .height(400)
    .background(generativeFill().prompt("box of cookies"))
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg").resize(
  pad()
    .width(1500)
    .height(400)
    .background(generativeFill().prompt("box of cookies"))
);
```

```python
CloudinaryImage("docs/play.jpg").image(background="gen_fill:prompt_box of cookies", height=400, width=1500, crop="pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/play.jpg'))
	->resize(Resize::pad()->width(1500)
->height(400)
	->background(
	Background::generativeFill()->prompt("box of cookies"))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("gen_fill:prompt_box of cookies").height(400).width(1500).crop("pad")).imageTag("docs/play.jpg");
```

```ruby
cl_image_tag("docs/play.jpg", background: "gen_fill:prompt_box of cookies", height: 400, width: 1500, crop: "pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("gen_fill:prompt_box of cookies").Height(400).Width(1500).Crop("pad")).BuildImageTag("docs/play.jpg")
```

```dart
cloudinary.image('docs/play.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1500)
.height(400)
	.background(
	Background.generativeFill().prompt("box of cookies"))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("gen_fill:prompt_box of cookies").setHeight(400).setWidth(1500).setCrop("pad")).generate("docs/play.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().background("gen_fill:prompt_box of cookies").height(400).width(1500).crop("pad")).generate("docs/play.jpg");
```

```flutter
cloudinary.image('docs/play.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1500)
.height(400)
	.background(
	Background.generativeFill().prompt("box of cookies"))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/play.jpg")
	 resize(Resize.pad() { width(1500)
 height(400)
	 background(
	Background.generativeFill() { prompt("box of cookies") })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/play.jpg", {background: "gen_fill:prompt_box of cookies", height: 400, width: 1500, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg").resize(
  pad()
    .width(1500)
    .height(400)
    .background(generativeFill().prompt("box of cookies"))
);
```

Original image

Include a box of cookies

No prompt

### Generate different filled backgrounds

The same filled background is generated every time you use the same prompt (and keep any preceding transformations the same). You can generate a different filled background with the same prompt (or no prompt) by setting the `seed` parameter. A different result is generated for each value you set. For example, regenerate the filled background for the box of cookies example (`b_gen_fill:prompt_box%20of%20cookies;seed_1,c_pad,h_400,w_1500`):

![Extended background including a box of cookies](https://res.cloudinary.com/demo/image/upload/b_gen_fill:prompt_box%20of%20cookies;seed_1,c_pad,h_400,w_1500/c_scale,h_200/docs/play.jpg "height:200")

```nodejs
cloudinary.image("docs/play.jpg", {transformation: [
  {background: "gen_fill:prompt_box of cookies;seed_1", height: 400, width: 1500, crop: "pad"},
  {height: 200, crop: "scale"}
  ]})
```

```react
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(200));
```

```vue
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(200));
```

```angular
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(200));
```

```js
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(200));
```

```python
CloudinaryImage("docs/play.jpg").image(transformation=[
  {'background': "gen_fill:prompt_box of cookies;seed_1", 'height': 400, 'width': 1500, 'crop': "pad"},
  {'height': 200, 'crop': "scale"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/play.jpg'))
	->resize(Resize::pad()->width(1500)
->height(400)
	->background(
	Background::generativeFill()->prompt("box of cookies"))
	)
	->resize(Resize::scale()->height(200));
```

```java
cloudinary.url().transformation(new Transformation()
  .background("gen_fill:prompt_box of cookies;seed_1").height(400).width(1500).crop("pad").chain()
  .height(200).crop("scale")).imageTag("docs/play.jpg");
```

```ruby
cl_image_tag("docs/play.jpg", transformation: [
  {background: "gen_fill:prompt_box of cookies;seed_1", height: 400, width: 1500, crop: "pad"},
  {height: 200, crop: "scale"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Background("gen_fill:prompt_box of cookies;seed_1").Height(400).Width(1500).Crop("pad").Chain()
  .Height(200).Crop("scale")).BuildImageTag("docs/play.jpg")
```

```dart
cloudinary.image('docs/play.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1500)
.height(400)
	.background(
	Background.generativeFill().prompt("box of cookies"))
	)
	.resize(Resize.scale().height(200)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setBackground("gen_fill:prompt_box of cookies;seed_1").setHeight(400).setWidth(1500).setCrop("pad").chain()
  .setHeight(200).setCrop("scale")).generate("docs/play.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .background("gen_fill:prompt_box of cookies;seed_1").height(400).width(1500).crop("pad").chain()
  .height(200).crop("scale")).generate("docs/play.jpg");
```

```flutter
cloudinary.image('docs/play.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1500)
.height(400)
	.background(
	Background.generativeFill().prompt("box of cookies"))
	)
	.resize(Resize.scale().height(200)));
```

```kotlin
cloudinary.image {
	publicId("docs/play.jpg")
	 resize(Resize.pad() { width(1500)
 height(400)
	 background(
	Background.generativeFill() { prompt("box of cookies") })
	 })
	 resize(Resize.scale() { height(200) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/play.jpg", {transformation: [
  {background: "gen_fill:prompt_box of cookies;seed_1", height: 400, width: 1500, crop: "pad"},
  {height: 200, crop: "scale"}
  ]})
```

```react_native
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(200));
```

To reproduce a filled background, use the same seed value, and make sure to keep any preceding transformation parameters the same. Subsequent parameters can be different, for example, scale down the same image:

![Extended background including a box of cookies](https://res.cloudinary.com/demo/image/upload/b_gen_fill:prompt_box%20of%20cookies;seed_1,c_pad,h_400,w_1500/c_scale,h_150/docs/play.jpg "height:150")

```nodejs
cloudinary.image("docs/play.jpg", {transformation: [
  {background: "gen_fill:prompt_box of cookies;seed_1", height: 400, width: 1500, crop: "pad"},
  {height: 150, crop: "scale"}
  ]})
```

```react
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(150));
```

```vue
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(150));
```

```angular
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(150));
```

```js
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(150));
```

```python
CloudinaryImage("docs/play.jpg").image(transformation=[
  {'background': "gen_fill:prompt_box of cookies;seed_1", 'height': 400, 'width': 1500, 'crop': "pad"},
  {'height': 150, 'crop': "scale"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/play.jpg'))
	->resize(Resize::pad()->width(1500)
->height(400)
	->background(
	Background::generativeFill()->prompt("box of cookies"))
	)
	->resize(Resize::scale()->height(150));
```

```java
cloudinary.url().transformation(new Transformation()
  .background("gen_fill:prompt_box of cookies;seed_1").height(400).width(1500).crop("pad").chain()
  .height(150).crop("scale")).imageTag("docs/play.jpg");
```

```ruby
cl_image_tag("docs/play.jpg", transformation: [
  {background: "gen_fill:prompt_box of cookies;seed_1", height: 400, width: 1500, crop: "pad"},
  {height: 150, crop: "scale"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Background("gen_fill:prompt_box of cookies;seed_1").Height(400).Width(1500).Crop("pad").Chain()
  .Height(150).Crop("scale")).BuildImageTag("docs/play.jpg")
```

```dart
cloudinary.image('docs/play.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1500)
.height(400)
	.background(
	Background.generativeFill().prompt("box of cookies"))
	)
	.resize(Resize.scale().height(150)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setBackground("gen_fill:prompt_box of cookies;seed_1").setHeight(400).setWidth(1500).setCrop("pad").chain()
  .setHeight(150).setCrop("scale")).generate("docs/play.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .background("gen_fill:prompt_box of cookies;seed_1").height(400).width(1500).crop("pad").chain()
  .height(150).crop("scale")).generate("docs/play.jpg");
```

```flutter
cloudinary.image('docs/play.jpg').transformation(Transformation()
	.resize(Resize.pad().width(1500)
.height(400)
	.background(
	Background.generativeFill().prompt("box of cookies"))
	)
	.resize(Resize.scale().height(150)));
```

```kotlin
cloudinary.image {
	publicId("docs/play.jpg")
	 resize(Resize.pad() { width(1500)
 height(400)
	 background(
	Background.generativeFill() { prompt("box of cookies") })
	 })
	 resize(Resize.scale() { height(150) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/play.jpg", {transformation: [
  {background: "gen_fill:prompt_box of cookies;seed_1", height: 400, width: 1500, crop: "pad"},
  {height: 150, crop: "scale"}
  ]})
```

```react_native
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/play.jpg")
  .resize(
    pad()
      .width(1500)
      .height(400)
      .background(generativeFill().prompt("box of cookies"))
  )
  .resize(scale().height(150));
```

> **NOTE**:
>
> :title=Notes and limitations:

> * Generative fill can only be used on non-transparent images.

> * There is a [special transformation count](transformation_counts#special_effect_calculations) for generative fill.

> * Generative fill isn't supported for [animated](animated_images) images or [fetched](fetch_remote_images#fetch_and_deliver_remote_files) images.

> * If you get blurred results when using this feature, it is likely that the built-in NSFW (Not Safe For Work) check has detected something inappropriate. You can [contact support](https://support.cloudinary.com/hc/en-us/requests/new) to disable this check if you believe it's too sensitive.

> * When Cloudinary is generating a derived version, you may get a 423 response returned until the version is ready. You can prepare derived versions in advance using an [eager transformation](eager_and_incoming_transformations#eager_transformations).

> * When Cloudinary is generating an [incoming transformation](eager_and_incoming_transformations#incoming_transformations), you may get a 420 response returned, with status `pending` until the asset is ready.
**See full syntax**: [b_gen_fill](transformation_reference#b_gen_fill) in the _Transformation Reference_.

**Try it out**: [Generative fill](https://console.cloudinary.com/app/image/home/generative-fill?media=image&collection=nature&sample=me%2Fgenfill-nature-1&aspectRatio=square&focusOn=center&width=500&height=700).

## Generative recolor
Recolor elements of your images using generative AI.

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`):

![Jacket on the right recolored to pink](https://res.cloudinary.com/demo/image/upload/e_gen_recolor:prompt_the%20jacket%20on%20the%20right;to-color_pink/docs/jackets.jpg "with_image:false")

```nodejs
cloudinary.image("docs/jackets.jpg", {effect: "gen_recolor:prompt_the jacket on the right;to-color_pink"})
```

```react
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/jackets.jpg").effect(
  generativeRecolor("the jacket on the right", "pink")
);
```

```vue
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/jackets.jpg").effect(
  generativeRecolor("the jacket on the right", "pink")
);
```

```angular
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/jackets.jpg").effect(
  generativeRecolor("the jacket on the right", "pink")
);
```

```js
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/jackets.jpg").effect(
  generativeRecolor("the jacket on the right", "pink")
);
```

```python
CloudinaryImage("docs/jackets.jpg").image(effect="gen_recolor:prompt_the jacket on the right;to-color_pink")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/jackets.jpg'))
	->effect(Effect::generativeRecolor("the jacket on the right",Color::PINK));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_recolor:prompt_the jacket on the right;to-color_pink")).imageTag("docs/jackets.jpg");
```

```ruby
cl_image_tag("docs/jackets.jpg", effect: "gen_recolor:prompt_the jacket on the right;to-color_pink")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_recolor:prompt_the jacket on the right;to-color_pink")).BuildImageTag("docs/jackets.jpg")
```

```dart
cloudinary.image('docs/jackets.jpg').transformation(Transformation()
	.effect(Effect.generativeRecolor("the jacket on the right",Color.PINK)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_recolor:prompt_the jacket on the right;to-color_pink")).generate("docs/jackets.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_recolor:prompt_the jacket on the right;to-color_pink")).generate("docs/jackets.jpg");
```

```flutter
cloudinary.image('docs/jackets.jpg').transformation(Transformation()
	.effect(Effect.generativeRecolor("the jacket on the right",Color.PINK)));
```

```kotlin
cloudinary.image {
	publicId("docs/jackets.jpg")
	 effect(Effect.generativeRecolor("the jacket on the right",Color.PINK)) 
}.generate()
```

```jquery
$.cloudinary.image("docs/jackets.jpg", {effect: "gen_recolor:prompt_the jacket on the right;to-color_pink"})
```

```react_native
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/jackets.jpg").effect(
  generativeRecolor("the jacket on the right", "pink")
);
```

Original image

Right jacket recolored pink

### Recolor multiple elements

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`:

![All devices recolored orange](https://res.cloudinary.com/demo/image/upload/e_gen_recolor:prompt_device;to-color_EA672A;multiple_true/docs/devices.jpg "with_image:false")

```nodejs
cloudinary.image("docs/devices.jpg", {effect: "gen_recolor:prompt_device;to-color_EA672A;multiple_true"})
```

```react
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/devices.jpg").effect(
  generativeRecolor("device", "#EA672A").detectMultiple()
);
```

```vue
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/devices.jpg").effect(
  generativeRecolor("device", "#EA672A").detectMultiple()
);
```

```angular
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/devices.jpg").effect(
  generativeRecolor("device", "#EA672A").detectMultiple()
);
```

```js
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/devices.jpg").effect(
  generativeRecolor("device", "#EA672A").detectMultiple()
);
```

```python
CloudinaryImage("docs/devices.jpg").image(effect="gen_recolor:prompt_device;to-color_EA672A;multiple_True")
```

```php
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Color;

(new ImageTag('docs/devices.jpg'))
	->effect(Effect::generativeRecolor("device",Color::rgb("EA672A"))->detectMultiple());
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_recolor:prompt_device;to-color_EA672A;multiple_true")).imageTag("docs/devices.jpg");
```

```ruby
cl_image_tag("docs/devices.jpg", effect: "gen_recolor:prompt_device;to-color_EA672A;multiple_true")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_recolor:prompt_device;to-color_EA672A;multiple_true")).BuildImageTag("docs/devices.jpg")
```

```dart
cloudinary.image('docs/devices.jpg').transformation(Transformation()
	.effect(Effect.generativeRecolor("device",Color.rgb("EA672A")).detectMultiple()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_recolor:prompt_device;to-color_EA672A;multiple_true")).generate("docs/devices.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_recolor:prompt_device;to-color_EA672A;multiple_true")).generate("docs/devices.jpg");
```

```flutter
cloudinary.image('docs/devices.jpg').transformation(Transformation()
	.effect(Effect.generativeRecolor("device",Color.rgb("EA672A")).detectMultiple()));
```

```kotlin
cloudinary.image {
	publicId("docs/devices.jpg")
	 effect(Effect.generativeRecolor("device",Color.rgb("EA672A")) { detectMultiple() }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/devices.jpg", {effect: "gen_recolor:prompt_device;to-color_EA672A;multiple_true"})
```

```react_native
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/devices.jpg").effect(
  generativeRecolor("device", "#EA672A").detectMultiple()
);
```

Original image

All devices recolored orange

> **TIP**: Consider using [Replace color](color_effects#replace_color_effect) 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](https://res.cloudinary.com/demo/image/upload/e_gen_recolor:prompt_(device;hair)

```nodejs
cloudinary.image("e_gen_recolor:prompt_(device;hair")
```

```react
new CloudinaryImage("e_gen_recolor:prompt_(device;hair");
```

```vue
new CloudinaryImage("e_gen_recolor:prompt_(device;hair");
```

```angular
new CloudinaryImage("e_gen_recolor:prompt_(device;hair");
```

```js
new CloudinaryImage("e_gen_recolor:prompt_(device;hair");
```

```python
CloudinaryImage("e_gen_recolor:prompt_(device;hair").image()
```

```php
(new ImageTag('e_gen_recolor:prompt_(device;hair'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("e_gen_recolor:prompt_(device;hair");
```

```ruby
cl_image_tag("e_gen_recolor:prompt_(device;hair")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("e_gen_recolor:prompt_(device;hair")
```

```dart
cloudinary.image('e_gen_recolor:prompt_(device;hair').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("e_gen_recolor:prompt_(device;hair")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("e_gen_recolor:prompt_(device;hair");
```

```flutter
cloudinary.image('e_gen_recolor:prompt_(device;hair').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("e_gen_recolor:prompt_(device;hair") 
}.generate()
```

```jquery
$.cloudinary.image("e_gen_recolor:prompt_(device;hair")
```

```react_native
new CloudinaryImage("e_gen_recolor:prompt_(device;hair");
```;to-color_EA672A/docs/devices.jpg "thumb:w_400, width:400")

### Recolor multicolored objects

If the items to recolor contain many colors, you can specify the colors to change based on their dominance in the items (using a zero-based index). For example, in the image below, the blue is the third most dominant color of the dress and the most dominant color of the jacket.  Therefore, to recolor both of these to a burgundy color (hex color #800020), you can chain two recolor actions:

* `e_gen_recolor:prompt_dress;apply-to-tier_(2);to-color_800020`: recolors the third most dominant color in the dress to burgundy.
* `e_gen_recolor:prompt_jacket;apply-to-tier_(0);to-color_800020`: recolors the most dominant color in the jacket to burgundy.

![Change the blue in the dress and jacket to burgundy](https://res.cloudinary.com/demo/image/upload/e_gen_recolor:prompt_dress;apply-to-tier_(2)

```nodejs
cloudinary.image("e_gen_recolor:prompt_dress;apply-to-tier_(2")
```

```react
new CloudinaryImage("e_gen_recolor:prompt_dress;apply-to-tier_(2");
```

```vue
new CloudinaryImage("e_gen_recolor:prompt_dress;apply-to-tier_(2");
```

```angular
new CloudinaryImage("e_gen_recolor:prompt_dress;apply-to-tier_(2");
```

```js
new CloudinaryImage("e_gen_recolor:prompt_dress;apply-to-tier_(2");
```

```python
CloudinaryImage("e_gen_recolor:prompt_dress;apply-to-tier_(2").image()
```

```php
(new ImageTag('e_gen_recolor:prompt_dress;apply-to-tier_(2'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("e_gen_recolor:prompt_dress;apply-to-tier_(2");
```

```ruby
cl_image_tag("e_gen_recolor:prompt_dress;apply-to-tier_(2")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("e_gen_recolor:prompt_dress;apply-to-tier_(2")
```

```dart
cloudinary.image('e_gen_recolor:prompt_dress;apply-to-tier_(2').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("e_gen_recolor:prompt_dress;apply-to-tier_(2")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("e_gen_recolor:prompt_dress;apply-to-tier_(2");
```

```flutter
cloudinary.image('e_gen_recolor:prompt_dress;apply-to-tier_(2').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("e_gen_recolor:prompt_dress;apply-to-tier_(2") 
}.generate()
```

```jquery
$.cloudinary.image("e_gen_recolor:prompt_dress;apply-to-tier_(2")
```

```react_native
new CloudinaryImage("e_gen_recolor:prompt_dress;apply-to-tier_(2");
```;to-color_800020/e_gen_recolor:prompt_jacket;apply-to-tier_(0);to-color_800020/docs/pattern-dress.jpg "with_image:false")

Original image

Color changes by dominance

Specify multiple colors to change by separating the dominant indices with semicolons.  For example, change the fourth and fifth most dominant colors to green (hex color #58d68d) in the sweater (`prompt_sweater;to-color_58d68d;apply-to-tier_(3;4)`).  The yellow and gray colors change to green:

![Change the fourth and fifth most dominant colors to green](https://res.cloudinary.com/demo/image/upload/e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4)

```nodejs
cloudinary.image("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4")
```

```react
new CloudinaryImage(
  "e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4"
);
```

```vue
new CloudinaryImage(
  "e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4"
);
```

```angular
new CloudinaryImage(
  "e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4"
);
```

```js
new CloudinaryImage(
  "e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4"
);
```

```python
CloudinaryImage("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4").image()
```

```php
(new ImageTag('e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4");
```

```ruby
cl_image_tag("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4")
```

```dart
cloudinary.image('e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4");
```

```flutter
cloudinary.image('e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4") 
}.generate()
```

```jquery
$.cloudinary.image("e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4")
```

```react_native
new CloudinaryImage(
  "e_gen_recolor:prompt_sweater;to-color_58d68d;apply-to-tier_(3;4"
);
```/docs/multi-sweater.jpg "with_image:false")

Original image

Color changes by dominance


### Sample app: AI-powered object recolor demo

This demo shows how visitors can upload an image and choose new colors for the objects detected in it.

The code for this app is available in [GitHub](https://github.com/cloudinary-devs/recolor-detected-objects).

> **NOTE**:
>
> :title=Notes and limitations:

> * 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, and not abstract concepts such as "background".

> * Very small objects and very large objects may not be detected.

> * During processing, large images are downscaled to a maximum of 2048 x 2048 pixels, then upscaled back to their original size, which may affect quality.

> * 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](transformation_counts#special_effect_calculations) for the generative recolor effect.

> * The generative recolor effect isn't supported for [animated](animated_images) images or [fetched](fetch_remote_images#fetch_and_deliver_remote_files) images.

> * [User-defined variables](user_defined_variables) can't be used for the prompt when more than one prompt is specified.

> * When Cloudinary is generating a derived version, you may get a 423 response returned until the version is ready. You can prepare derived versions in advance using an [eager transformation](eager_and_incoming_transformations#eager_transformations).

> * When Cloudinary is generating an [incoming transformation](eager_and_incoming_transformations#incoming_transformations), you may get a 420 response returned, with status `pending` until the asset is ready.

> * If you're using our [Asia Pacific data center](admin_api#alternative_data_centers_and_endpoints_premium_feature), you currently can't apply the generative recolor effect.

**See full syntax**: [e_gen_recolor](transformation_reference#e_gen_recolor) in the _Transformation Reference_.

**Try it out**: [Generative recolor](https://console.cloudinary.com/app/image/home/generative-recolor?media=image&collection=armchair&sample=me%2Fgr-chair-1.jpg&prompts=armchair&color=%23FF00FF&detectMultiple=true).

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

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`):

![Dog with stick removed](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_the%20stick/docs/dog-with-stick.jpg "with_image:false")

```nodejs
cloudinary.image("docs/dog-with-stick.jpg", {effect: "gen_remove:prompt_the stick"})
```

```react
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/dog-with-stick.jpg").effect(
  generativeRemove().prompt("the stick")
);
```

```vue
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/dog-with-stick.jpg").effect(
  generativeRemove().prompt("the stick")
);
```

```angular
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/dog-with-stick.jpg").effect(
  generativeRemove().prompt("the stick")
);
```

```js
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/dog-with-stick.jpg").effect(
  generativeRemove().prompt("the stick")
);
```

```python
CloudinaryImage("docs/dog-with-stick.jpg").image(effect="gen_remove:prompt_the stick")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/dog-with-stick.jpg'))
	->effect(Effect::generativeRemove()->prompt("the stick"));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_remove:prompt_the stick")).imageTag("docs/dog-with-stick.jpg");
```

```ruby
cl_image_tag("docs/dog-with-stick.jpg", effect: "gen_remove:prompt_the stick")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_remove:prompt_the stick")).BuildImageTag("docs/dog-with-stick.jpg")
```

```dart
cloudinary.image('docs/dog-with-stick.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("the stick")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_remove:prompt_the stick")).generate("docs/dog-with-stick.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_remove:prompt_the stick")).generate("docs/dog-with-stick.jpg");
```

```flutter
cloudinary.image('docs/dog-with-stick.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("the stick")));
```

```kotlin
cloudinary.image {
	publicId("docs/dog-with-stick.jpg")
	 effect(Effect.generativeRemove() { prompt("the stick") }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/dog-with-stick.jpg", {effect: "gen_remove:prompt_the stick"})
```

```react_native
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/dog-with-stick.jpg").effect(
  generativeRemove().prompt("the stick")
);
```

Original image

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:

![Family with child in green jacket removed](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_the%20child%20in%20green/docs/family.jpg "with_image:false")

```nodejs
cloudinary.image("docs/family.jpg", {effect: "gen_remove:prompt_the child in green"})
```

```react
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family.jpg").effect(
  generativeRemove().prompt("the child in green")
);
```

```vue
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family.jpg").effect(
  generativeRemove().prompt("the child in green")
);
```

```angular
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family.jpg").effect(
  generativeRemove().prompt("the child in green")
);
```

```js
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family.jpg").effect(
  generativeRemove().prompt("the child in green")
);
```

```python
CloudinaryImage("docs/family.jpg").image(effect="gen_remove:prompt_the child in green")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/family.jpg'))
	->effect(Effect::generativeRemove()->prompt("the child in green"));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_remove:prompt_the child in green")).imageTag("docs/family.jpg");
```

```ruby
cl_image_tag("docs/family.jpg", effect: "gen_remove:prompt_the child in green")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_remove:prompt_the child in green")).BuildImageTag("docs/family.jpg")
```

```dart
cloudinary.image('docs/family.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("the child in green")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_remove:prompt_the child in green")).generate("docs/family.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_remove:prompt_the child in green")).generate("docs/family.jpg");
```

```flutter
cloudinary.image('docs/family.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("the child in green")));
```

```kotlin
cloudinary.image {
	publicId("docs/family.jpg")
	 effect(Effect.generativeRemove() { prompt("the child in green") }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/family.jpg", {effect: "gen_remove:prompt_the child in green"})
```

```react_native
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family.jpg").effect(
  generativeRemove().prompt("the child in green")
);
```

Original image

Remove the child

Remove the child in green

### Remove multiple items

If there is more than one of the same item in an 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`):

![Geese removed from the picture](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_goose;multiple_true/docs/geese.jpg "with_image:false")

```nodejs
cloudinary.image("docs/geese.jpg", {effect: "gen_remove:prompt_goose;multiple_true"})
```

```react
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose").detectMultiple()
);
```

```vue
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose").detectMultiple()
);
```

```angular
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose").detectMultiple()
);
```

```js
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose").detectMultiple()
);
```

```python
CloudinaryImage("docs/geese.jpg").image(effect="gen_remove:prompt_goose;multiple_True")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/geese.jpg'))
	->effect(Effect::generativeRemove()->prompt("goose")
->detectMultiple());
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_remove:prompt_goose;multiple_true")).imageTag("docs/geese.jpg");
```

```ruby
cl_image_tag("docs/geese.jpg", effect: "gen_remove:prompt_goose;multiple_true")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_remove:prompt_goose;multiple_true")).BuildImageTag("docs/geese.jpg")
```

```dart
cloudinary.image('docs/geese.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("goose")
.detectMultiple()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_remove:prompt_goose;multiple_true")).generate("docs/geese.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_remove:prompt_goose;multiple_true")).generate("docs/geese.jpg");
```

```flutter
cloudinary.image('docs/geese.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("goose")
.detectMultiple()));
```

```kotlin
cloudinary.image {
	publicId("docs/geese.jpg")
	 effect(Effect.generativeRemove() { prompt("goose")
 detectMultiple() }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/geese.jpg", {effect: "gen_remove:prompt_goose;multiple_true"})
```

```react_native
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose").detectMultiple()
);
```

Original image

Remove all the geese

Otherwise, only one is removed:

![One goose removed from the picture](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_goose/docs/geese.jpg "thumb: h_200, height:200")

```nodejs
cloudinary.image("docs/geese.jpg", {effect: "gen_remove:prompt_goose"})
```

```react
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose")
);
```

```vue
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose")
);
```

```angular
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose")
);
```

```js
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose")
);
```

```python
CloudinaryImage("docs/geese.jpg").image(effect="gen_remove:prompt_goose")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/geese.jpg'))
	->effect(Effect::generativeRemove()->prompt("goose"));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_remove:prompt_goose")).imageTag("docs/geese.jpg");
```

```ruby
cl_image_tag("docs/geese.jpg", effect: "gen_remove:prompt_goose")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_remove:prompt_goose")).BuildImageTag("docs/geese.jpg")
```

```dart
cloudinary.image('docs/geese.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("goose")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_remove:prompt_goose")).generate("docs/geese.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_remove:prompt_goose")).generate("docs/geese.jpg");
```

```flutter
cloudinary.image('docs/geese.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("goose")));
```

```kotlin
cloudinary.image {
	publicId("docs/geese.jpg")
	 effect(Effect.generativeRemove() { prompt("goose") }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/geese.jpg", {effect: "gen_remove:prompt_goose"})
```

```react_native
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/geese.jpg").effect(
  generativeRemove().prompt("goose")
);
```

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:

![Keyboard, phones and mouse removed from the picture](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_(keyboard;phone;mouse)

```nodejs
cloudinary.image("e_gen_remove:prompt_(keyboard;phone;mouse")
```

```react
new CloudinaryImage("e_gen_remove:prompt_(keyboard;phone;mouse");
```

```vue
new CloudinaryImage("e_gen_remove:prompt_(keyboard;phone;mouse");
```

```angular
new CloudinaryImage("e_gen_remove:prompt_(keyboard;phone;mouse");
```

```js
new CloudinaryImage("e_gen_remove:prompt_(keyboard;phone;mouse");
```

```python
CloudinaryImage("e_gen_remove:prompt_(keyboard;phone;mouse").image()
```

```php
(new ImageTag('e_gen_remove:prompt_(keyboard;phone;mouse'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("e_gen_remove:prompt_(keyboard;phone;mouse");
```

```ruby
cl_image_tag("e_gen_remove:prompt_(keyboard;phone;mouse")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("e_gen_remove:prompt_(keyboard;phone;mouse")
```

```dart
cloudinary.image('e_gen_remove:prompt_(keyboard;phone;mouse').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("e_gen_remove:prompt_(keyboard;phone;mouse")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("e_gen_remove:prompt_(keyboard;phone;mouse");
```

```flutter
cloudinary.image('e_gen_remove:prompt_(keyboard;phone;mouse').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("e_gen_remove:prompt_(keyboard;phone;mouse") 
}.generate()
```

```jquery
$.cloudinary.image("e_gen_remove:prompt_(keyboard;phone;mouse")
```

```react_native
new CloudinaryImage("e_gen_remove:prompt_(keyboard;phone;mouse");
```/docs/gadgets.jpg "with_image:false")

Original image

Remove specified gadgets

### Remove items from a region

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:

![Removed regions](https://res.cloudinary.com/demo/image/upload/e_gen_remove:region_((x_300;y_200;w_750;h_500)

```nodejs
cloudinary.image("e_gen_remove:region_((x_300;y_200;w_750;h_500")
```

```react
new CloudinaryImage("e_gen_remove:region_((x_300;y_200;w_750;h_500");
```

```vue
new CloudinaryImage("e_gen_remove:region_((x_300;y_200;w_750;h_500");
```

```angular
new CloudinaryImage("e_gen_remove:region_((x_300;y_200;w_750;h_500");
```

```js
new CloudinaryImage("e_gen_remove:region_((x_300;y_200;w_750;h_500");
```

```python
CloudinaryImage("e_gen_remove:region_((x_300;y_200;w_750;h_500").image()
```

```php
(new ImageTag('e_gen_remove:region_((x_300;y_200;w_750;h_500'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("e_gen_remove:region_((x_300;y_200;w_750;h_500");
```

```ruby
cl_image_tag("e_gen_remove:region_((x_300;y_200;w_750;h_500")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("e_gen_remove:region_((x_300;y_200;w_750;h_500")
```

```dart
cloudinary.image('e_gen_remove:region_((x_300;y_200;w_750;h_500').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("e_gen_remove:region_((x_300;y_200;w_750;h_500")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("e_gen_remove:region_((x_300;y_200;w_750;h_500");
```

```flutter
cloudinary.image('e_gen_remove:region_((x_300;y_200;w_750;h_500').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("e_gen_remove:region_((x_300;y_200;w_750;h_500") 
}.generate()
```

```jquery
$.cloudinary.image("e_gen_remove:region_((x_300;y_200;w_750;h_500")
```

```react_native
new CloudinaryImage("e_gen_remove:region_((x_300;y_200;w_750;h_500");
```;(x_1800;y_1200;w_1000;h_800))/docs/accessories-bag.jpg "with_image:false")

Original image

Remove specified regions

### Remove shadows and reflections

By default, shadows and reflections cast by objects specified in the prompt are not removed.  If you want to remove the shadow/reflection, set the `remove-shadow` parameter to true:

![Family on a beach without dog but with its shadow](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_the%20little%20dog;remove-shadow_true/docs/family-beach.jpg "with_image:false")

```nodejs
cloudinary.image("docs/family-beach.jpg", {effect: "gen_remove:prompt_the little dog;remove-shadow_true"})
```

```react
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family-beach.jpg").effect(
  generativeRemove().prompt("the little dog").removeShadow()
);
```

```vue
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family-beach.jpg").effect(
  generativeRemove().prompt("the little dog").removeShadow()
);
```

```angular
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family-beach.jpg").effect(
  generativeRemove().prompt("the little dog").removeShadow()
);
```

```js
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family-beach.jpg").effect(
  generativeRemove().prompt("the little dog").removeShadow()
);
```

```python
CloudinaryImage("docs/family-beach.jpg").image(effect="gen_remove:prompt_the little dog;remove-shadow_True")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/family-beach.jpg'))
	->effect(Effect::generativeRemove()->prompt("the little dog")
->removeShadow());
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_remove:prompt_the little dog;remove-shadow_true")).imageTag("docs/family-beach.jpg");
```

```ruby
cl_image_tag("docs/family-beach.jpg", effect: "gen_remove:prompt_the little dog;remove-shadow_true")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_remove:prompt_the little dog;remove-shadow_true")).BuildImageTag("docs/family-beach.jpg")
```

```dart
cloudinary.image('docs/family-beach.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("the little dog")
.removeShadow()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_remove:prompt_the little dog;remove-shadow_true")).generate("docs/family-beach.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_remove:prompt_the little dog;remove-shadow_true")).generate("docs/family-beach.jpg");
```

```flutter
cloudinary.image('docs/family-beach.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("the little dog")
.removeShadow()));
```

```kotlin
cloudinary.image {
	publicId("docs/family-beach.jpg")
	 effect(Effect.generativeRemove() { prompt("the little dog")
 removeShadow() }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/family-beach.jpg", {effect: "gen_remove:prompt_the little dog;remove-shadow_true"})
```

```react_native
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/family-beach.jpg").effect(
  generativeRemove().prompt("the little dog").removeShadow()
);
```

Original image

Remove the dog(but not its shadow by default)

<b style="margin-right: 30px;display:block;">Remove the dog(and its shadow)

### Remove text

You can remove all the text from an image by setting the prompt to `text` e.g. `e_gen_remove:prompt_text`, or `e_gen_remove:prompt_(dog;text)`. 

For example, remove the text and person from this storefront (`e_gen_remove:prompt_(text;person)`):

![Text and person removed from the image of the storefront](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_(text;person)

```nodejs
cloudinary.image("e_gen_remove:prompt_(text;person")
```

```react
new CloudinaryImage("e_gen_remove:prompt_(text;person");
```

```vue
new CloudinaryImage("e_gen_remove:prompt_(text;person");
```

```angular
new CloudinaryImage("e_gen_remove:prompt_(text;person");
```

```js
new CloudinaryImage("e_gen_remove:prompt_(text;person");
```

```python
CloudinaryImage("e_gen_remove:prompt_(text;person").image()
```

```php
(new ImageTag('e_gen_remove:prompt_(text;person'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("e_gen_remove:prompt_(text;person");
```

```ruby
cl_image_tag("e_gen_remove:prompt_(text;person")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("e_gen_remove:prompt_(text;person")
```

```dart
cloudinary.image('e_gen_remove:prompt_(text;person').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("e_gen_remove:prompt_(text;person")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("e_gen_remove:prompt_(text;person");
```

```flutter
cloudinary.image('e_gen_remove:prompt_(text;person').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("e_gen_remove:prompt_(text;person") 
}.generate()
```

```jquery
$.cloudinary.image("e_gen_remove:prompt_(text;person")
```

```react_native
new CloudinaryImage("e_gen_remove:prompt_(text;person");
```/docs/shop-person.jpg "with_image:false")

Original image

Remove the textand the person

If you don't want to remove all the text in the image, specify the object you want to remove the text from by using the syntax `text:<object>` as the prompt (either as the only prompt, or together with other prompts as in the previous example). 

For example, in the following image there is text in the main part of the image in addition to text on the mobile screen. You can remove the text on the mobile screen only, as follows (`e_gen_remove:prompt_text:the%20mobile%20screen`):

![Text removed from the mobile screen only](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_text:the%20mobile%20screen/docs/support.jpg "with_image:false")

```nodejs
cloudinary.image("docs/support.jpg", {effect: "gen_remove:prompt_text:the mobile screen"})
```

```react
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/support.jpg").effect(
  generativeRemove().prompt("text")
);
```

```vue
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/support.jpg").effect(
  generativeRemove().prompt("text")
);
```

```angular
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/support.jpg").effect(
  generativeRemove().prompt("text")
);
```

```js
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/support.jpg").effect(
  generativeRemove().prompt("text")
);
```

```python
CloudinaryImage("docs/support.jpg").image(effect="gen_remove:prompt_text:the mobile screen")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/support.jpg'))
	->effect(Effect::generativeRemove()->prompt("text"));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_remove:prompt_text:the mobile screen")).imageTag("docs/support.jpg");
```

```ruby
cl_image_tag("docs/support.jpg", effect: "gen_remove:prompt_text:the mobile screen")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_remove:prompt_text:the mobile screen")).BuildImageTag("docs/support.jpg")
```

```dart
cloudinary.image('docs/support.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("text")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_remove:prompt_text:the mobile screen")).generate("docs/support.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_remove:prompt_text:the mobile screen")).generate("docs/support.jpg");
```

```flutter
cloudinary.image('docs/support.jpg').transformation(Transformation()
	.effect(Effect.generativeRemove().prompt("text")));
```

```kotlin
cloudinary.image {
	publicId("docs/support.jpg")
	 effect(Effect.generativeRemove() { prompt("text") }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/support.jpg", {effect: "gen_remove:prompt_text:the mobile screen"})
```

```react_native
import { generativeRemove } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/support.jpg").effect(
  generativeRemove().prompt("text")
);
```

Original image

Remove all the text

Remove the textfrom the mobile screen only

> **NOTE**:
>
> :title=Notes and limitations:

> * 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.

> * Don't attempt to remove faces or hands.

> * During processing, large images are downscaled to a maximum of 6140 x 6140 pixels, then upscaled back to their original size, which may affect quality.

> * 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](transformation_counts#special_effect_calculations) for the generative remove effect.

> * If you get blurred results when using this feature, it's likely that the built-in NSFW (Not Safe For Work) check has detected something inappropriate. You can [contact support](https://support.cloudinary.com/hc/en-us/requests/new) to disable this check if you believe it's too sensitive.

> * The generative remove effect isn't supported for [animated](animated_images) images or [fetched](fetch_remote_images#fetch_and_deliver_remote_files) images.

> * [User-defined variables](user_defined_variables) can't be used for the prompt when more than one prompt is specified.

> * When Cloudinary is generating a derived version, you may get a 423 response returned until the version is ready. You can prepare derived versions in advance using an [eager transformation](eager_and_incoming_transformations#eager_transformations).

> * When Cloudinary is generating an [incoming transformation](eager_and_incoming_transformations#incoming_transformations), you may get a 420 response returned, with status `pending` until the asset is ready.

> * If you're using our [Asia Pacific data center](admin_api#alternative_data_centers_and_endpoints_premium_feature), you currently can't apply the generative remove effect.
**See full syntax**: [e_gen_remove](transformation_reference#e_gen_remove) in the _Transformation Reference_.

**Try it out**: [Generative remove](https://console.cloudinary.com/app/image/home/generative-remove?media=image&collection=signs&sample=me%2Frm-signs-1.jpg&prompts=text&removeShadows=false&detectMultiple=false).

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

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`): 

![Picture replaced with windows](https://res.cloudinary.com/demo/image/upload/e_gen_replace:from_the%20picture;to_a%20mirror%20with%20a%20silver%20frame/docs/chair.jpg "with_image:false")

```nodejs
cloudinary.image("docs/chair.jpg", {effect: "gen_replace:from_the picture;to_a mirror with a silver frame"})
```

```react
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/chair.jpg").effect(
  generativeReplace().from("the picture").to("a mirror with a silver frame")
);
```

```vue
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/chair.jpg").effect(
  generativeReplace().from("the picture").to("a mirror with a silver frame")
);
```

```angular
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/chair.jpg").effect(
  generativeReplace().from("the picture").to("a mirror with a silver frame")
);
```

```js
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/chair.jpg").effect(
  generativeReplace().from("the picture").to("a mirror with a silver frame")
);
```

```python
CloudinaryImage("docs/chair.jpg").image(effect="gen_replace:from_the picture;to_a mirror with a silver frame")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/chair.jpg'))
	->effect(Effect::generativeReplace()->from("the picture")
->to("a mirror with a silver frame"));
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_replace:from_the picture;to_a mirror with a silver frame")).imageTag("docs/chair.jpg");
```

```ruby
cl_image_tag("docs/chair.jpg", effect: "gen_replace:from_the picture;to_a mirror with a silver frame")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_replace:from_the picture;to_a mirror with a silver frame")).BuildImageTag("docs/chair.jpg")
```

```dart
cloudinary.image('docs/chair.jpg').transformation(Transformation()
	.effect(Effect.generativeReplace().from("the picture")
.to("a mirror with a silver frame")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_replace:from_the picture;to_a mirror with a silver frame")).generate("docs/chair.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_replace:from_the picture;to_a mirror with a silver frame")).generate("docs/chair.jpg");
```

```flutter
cloudinary.image('docs/chair.jpg').transformation(Transformation()
	.effect(Effect.generativeReplace().from("the picture")
.to("a mirror with a silver frame")));
```

```kotlin
cloudinary.image {
	publicId("docs/chair.jpg")
	 effect(Effect.generativeReplace() { from("the picture")
 to("a mirror with a silver frame") }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/chair.jpg", {effect: "gen_replace:from_the picture;to_a mirror with a silver frame"})
```

```react_native
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/chair.jpg").effect(
  generativeReplace().from("the picture").to("a mirror with a silver frame")
);
```

Original image

Picture replacedwith 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:

![Woman with shirt replaced by sweater, preserving geometry](https://res.cloudinary.com/demo/image/upload/e_gen_replace:from_shirt;to_cable%20knit%20sweater;preserve-geometry_true/docs/woman-in-shirt.jpg "with_image:false")

```nodejs
cloudinary.image("docs/woman-in-shirt.jpg", {effect: "gen_replace:from_shirt;to_cable knit sweater;preserve-geometry_true"})
```

```react
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-in-shirt.jpg").effect(
  generativeReplace().from("shirt").to("cable knit sweater").preserveGeometry()
);
```

```vue
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-in-shirt.jpg").effect(
  generativeReplace().from("shirt").to("cable knit sweater").preserveGeometry()
);
```

```angular
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-in-shirt.jpg").effect(
  generativeReplace().from("shirt").to("cable knit sweater").preserveGeometry()
);
```

```js
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-in-shirt.jpg").effect(
  generativeReplace().from("shirt").to("cable knit sweater").preserveGeometry()
);
```

```python
CloudinaryImage("docs/woman-in-shirt.jpg").image(effect="gen_replace:from_shirt;to_cable knit sweater;preserve-geometry_True")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/woman-in-shirt.jpg'))
	->effect(Effect::generativeReplace()->from("shirt")
->to("cable knit sweater")
->preserveGeometry());
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_replace:from_shirt;to_cable knit sweater;preserve-geometry_true")).imageTag("docs/woman-in-shirt.jpg");
```

```ruby
cl_image_tag("docs/woman-in-shirt.jpg", effect: "gen_replace:from_shirt;to_cable knit sweater;preserve-geometry_true")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_replace:from_shirt;to_cable knit sweater;preserve-geometry_true")).BuildImageTag("docs/woman-in-shirt.jpg")
```

```dart
cloudinary.image('docs/woman-in-shirt.jpg').transformation(Transformation()
	.effect(Effect.generativeReplace().from("shirt")
.to("cable knit sweater")
.preserveGeometry()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_replace:from_shirt;to_cable knit sweater;preserve-geometry_true")).generate("docs/woman-in-shirt.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_replace:from_shirt;to_cable knit sweater;preserve-geometry_true")).generate("docs/woman-in-shirt.jpg");
```

```flutter
cloudinary.image('docs/woman-in-shirt.jpg').transformation(Transformation()
	.effect(Effect.generativeReplace().from("shirt")
.to("cable knit sweater")
.preserveGeometry()));
```

```kotlin
cloudinary.image {
	publicId("docs/woman-in-shirt.jpg")
	 effect(Effect.generativeReplace() { from("shirt")
 to("cable knit sweater")
 preserveGeometry() }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/woman-in-shirt.jpg", {effect: "gen_replace:from_shirt;to_cable knit sweater;preserve-geometry_true"})
```

```react_native
import { generativeReplace } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/woman-in-shirt.jpg").effect(
  generativeReplace().from("shirt").to("cable knit sweater").preserveGeometry()
);
```

![Comparison of with and without preserve-geometry](https://res.cloudinary.com/demo/image/multi/dl_1000/v1687696503/geo-preserve-comparison.gif "thumb:c_scale,w_350, with_code:false, with_url:false, caption:Replace shirt with sweater - compare with and without preserving geometry, width:350")

Original

Geometrynot preserved

Geometrypreserved

> **NOTE**:
>
> :title=Notes and limitations:

> * 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.

> * Don't attempt to replace faces, hands or text.

> * During processing, large images are downscaled to a maximum of 2048 x 2048 pixels, then upscaled back to their original size, which may affect quality.

> * There is a [special transformation count](transformation_counts#special_effect_calculations) for the generative replace effect.

> * The generative replace effect isn't supported for [animated](animated_images) images or [fetched](fetch_remote_images#fetch_and_deliver_remote_files) images.

> * When Cloudinary is generating a derived version, you may get a 423 response returned until the version is ready. You can prepare derived versions in advance using an [eager transformation](eager_and_incoming_transformations#eager_transformations).

> * When Cloudinary is generating an [incoming transformation](eager_and_incoming_transformations#incoming_transformations), you may get a 420 response returned, with status `pending` until the asset is ready.

> * If you're using our [Asia Pacific data center](admin_api#alternative_data_centers_and_endpoints_premium_feature), you currently can't apply the generative replace effect.
**See full syntax**: [e_gen_replace](transformation_reference#e_gen_replace) in the _Transformation Reference_.

**Try it out**: [Generative replace](https://console.cloudinary.com/app/image/home/generative-replace?media=image&collection=apparel&sample=me%2Freplace-apparel-1&from=sweater&to=leather+jacket+with+pockets&preserveGeometry=false&detectMultiple=false).

## Generative restore
Revitalize degraded and poor quality images using generative AI.

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](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:

![Old photo of a couple](https://res.cloudinary.com/demo/image/upload/e_gen_restore/docs/old-photo.jpg "with_image: false")

```nodejs
cloudinary.image("docs/old-photo.jpg", {effect: "gen_restore"})
```

```react
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore());
```

```vue
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore());
```

```angular
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore());
```

```js
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore());
```

```python
CloudinaryImage("docs/old-photo.jpg").image(effect="gen_restore")
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('docs/old-photo.jpg'))
	->effect(Effect::generativeRestore());
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_restore")).imageTag("docs/old-photo.jpg");
```

```ruby
cl_image_tag("docs/old-photo.jpg", effect: "gen_restore")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_restore")).BuildImageTag("docs/old-photo.jpg")
```

```dart
cloudinary.image('docs/old-photo.jpg').transformation(Transformation()
	.effect(Effect.generativeRestore()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_restore")).generate("docs/old-photo.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_restore")).generate("docs/old-photo.jpg");
```

```flutter
cloudinary.image('docs/old-photo.jpg').transformation(Transformation()
	.effect(Effect.generativeRestore()));
```

```kotlin
cloudinary.image {
	publicId("docs/old-photo.jpg")
	 effect(Effect.generativeRestore()) 
}.generate()
```

```jquery
$.cloudinary.image("docs/old-photo.jpg", {effect: "gen_restore"})
```

```react_native
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore());
```

    
    

You can use the generative restore effect together with the [improve effect](transformation_reference#e_improve) for even better results.  While generative restore tries to rectify compression artifacts, the improve effect addresses color, contrast and brightness.  

![Old photo of a couple restored and improved](https://res.cloudinary.com/demo/image/upload/e_gen_restore/e_improve:indoor:40/docs/old-photo.jpg "with_image: false")

```nodejs
cloudinary.image("docs/old-photo.jpg", {transformation: [
  {effect: "gen_restore"},
  {effect: "improve:indoor:40"}
  ]})
```

```react
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore()).adjust(
  improve()
    .mode("indoor")
    .blend(40)
);
```

```vue
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore()).adjust(
  improve()
    .mode("indoor")
    .blend(40)
);
```

```angular
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore()).adjust(
  improve()
    .mode("indoor")
    .blend(40)
);
```

```js
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore()).adjust(
  improve()
    .mode("indoor")
    .blend(40)
);
```

```python
CloudinaryImage("docs/old-photo.jpg").image(transformation=[
  {'effect': "gen_restore"},
  {'effect': "improve:indoor:40"}
  ])
```

```php
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Adjust;
use Cloudinary\Transformation\ImproveMode;

(new ImageTag('docs/old-photo.jpg'))
	->effect(Effect::generativeRestore())
	->adjust(Adjust::improve()
	->mode(
	ImproveMode::indoor())
->blend(40));
```

```java
cloudinary.url().transformation(new Transformation()
  .effect("gen_restore").chain()
  .effect("improve:indoor:40")).imageTag("docs/old-photo.jpg");
```

```ruby
cl_image_tag("docs/old-photo.jpg", transformation: [
  {effect: "gen_restore"},
  {effect: "improve:indoor:40"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("gen_restore").Chain()
  .Effect("improve:indoor:40")).BuildImageTag("docs/old-photo.jpg")
```

```dart
cloudinary.image('docs/old-photo.jpg').transformation(Transformation()
	.effect(Effect.generativeRestore())
	.adjust(Adjust.improve()
	.mode(
	ImproveMode.indoor())
.blend(40)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("gen_restore").chain()
  .setEffect("improve:indoor:40")).generate("docs/old-photo.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .effect("gen_restore").chain()
  .effect("improve:indoor:40")).generate("docs/old-photo.jpg");
```

```flutter
cloudinary.image('docs/old-photo.jpg').transformation(Transformation()
	.effect(Effect.generativeRestore())
	.adjust(Adjust.improve()
	.mode(
	ImproveMode.indoor())
.blend(40)));
```

```kotlin
cloudinary.image {
	publicId("docs/old-photo.jpg")
	 effect(Effect.generativeRestore())
	 adjust(Adjust.improve() {
	 mode(
	ImproveMode.indoor())
 blend(40) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/old-photo.jpg", {transformation: [
  {effect: "gen_restore"},
  {effect: "improve:indoor:40"}
  ]})
```

```react_native
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("docs/old-photo.jpg").effect(generativeRestore()).adjust(
  improve()
    .mode("indoor")
    .blend(40)
);
```

    
    

> **TIP**: See how the generative restore effect compares to other [image enhancement options](image_enhancement).

> **NOTE**:
>
> :title=Notes and limitations:

> * 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](transformation_counts#special_effect_calculations) for the generative restore effect.

> * The generative restore effect isn't supported for [animated](animated_images) images or [fetched](fetch_remote_images#fetch_and_deliver_remote_files) images.

> * When Cloudinary is generating a derived version, you may get a 423 response returned until the version is ready. You can prepare derived versions in advance using an [eager transformation](eager_and_incoming_transformations#eager_transformations).

> * When Cloudinary is generating an [incoming transformation](eager_and_incoming_transformations#incoming_transformations), you may get a 420 response returned, with status `pending` until the asset is ready.
**See full syntax**: [e_gen_restore](transformation_reference#e_gen_restore) in the _Transformation Reference_.

**Try it out**: [Generative restore](https://console.cloudinary.com/app/image/home/generative-restore?media=image&sample=me%2Frestore-1).

    .twentytwenty-horizontal .twentytwenty-handle:before,
    .twentytwenty-horizontal .twentytwenty-handle:after,
    .twentytwenty-vertical .twentytwenty-handle:before,
    .twentytwenty-vertical .twentytwenty-handle:after {
        content: " ";
        display: block;
        background: white;
        position: absolute;
        z-index: 30;
        -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
        -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
        box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    }

    .twentytwenty-horizontal .twentytwenty-handle:before,
    .twentytwenty-horizontal .twentytwenty-handle:after {
        width: 3px;
        height: 9999px;
        left: 50%;
        margin-left: -1.5px;
    }

    .twentytwenty-vertical .twentytwenty-handle:before,
    .twentytwenty-vertical .twentytwenty-handle:after {
        width: 9999px;
        height: 3px;
        top: 50%;
        margin-top: -1.5px;
    }

    .twentytwenty-left-arrow,
    .twentytwenty-right-arrow,
    .twentytwenty-up-arrow,
    .twentytwenty-down-arrow {
        width: 0;
        height: 0;
        border: 6px inset transparent;
        position: absolute;
    }

    .twentytwenty-left-arrow,
    .twentytwenty-right-arrow {
        top: 50%;
        margin-top: -6px;
    }

    .twentytwenty-up-arrow,
    .twentytwenty-down-arrow {
        left: 50%;
        margin-left: -6px;
    }

    .twentytwenty-container {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        z-index: 0;
        overflow: hidden;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    .twentytwenty-container img {
        max-width: 100%;
        position: absolute;
        top: 0;
        display: block;
    }

    .twentytwenty-container * {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .twentytwenty-before {
        z-index: 20;
    }

    .twentytwenty-after {
        z-index: 10;
    }
   

    .twentytwenty-handle {
        height: 38px;
        width: 38px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -22px;
        margin-top: -22px;
        border: 3px solid white;
        -webkit-border-radius: 1000px;
        -moz-border-radius: 1000px;
        border-radius: 1000px;
        -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
        -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
        box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
        z-index: 40;
        cursor: pointer;
    }

    .twentytwenty-horizontal .twentytwenty-handle:before {
        bottom: 50%;
        margin-bottom: 22px;
        -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
        -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
        box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    }
    .twentytwenty-horizontal .twentytwenty-handle:after {
        top: 50%;
        margin-top: 22px;
        -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
        -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
        box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    }

    .twentytwenty-vertical .twentytwenty-handle:before {
        left: 50%;
        margin-left: 22px;
        -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
        -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
        box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    }
    .twentytwenty-vertical .twentytwenty-handle:after {
        right: 50%;
        margin-right: 22px;
        -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
        -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
        box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    }

    .twentytwenty-left-arrow {
        border-right: 6px solid white;
        left: 50%;
        margin-left: -17px;
    }

    .twentytwenty-right-arrow {
        border-left: 6px solid white;
        right: 50%;
        margin-right: -17px;
    }

    .twentytwenty-up-arrow {
        border-bottom: 6px solid white;
        top: 50%;
        margin-top: -17px;
    }

    .twentytwenty-down-arrow {
        border-top: 6px solid white;
        bottom: 50%;
        margin-bottom: -17px;
    }

    p.code {
        padding: 5px 10px;
        color: #fff;
        background-color: #000044;
        font-size: 14px;
        font-family: georgia;
        border-radius: 10px;
    }

    .small {
        font-size: 0.8rem;
        line-height: 1rem;
    }

    p.code span {
        color: dodgerblue;
        font-weight: bold;
        font-size: 16px;
        font-family: georgia;
        font-family: georgia;
    }
    @media only screen and (max-width: 410px) {
        p.code {
            display: none;
        }
    }