Background gradients didn’t feel like much when I first encountered them, but since I read CSS Revealed, BACKGROUND gradients can be used in a variety of ways, and can be used to replace some of the content achieved by images, which is great

Linear gradient

CSS background gradient syntax:

background: linear-gradient( [ angle | to side-or-corner , ] ? color-stop [ , color-stop]+ )

The first parameter is the Angle direction of the gradient, which can be either the Angle value or the direction order

The default Angle is 180deg, which means that the gradient direction is vertical down and 90 degrees is horizontal right. The corresponding directions can also be written as “to bottom” and “to right”

.box {
  background: linear-gradient(#0f0, #00f); /* to bottom */
  background: linear-gradient(90deg, #0f0, #00f); /* to right */
}
Copy the code


The second and subsequent arguments are the color values and their starting and ending positions

As in the above example, specify only the color value. Specify at least two colors. By default, each color value will be equally distributed. You can adjust the length of the gradient using either a numerical value or a percentage. Percentages are recommended to be more flexible.

.box {
  background: linear-gradient(90deg, #0f0 50%, #00f 80%, #f00 100%);
}
Copy the code

A stripe effect can be created by setting different color values at the boundary point of a position

.box {
  background: linear-gradient(
    #0f0 25%, #00f 25%,
    #00f 50%, #f00 50%,
    #f00 75%, #ff0 75%);
}
Copy the code

Radial gradient

The basic syntax of radial gradient is similar:

background: radial-gradient( [ bg-position || angle, ] ? [ shape || size, ] ? color-stop, color-stop [ , color-stop]* )

The first parameter represents the position of the gradient, which can be either a direction or an exact value. The default is in the center

.box {
  background: radial-gradient(#0f0, #f00);
  background: -webkit-radial-gradient(#0f0, #f00);
}
Copy the code

Set the center of the gradient so that it is in the upper left of the box

.box {
  background: radial-gradient(
    top left,
    #0f0, #f00); /* Equivalent to background: radial-gradient(0 0, #0f0, #f00); * /
  background: -webkit-radial-gradient(
    top left,
    #0f0, #f00);
}
Copy the code

The second parameter is the shape and size of the gradient. The shape can be round or oval, and the size has the following values

  • Closest – side near side
  • The closest – corner near post
  • The far side farthest – side
  • The farthest – corner corner
  • Contain background image completely covers the background area
  • The Cover background image fits perfectly into the content area

Contain and cover are similar to background-size contain and cover attributes because the vertical distance from the center of the circle to the edge is shorter than the distance from the point to the corner

.box {
  background: radial-gradient(
    50px 50px,
    ellipse closest-side,
    #0f0, #f00); * / / * near side
  background: -webkit-radial-gradient(
    50px 50px,
    ellipse closest-side,
    #0f0, #f00);
}
Copy the code

.box {
  background: radial-gradient(
    50px 50px,
    ellipse farthest-corner,
    #0f0, #f00); / * corner * /
  background: -webkit-radial-gradient(
    50px 50px,
    ellipse farthest-corner,
    #0f0, #f00);
}
Copy the code

The third and subsequent parameters are the color values and their starting and ending positions, consistent with the linear gradient

.box {
  background: radial-gradient(
    #0f0 15%, #f00 15%,
    #f00 30%, #ff0 30%,
    #ff0 45%, #0ff 45%,
    #0ff 60%, #00f 60%);
  background: -webkit-radial-gradient(
    #0f0 15%, #f00 15%,
    #f00 30%, #ff0 30%,
    #ff0 45%, #0ff 45%,
    #0ff 60%, #00f 60%);
}
Copy the code

A simple target diagram

Some examples

In combination with background-size, the gradient can play a lot of tricks. Here is a tablecloth stripe background

body {
  background:
    linear-gradient(90deg, rgba(0, 0, 255, .6) 50%, transparent 50%),
    linear-gradient(rgba(0, 0, 255, .6) 50%, transparent 50%), white;
  background-size: 50px 50px;
}
Copy the code

With background-position, you can move the position of the gradient. Below is a tile background of copper

body {
  background:
    linear-gradient(45deg, #fff 15%, transparent 15%) 35px 65px.linear-gradient(45deg, transparent 85%, #fff 85%) -35px 35px.radial-gradient(50% transparent, rgba (255255255,0.4)50%.rgba,0.4 (255255255)65%.#fff 65%),
    #ffb521;
  background-size: 100px 100px;
}
Copy the code

Below is a starry backdrop

body {
  background:
    radial-gradient(white, rgba(255, 255, 255, .3) 2px, transparent 40px),
    radial-gradient(white, rgba(255, 255, 255, .2) 1px, transparent 30px),
    radial-gradient(white, rgba(255, 255, 255, .3) 2px, transparent 50px),
    radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 1)2px, transparent 30px),
    black;
  background-size: 400px 400px.230px 230px.310px 310px.150px 150px;
}
Copy the code