CSS GRADIENTS 1

#css #webdev #womenintech

Hello Everyone, welcome to my first article on dev.to and I am writing on CSS GRADIENTS.

What are GRADIENTS?
Gradients are one color that fades into another. This color can fade into another in different directions, example: top, bottom, left, right, diagonal e.t.c. This effect can be accomplished by using CSS GRADIENTS.
According to W3 schools, CSS defines two types of gradients:

Linear Gradients
Radical Gradients

Linear Gradients (goes down/up/left/right/diagonally)
The easiest way to understand this concept is that the Linear Gradient function transitions two or more colors along a straight line hence the name linear.
In creating linear gradients, at least two colors should be specified for it to work and the selector is background-image.
Syntax:
background-image: linear-gradient(direction, color1, color2, ...);

I will use some examples for better understanding:

Example 1
Direction - Top to Bottom (this is default).
I will start by creating a div in my index.html and put a content inside because the

tag does not work unless it has a content.
Index.html:

Then in my CSS,

The result:

EXAMPLE 2
Direction - Left to Right

In the CSS file,

The result:

EXAMPLE 3
Direction - Diagonal:
You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

In CSS file,

The result:

This is where I will stop for linear gradients. I will like to know your comment about the article and if it was helpful. My next post will be on radical gradients.

Thank you.