The image values module

●●●●●●●●●●●●●●●

Contains:

• Importing images:

  • url(...)
  • image() – fragments, fallbacks and solid colors

• Color gradients

• Fitting images to a box: object-fit, object-position, image-orientation

• Raste images with high or low resolution: image-resolution

Linear gradients

●●●●●●●●●●●●●●●

Five notations for the same gradient:

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

Diagonal gradients

●●●●●●●●●●●●●●●

A gradient under 135°

Even if the gradient is used in a non-square box, the corners are yellow and blue.

linear-gradient(135deg, yellow, blue);
linear-gradient(-45deg, blue, yellow);

More than two colors

●●●●●●●●●●●●●●●

A gradient throught three colors:

linear-gradient(yellow, blue 20%, #0f0);

From corner to corner

●●●●●●●●●●●●●●●

Keywords instead of degrees: to ensure that the diagonal corresponds to the diagonal of the box.

linear-gradient(to top right, red, white, blue)

Radial gradients

●●●●●●●●●●●●●●●

From the center to all edges

radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);

Circular

●●●●●●●●●●●●●●●

From the center to the corners

radial-gradient(circle, yellow, green);

Radial with more colors

●●●●●●●●●●●●●●●

From the center to all edges, with three colors:

radial-gradient(red, yellow, green);

Radial from a corner

●●●●●●●●●●●●●●●

From bottom left to both opposite edges:

radial-gradient(farthest-side at left bottom,
  red, yellow 50px, green);

Smallest radial

●●●●●●●●●●●●●●●

From an arbitrary point to the two nearest sides:

radial-gradient(closest-side at 20px 30px,
   red, yellow, green);
radial-gradient(20px 30px at 20px 30px,
   red, yellow, green);

Smallest radial, circular

●●●●●●●●●●●●●●●

From an arbitrary point to the nearest side:

radial-gradient(closest-side circle
  at 20px 30px, red, yellow, green);
radial-gradient(20px 20px
  at 20px 30px, red, yellow, green);

Repeating gradients

●●●●●●●●●●●●●●●

Repeating linear gradient:

repeating-linear-gradient(red,
  blue 20px, red 40px)

Repeating radial gradient

●●●●●●●●●●●●●●●

Repeating radial gradient:

repeating-radial-gradient(red,
  blue 20px, red 40px)

Repeating circular gradient

●●●●●●●●●●●●●●●

Repeating circular gradient:

repeating-radial-gradient(circle
  closest-side at 20px 30px,
  red, yellow, green 100%,
  yellow 150%, red 200%)