Gradient Generator

ColorGradient is a simple tool for you to build simple and complex gradients. It started from the frustration of having to specify the CSS gradient syntax by hand without having immediate feedback. Of course, other tools are available, but they didn’t allow for defining multi-layered and more complex gradients. So I decided to build the best gradient generator I could. This gradient editor allows for creating linear, radial and conic gradients, as well as the repeating-linear, repeating-radial and the repeating-conic ones. Enjoy this free tool!

Linear gradient

The linear gradient has a start and en and point. Between these two points the colors will blend gradually from one color to another. Read more

Radial gradient

A radial gradient is a transition between one color symmetrically around a circle, giving the appearance of blending colors as they transition. Read more

Conic gradient

A conic gradient starts with a normal linear gradient and ends with a series of short perpendicular lines which give the appearance of blending colors as they transition. Read more

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.