If you grew up in the 90s, you know them and love them: color gradients. Back then, we used them on everything from birthday invitations to school projects (even though they were mostly printed in black and white in our parents' offices).
Whether or not you’re a millennial who gets nostalgic seeing gradients make a comeback—the trending gods have given us all another opportunity to embrace these sophisticated color stories. Gradients are back, and hitting new aesthetic heights as a website design feature.
As a Creative Product Manager for WOW (Wix’s visual innovation team), I love exploring the web and hunting for the next big thing. I’m in the pursuit of championing good website design by making the expected surprising, the strange familiar and the accessible abundant.
Website gradients are part of the hottest web design trends in 2022. And we at Wix have found a way to make this powerful aesthetic available to anyone making a website. In this article, we’ll show you why and how, going over the following topics:
What are color gradients?
We’re going to show you some of the coolest tricks, effects and benefits of using gradients for your web design and for making a website. But first things first: let’s start by understanding what the term gradient implies.
In short, gradients are color transitions, departing from one central color point and gradually blending into another. Gradients can blend together tones of the same color, for example navy blue to royal blue. But if your web design is in need of variety, gradients can also fuse together multiple colors—from red to purple to pink, or any flavor of the rainbow in between.
Take a glimpse at the chart below—yes, it looks like the collection of marbles I always wish I had—and it’s a great representation of the varieties of gradients you can create on a Wix site.
Types of gradients
History is being revisited, but this time around with new aesthetic goals and technologies. Today’s gradients are overall richer and more complex, with more sophisticated possibilities than in the past.
There are four types of gradients, and each of them creates a completely unique visual. Most website builders don’t offer live CSS gradients—but Wix does.
Our gradients are currently available to set as a fullscreen website background within multiple components of the Wix Editor, such as strips, columns, box slideshow, repeater and more.
Linear gradients: Traditional is not a bad word
Linear gradients are prim, perfect and traditional—moving straight from one side of a composition to the other. Defined by an axis, or gradient line, Linear gradients are determined by two color-stop points (one starting, another ending), but can be amplified by optional color-stop points in between.
Most website builders allow you to add only two colors to a linear gradient. With Wix, you can add up to eight individual hues for a truly amazing visual experience. The gradient's angle can also be changed, whether that’s vertical, horizontal or at an angle.
Radial gradients: The one that will make your content shine
As its name implies, a Radial gradient is defined by a center point. From there, multiple color-stop points can be added to define a surrounding shape.
With the Wix Editor, you can add up to eight colors to any radial gradient while deciding for yourself where the focal point (the center of the radius) stands.
Fluid Gradients: It’s cool, it’s unique—and it’s a major statement
Imagine you have a canvas, and every point you add to this canvas has a specific color that blends together. That’s our Fluid gradient. We’ve seen this mesh-like around digital and print designs, and noticed it re-emerging on the web. The problem? Live CSS gradients were only available with custom coding or leading offline design software.
Like every sought-after trend, we saw people imitate these gradients by uploading static images to their websites. But since we’re the WOW team, we had to bring the “wow factor,” and decided to bring the real thing to Wix.
Now, our vision is a reality: Fluid gradients are now accessible to anyone using Wix. It’s intuitive with our Editor, which allows you to create a Fluid gradient with unlimited, customizable points of color.
Conic gradients: Or as I call it, the peak of a mountain
A Conic gradient is similar to a Radial gradient, with color transitions rotated around a center point. But in this case, the color stops are on the outer edge of the circle created.
At Wix, we haven’t enabled this feature yet, and none of our competitors have either. But shhh—don’t tell anyone: we’re working on adding it as you read this.
Why add gradients to your web design?
Why not? Gradients look modern and advanced, and they’re a helpful design tool to have in your arsenal. Let’s look at the specific benefits of adding this unique element to your website:
Eye-catching
Full of attraction and movement, gradients naturally capture the attention of visitors. Even further, many gradients are built-in with a vanishing point that can lead your visitors’ eyes toward a specific area of the web design.
Colorful
Since they have the ability to flow through various hues, a gradient background incorporates even more into your website color scheme. Even if you stick to just one color, gradients allow you to enrich your design by blending a spectrum of rich tones together.
Layered
Gradients naturally add depth to an otherwise flat design by building layers of color. This quality can be enhanced even further by changing your gradient’s opacity, and placing them on top or behind an image, or even across your entire website background.
How to add gradients to your Wix website
Let’s start with the basics, and go through more detailed examples in the section below. Follow these steps to access gradients in the Wix Editor to begin using them on your site:
Open the Wix Editor
Add a strip
Change strip background
Choose your colors and design
Our editor is pretty intuitive, but in case you need some technical help, use this step by step article.
Gradients in action: Impressive examples you can do on your own
Now comes the fun part. Once you’ve accessed gradient backgrounds in the Wix Editor, there are manifold ways to implement them and maximize your site’s design.
I teamed up with Noam Noy—the greatest content designer in town—to show you what you can do with each of the gradients we offer. Below, we’ve provided five bespoke examples to show you (just some of) the possibilities in action.
Basic strip with Fluid gradient
Starting with the basics, this is a simple example of using Fluid gradients. Utilize the visual appeal of Fluid gradients to set your website's tone, or capture attention. This design works well as a background for texts (make sure to use a large font size) or a solid call-to-action button.
How to get this gradient look:
Click the Fluid gradient icon
Add six dots within the color maker (as shown in the panel image above). Wherever you click on the preview, you create a new dot of color which you can adjust.
Set the size to 30, and its blur to 0.
Radial gradient in two columns, side-by-side with its negative
This is a more complex design—but it’s just as easy to achieve, and especially benefits your site when two sections have the same level of hierarchy.
For example, if you’re creating a one-page website, and want to leave your Contact and About Us sections side-by-side, this composition ensures these areas are distinct, while standing out together.
How to get this gradient look:
With the Wix Editor, add another column to your strip.
Change the background color by clicking the gradient icon—this time, choose “Radial Gradient” from the dropdown menu.
For the design above, we used three color points. These can be added by clicking on the slider bar.
As you can see, the first and last color are the same, while the middle hue is different. To achieve the negative effect in the second column, simply put the same colors in the opposite locations.
Linear gradient in three columns, each in a different direction (aka, the zigzag)
This gradient design, split into three columns, is a great way to place multiple content side-by-side. For example, adding images to the two outer columns and text in the middle, or the other way around. Plus, the zig-zag that results appears to be a super sophisticated effect.
How to get this gradient look:
Add two more columns to the strip, so you have three all together.
Change each column’s background by clicking the Gradient icon (since the default is linear, you can stay there.)
Choose three colors and set the gradient’s angle for each column. In the design above we set the angles to 305°, 55° and 305°.
Two-column strip with a gradient and image
This two-column layout is a classic in web design, and is an excellent way to send a clear message to your visitors. For example, if you’re highlighting a product or service next to a text or call-to-action, a gradient will help it stand out even more.
How to get this gradient look:
Add a column to your strip so that you’re left with two.
Change one column background by selecting the gradient you want (in the image above, we used a Linear gradient).
For the second column, select imagery to fill your background. You can upload any image of your choice, or use one of the thousands available for free within the Wix Editor.
Two fluid (transparent) dots on top of a visual
Gradients and transparent effects work together to create a noticeably striking aesthetic. You can use this attractive web design idea to add a sense of depth, and make any section of your website stand out.
As you can see in the example below, two colors is more than enough. Less is more in the case of this fold design, so it’s best to avoid including long texts or detailed images.
How to get this gradient look:
Add one strip on top of the other within the Wix Editor.
The bottom strip should include a background image or video, and the top layer is where you’ll add gradients. From there, you’ll play with each gradient’s transparency.
Pro tip: Once you’ve created a gradient design of your own, you can save it to your dashboard to customize again in the future.