Linear gradient

The CSS linear-gradient is used to draw a background image that represents smooth transitions between colors along a straight line.


background-image: linear-gradient( direction, color-1 [stop-position-1], color-2 [stop-position-2]...

The direction of the linear gradient can be omitted.

The direction can be the keywords or the angle.

The default value for the direction is to bottom which means that gradient starts from top and goes to bottom. Equivalent degrees is 180deg.

The negative value of degrees means the rotation to the left (counterclockwise rotation), the positive value of degrees means the rotation to the right (clockwise rotation).

to top
to right
to bottom
to left

The corner keywords used in the linear-gradient property

The linear-gradient property utilizes corner keywords to specify gradient angles. The actual angles of these corner keywords (e.g. “to top left”, “to top right”, “to bottom left”, “to bottom right”) are determined by the dimensions of the gradient box associated with the element.

See the Pen linear-gradient: stripped bar by majadc (@majadc) on CodePen.



Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.