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.
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:
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 fillfill-gen-neg-prompt
: Negative text input suggestion for generative fillfill-gen-fallback
: Controls fallback behavior for generative fillfill-gen-pos
: Controls output positioning of generative fillfill-gen-seed
: Used to generate more predictable outputs
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-gradient-cs
: Defines the color space for the gradient (linear
,srgb
andoklab
)fill-gradient-linear-direction
: Specifies the linear gradient's directional flow usingtop
,bottom
,left
orright
(allows two values separated by a comma)fill-gradient-linear
: Specifies the colors in the format (fill-gradient-linear=color1,color2
) for linear gradientsfill-gradient-radial
: Specifies the colors in the format (fill-gradient-radial=color1,color2
) for radial gradientsfill-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 centerfill-gradient-radial-y
: Specifies the starting Y-coordinate for the radial gradient's centerfill-gradient-type
: Specifies the gradient type (linear
orradial
)
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:
Or you can set a new solid color background: