CSS GRADIENTS 1

kpeale

Kpeale Legbara

Posted on September 19, 2020

CSS GRADIENTS 1

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:

  1. Linear Gradients
  2. 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:

Alt Text

Then in my CSS,
Alt Text

The result:
Alt Text

EXAMPLE 2
Direction - Left to Right

In the CSS file,
Alt Text

The result:
Alt Text

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

In CSS file,
Alt Text

The result:
Alt Text

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.

💖 💪 🙅 🚩
kpeale
Kpeale Legbara

Posted on September 19, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related