Article Title

Author Name

{CATEGORY}

{date}

{#hash1}

{#hash2}

Illustrations by {name}

{excerpt} A sprint is when a company or team dedicates a certain amount of time (around 2-4 weeks) to work on a specific project at full speed.

{0} Min read

Profile picture of Lilly Smith

4 min read

Gradients tell a story. Make yours epic with these tips

Editor X’s new section background gradients can be created live in the editor. Here are six ways how.

An image of a conceptual music fest website, which uses gradients that shift from yellow to purple to signify time passing as the day moves on.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Gradients used to be considered a clunky shorthand reference to the kitschy ‘90s era of the internet.


Re-popularized over the past few years, they now convey any story you want them to tell; a subtle and sophisticated means of transporting users across pages and moods. It’s yet another proofpoint for that old cliché, “what’s old is new again.” Gradients are back in the design zeitgeist—but this time amped up by new tech capabilities and end uses.


The trend is everywhere: In banking, with Buck design’s cash app campaign (one commenter even referred to it as “sexy”!). It’s in music streaming, courtesy of Studio Gradient’s campaign for Spotify. It also in more expected arenas, bringing a certain amount of zen energy to the wellness space, like with this yoga studio website and branding by Pentagram.




Not to be outdone, Editor X recently launched its section background gradient capability, so you can integrate rich, complex section background gradients into your next website with live CSS for a more fluid workflow—a capability exclusive to Editor X. Using the editor, you can now create linear, radial, and fluid (a mesh-like version with specific color points) gradients. All of these "subtly lead your visitors’ eyes and attention toward a specific area of your website or light a piece of content," says Adi Huri, creative product manager for WOW, Wix's Visual Innovation Team.


These gradients kick things up a notch. They flow through different tones, add depth to flat designs, can spotlight specific sections, and can give media a new look by dropping an image’s opacity and placing a gradient behind it. And with unlimited color stops, you have complete control—without affecting site performance. Gradients “can be fun and edgy but they can also be more delicate and elegant,” says Huri. It’s really up to you.


Adds Editor X research & development designer Amit Asulin, “a gradient's role is to tell a story, from point to point, color to color, value to value.” Start a color story of your own using these six examples of how to integrate gradients—straight from the Editor X design team.



1. Color-changing background gradient



You can give users the impression that background colors are changing before their very eyes with a background gradient scroll. Editor X designer Eliran Vahdi used the technique to draw the user’s eye down the page as they scrolled past an abstract hourglass shape in Editor X’s 2022 mid-year digital design trend report. The colors change as the user scrolls down the page, until the title and a gradient button.


Vahdi used the gradient on a long section with a sticky element to give the feeling that the colors change as the user scrolls, to make “the whole section feel interactive and unusual,” he says. No matter how you use it, Vahdi adds: “Make sure it sits well with your concept and use it smartly.”



2. Radial gradients with slide navigation


A gif of a concepted music streaming platform, with color gradients that match the playlist's mood.
Set the mood with radial spotlight gradients.

Editor X designers Shir Berkovitz and Noa Sela punctuated their conceptual music streaming platform with radial gradients that change color to convey the mood of each playlist, using a purple and red radial gradient for romantic songs a