DEV Community

Cover image for CSS GRADIENTS 1
Kpeale Legbara
Kpeale Legbara

Posted on

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.

Discussion (15)

Collapse
fedonye profile image
Edozie Onyeanusi

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

Collapse
kpeale profile image
Kpeale Legbara Author

Thank you 😊

Collapse
liliang8858 profile image
edwin_ew

Nice article

Collapse
kpeale profile image
Kpeale Legbara Author

Thank you 😊

Collapse
developerkaren profile image
Karen Efereyan

Nice one baby girl. I'm proud of you

Collapse
kpeale profile image
Kpeale Legbara Author

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

Collapse
jhimmyofficial profile image
Erinle Feyijimi

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

Collapse
kpeale profile image
Kpeale Legbara Author

Thank you, jimi

Collapse
umavictor6 profile image
uma victor

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

Collapse
kpeale profile image
Kpeale Legbara Author • Edited

Thank you so much, Victor

Collapse
kpeale profile image
Kpeale Legbara Author

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

Collapse
bias profile image
Tobias Nickel

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

Collapse
kpeale profile image
Kpeale Legbara Author

SureπŸ”₯πŸ”₯

Collapse
lanrewaju profile image
Lanre Fagbeyiro

Great read