A conic gradient starts by specifying the center of a circle, similar to radial gradients, except that conic gradient color-stops are placed around the circumference of the circle, rather than on a line emerging from the center, causing the color to smoothly transition as you spin around the center, rather than as you progress outward from the center.

A conic gradient is specified by indicating the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a <length>, the color-stops of a conic gradient are specified with an <angle>. Rays are then drawn emerging from the center and pointing in all directions, with the color of each ray equal to the color of the gradient-line where they intersect it.

]]> In addition to <linear-gradient> <radial-gradient>, and <conic-gradient>, the specification defines <repeating-linear-gradient>, <repeating-radial-gradient> and <repeating-conic-gradient> values. These notations take the same values and are interpreted the same as their respective non-repeating siblings.

]]> The element() function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well. This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background.

]]> The element() CSS function defines an <image> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.

A particularly useful scenario for using this would be to render an image in an HTML <canvas> element, then use that as a background.

]]> This value for CSS background-image lets you use a portion of a larger image as a background. This allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.

This works very similarly to the , which is used with the property to use parts of an image as the bullets in lists. However, this can be used for any CSS background.

The syntax for the rectangle is similar to the function generating a <shape> CSS type. All four values are relative to the upper left corner of the image.

]]> cross-fade() function, which indicates the two images to be combined and how far along in the transition the combination is. ]]> The image() function allows an author to:

  • use media fragments to clip out a portion of an image
  • use a solid color as an image
  • fallback to a solid-color image, when the image at the specified url can’t be downloaded or decoded
  • sautomatically respect the image orientation specified in the image’s metadata
]]> The image-rendering property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm. When specified on an element, it applies to all images given in properties for the element, such as background images, list-style images, or the content of replaced elements when they represent an image that must be scaled.

]]>