CSS Image functions

These functions may be used wherever an <image> is valid as the value for a property.

conic-gradient()Conic gradients transition colors progressively around a circle.

image() Defines an <image> in a similar fashion to the url() function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported. One key difference between url() and image() is the ability to add a media fragment identifier — a starting point along the x and y axis, along with a width and height — onto the image source to display only a section of the source image. The section of the image defined in the parameter becomes a standalone image. The syntax looks like so:

background-image: image('myimage.webp#xywh=0,20,40,60');

image-set() A method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.

linear-gradient()Linear gradients transition colors progressively along an imaginary line. The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

background:

linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),            

linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),            

linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

radial-gradient()Radial gradients transition colors progressively from a center point (origin).

repeating-linear-gradient()Is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

repeating-radial-gradient()Is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

repeating-conic-gradient()Is similar to conic-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.