Create Three Type of Gradient CSS Background

 Have you ever seen the sunset and take notice of smooth transition between yellow, orange and red in the background ? In CSS we called it gradients, where one color fades and change to the other colors.  Gradient background appeals more than a flat design with no background.

With gradient function, we produce a graphical effect, so we use "background-image" property. It has no natural dimensions or specific size, page render the gradient within padding box of its element.

Output of gradient depends on the geometric shapes that colors used to fill the space. 

• Linear gradients
• Radial gradients
• Conic gradients
• Repeating gradients

In gradient, specifying tow colors are enough, but we can use more as we need.

Linear gradients 

It's most popular and least complex gradient. We also called it axial color gradient because it defines by axis with several color stop points. 

When we specify color by default gradient progress in top to bottom direction, but we can place gradient color in another direction too. We provide those values within linear-gradient () function.

Direction in Linear Gradient

background-image: linear-gradient(angle || to side-or-corner, color1, color2, ...);

We use simple terms or angle defining the direction. Use keyword "to" with top, right, bottom and left for side-to-side and to top right and to bottom left for corner-to-corner.

See the Pen Linear gradients by Elpeeda (@Mahe76) on CodePen.

We can use angle for more complex direction. We denote angle in deg. 0deg, 90deg, 180deg and 270deg simply are north, east, west and south direction so keeping that in mind, we can increase it and produce the gradient in different directions.

See the Pen Linear gradients with angle by Elpeeda (@Mahe76) on CodePen.

Color stop in linear gradient

background-image: linear-gradient(color1 25%, color2 50%);

We can also define the distance with the length(ex- px, em, rem, etc.) or percentage of colors, it placed on line axis.

Whenever we provide color list, we notice how they are evenly distributed like 25%, 50%, 75%, we can change that and place the length where we make one color stop soon and other color starts early. When we position, length for color stop others adjust itself.

See the Pen Linear gradients with color-stop by Elpeeda (@Mahe76) on CodePen.

Note: We should provide value in increasing order or else they will overlap each other.

Transition hint in linear gradient

background-image: linear-gradient(color1, 35%, color2);

We can control the transition point where one color blends into another. We specify values with % or length and separate it  with a comma between color, ex- linear-gradient(orange, 25%, black).

See the Pen Linear gradients with transition hint by Elpeeda (@Mahe76) on CodePen.

Hard linear gradient

We can create hard linear gradient by providing "same position"  for two colors. For instance, one color is orange and another is black, we provided 50% for both so it will stop transition and change suddenly from one color to another.

background-image: linear-gradient(orange 50%, black 50%);

We can make strip by repeating color with the same position.

background-image: linear-gradient(45deg, orange 50%, pink 50%, pink 60%, black 60%);

We can also use color with two positions so we don't have to repeat same color tow times.

background-image: linear-gradient(45deg, orange 50%, pink 50% 60%, black 60%);

See the Pen Hard linear gradient by Elpeeda (@Mahe76) on CodePen.

Radial Gradients

It is exactly how the name defining it, gradient start at center and extends infinitely outward at the edge. 

For instance, if we are creating radial gradient with two colors like linear-gradient ex-

background-image: radial-gradient(yellow, orange);

so yellow start at the center and orange draw out at the edge.

We can also define the shape, size and position in radial gradient. These arguments determine the radius and center point of the area.

background-image: radial-gradient(ending shape size position, color1, ..., last color);

Ending shape in radial gradient 

When we specified two colors, the first color creates ending shape and last color drawn to the box, it specified as a circle or ellipse. In case it is not specified, ending shape depends on the size or gradient box, where we are producing gradient. We can also use multicolor like linear-gradient().

Ex-

background-image: radial-gradient(circle, red, yellow);
background-image: radial-gradient(ellipse, red, yellow);

See the Pen Radial gradients by Elpeeda (@Mahe76) on CodePen.

Size in radial gradient 

We can also provide size to our circle or ellipse shape. We use keywords closest-side, farthest-side, closest-corner and farthest-corner. We can also use length and percentage for an ellipse.

See the Pen CSS radial gradient with size by Elpeeda (@Mahe76) on CodePen.

Note: we specify two values for ellipse shape ex: 50px 25px, the first value is for horizontal and second value is for vertical.

For circle we use absolute length. Percentage are not allowed.

Position in radial gradient 

We can also determine the position of center point - ending shape within the gradient area. We use syntax "at" for defining position.

For specifying value we can use simple terms like - top, right, bottom, left and center, percentage or length. It exactly works like `background-position property`.

See the Pen Radial gradient with position by Elpeeda (@Mahe76) on CodePen.

We can also place the color-stop position in radial gradient, it is similar like linear-gradient.

Conic gradients

Conic gradient goes in a circle, like a clock. We also know it as "conical" or "angle" gradient.

We specified color-stop with angle, it placed around the arc length of the circle. Gradient spins around the center from 0deg to 360deg and produce a pattern that looks like a cone.

We specify value within conic-gradient() function. It can produce gradient with just two colors.

ex- 

background-image: conic-gradient(red, gold);

See the Pen CSS conic gradient by Elpeeda (@Mahe76) on CodePen.

If we provide multiple color value and repeat first color in last without specified angle, it will create smooth transition between color.

See the Pen CSS conic gradient multicolor by Elpeeda (@Mahe76) on CodePen.

By default it starts with 0deg (the top) but we can also change the rotation of angle. For this we use keyword "from".

background-image: conic-gradient(from angle, color-stop1, color-stop2, ...);

See the Pen CSS conic gradient angle by Elpeeda (@Mahe76) on CodePen.

Angle always rotates to the right side if positive and if it is a negative angle move to left.

We can also control the center position same like linear and radial gradient, we specify it with simple terms, percentage or length with "at" keyword.

background-image: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

See the Pen CSS conic gradient with position by Elpeeda (@Mahe76) on CodePen.

Repeating gradients

We can repeat the pattern with repeating gradient function. We use the same parameter and arguments as we used in non-repeating gradients.

It will produce the pattern by taking the value of the difference between first and last color position. 

Repeating Linear gradient:

repeating-linear-gradient(angle || to side-or-corner, color-stop-list...)

We can repeat the pattern of linear gradient infinitely in both directions. Same as linear gradient() we use keywords or angle for providing direction and color-list with color-stop also we can use position and transition hint.

See the Pen repeating linear gradient by Elpeeda (@Mahe76) on CodePen.

If gradient start and end with same color it produce a smooth transition between patterns.

See the Pen linear gradient even strips by Elpeeda (@Mahe76) on CodePen.

Repeating Radial gradient: 

background-image: repeating-radial-gradient(shape|size|position,strart-color,...,end-color);

We create a radial repeating pattern with this function and can also specify circle or ellipse shape, size and position with color-list and color-stop.

Here is the example of radial strip with shape, size, position and color-stop list.

See the Pen CSS repeating radial gradients by Elpeeda (@Mahe76) on CodePen.

Repeating Conic gradient:

background-image: repeating-conic-gradient(from angle at position, color-stop-list);

It repeats the ray pattern around the center like a clock, default to the north (0deg).

See the Pen CSS repeating conic gradient by Elpeeda (@Mahe76) on CodePen.

Note: We need to provide the position of color stop for all three repeating gradients or else it will create standard gradients.

Gradients tools

Css Gradient: 

It is a free tool that lets you generate gradient background and it also offer more than that.

uiGradients:

It has a great collection of color gradients.

Gradient Magic:

It is a gallery of CSS gradient and has a collection of fancy pattern.