Our Guide To

CSS Gradients

Gradients are your tool in CSS to add multiple colors, often fading from on to another, to the background of elements in web design. This guide covers the different types of gradients that can be created with CSS, including examples that contain tips and tricks to get the most out of the syntax.

CSS Linear Gradient

Perhaps the most common type of gradient we see in web design is the linear-gradient(). It’s called “linear” because the colors flow from left-to-right, top-to-bottom, or at any angle you chose in a single direction.

CSS Radial Gradient

A radial gradient differs from a linear gradient in that it starts at a single point and emanates outward. Gradients are often used to simulate a light source, which we know isn’t always straight. That makes them useful to make the transitions between colors seem even more natural.

CSS Conic Gradient

A conic gradient is similar to a radial gradient. Both are circular and use the center of the element as the source point for color stops. However, where the color stops of a radial gradient emerge from the center of the circle, a conic gradient places them around the circle.

CSS Repeating Gradients

Repeating gradients take a trick we can already do with the creative use of color-stops on the linear-gradient() and radial-gradient() notations, and bakes it in for us. The idea is that we can create patterns out of the gradients we create and allow them to repeat infinitely.