Conic Gradient

A conic gradient follows a 360 degree path, with several color placed along that line. The colors are transitioning around a center point and gradually blend from one to another. The conic-gradient() is a CSS function that must be specified on the background-image property.

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 conic-gradient as follows: background-image: conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular>color-stop-list> ) The conic-gradient determines the type of gradient. This can also be a linear-gradient of a radial-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 "around the clock" with the a sharp transition between the two colors on one site and a smooth transition on the other. background-image: conic-gradient(#A100FFFF, #119CFDFF)

Angle or direction

By setting the angle as the first argument, you can specify the starting point from which the gradient originates. This argument is set in degrees with a range from 0deg to 360deg. However you can also use 'rad' or 'turn' or 'grad' as unit value for the angle property. background-image: conic-gradient(from 36deg, #A100FFFF, #119CFDFF)

The position

The position argument tells the browser where to render the center point of the conic gradient. For example is you specify this at 0px 0px, the center point will be on the top left. For more information checkout the position value. conic-gradient(from 36deg at 20% 80%, #A100FFFF, #119CFDFF)

Angular color stops

Define multiple color stops by adding stopt to the angular-color-stop-list. One value consists of a color value followed by one or two optional stop positions. This can be specified a an angle property. The first angle property specifies the starting point while the second value specified the end point. When omitting the angle values the colors will be evenly distributed along the available space. background-image: conic-gradient(from 36deg at 20% 80%, #A100FFFF 0%, #000000 25%, #119CFDFF 30%)

Hard transitions

By specifying a second color stop position, you can create hard transitions between colors. background-image: conic-gradient(from 36deg at 20% 80%, #A100FFFF 0% 25%, #000000 25% 30%, #119CFDFF 30% 50%;

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.