DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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.

Top comments (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
Jhimmy Official

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 on

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

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›