CSS Gradient

CSS gradients can have a rainbow of options which are often overlooked. Besides the linear-gradient there is the radial and the conic gradient. We explain it here in detail.

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.

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. Writing the gradient in CSS (Cascading Style Sheet) is not difficult. It uses the background image property as a way to make the gradient go from one color to another. To have a gradient from blue left left to green right, you use the following CSS: background-image: linear-gradient(90deg, #A100FFFF 0%, #71C4FFFF 100%); This wil result in a linear gradient from #A100FFFF to #71C4FFFF. Read more about the linear-gradient here. This is linear gradient. 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. Again we’ll use the background-image CSS property to define the gradient radial gradient. background-image: radial-gradient(100% 100% at 50% 50%, #A100FFFF 0%, #71C4FFFF 100%); This will stretch the circular gradient relative to the size of the element which it is displayed in. The gradient starts with color code #A100FFFF and transitions to the hex color code #71C4FFFF. Read more about the radial gradient here. 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. background-image: conic-gradient(from 90deg at 50% 50%, #A100FFFF 0%, #71C4FFFF 100%); This will show a clock-like gradient, with a sharp distinctive line at one end and a color blend to the other. 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