What are Gradients? 🌈

As you scroll through social media or browse inspiration sites, one question might arise: “What’s a gradient, and why is it everywhere?”

The short and sweet answer: A gradient in design is the smooth transition between colours, creating a visual effect where hues seamlessly fade into each other, adding depth and dimension. You could ask ChatGPT about this, but it might not show you all the cool references, so keep scrolling to dive deeper!

As a new designer, you probably learned a few basic gradient styles in Photoshop—right? Let’s jog your memory:

• Linear Gradient: Colors transition in a straight line, either from top to bottom or left to right.

• Radial Gradient: Colors blend outward from a central point, creating a circular or oval transition.

• Angular Gradient: Colors radiate from a fixed angle, resulting in a dynamic, directional effect.Mesh Gradient: Colors transition within a grid-like structure, allowing for precise and complex colour blending.

Now that you know them, let’s explore how these gradients can elevate your designs!

When Did the Gradient Trend Start?

Gradients have been trending for quite some time. They first reemerged in a more traditional form, often seen in backgrounds and images. Apple and Spotify played a key role in popularizing them again by using duotone gradients over photos as a signature element in their branding campaigns and microsites. Gradients have a history of making comebacks every one to two years—something you’ve probably noticed if you’ve been in design for over a decade. However, introducing the Freeform Gradient tool in Illustrator CC 2019 was the most significant resurgence. This tool, also known as the irregular gradient, completely revolutionized the design landscape, making gradients an industry-wide obsession. Since then, they’ve been a dominant feature across popular inspiration sites like Behance, Dribbble, Adobe Stock, and beyond.

In the ever-evolving world of web design, gradients have become a trend that injects life and vibrancy into digital interfaces.

Today, we’re not just exploring the usual gradients you might spot on fancy websites like Awwwards. Instead, I’m diving into the names and types of gradients you often see but might not know how to classify. When this trend first hit the scene, I wondered What we call these? Are they radial? Linear? Or something else?

After using and researching gradients extensively, I realized there aren’t always fixed names you can find online. However, I’ve compiled some practical names that might help you identify the gradients you encounter on those sleek, fancy websites. This article isn’t about providing references—I’ll include a 4K file in each category to make it easier for you to recognize them without getting lost in complex design systems.

---