You are here: Home Brand Web Gradients & Shadows

Gradients & Shadows

by Faust,Brian last modified Jan 25, 2012 04:04 PM

Visual enhancements to add subtle depth and character

Gradients

The UofL brand is primarily clean and crisp. However, there are instances where the use of gradients is beneficial. Below are several suggestions for using gradients effectively in web design:

  • Subtlety is key. Color transitions should be slight and elegant. Large tonal shifts are distracting. Example: Red to black is too dramatic a shift. Consider using a dark red (660000) to the UofL Red (AD0000) instead.
  • Matching directions. Do not mix radial and linear gradients unless you know what you're doing, as gradients should be used to mimic real-life lighting situations.
  • Highlight, not distract. Gradients should be used to draw the viewer's eye inward to a certain object. Gradient use should never be distracting or confuse the viewer's eye.
  • When in doubt, don't. Correct use of gradation is difficult and when done poorly reflects negatively on the university. Consider using flat colors if you are unsure of how to handle gradients properly.

Examples

The UofL Homepage shows how a barely noticeable radial gradient can help lead the eye toward a particular area of the design.

 

Shadows

Shadows (behind text or shapes) are another effective way of creating the illusion of depth on the web. Much like gradients, use of shadows is difficult to achieve correctly. Below are several suggestions for using gradients effectively in web design:

  • Careful with color. When placing shadows behind text, consider using a slightly darker color of the background from which you're trying to separate the text. The default black shadow color can often be too harsh.
  • The busier the background, the better the justification for using shadows. Since shadows visually separate "layers" of a design, consider only using text shadows behind text that is overlaid on patterns, gradients or photographs.
  • Watch your global light. Mixing multiple drop shadows in a design can be difficult. Since shadows mimic real-world lighting situations, make sure you have an idea of where your virtual light source(s) originates so that you can coordinate shadows behind multiple objects and create a realistic shadow situation.

Examples

Subtle text shadows and drop shadows on shapes combine to create depth without being distracting or attention-grabbing.

 

CSS or Image?

Creating gradients and drop shadows can be achieved by way of multiple methods. However, using CSS to achieve these visual effects is more effective and preferred.

Image-based effects add unnecessary size and download time to every page. Consider mobile users and those on slower connections; use CSS properties and browser-friendly markup to achieve the same effect in a lighter, smarter way.

Document Actions
Personal tools