Fill Mode

The fill parameter determines how the excess space in an image resized with fit=fill or fit=fillmax should be filled.

Valid values are blur, gen(generative), gradient, and solid. Note that fill=gen is a premium feature.

fill=blur

Fills the excess space with a blurred version of the original image. Behavior of fill=blur is identical to the blur parameter but applied only to the excess space.

Edit in Sandbox

fill=gen

The fill=gen mode employs artificial intelligence to seamlessly fill in extra space with generative rendering, enhancing the visual content by adding relevant details where needed.

This approach allows for a more complete fill output by utilizing AI’s capabilities to expand beyond the original confines of the image. By analyzing the context and content of the existing image, fill=gen intelligently generates and integrates additional elements to create the best frame without having to crop out the rest of your images.

Here are some examples below:

Original image: https://assets.imgix.net/example-images/generative-fill/dog-snow-01.jpg?w=500&h=900&auto=compress,format&dpr=2

Generative fill https://assets.imgix.net/example-images/generative-fill/dog-snow-01.jpg?fit=fill&fill=gen&w=500&h=900&auto=compress,format&dpr=2

Generative fill outputs are cached and saved for subsequent resizing or other image transformations as long as the generative fill parameters are unchanged. These outputs include other additional parameters for controlling and modifying the generative fill.

Parameters modifying generative fill output can be found here:

• fill-gen-prompt: Text input suggestion for generative fill
• fill-gen-neg-prompt: Negative text input suggestion for generative fill
• fill-gen-fallback: Controls fallback behavior for generative fill
• fill-gen-pos: Controls output positioning of generative fill
• fill-gen-seed: Used to generate more predictable outputs

Chaining AI transformations

Chaining AI transformations

Fills the excess space with a gradient color using a combination of the vibrant dark and vibrant light colors of the image’s color palette. Depending on the gradient type specified, you can adjust the color using either linear or radial color controls.

Parameters modifying gradient fill output can be found here:

• fill-gradient-cs: Defines the color space for the gradient (linear, srgb and oklab)
• fill-gradient-linear-direction: Specifies the linear gradient’s directional flow using top, bottom, left or right (allows two values separated by a comma)
• fill-gradient-linear: Specifies the colors in the format (fill-gradient-linear=color1,color2) for linear gradients
• fill-gradient-radial: Specifies the colors in the format (fill-gradient-radial=color1,color2) for radial gradients
• fill-gradient-radial-radius: Specifies the radius of both colors in the gradient, expressed as pixels (fill-gradient-radial-radius=200,500)
• fill-gradient-radial-x: Specifies the starting X-coordinate for the radial gradient’s center
• fill-gradient-radial-y: Specifies the starting Y-coordinate for the radial gradient’s center
• fill-gradient-type: Specifies the gradient type (linear or radial)

fill=gradient

Fills the excess space with a blurred version of the original image. The behavior of fill=blur is identical to the blur parameter but is applied only to the excess space.

fill=solid

Several of the fill modes can be combined with bg-remove (Premium feature) to create interesting image compositions.

For example, you can set a gradient background on an object:

Or you can set a new solid color background: