Gradients - radial

Question 1

radial-gradient() CSS function

Answer 1

The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function’s result is an object of the <gradient> data type, which is a special kind of <image>.

Source MDN

Question 2

Syntax of radial-gradient() CSS function

Answer 2

A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse).

Example:

radial-gradient(circle at center, red 0, blue, green 100%)

Source MDN

Question 3

Possible arguments of radial-gradient() CSS function

Answer 3

• <ending-shape> - The value can be circle or ellipse. If unspecified, it defaults to ellipse.
• <position> - Position of the gradient, If unspecified, it defaults to center.
• <size> - Size of the gradient’s ending shape. Defaults to farthest-corner. It accepts the following keywords closest-side , closest-corner, farthest-side and farthest-corner.

If <ending-shape> is specified as circle, the size may be given explicitly as a <length>, which provides an explicit circle radius. Negative values are invalid.

If <ending-shape> is specified as ellipse or is omitted, the size may be given as a <length-percentage> with two values to provide an explicit ellipse size. The first value represents the horizontal radius, the second the vertical radius. Percentages values are relative to the corresponding dimension of the gradient box. Negative values are invalid.

• <linear-color-stop> - A color-stop’s <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient’s axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray.
• <color-hint> - The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops.

Formal syntax

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<size> = 
  <extent-keyword>              |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right ] || [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

<extent-keyword> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

Source MDN

Question 4

Propose a rule to generate the following radial gradient

Answer 4

As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it’s box:

.radial-gradient {
    background: radial-gradient(red, blue);
}

Source MDN

Question 5

Propose a rule to generate the following radial gradient

Answer 5

Like linear gradients, you can position each radial color stop with a percentage or absolute length.

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, blue 50%);
}

Source MDN

Question 6

Propose a rule to generate the following radial gradient

Answer 6

You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.

.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, blue 50%);
}

Source MDN

Question 7

What image will this CSS rule draw?

.radial-ellipse-side {
  background: radial-gradient(
    ellipse closest-side,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

Answer 7

This example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

Source MDN

Question 8

What image will this CSS rule draw?

.radial-circle-close {
  background: radial-gradient(
    circle closest-side at 25% 25%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

Answer 8

This example uses closest-side, which makes the circle’s radius to be the distance between the center of the gradient and the closest side. In this case the radius is the distance between the center and the bottom edge, because the gradient is placed 25% from the left and 25% from the bottom, and the div element’s height is smaller than the width.

Source MDN

Question 9

Can you stack radial gradients?

Answer 9

Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.

.stacked-radial {
  background: radial-gradient(
      circle at 50% 0,
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0) 70.71%
    ), radial-gradient(
      circle at 6.7% 75%,
      rgba(0, 0, 255, 0.5),
      rgba(0, 0, 255, 0) 70.71%
    ),
    radial-gradient(
        circle at 93.3% 75%,
        rgba(0, 255, 0, 0.5),
        rgba(0, 255, 0, 0) 70.71%
      ) beige;
  border-radius: 50%;
}

Source MDN