Skip to content
Sign upLog in
Gradients in CSS
Profile icon

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

You are viewing a single comment. View All
Profile icon

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