©2020-2024 ioDraw All rights reserved
css Background gradient is available in , Generally speaking , We use the following two gradients
Linear gradient
Radial Gradient
Linear gradient
Let's first look at grammar ：
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
\---------------------------------/ \----------------------------/ Definition
of the gradient line List of color stops
Explain ：
angle> Angle values specify the direction of the ramp （ Or angle ）.
side-or-corner Starting point position of gradient line . It contains to And two keywords ： The first indicates the horizontal position left or right, The second indicates the vertical position top or
bottom. The order of keywords has no effect , And are optional .
color-stop By a color Value composition , And followed by an optional end position （ It can be a percentage value or along the gradient axis length)
So we have the following effect ：
This is a linear gradient from left to right, gold to pink
background-image: linear-gradient(to right, gold, pink)
Radial Gradient
First, let's look at grammar ：
radial-gradient( [ [ circle || <length> ] [ at <position> ]? , | [ ellipse ||
[ <length> | <percentage> ]{2} ] [ at <position> ]? , | [ [ circle | ellipse ]
|| <extent-keyword> ] [ at <position> ]? | at <position> , ]? <color-stop> [ ,
<color-stop> ]+)
Or we can simplify it as follows ：
radial-gradient(shape size position, color-stop[...color-stop]);
Explain ：
position Center position of radial gradient
shape Shape of gradient . circular （ The shape of the gradient is a circle with constant radius ） Or oval （ Axisymmetric ellipse ）. The default is ellipse
size Size of gradient
color-stop By a color Value composition , And followed by an optional end position （ It can be a percentage value or along the gradient axis
So we have the following effect ：
This is a red to black radial gradient
background-image: radial-gradient(red,black)
Gradual fancy play
Of course, the above gradient is a very simple way to play , Let's do some difficult ~
Color mutation
The gradient we are currently making is a uniform gradient , If multiple colors have the same position , Then these colors will blend in an infinitely small transition region , Visually , The color will change suddenly at this position , Instead of a smooth transition effect .
Like this
Multiple attribute matching of background
Gradient can be treated as background image , Since it's a background picture , Then you can stack and flatten , So we got the following effect ：
This is the effect of two gradient overlays combined with the tiling of the background image
background-image: linear-gradient(rgba(255,0,0,0.5) 50% ,transparent 50%),
linear-gradient(to right,rgba(255,0,0,0.5) 50% , #fff 50% ); background-size:
50px 50px;
We can also use repeated linear gradients for stacking ：
background-image: repeating-linear-gradient(-45deg, transparent, transparent
25%, tomato 0, tomato 50%), repeating-linear-gradient(45deg, transparent,
transparent 25%, dodgerblue 0, dodgerblue 50%), wheat; background-size: 50px
50px;
Plus 100 million details ~ （background-blend-mode: multiply; Positive overlay effect ）
That's it !Ta Da!
Gradient Text !
-webkit-background-clip:text This property allows you to crop the background color into the text , And then we do this, and then we do this, and finally we get a great gradient text !
color: transparent; background: repeating-linear-gradient(-45deg, transparent,
transparent 25%, tomato 0, tomato 50%), repeating-linear-gradient(45deg,
transparent, transparent 25%, dodgerblue 0, dodgerblue 50%), wheat;
background-size: 50px 50px; background-blend-mode: multiply;
-webkit-background-clip: text;
Gradient border
utilize border-image-source Property to place the gradient in the border , like this ：
border: 20px solid; border-image-source: repeating-linear-gradient(-45deg,
cyan 0, cyan 15px, transparent 15px, transparent 30px, tomato 30px, tomato 45px,
transparent 45px, transparent 60px); border-image-slice: 20;
Technology