Image

The image data type represents a two-dimensional image (could be loaded from a URL, or a gradient).

URL

You can use url(...).

div {
  background-image: url('/path/to/picture.png');
}

Gradient

Linear Gradient

Transition colors progressively along an imaginary line.

• linear-gradient(angle, ...stops)
• repeating-linear-gradient(angle, ...stops)

Note:

• angle (optional) could be keywords like to top, to top left, or in degrees like 180deg. (0 deg = 12 o'clock, remember "clockwise")

• ...stops would be comma-separated list of colors, each one optionally followed by a percentage or a length (e.g. red, red 15px, red 0%, red 0% 50%).

#linear-gradient-example {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(to right, red 10%, blue 50%);
}

Radial Gradient

Transition colors progressively from a center point (origin)

• radial-gradient(config, ...stops)
• repeating-radial-gradient(config, ...stops)

Note:

• config (optional) would determine (1) the ending shape, (2) the size, and (3) the origin (center-point) of the shape. Separate the values with space.

  • The ending shape could be ellipse or circle

  • The size parameter could be closest-side, closest-corner, farthest-side, or farthest-corner (determines how far the shape extends from the origin)

  • The origin should be specified with lengths or percentages, e.g. at 10px 10px or at 50% 50%

• ...stops would be comma-separated list of colors, each one optionally followed by a percentage or a length (e.g. red, red 15px, red 0%, red 0% 50%).

#radial-gradient-example {
  width: 300px;
  height: 100px;
  background-image: radial-gradient(ellipse closest-side at 20px 20px, #3f87a6, #ebf8e1, #f69d3c);
}

Conic Gradient

• conic-gradient(config, ...stops)

Note

• config (optional) would determine (1) the starting degree and (2) the origin (center-point) of the shape. Separate the values with space.

  • The starting degree would be something like from 20deg (0 deg = 12 o'clock, remember "clockwise")

  • The origin should be specified with lengths or percentages, e.g. at 10px 10px or at 50% 50%

• ...stops would be comma-separated list of colors, each one optionally followed by a percentage or a length (e.g. red, red 15px, red 0%, red 0% 50%).

#conic-gradient-example {
  width: 300px;
  height: 100px;
  background-image: conic-gradient(from 0deg, red, orange, yellow, green, blue);
}

References

• <image> (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/image
• <gradient> (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/gradient