9rules - The best content from the independent web.

Back To Blog

Subscribe To RSS Feed

Recent Blog Entries WHOOP

A Gradient Tutorial

Written by Mike Rundle on August 29, 2006

(Posting this here instead of BusinessLogs.com because our server is currently being moved!)

If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume, depth, and light sources. When you visit a site that looks really sleek and cool, it’s probably because they manipulated your eye correctly and the 3D effect looks “real”, and on sites that look odd or “not as real” it’s because the effects they used didn’t mimic what your eye believes as 3D. Your eyes have been looking at things in the world for a very long time and they’re used to what a shadow looks like, what a light source’s highlight on an object looks like, etc. If you don’t approximate what your eye “thinks” something should look like then your design won’t accomplish the 3D look you’re trying to emulate.

Here are three blocks with various gradients applied, check them out and I’ll go over the differences:


Box 1 illustrates a classic problem I see a lot, and that’s the loss of saturation in the image. Saturation is how intense a specific color is, and a less saturated hue is muddy or grey. When light strikes an object it doesn’t make it less saturated, but simply lighter and possibly more saturated (more saturated because the added light counteracts the shadow mixed with the color) so keep that in mind. Note that the box doesn’t look very “rounded” or 3D at all, it just looks flat and uninteresting.

Box 2 shows another type of gradient some designers use, and although it looks better than Box 1 (doesn’t lose saturation) it’s off because it’s not subtle enough. Box 2 looks like a copper panel that has been hit with a flashlight at full blast — not the effect we’re looking for. Tricking eyes into seeing 3D when there’s only two dimensions means reproducing what they see normally, which would be common objects with inside lighting, or outdoor objects with subtle natural lighting. A flashlight or strobe light is not a common light source, so don’t use that metaphor when working with gradients.

Box 3 is the best out of all. The light source is subtle, the color of the highlight has more saturation than the other two, and the color change is gradual enough to trick your eye into thinking it’s a beveled, 3D panel. If you’re going for a beveled-out look, this is the type of gradient you should be trying to reproduce.

Creating A Gradient In Photoshop
There is a dedicated gradient tool in Photoshop, but just like with anything “obvious” it turns out to be anything but. There are multiple ways of producing a gradient in Photoshop, and I’m going to show you the way I always use because it’s pretty non-technical and produces reliable and reproducible results.

Step 1: Fill Your Base Layer
I like to use a Foreground->Transparent gradient, and to work with that you need a color to show through the bottom transparent area. To start, make a New Layer (Shift+Cmd+N, Mac) and fill it with a color a bit on the dark side. Here’s a screenshot of the color I picked, note how I’m trying to stay closer to the right side of the Hue color square so that my base isn’t muddy (moving farther to the left decreases the Saturation, making it muddy):

Dark Red

Step 2: Make Your Gradient Layer
Make a New Layer again, name it something different from your base layer, make sure it’s on top of the previous layer.

Step 3: Pick Your Lighter Color
Your foreground color should still be the dark red you selected in Step 1. Click on the foreground square to bring up your color palette, and then select a secondary color that is lighter and slightly less saturated. Keep your second color close to your first, just so your gradient is subtle and not as jarring:

Dark Red

Step 4: Make Your Gradient
You now have a solid color base layer, and a highlight color you’re about to use as your gradient. There are many ways to use the Gradient tool, however I highly suggest only using the Foreground->Transparent mode because you can control it the best, and we’ll be using that mode here. Select your Gradient tool (part of the Paint Bucket Fill tool if that’s already selected) and make sure the top toolbar looks like this:

Gradient Toolbar

These settings mean: 1) Foreground->Transparent gradient type, 2) Linear gradient orientation, 3) Normal mode, 4) Full opacity to start, 5) Transparency is turned On. The two most important are the first and the last: make sure that Foreground->Transparent is selected, and that your gradient is free to turn transparent at the end.

The gradient tool works by dragging a line across the area you want to apply the gradient. In a normal, linear, FG->TRANS gradient, your foreground color will start at your first point and will become transparent by the end point. The longer your line the smoother your gradient will be, but if it’s too long then it’s difficult to see the gradient at all. I normally make my gradient line about 10° past vertical, leaning towards the upper left, because you’re trying to emulate a top-left light source in all user interface design. Varying the length of your gradient, the degree tilt, and the placement of the start will allow you to tweak various parts in order to get it perfect. Here’s a screenshot of my gradient, with the start and end points indicated:

Start and End

And that’s it! Here are some review points:

  • Make it subtle, not drastic.
  • Keep your color intact, don’t lose saturation.
  • Use multiple layers for maximum flexibility, combine after you’re fully satisfied.

Happy gradienting!

  1. Adobe4U » Hand Colected Photoshop Tools Says:

    […] Gradient Tutorial […]

  2. Style tables with CSS - Friendly Bit Says:

    […] easy way to make tables look better is to add a subtle gradient to the cells. That’s easy to do. But make sure you also set a background color with one of […]

  3. Piratentunten Blog » Blog Archiv » Der perfekte Farbverlauf! Says:

    […] clipped from 9rules.com […]

  4. Piratentunte Says:

    Super Tutorial, hab es direkt in meinem Blog veröffentlicht, weiter so! 🙂

  5. Where’s Marty? : barrelmaker.us Says:

    […] found this site, The Big Noob, today reading the commentary on a clean and simple Photoshop gradient tutorial. The blog and company seem pretty cool and the site design is very pleasing and crisp with good use […]

  6. Adobe4U » Blog Archive » Web 2.0 Tools/ Photoshop Tutorials Says:

    […] Official Blog – Gradient tool […]

  7. Nike Dunks Says:

    A very useful post. I am a designer by virtue of the fact that I learned how to use the image programs the quickest. I have an eye for design, but these very basic things which some people see as being obvious are very easy to miss out, particularly when you have had no formal education on the subject.

  8. Web 2.0 Design Tutorials « Hone Watson Bookmarks Says:

    […] 9 rules gradient tutorial. […]

  9. website design Says:

    A far simpler way of creating a gradient with increasing saturation (in Photoshop) is to simply pick a single base colour and then overlay it with a gradient between 100% white, 100% opaque, and 100% white, 0% opaque, in a separate layer. Set this layer’s mode to either overlay or colour dodge and then fiddle with the layer fill transparency (particularly in colour dodge, which will likely lead to over-saturation artefacts with bright base colours).

  10. Richard’s Blog » Blog Archive » Web 2.0 Generators & Resources Says:

    […] 9 rules gradient tutorial. […]

  11. 71 Gradient Resources for Web Design | Vandelay Website Design Says:

    […] A Gradient Tutorial from 9rules. […]

  12. Booto’Blog » Blog Archive » 71??????? Says:

    […] A Gradient Tutorial […]

  13. 18 Gradient Resources for Web Design | D-namic Says:

    […] A Gradient Tutorial from 9rules. […]

  14. Volkan Says:

    Very nice tutorial.

  15. Yonca E?itim Says:


  16. Neue Website mit Konzertfotos - bandpics.ch - Musiker-Board Says:

    […] Link Standardfarbe. F?r Verl?ufe schau’ mal hier vorbei, das ist ein gutes Tutorial (englisch) ? 9rules – A Gradient Tutorial 3. Nein, die Spalte nervt nicht. 4. Schicker als der Rest, schwarze Schrift auf blau geht aber […]

  17. I dettagli che contanto: tecniche “pixel popping” per i vostri layout - Francesco Gavello Webdesign Portfolio Says:

    […] A Gradient Tutorial […]

  18. Plagi Says:

    I’m just started with design and gradients can be quite tricky when you loose saturation.

  19. jordan Says:

    I think its fantastic to use gradient. Great tutorial! I like to add a darker layer on top of that.

  20. Brainsick Patterns — No Code Relation » Article » The Science of Gradients Says:

    […] “A Gradient Tutorial” on the 9rules site actually explains some finer points of gradients and it struck a chord with me.  I cannot tell you how many times I’ve made drastically contrasted gradients and been sorely disappointed with them — this article fills the gaps. […]

  21. ADGA Intro to Web Design » Blog Archive » Tutorial: Making a gradient background Says:

    […] Making an effective gradient background […]

  22. marjet Says:

    Problem with gradients for big surfaces; close look shows stripy graduation

    As a public space designer I print big surfaces (100m2) with ‘shadow looks’.
    I noticed that when i look closely to gradients, even with the above tutorial, the gradient is not really gradually; its a bit stripy. I have no clue how to fix it.
    I prefer to use a layer mask with gradient to fade my shadows, but it could be also a direct layer. I hope somebody knows the trick!

  23. 9 Things You Can’t Forget When Designing a Blog - Barker Design | Graphic & Web Development Says:

    […] A Gradient Tutorial […]

  24. Tudo sobre wordpress Says:

    […] A Gradient Tutorial […]

  25. 9 Things You Can’t Forget When Designing a Blog « Tudo sobre wordpress Says:

    […] A Gradient Tutorial […]

  26. David Smith Says:

    Thanks for the great tutorial.

    Can you qualify/elaborate upon your comment:

    “…you’re trying to emulate a top-left light source in all user interface design.”

    I’m not sure why this should be so….

    Many thanks,


  27. Johnny Says:

    Really simple and easy tutorial for beginners. I’ve seen the problems you’ve mentioned such as the unsaturated gradient, so hopefully this will help to abolish that.

  28. jordan Says:

    If you’re a basketball player or basketball fan, I think you must have a good jordan shoes(or called air jordan shoes). The reason is known to everybody, not only beacause jordands shoes is a famous brand all over the world, but also there are many kinds cheap air jordans at the shop. At the same time, the cheap jordans are all good quality and beautiful. Mainly because cheap jordan shoes are also popular around the youngers. So, do not hesitate go to buy cheap jordans for yourself.

  29. street lighting Says:

    Click on the foreground square to bring up your color palette, and then select a secondary color that is lighter and slightly less saturated. Keep your second color close to your first,Bing is a really overlord!! support Bing~~

  30. Julie Stoddard Says:

    Very nice! I just tried it using your techniques. It’s good to know how such a small change can have dramatic results.

  31. 9 Things You Can’t Forget When Designing a Blog | Tutorial9 Says:

    […] Next Website Design PopLoads of great tips on those subtle visuals that will polish your design.A Gradient TutorialSome great tips on the proper use of gradients and some common problems new designers have.Texture […]

  32. Max Howell Says:

    You say “don’t lose saturation” at the beginning and the end and then your example loses 6 or 7% saturation! I guess it should be “lose some saturation, but be very cautious as it can be detrimental.”

    Unless I’m missing something about the effect of applying the gradient as highlight->transparent.

  33. Tenny Says:

    Nice tutorial, really helpful points

  34. shoaib hussain Says:

    Even a novice like me can understand what you’re talking about ,I have been slicing pictures to get the gradients,now I know how exactly to make one .thnx a lot

  35. 78+ Awesome Gradient Resources for Web Design | Son Of Byte - Web Design & Development Says:

    […] A Gradient Tutorial from 9rules. […]

  36. Valentine Pierce Says:

    Liked your gradient tute and have published your link on my blog.

Leave a Reply