Learn to Code via Tutorials on Repl.it!

← Back to all posts
Gradients in CSS
userSM (260)

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


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);

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 :)

CodingCactus (4337)

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

userSM (260)

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

CodeLongAndPros (1633)

This would be better as part of a larger tutorial.