“This is the 17th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Gradient using CSS:

In the previous article on Canvas, we also implemented various gradients through Canvas. You can check it out

  • Linear Gradients – Down/up/left/right/diagonal
  • Radial Gradients – defined by their centers

CSS gradients allow you to show smooth transitions between two or more specified colors.

(1) Linear gradient of gradient

To create a linear gradient, you must define at least two color nodes. Color nodes are the colors that you want to render smooth transitions. You can also set a starting point and a direction (or Angle).

Linear-gradient () is used to achieve linear gradient. Note: The color gradient is achieved by the image gradient, you can put multiple colors in the function to achieve the gradient effect and the default gradient is from top to bottom to right,to left,to top,to buttom right(top to left, bottom to bottom) and you can also do the gradient at an Angle, The value is in degree deg format, for example, 90deg

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A linear gradient of gradient</title>
    <style>
        #div1{
            width:300px;
            height: 300px;
            background-image: linear-gradient(to left,skyblue,pink);
        }
    </style>
</head>
<body>

<div id="div1" class="div2">

</div>

</body>
</html>
Copy the code

(2) Radial gradient of gradient

The radial gradient() function is used to achieve the radial gradient. Note: the color gradient is achieved by the gradient of the image. The default is to diverge from the center outward.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Radial gradient of gradient</title>
    <style>
        #div1{
            width: 200px;
            height: 300px;
            background-image: radial-gradient(ellipse,skyblue,pink,white);

        }
    </style>
</head>
<body>

<div id="div1">

</div>

</body>
</html>
Copy the code

(3) Extend a text gradient implementation:

The default gradient for text is a gradient from top to bottom. Change the gradient direction and add it in front of the color, for example, to right

Text itself can not be set gradient, we are by setting the background gradient to achieve text gradient!

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gradient text gradient</title>
    <style>
        span{
            background-image: linear-gradient(to right,blue,black);
            /* Specifies that the area where the background gradient is drawn is set to the text area */
            -webkit-background-clip: text;
            /* Set the original text to transparent */
            color: transparent;
        }
    </style>
</head>
<body>

<span>I am gradient text, I am super handsome!</span>

</body>
</html>
Copy the code

🔆 In The End!

Start now, stick to it, a little progress a day, in the near future, you will thank you for your efforts!

This blogger will continue to update the basic column of crawler and crawler combat column, carefully read this article friends, you can like the collection and comment on your feelings after reading. And can follow this blogger, read more crawler in the days ahead!

If there are mistakes or inappropriate words can be pointed out in the comment area, thank you! If reprint this article please contact me for my consent, and mark the source and the name of the blogger, thank you!