CSS <image> Data Type

The CSS <image> data type represents a two-dimensional image. An image can come from an external resource, such as an image file referenced with url(), or be generated directly by CSS using gradients and other image functions.

<image> Values

The <image> data type includes several ways to provide or generate an image. Common forms include:

Value	Description
`url()`	References an external image resource.
`<gradient>`	Generates a linear, radial, conic, or repeating gradient image.
`image-set()`	Provides multiple image choices so the browser can select an appropriate source.
`cross-fade()`	Generates an image by blending two or more images.
`element()`	Uses the rendered appearance of an HTML element as an image where supported.

URL Images

The url() function references an image resource using a URL. It is one of the most common ways to provide an image to a CSS property.

.example {
  background-image: url("background.jpg");
}

The referenced resource can be a raster image such as JPEG, PNG, or WebP, or another supported image format such as SVG.

Gradients

CSS gradients are generated images and therefore represent <image> values. They do not require a separate image file.

.linear {
  background-image: linear-gradient(to right, #0088cc, #02bf57);
}
.radial {
  background-image: radial-gradient(circle, #0088cc, #02bf57);
}
.conic {
  background-image: conic-gradient(#0088cc, #02bf57, #0088cc);
}

Linear, radial, conic, and their repeating forms are represented by the CSS <gradient> data type, which is a type of <image>.

Image Functions

CSS also provides functions that create or select images for use as <image> values.

Function	Example
`image-set()`	`image-set(url("small.png") 1x, url("large.png") 2x)`
`cross-fade()`	`cross-fade(url("one.png"), url("two.png"), 50%)`
`element()`	`element(#example)`

Support and exact syntax for individual image functions can vary, so each function should be checked separately when it is used in production.

<image> Example

The following example uses a CSS gradient as an <image> value for background-image:

.example {
  background-image: linear-gradient(135deg, #0088cc, #02bf57);
}

Browser Result

CSS <image>

The gradient is generated by the browser and is treated as an image even though no external image file is used.

The <image> data type can be used by many properties that accept image values, including:

Specifications

The <image> data type is defined in the CSS Images Module Level 4 .

CSS <image> Data Type