Exploring Photoshop’s Angle Gradient Tool

Wdd Logo.
July 26, 2010

angle gradients The angle gradient tool is an overlooked gem tucked away in Photoshop’s toolbar.

Often passed over for its more popular sibling, the linear gradient tool, angle gradients create clockwise blends of color around the point a user clicks.

The angle gradients create clockwise blends of color around the point a user clicks.

Most people stop there. But when combined with other techniques and some creativity, the angled gradient has some surprising uses.

Have you overlooked it? Look again...

How it works

Angle, radial and diamond gradients joined Photoshop when Adobe published version 5.0 in 1998. Like all types of gradients, angles rely on how the user clicks and drags. In this case, the direction one drags creates a line on which the “ends” of the gradient lie. The colors in a gradient flow around the point at which the user clicks.

diagram of angle gradients

Above, three AGs show how different colors and angles create different results. The third example has no well-defined line because both of the “end” colors use the same blue. Red, found in the middle of the gradient, is most evident in the opposite direction that the user dragged.

diagram showing how angle gradients work

Above, the middle gray appears at the top of the image—far from where the user moved their cursor—while the start and end colors line up in the direction that the user dragged. Other gradient options including opacity blend mode work the same for all gradient types.

Creating radial highlights and shadows

illustration of US independence day cloth bunting

Although festive bunting is common for any celebration, red, white and blue bunting is synonymous with Fourth of July celebrations. Above, pleats are created with an AG that lies on top of the bullseye-like stripes. The gradient layer is set to 80% opacity, Soft Light mode, to let it create highlights and shadows without ruining the colors beneath.

Notice that the “white” stripes and stars aren’t really white. Light grey ensures that the gradient’s light areas have some impact throughout the bunting.

The gradient’s center is a focal point

The fine point at the center of an angle gradient is one of its hallmarks. Since people are naturally drawn to the sharp, in-focus parts of an image, the center should be placed wherever attention is necessary.

illustration of sunbeams set in hobo, of all things

Above, the center of the gradient was deliberately set behind “b,” the word’s only ascender. Alternatives to the right put the gradient’s center above, below or to the far right of the word. This draws some attention away from the word itself.

How to draw attention without being ignored

Angle gradients don’t always have to be obvious. Paradoxically, many gradients are most useful when they’re least evident. For example:

illustration of the word aquatic, under water

Above, angle gradients recreate murky light seen from under water. But the first things people see are the letterforms. Careful layout helps these gradients set the tone, not steal the show. Here’s how it works.

how the aquatic illustration was assembled

  1. Type is set and appropriate colors are chosen.
  2. Two angle gradients are set on the layer above the text.
  3. Notice that none of the gradients’ centers overlap the text. Avoiding these focal points is crucial to keeping attention on the text, not the gradients.
  4. The gradients are clipped to the text (Layer > Create Clipping Mask) and their blend mode is set to Overlay. Experimenting with color and other blend modes will create more (or less) subtle combinations.

Specular highlights and metallic textures

As a trend, the metallic look comes and goes. Simple linear gradients make them easy, but a pair of angle gradients make them pop.

sample metallic effect with two angle gradients

The sheen above doesn’t look typical because it isn’t. Two angle gradients reinforce each other along a reflective stripe that neither could create alone.

Several techniques make it work. First, a gradient begins deliberately outside of the document. The gradient layer is duplicated (Layer > Duplicate Layer ) and flipped (Edit > Transform > Rotate 180°). With both layers’ blend modes set to Overlay, the result is a sheet of polished steel not easily replicated with a stock effect.

Double—or more—any angle gradient with Curves

The Curves control (Image > Adjustments > Curves) is a great way to play with any kind of gradient. The more complicated a curve becomes, the more features a gradient gains.

using photoshop curves to edit gradients

Above, two types of curves begin to alter an otherwise straightforward angle gradient. This technique can be applied more than once to the same image for increasing complexity.

step-and-repeat with curves

Above, from left to right, an “arch” curve is reapplied to the original angle gradient to create many spokes. Understanding that a gradient, angle or otherwise, is just a tool opens up many new possibilities.

“That’s not what gradients are for”

Often, seemingly limited tools are the most surprising—if they’re used as one tool in a set. Straight dotted lines are easy to create with the Marquee tool. Circles are trickier, unless you use an angle gradient.

creating curved dotted lines with angled gradients

Above, dashed lines with nice, even curves don’t require vector paths or exotic plugins. Although the image begins as a many-stepped angle gradient, applying Threshold (Image > Adjustments > Threshold) turns shades of grey to black and white. Using a lower or higher threshold level results in fewer or more dashes.

As a tool, angle gradients are surprisingly versatile. A good way to discover new uses is to ask “what if?” For example, what would happen if we applied these dashed-line steps to a square instead of a circle? How about a star? What if the gradient wasn’t centered?

Thinking outside the icon

In spite of its simplistic icon, the angle gradient tool is useful in some cases. Still, it’s a tool, not a solution; a foundation, not a trick. The ability to see beyond the obvious takes practice, but the reward is to take “what good is it?” as a challenge, not a snub.

the alphabet created with shapes and angle gradients

Written exclusively for WDD by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

Have you found any creative uses for a little-used Photoshop tool? Share your ideas in the comments below.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…

14 Best Free SEO Tools in 2024

There is an ongoing debate about whether design is more art or more science. SEO is 100% alchemy; if you know where to…