Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've always liked the look of inset text on web pages so I try to use it every now and again. (Sparingly and when appropriate).

I always find it a bit of a chore to find the right blend of colours between the background colour, the text colour and the text shadow colour.

I was wondering if anyone has come up with a hard and fast rule to make choosing the correct colours a little easier?

i.e. something along the lines of: the text colour should be 20% darker than the background colour and the text shadow should be 10% lighter than the background colour.

share|improve this question

The rule is that there is no rule. You need to follow your eye and trust what you see. There are even some instances where you might use a purple shadow on yellow. I don't advise it, but it can be appropriate.

The other obvious problem with a rule is that it will break at the ends: how do you highlight pure white or cast a defined shadow on pure black?

Whatever you do should probably be consistent on the end product, but there is no need to be consistent from site to site (brand to brand etc)

share|improve this answer

I'm not entirely sure whether you mean "debossed" or "cut out". Either way, there are a few things to keep in mind:

  • A shadow takes on the color of what it falls on, but is often shifted a bit toward blue. This is a built-in expectation from daylight: shadows are lit by blue sky.

  • Translucent materials lend their color to the shadow, because they filter the light.

  • If you are creating the illusion of colored light, the shadow does NOT take on the color of that light if the material is opaque.

  • Darker shadow and harder edge for small "distances" between the face and the cut out text; less dense shadow and softer edge if the text is "deeper."

  • Text color and shade depend entirely on the mood you're trying to create. Same as foreground (background?) gives a peaceful, quiet mood. Strong contrast delivers a more dynamic message. Which you need in a particular project depends on the context.

Just as a general point, any time you are trying to create an illusion like this, your first action should be to go look at (or make) at examples in the real world. Observation is the ultimate teacher.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.