How to put Gradient Colors in a website ?
CSS gradients are images made by the transition between two or more colors. There are three types of gradients which are given below:
- Linear Gradient
- Radial Gradient
- Conical Gradient
Linear gradient: It is the type of gradient that progresses in a linear (straight) manner.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
background-image: linear-gradient( direction, color1, color2, ... )
Example: This example using a linear-gradient property value to create a gradient color in a website.
Radial gradient: It is the type of gradient that has similar to linear-gradient, but the difference between the two is that this gradient radiates around from the central point.
background-image: radial-gradient( shape size at position, start-color, ..., last-color );
Conical gradient: It is the type of gradient that creates an image with color transitions happening around the central point of the image.
Background image: conic-gradient(color degree, color degree, ...)