Gradients - linear

Question 1

What is a gradient CSS data type?

Answer 1

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

Source MDN

Question 2

Describe the different types of gradients

Answer 2

The gradient data type is defined with one of the function types listed below.

Linear gradient - Linear gradients transition colors progressively along an imaginary line. They are generated with the linear-gradient() function.

Radial gradient - Radial gradients transition colors progressively from a center point (origin). They are generated with the radial-gradient() function.

Repeating gradient - Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the repeating-linear-gradient() and repeating-radial-gradient() functions.

Conic gradient - Conic gradients transition colors progressively around a circle. They are generated with the conic-gradient() function.

Source MDN

Question 3

What does the linear-gradient() CSS function do?

Answer 3

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

Source MDN

Question 4

Possible arguments of linear-gradient() CSS function

Answer 4

• <side-or-corner> - The position of the gradient line’s starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). If unspecified, it defaults to to bottom.

The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. The other values are translated into an angle.

• <angle> - The gradient line’s angle of direction. Increasing values rotate clockwise from there.
• <linear-color-stop> - A color-stop’s <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient’s 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.

Examples:

linear-gradient(45deg, blue, red);
linear-gradient(to left top, blue, red);
linear-gradient(0deg, blue, green 40%, red);
linear-gradient(.25turn, red, 10%, blue);
linear-gradient(45deg, red 0 50%, blue 50% 100%);

Source MDN

Question 5

Where can you use the gradient data type?

Answer 5

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() won’t work on background-color and other properties that use the <color> data type.

Source MDN

Question 6

What dimensions does a gradient have?

Answer 6

A gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

Source MDN

Question 7

What is the composition of a linear gradient?

Answer 7

A linear gradient is defined by the gradient line and two or more color-stop points. Each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.

The gradient line is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

The starting point is the location on the gradient line where the first color begins.

The ending point is the point where the last color ends.

Source MDN

Question 8

How do you position a color-stop?

Answer 8

A color-stop’s position can be explicitly defined by using a <length> or a <percentage>. If you don’t specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. The following two gradients are equivalent.

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

Source MDN

Question 9

Where does the color transtion between two color-stops happens by default?

Answer 9

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.

Source MDN

Question 10

How can you change the middle of a color transtion?

Answer 10

With a gradient-hint.

You can move the midpoint to any position between two color stops by adding an unlabelled % color hint (aka gradient-hint) between the two colors to indicate where the middle of the color transition should be.

For example:

linear-gradient(red 10%, 30%, blue 90%);

The previous example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.

Source MDN

Question 11

What is the problem with the linear gradient below?

linear-gradient(red 40%, yellow 30%, blue 65%);

Answer 11

Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition.

The following changes from red to yellow at the 40% mark, and then transitions from yellow to blue over 25% of the gradient

Source MDN

Question 12

How can you create multi-position color stops?

Answer 12

A color can be declared as two adjacent color stops by including both positions in the CSS declaration. The following three gradients are equivalent:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop.

Source MDN

Question 13

Propose a CSS rule to generate the following linear gradient

Answer 13

background: linear-gradient(45deg, red, blue);

Question 14

Propose a CSS rule to generate the following linear gradient

Answer 14

background: linear-gradient(135deg, orange 60%, cyan);

Question 15

How can you create a hard line in a linear gradient?

Answer 15

To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location.

For example:

.striped {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

Source MDN

Question 16

How can you change the midpoint of a linear gradient transition?

Answer 16

With a gradient hint. By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient.

In this example, we’ve moved the midpoint of the transition from the 50% mark to the 10% mark.

.color-hint {
  background: linear-gradient(blue, 10%, pink);
}

Source MDN

Question 17

How can you create a solid, non-transitioning color area within a gradient?

Answer 17

To include a solid, non-transitioning color area within a gradient, include two positions for the same color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions.

Example the following CSS rules are equivalent

background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
  );
  background: linear-gradient(
    to left,
    lime 25%,  
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );

The second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.

Source MDN

Question 18

Can you overlay gradients?

Answer 18

Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.

.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
    url("critters.png");
}

Source MDN

Question 19

Can you stack gradients?

Answer 19

Yes, you can stack gradients with other gradients. As long as the top gradients aren’t entirely opaque, the gradients below will still be visible.

.stacked-linear {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

Source MDN