Gradients - conic

Question 1

conic-gradient() CSS function

Answer 1

The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).

Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.

Source MDN

Question 2

Syntax of conic-gradient() CSS function

Answer 2

The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient, and the color-stops are angles in rad, turn, grad or degrees: absolute lengths are not valid.

Examples:

conic-gradient(from 45deg, blue, red);
conic-gradient(from 90deg at 0 0, blue, red);
/* Color wheel */
background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
);

Source MDN

Question 3

Possible values of conic-gradient() CSS function

Answer 3

<angle> - Preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.

<position> - Preceded by the at keyterm. Using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. If omitted, the default value is center, meaning the gradient will be centered, .

<angular-color-stop> - A color-stop’s <color> value, followed by one or two optional stop positions, (an <angle> along the gradient’s circumference axis).

<color-hint> - An interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Source MDN

Question 4

Diferences between conic and radial gradients

Answer 4

• In a conic gradient, the color-stops are placed around a gradient arc, the circumference of a circle. In a linear and radial gradients color stops are placed along the gradient line emerging from the center of the gradient.
• In a conic gradient, the colors transition as if spun around the center of a circle, starting at the top and going clockwise. In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions.
• In a conic gradient, the color stops are specified with an angle. In a linear or radial gradient the color-stops are placed by specifying a length.

NOTE: Possible angle units include deg for degrees, grad for gradients, rad for radians, and turn for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle.

Source MDN

Question 5

Propose a CSS rule to generate the following conic gradient

Answer 5

background-image: conic-gradient(from 40deg, #fff, #000); 

Source MDN

Question 6

Propose a CSS rule to generate the following conic gradient

Answer 6

  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);

Source MDN