Linear Gradient

A linear gradient follows a straight line, with several color placed along that line. The space between these colors will gradually blend from one color to another. When writing the gradient in CSS (Cascading Style Sheet) it uses the background image property as a way to make the gradient go from one color to another.

CSS Gradient

Color gradient is a free tool for creating css gradients. This tool supports the full css background specification. With color gradient you can easily create simple gradients, as well as far more complex gradient types like patterns and radial gradients. This website also contains some interesting articles about css tricks (involving gradients) you might not yet know about.

CSS specification

The CSS spec defines the linear-gradient as follows: background-image: linear-gradient([<angle> | <side-or-corner>]?, <color-stop-list>) The linear-gradient determines the type of gradient. This can also be a radial-gradient of a conic-gradient. You can optionally specify the line the gradient must follow by setting an angle or the side-or-corner argument.

Simplest form

The simplest scenario will create a gradient of one point to another, the gradient line will go from top to bottom with the colors starting on both ends. background-image: linear-gradient(#A100FFFF, #119CFDFF)

Angle or direction

By setting the angle as the first argument, you can specify the direction the gradient line follows. This argument is set in degrees with a range from 0deg to 360deg. background-image: linear-gradient(36deg, #A100FFFF, #119CFDFF)

Keywords

If the argument is specified as ‘to top’ ‘to right’ ‘to bottom’ or ‘to left’, the angle is ‘0deg’ ‘90deg’ ‘180deg’ or ‘270deg’ respectively. Other values that are possible are: ‘to top left’, ‘to top right’, ‘to bottom left and ‘to bottom right. This will result in the gradient line being set to the corners of the box in which the gradient is displayed. background-image: linear-gradient(to top left, #A100FFFF, #119CFDFF)

Color stops

From here on it's easy to add more stops to the gradient. Just insert another color code and position to the list of colors. The color code can be hex, rgb(a) or any of the other CSS color codes. The position is expressed in relative %, px value or any of the other CSS unit values. You can add as many stops as you like, at every position you like.

One caveat: The color stops must be defined in ascending order of the position. background-image: linear-gradient(#A100FFFF, #000000 10%, #FFFFFF 15%, #119CFDFF)

Repeating linear gradient

The repeating-linear-gradient function accepts exactly the same arguments as linear-gradient. The main difference is that the gradient will repeat it self after the last the color stop. This effect is most noticeable when the color stop ends within the gradient box, for example at 60%: background-image: repeating-linear-gradient(90deg, #A100FFFF 0%, #71C4FFFF 60%);

Gradient generator

Checkout our awesome gradient generator. It's easy and to use and has many complex css gradient features.

Go to the generator

Explained in detail

Everything about css gradients

Article

CSS gradient

What is a CSS gradient? What kind of gradients can you build in CSS? Can you stack multiple layers of gradients?

Article

Linear gradient

It's probably the most common gradient. A linear gradient follows a straight path from one point to another. This articles show you how to define a linear CSS gradient.

Article

Radial gradient

It radiates colors from the inside out, or from the outside in. You decide! Read how to define a radial css gradient.

Article

Conic gradient

The conic gradient. It radiates it's colors clock-wise. Maybe you can create a interesting looking clock with it?

Coming soon!

CSS gradient patterns

With the combination of linear and radial gradients you can create pretty interesting patterns. An important factor is the background-size property.

Coming soon!

Advanced gradients

A simple gradient from point A to point B can be pretty boring eh? This articles show you how to create multiple layers of gradients, combining into a more interesting and complex gradient.