Getting started

Integration & migration

Image & video API

DAM user guide

API overview

Account

Effects and Enhancements

Learn how to enhance images using ImageKit.io URL-based image transformation API.


Contrast stretch - (e-contrast)

It is used to automatically enhance the contrast of the image by using the full intensity values that a particular image format allows. This means that the lighter sections of an image become even lighter and the darker sections become even brighter, thereby enhancing the contrast.

Sharpen - (e-sharpen)

It is used to sharpen the input image. It is useful when highlighting the edges and finer details within an image.

Example usage - e-sharpen-<number>

If just the e-sharpen  parameter is used, then a default sharpening is performed on the input image. The default behavior can be controlled by specifying a number that restricts the extent of sharpening performed.

Unsharp mask - (e-usm)

Unsharp Masking (USM) is an image sharpening technique. This transform allows you to apply and control unsharp masks on your images.

Example usage - e-usm-<radius>-<sigma>-<amount>-<threshold>

The amount of sharpening can be varied using 4 parameters - radius , sigma , amount , and threshold. This results in perceptually better images compared to using e-sharpen. Only positive floating points are allowed for these 4 parameters.

Shadow - (e-shadow)

This feature adds a shadow under solid objects in an input image with a transparent background.

The shadow is applied under the areas constituted by the non-transparent pixels in the input image. You can adjust the shadow's saturation, blur level, and positional offsets with the following parameters.

You can also try out the AI drop shadow transformation for more realistic shadows. Read more about it here.

Parameter Description Range Default value
Blur (bl)Adjusts the blur level of the shadow. e.g. e-shadow-bl-150 to 1510
Saturation (st)Specifies the saturation level of the shadow. e.g. e-shadow-st-400 to 10030
X Offset (x)Sets the horizontal offset of the shadow by x% of the image width. e.g. e-shadow-x-10. Supports negative values by prefixing N: e.g. e-shadow-x-N100 to 100 or N1002
Y Offset (y)Sets the vertical offset of the shadow by y% of the image height. e.g. e-shadow-y-10. Supports negative values by prefixing N:e.g., e-shadow-y-N100 to 100 or N1002

Multiple parameters can be configured by appending them with an underscore (_). They will be applied independently of the order in which they are specified.

Example usage - e-shadow-<blur>_<saturation>_<x-offset>_<y-offset>, which would look like, e-shadow-bl-15_st-40_x-10_y-N5.

Limits

Shadows can only be applied to images with a resolution of maximum 2MP. Images with resolutions outside this limit will return a "400 - Bad Request" error.

To add shadows on images larger than 2MP, you can resize the image in either the same chain or a chained transformation and then add the shadow.

e.g. For a 3MP image, e-shadow would not work. But w-500,e-shadow or w-500:e-shadow would work.

We have an input image with dimensions 2216x1500 (3MP). Applying only the shadow transformation will return an error with status code 400: https://ik.imagekit.io/demo/tr:e-shadow/lipstick_2M.png.

Resize the image as follows to apply a shadow successfully:

Gradient - (e-gradient)

This is used to add a gradient overlay over an input image.

The gradient formed is a linear gradient containing two colors, and it can be customized with the following parameters:

Parameter Description Value TypeRangeDefault Value

Linear Direction
(ld)

Optional
Sets the direction vector of the linear gradient. For enhanced control over the direction, this parameter also accepts an integer in the range 0-359, which specifies the angle (in degrees) when measured over standard x-y axes with a pivot passing through the geometrical center of the image. For example, 0 would mean top, 45 would mean top_right, 90 would mean right etc.

Number or String

Number - 0 to 359

String - top, top_right, right, bottom_right, bottom, bottom_left, left, topleft.

180 or bottom

From Color
(from)

Optional
It is used to specify a starting / first color for the gradient, i.e., the starting point of the gradient will have this color in its pure form. RGBA Code (e.g., FFAABB50) is a color representation model where the first six characters must be the RGB Hex Code, and the last two characters must be a number between 00 and 99, which indicates the opacity level. For example, 00 represents an opacity level of 0.00, 01 represents an opacity level of 0.01, and so on.

String

An SVG recognized color keyword name eg. aqua;

or a RGB Hex Code, e.g. FF0000;

or a RGBA Hex Code, e.g. FF000040;

FFFFFF

To Color
(to)

Optional
It is used to specify the second color for the gradient and will be blended with the from color depending on the ld and sp configurations. RGBA Code (e.g., FFAABB50) is a color representation model where the first six characters must be the RGB Hex Code, and the last two characters must be a number between 00 and 99, which indicates the opacity level. For example, 00 represents an opacity level of 0.00, 01 represents an opacity level of 0.01, and so on.

String

An SVG recognized color keyword name eg. aqua;

or a RGB Hex Code, e.g. FF0000;

or a RGBA Hex Code, e.g. FF000040;

00000000

Stop Point
(sp)

Optional
It is used to dictate where the breakpoint should be made between the from color and the to color. In simpler words, it is the point (along the direction vector of the gradient) at which the color achieves its pure form, i.e., no blending with the from color.

When the number is less than or equal to 1, i.e., a floating point, it would be treated as a percentage value. For example, 0.25 means 25%, 0.1 means 10% and so on.

When the number is greater than 1, it would be treated as an absolute value (in pixels). For example, 100 would mean 100px, and so on.

Number or String

Number - A floating point number between 0.01 and 0.99 or an integer greater than or equal to 1.

String - An arithmetic expression like ih_div_2. Read more about arithmetic expressions here.

1

Multiple parameters can be configured by appending them with an underscore (_). They will be applied independently of the order in which they are specified.

Example usage - e-gradient-<linear-direction>_<from-color>_<to-color>_<stop-point>, which would look like, e-gradient-ld-top_right_from-FF000040_to-00FF0040_sp-0.9.

Gradient as a background

For input images containing a solid object over a transparent background, gradient can also be applied as an underlay.

Usage syntax

Copy
https://ik.imagekit.io/<imagekitId>/your-image.png?tr=e-gradient-from-red_to-white:l-image,i-your-image.png,t-false,l-end

Examples

If you experience a positional displacement between the original image and the overlay image, use t-false to disable default trimming of the overlay layer like l-image,i-your-image.png,t-false,l-end.

Transformation of gradient block overlay

Following transformation parameters are supported on the gradient block overlay inside a layer.

ParameterDescription
wWidth of the gradient block. It can also accept arithmetic expressions such as bw_div_2, or bw_mul_0.8. Learn more about arithmetic expressions here.
hHeight of the gradient block. It can also accept arithmetic expressions such as bh_div_2, or bh_mul_0.8. Learn more about arithmetic expressions here.
rIt is used to control the radius of the corner and accepts an integer value as the input.

If you're looking to add a solid color block overlay instead, read more about it here.

Examples

Grayscale - (e-grayscale)

Used to turn an image into a grayscale version.

Blur - (bl)

Used to specify the Gaussian blur that must be applied to an image. The value of bl specifies the radius of the Gaussian Blur that is to be applied. Higher the value, the larger the radius of the Gaussian Blur. Possible values include integers between 1 and 100.

Trim edges - (t)

Useful with images that have a solid or nearly solid background with the object in the center. This parameter trims the background from the image, leaving only the central object in the output image.

Usage - t-true|Number.

Possible values include true  and integer values between 1  and 99 that specify the threshold level for considering a particular pixel as "background".

Border - (b)

This adds a border to the image. It accepts two parameters - the width of the border and the color of the border.

Usage - b-<border-width>-<hex code>

The width is specified as a number which is equivalent to the border width in pixels. The color code is specified as a 6-character hex code RRGGBB.

You can also provide an arithmetic expression such as ih_div_20_red, or cw_mul_0.05_FF00FF as a value for this parameter. Doing so will first calculate the value of the width and then apply transformations using that value. Learn more about arithmetic expressions here.

Rotate - (rt)

It is used to specify the degree by which the output image must be rotated or specifies the use of EXIF Orientation Tag for the rotation of image using the auto parameter.

Possible values - Any number for a clockwise rotation, or any number preceded with N for counter-clockwise rotation, and auto.

Use auto if you want ImageKit.io to automatically rotate image based on EXIF orientation tag in image metadata.

Radius - (r)

It is used to specify the radius that must be used to obtain a rounded output image. To obtain a perfectly rounded image, set the value to max . This parameter is applied after resizing the original image, if defined.

Possible values - Positive Integer and max.

For simpler cases, you can use radius in the same transformation as the height and width parameters. However, if you are using advanced cropping parameters, like crop (c) and crop mode (cm), then you should chain the radius transformation in a step after the resizing transformation.

Background - (bg)

It is used to specify the background that can be used along with some cropping strategies while resizing an image. When choosing background, you have three options:

  • Add a solid color background with a hex code or color name.
  • Add a blurred version of the same image as the background.
  • Expand the image boundaries using generative fill (bg-genfill). Optionally, you can guide the expansion with a text prompt. The AI intelligently extends the original image, blending the new content seamlessly for a natural look.

Solid color background

  • RGB Hex code: A 6-digit hex code (eg. AAFF00, 0f0fac)
  • RGBA Hex code: An 8-digit hex code. Last two characters must be a number between 00 and 99, specifying the opacity level (eg. AAFF0040, 0f0fac75)
  • Color name: A standard color name in lowercase (eg. lightgreen, beige)

Default value - black (00000)

Blurred background

Syntax: blurred[_<BlurIntensity>][_<Brightness>]

ParameterValueDescriptionDefault
Blur intensityauto or an integer from 0 to 100Set the intensity of blurauto
BrightnessInteger from N255 to 255Negative value to make background darker and positive value to make the background lighter0

Limitation: Blurred background can only be used with cm-pad_resize.

Blur intensity auto - The intensity of blur is automatically adjusted based on the provided height (h) & width (w) in the transformation.

Specifying a background for a PNG image

URL - https://ik.imagekit.io/demo/img/logo-white_SJwqB4Nfe.png?tr=bg-F00000

Opacity - (o)

It is used to specify the opacity level of the output image. A non-transparent image can be made semi-transparent by specifying an opacity level that is less than 100. An already transparent image is made more transparent based on the specified value. It accepts numerical values ranging from 0 to 100, where 0 would produce a completely transparent image, and 100 would have no effect.

If a background (bg) color is specified along with opacity, then that color is blended with the resultant image, leading to a non-transparent (opaque) image, but with the bg color mixed in. Alpha component, if present in the bg value, will be ignored.

Possible values - Integer values from 0 to 100 (inclusive).