> ## 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 fill


Seamlessly extend an image into padded areas using generative AI, adding visually realistic pixels to either or both dimensions. 

This is especially useful for normalizing multiple assets to a desired aspect ratio. Rather than cropping to a target dimension, the entire original image is preserved while the generated areas blend in seamlessly, so each photo still looks natural at its new size.

> **See also**:
>
> Explore the complete syntax and all options for this effect, or try it out on your own images in the Console:

> * **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/playground/generative-fill?media=image&collection=nature&sample=me%2Fgenfill-nature-1&aspectRatio=square&focusOn=center&width=500&height=700)

## Generative fill overview

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

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