CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise


CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

Linear Gradient in CSS

Linear Gradients



CSS3 gradients enable you to display smooth transitions between two or more specified colors. To create a linear gradient, you must define at least two color stops.


What are Color Stops?


Colors stops are basically the colors among which you want to render smooth transitions. There is no limitation on color stops. We can add multiple color stops separated by a comma. We can set the direction of our linear gradient. The direction can be from left to right, top to bottom, bottom to top, right to left, and many more. We can also specify the angle of a linear gradient. By doing this, the linear gradient will start from that particular angle.




Its syntax is:-

< style >


background-image: linear-gradient(direction, color-stop1, ...);


< /style >


Further Explanation:-


Value Description
direction Defines a starting point and a direction angle with gradient effects.
color-stop1,... Color stops are the colors that we want to render with smooth transitions. It consists of a color value, with an optional stop position.

Code Explanation

All Tutorials related to CSS3

All Sections related to CSS