imgix APIs
Rendering API
Fill Mode

Fill Mode

fill

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.

Resized with fit=fill and fill=blur
sandbox-demo

fill=gen

Premium Feature

Generative Fill is currently available for imgix customers on a Premium plan. If you’re interested in this feature, please contact our sales team (opens in a new tab) to get more information on this feature.

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: 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 fit=fill&fill=gen 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=gradient

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=solid

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.

Combining fill options with bg-remove

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:

Pineapple with a gradient background

Or you can set a new solid color background:

Pineapple with a solid color background