CSS gradients allow you to develop the ability to draw simple gradients using CSS code and to combine them into more complex shapes. This article introduces the definition, classification, and syntax of CSS gradients, and shows some examples of using gradients at the end of the article.

This is the 8th day of my participation in Gwen Challenge

What is a gradient

A gradient is an image that fades from one color to another, according to the W3C.

So gradients are treated as images in CSS and can be used wherever images are used.

For example, a gradient can be used as a background image:

/* A black to white gradient from top to bottom */
gradient-as-bgimg{
    background:linear-gradient(# 000.#fff);
}
Copy the code

Why gradient is needed

As mentioned earlier, gradients are an image that can achieve rich graphics with a few lines of CSS code. To some extent can replace the role of external images.

Compared with external pictures, its advantages are:

  • Through code, no additional bandwidth consumption
  • It’s easier to maintain, and because it’s code that implements the UI, it’s easier to modify
  • Since it is implemented in code, there is no need to worry about image quality degradation (blur, etc.)

Also, changing some images to gradients is a good way to reduce the load of resources on the page.

Classification of gradients

There are two types of gradient in CSS: linear gradient and radial gradient.

Linear gradient

Linear gradients have three important concepts:

  • The gradient direction is represented by a thick blue line in the image below. Can be set by Angle or keyword
  • The points where the tangents of the ends of the gradient intersect with the direction of the gradient are marked by red circles in the image below
  • Color position points. Any position inside the endpoint. Location points can be expressed in pixels or as percentages. The part between the two position points will automatically perform color interpolation, which is a transition or gradient of color

The syntax for linear gradient is:

linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]
Copy the code

The first part specifies the gradient direction:

  • to leftFrom left to right
  • to rightFrom right to left
  • to right bottomRepresents from the upper left corner to the lower right corner (diagonal)

The second part specifies the monochrome position stops, which can have multiple color segments.

For a color segment, the gradient will only happen if the two colors are different and the length is not zero:

  • yellow 0%. There’s no gradient, just one color
  • yellow 0%,white 0%. There is no gradient, length 0
  • yellow 10% ,red 10% ,blue 80%. Occurs between 10% and 80%Red to blueThe gradient. The left is solid yellow and the right is solid blue.

Radial gradient

Radial gradient also has several important concepts:

  • Curve type, there are two kinds of round and oval (circle.ellipse)
  • Ending Shape.
  • Virtual Gradient Ray
  • Color position point

Unlike linear gradients, its size is not predetermined, but depends on the size of the box containing the gradient.

The syntax for radial gradient is:

radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
)
<ending-shape> = ['circle'|'ellipse']
<size> = ['closest-side'|'farthest-side'|'closest-corner'|'farthest-corner'|<length>|<length-percentage>{2}]
/* 
      
        indicates the radius of the circle, and 
       
        {2} indicates the horizontal and vertical radius of the oval */
       
      
Copy the code

Where the four keywords of size:

  • closest-side, so that the edge shape just meets the edge nearest the center of the gradient
  • farthest-side, so that the edge shape just meets the edge farthest from the center of the gradient
  • closest-corner, so that the edge shape meets the Angle closest to the center of the gradient
  • farthest-corner, so that the edge shape meets the Angle farthest from the center of the gradient

It is important to note that the same keyword in different gradients will have different gradients.

For a circle, we only need to calculate the distance to an edge or Angle, and treat that distance as a radius.

For an ellipse, two values need to be considered: the horizontal radius and the vertical radius. For *-side, the horizontal and vertical distances are the horizontal and vertical radii of the ellipse. For *-corner, the same aspect ratio is kept as *-side: According to closest corner, for example, closest side is closest to the center of the gradient.

case

In this section, I’ll show you some examples of applying CSS gradients.

Adidas and colorful logo

<div class="gradient"></div>
<style>
.gradient{
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg,transparent 50%, white 50%),linear-gradient(135deg, white 50%.rgba(0.0.0.0.774) 62%,white 62%,white 69%.rgba(255.166.0) 69%.rgba(182.25.51) 81%.#fff 81%.#fff 88%.rgb(89.176.247) 88%.rgb(170.12.190) 100%);
}
</style>
Copy the code

Contour map

<div class="gradient"></div>
<style>
.gradient{
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at 100% 50%.rgba(51.51.51.0.747),#eee 75%.# 333 75%);
}
</style>
Copy the code

Lollipop (six colour round)

<div class="container">
    <div class="top">
        <div class="sugar"></div>
    </div>
    <div class="bottom">
        <div class="sugar"></div>
    </div>
</div>
<style>
.top{
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    overflow: hidden;
}
.top > .sugar{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: 
    linear-gradient(-1600deg,transparent 50%,blue 50%,blue 100%),
    linear-gradient(-120deg,transparent 50%,cyan 50%,cyan 100%),
    linear-gradient(-90deg,transparent 50%,green 50%,green 100%),
    linear-gradient(-60deg,transparent 50%,yellow 50%,yellow 100%),
    linear-gradient(-30deg,transparent 50%,orange 50%,orange 100%),
    linear-gradient(-180deg,red 0%,red 100%);
}
.bottom{
    width: 200px;
    height: 100px;
    overflow: hidden;
    transform: rotate(180deg);
}
.bottom > .sugar{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: 
    linear-gradient(-1600deg,transparent 50%,blue 50%,blue 100%),
    linear-gradient(-120deg,transparent 50%,cyan 50%,cyan 100%),
    linear-gradient(-90deg,transparent 50%,green 50%,green 100%),
    linear-gradient(-60deg,transparent 50%,yellow 50%,yellow 100%),
    linear-gradient(-30deg,transparent 50%,orange 50%,orange 100%),
    linear-gradient(-180deg,red 0%,red 100%);
}
</style>
Copy the code

The last

Because the author is untalented and uneducated, the article inevitably has omissions, if you have doubts about any part of the article, welcome to leave a comment or give advice.

Finally, thanks for reading.