Where we used to see solid-colored backgrounds, now we’re seeing a lot of backgrounds with gradients. A gradient is a smooth transition from one color to another. Most background gradients transition between two colors, but it’s possible to transition between multiple colors and include features such as animated transitions.

image from colorful gradients

Gradients can be created as image files or with CSS. A well-designed gradient can make the web pages more colorful and interesting while still loading fast. Gradients are not limited to backgrounds. They can include images with overlays, backgrounds, logos, headers, buttons, backgrounds for forms, etc.

The image above can be accomplished with a plugin such as this premium plugin for Divi called Fullwidth Header Extended. It adds a CSS gradient to the custom header and includes particle animation, multiple color gradients, and gradient animation. It even adds dynamic text effects, icon animations, image effects, and other background effects. It also includes a sub-header that can be placed above or below the header title. I consider this a must-have plugin for every Divi user.

Online Tools to Create Gradients

Gradients can be created with graphics software such as Photoshop, Gimp, Sketch, PaintShop Pro, and Paint.NET. There are also lots of online tools that will create gradients for you based on colors you choose. Some have more features than others but they’re free to use. Some have pre-made gradients that you can save and reuse. A few include CSS tutorials. Just be sure to compress them. I like TinyPNG.

Here are some good tools for downloading or creating your own gradients:

• Ultimate CSS Gradient Generator
• uiGradients
• W3 Schools – CSS Gradients
• WebGradients 
• colorful gradients
• Gradients.io
• mrmrs.io

Let’s Discuss

• Do you use gradients?
• What’s your favorite tools to create gradients?
• Do you prefer to download pre-made gradients?

Let us know in the comments. Thanks for reading and please subscribe if you haven’t already. 

Featured image from James Douglas