Skip to content
← Back to Community
Gradients in CSS
Profile icon
userSM

HTML, CSS and JS aren't my main languages, but I'm decent in the HTML and CSS. Thus, my first web design tutorial.

HOW TO CREATE A GRADIENT

To add a background gradient to a div or a body, just copy the following code: background-image:linear-gradient(direction,colour1, colour2);

Colour 1 and 2 are probably obvious as to what they are. They can be any 2 colour values (can be in normal text, hex or RGB).
The direction is optional. This can be used to determine the direction of the gradient. For example to create a yellow, black gradient going right, the following code would be written.

background-image: linear-gradient (to right, yellow, black);

20200823_114559

To see an actual example of this, you can click here to see a repl by me that uses gradients.

PS- Gradients go down by default.

Comments, upvotes and feedback are appreciated.
Hope this helps :)

Voters
Profile icon
NCR-GAMINGGAMIN
Profile icon
BrandonCrabbe
Profile icon
AbbyFunderburk1
Profile icon
merguko
Profile icon
EdwinSorto
Profile icon
HiHello28
Profile icon
ChristopherRa14
Profile icon
AlexAlex27
Profile icon
k9chelsea2
Profile icon
userSM
Comments
hotnewtop
Profile icon
MadSurgeon12

How would you fill a circle or a shape with a gradient color?

Profile icon
CodingCactus

very short, maybe add some examples and more 'background-image' things

Profile icon
userSM

@CodingCactus
I added an example, and a link to a repl with more examples

Profile icon
CodeLongAndPros

This would be better as part of a larger tutorial.

Profile icon
userSM

@CodeLongAndPros
thanks, I guess