CSS3 series — a preliminary study of radial gradient of CSS3

1 radial gradient radial gradient

1.1 Basic Syntax

A linear gradient follows a straight line, while a radial gradient follows an ellipse or circle. The standard syntax is as follows:

radial-gradient(position, shape, size, color-stop);

1.2 Parameter Description

Position: specifies the position of the ellipse or center of the circle for the radial gradient. The values are left, right, top, and bottom. You can also specify px or percentage. The corresponding relationship is as follows:

top left	at 0% 0%
top center	at 0% 50%
top right	at 0% 100%
right center	at 100% 50%
right bottom	at 100% 100%
bottom center	at 100% 50%
left bottom	at 100% 0%
left center	at 0% 100%
center center	at 50% 50%

Shape refers to the shape of a radial gradient. It can be circle or ellipse. The default is Ellipse.

• For example, 20px circle means the radius of the circle is 20px. You can use the following image to describe the gradient shape of the circle:

  

• If set to Ellipse, size represents the horizontal and vertical radius of the ellipse. For example: 20% 30% represents the radial gradient of the horizontal radius of 20% (relative to the width of the element) and 30% represents the radial gradient of the vertical radius of 30% (relative to the height of the element). The gradient shape of the ellipse can be described as follows:

  ​

  

  ​

Size indicates the size of the gradient, i.e. where the gradient stops. In addition to percentages and pixels, the following four keywords are supported, as detailed below:

The keyword	describe
closest-side	Gradient center distance containerThe edge of the recentAs a termination point.
closest-corner	Gradient center distance containerThe Angle of the recentAs a termination point.
farthest-side	Gradient center distance containerAs far as the edgeAs a termination point.
Apsarp-corner (default)	Gradient center distance containerAs far as the AngleAs a termination point.

Size and position can be connected with at, for example30px 40px at centerRepresents an elliptic gradient with the center of the element as the center, 30px as the horizontal radius, and 40px as the vertical radius.

Color-stop, which is the same as linear gradient, won’t be repeated here.

1.3 Case of radial gradient

1.3.1 Basic Usage

<div class="easy"></div>
Copy the code

.easy{
  width: 200px;
  height: 100px;
  background: radial-gradient(yellow, red);
}
Copy the code

From the center (50%, 50%) to the furthest corner, the uniform gradient from red to green and blue can be seen as follows:

1.3.2 Uneven distribution of multi-color nodes

 <div class="easy2"></div>
Copy the code

.easy2{
  width: 200px;
  height: 100px;
  background: radial-gradient(yellow 5%, red 15%, blue 60%);
}
Copy the code

1.3.3 Specify the shape of gradient

<div class="easy3"></div>
<div class="easy4"></div>
Copy the code

.easy3{
  display: inline-block;
  width: 200px;
  height: 100px;
  border: 1px solid deeppink;
  background: radial-gradient(circle, yellow 5%, red 15%, white 40%);
}
.easy4{
  display: inline-block;
  width: 200px;
  height: 100px;
  border: 1px solid deeppink;
  background: radial-gradient(ellipse, yellow 5%, red 25%, white 40%);
}
Copy the code

1.3.4 Specify the position and size of the radial gradient

• Use numeric values to specify the position and size of the gradient. In this case,30px 50pxSpecifies the horizontal gradient size as30px, the gradient dimension in the vertical direction is50pxAnd the center point of the gradient iscenterorleft.

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
Copy the code

.box{
  display: inline-block;
  width: 200px;
  height: 100px;
}
.box1{
  background: radial-gradient(30px 50px at center, yellow, red);
}
.box2{
  background: radial-gradient(50px 50px at center, yellow, red);
}
.box3{
  background: radial-gradient(50px 30px at center, yellow, red);
}
.box4{
  background: radial-gradient(20% 50% at left, yellow, red);
}
Copy the code

• Use keywords to specify the position and size of the gradient. In this example, the size of the radial gradient is specified by the keyword, which can be interpreted in the same way as above.

<div class="box box10"></div>
<div class="box box11"></div>
<div class="box box12"></div>
<div class="box box13"></div>
Copy the code

.box{
  display: inline-block;
  width: 200px;
  height: 100px;
}

.box10{
  background: radial-gradient(closest-side circle at 50% 75%, yellow, red);
}
.box11{
  background: radial-gradient(closest-corner circle at 50% 75%, yellow, red);
}
.box12{
  background: radial-gradient(farthest-side circle at 50% 75%, yellow, red);
}
.box13{
  background: radial-gradient(farthest-corner circle at 50% 75%, yellow, red);
}
Copy the code

1.3.5 Cumulative radial gradient background

The nature of radial gradients is also background, and the superposition of the background can be used to achieve cool effects, such as the eye-like effect in this example.

<div class="easy5"></div>
Copy the code

.easy5{
  display: inline-block;
  width: 200px;
  height: 100px;
  background: radial-gradient(100px 50px ellipse, transparent 40px, red 60px, transparent 61px),
    radial-gradient(10px circle, #000, #000 10px, transparent 11px);
}
Copy the code

1.3.6 Size control of radial gradient

Using the background-size property to control the size of the background image and its repetitive nature, we can also achieve some of its effects.

• Use radial gradient to achieve complex texture effects

<div class="easy6"></div>
Copy the code

.easy6{
  display: inline-block;
  width: 100px;
  height: 200px;
  background: radial-gradient(5px 10px ellipse, transparent 4px, yellow 5px, red 6px, transparent 7px),
    radial-gradient(3px circle, red, red 3px, transparent 4px);
  background-size: 25px;
}
Copy the code

• Radial gradient is used to achieve water wave effect

<div class="easy7"></div>
Copy the code

.easy7{
 width: 200px;
 height: 100px;
 background: #cd0000;
 position: relative;
}
.easy7:after{
 content: ' ';
 position: absolute;
 height: 10px;
 left: 0;
 right: 0;
 bottom: -10px;
 background: radial-gradient(20px 15px ellipse at top, #cd0000 10px, transparent 11px);
 background-size: 20px 15px;
}
Copy the code

More on radial gradients

In addition to radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial radial gradient

• Repeated radial gradient is used to achieve seismic wave effect

• Use repeated radial gradient to achieve CD effect

  Click here, CD effects

The 3 is at the end

If you want to improve your CSSS level, I recommend CSS Secrets, which is very good.

4 Reference Links

W3C linear-gradient

In-depth understanding of CSS3 gradient oblique linear gradient

CSS3 radial gradient grammar and auxiliary understanding of 10 cases

CSS 3 gradient is introduced

You may wish to pay attention to my wechat public account “Front-end Talkking”.