CSS Gradient

What is a gradient?

Gradients are CSS elements of the image data type that show a transition between two or more colors. These transitions are shown as either linear or radial. Because they are of the image data type, gradients can be used anywhere an image might be. The most popular use for gradients would be in a background element.

To put it more relevantly, gradients are part of an extremely popular design trend that has been gaining popularity over the last several years. It seems that they have always been around in the background (no pun intended); although, some sources claim that the trend is “coming back”. Of course, it’s hard for something to come back if it never left, but we’ll chalk that up to semantics.

Gradients allow you—the designer—to explore new opportunities to provide fresh, clean designs for your audience. The added transition between colors allows you to play with two-dimensional and seemingly three-dimensional aspects, taking your designs from boring to extraordinary with some simple code.

In fact, the best thing about gradient code is that it can be as simple or as complex as you’d like to make it. You can do the bare minimum and let the browser figure out the rest, or you can take things into your own hands and identify all the odds and ends. You could even do a little extra if you wanted and explore the endless possibilities of gradients.

Linear Gradients

Transitions in linear gradients occur along a straight line determined by an angle or direction. A CSS linear gradient can be coded by using the linear-gradient() function and can be as simple or complex as you would like. At the very least, you’ll only need two colors to get started. From there, you could add more colors, angles, directions, and more to customize your gradient even further.

Code

background-image: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);

Result

If you leave the code at its most basic styling, the other elements will be determined automatically by the browser. This includes the direction or angle and color-stop positions. For more customized styling, you can specify these values to create fun gradients with multiple colors or angled directions. Playing with color-stop positions could also leave you with a solid pattern instead of a traditional gradient. The possibilities are endless!

Compared to radial gradients, linear gradients are certainly more popular in design and branding techniques. For example, you may have noticed the popular music-streaming company, Spotify, and their gradient branding recently. Linear gradients are, perhaps, the easiest way to incorporate this trend into your creations, as they seem to blend smoothly with other design elements.

Radial Gradients

A CSS radial gradient—although far less often seen—is just as beautiful and fun as a linear gradient and can be implemented just as easily. With that said, the code may seem more difficult to figure out at first. It is for this reason that, for some designers, it may be easier to start out with a linear gradient.

Code

background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%);

Result

Of course, the code isn’t actually all that complicated at all. In fact, most of the code is exactly the same as that of the linear gradient—with just a few tweaks for extra radial customization. For example, unlike with linear gradients, you can actually adjust the size of radial gradients in place of where the direction would normally go. Playing with the different values that determine these sizes can give you a lot of different results.

While radial gradients may not be as popular as their linear counterparts, it’s possible that you might have seen them more often than you think. Special CSS techniques can leave you with designs that may be unrecognizable when it comes to the typical idea of what a linear or radial gradient may look like. In the end, radial gradients are just as powerful to use and can give your designs an extra kick of something special.