loading...
Cover image for CSS GRADIENTS 1

CSS GRADIENTS 1

kpeale profile image Kpeale Legbara ・2 min read

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.

Posted on by:

kpeale profile

Kpeale Legbara

@kpeale

Full stack web developer in view. I am currently learning front end development.

Discussion

pic
Editor guide
 

Awesome article. Very explanatory and precise.πŸ™ŒπŸΎ

 

Thank you 😊

 

Nice article

 

Thank you 😊

 

Nice one baby girl. I'm proud of you

 

πŸ₯°πŸ₯°πŸ₯°

 

Awesome article. I'm looking forward to your next Article. πŸ’ͺ

 

Thank you, jimi

 

Nice article Kpeale.
Helped me refresh my knowledge about CSS gradients.πŸ‘Œ

 

Thank you so much, Victor

 

Thank you so much for your contribution! I will definitely do that!

 

in the title pucture, it seems the collor flows in many directions, can you also show how that is done?

 

SureπŸ”₯πŸ”₯