Rendering API

  1. Documentation
  2. imgix APIs
  3. Rendering API
  4. Fill
  5. Fill Gradient Radial Radius

Fill Gradient Radial Radius fill-gradient-radial-radius

Sets the radius of the gradient colors when fill-gradient-type=radial is used in conjunction with fit=fill&fill=gradient.

Takes two integer values (fill-gradient-radial-radius=radius1,radius2) that control the radius of the gradients. radius1 controls the radius of the the first gradient color (color1), and radius2 controls the radius of the second gradient color (color2).

When not specified, radius1 is 1/8 of the image's smallest dimension, and radius2 is 1/2 of the image's smallest dimension.

When these values are equal, the gradient will appear as a solid circle since the radius of color1 is the same radius as color2, which causes both colors to overlap perfectly. Example:

Example with a gradient where radius1 equals radius2

As the radius of color1 decreases, it will create a pronounced blending effect between both colors based on the distance of radius1 and radius2. Example:

Example with a gradient where radius1 is lower than radius2

When the radius1 is set to a higher value than radius2, it reverses the order of color1 and color2. In this example, the second color now appears on top, and with its radius being by radius2.

Example reversing the gradient by setting radius1 higher than radius2

See the API specification for more information about this parameter's value ranges and format.

Other Fill Methods