pelicin › web › CSS

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%);
}
| LIVE PREVIEW

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);
}
| LIVE PREVIEW

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);
}
| LIVE PREVIEW

References