there are many examples of text-shadow effects on the web but only for very large text or particular background/foreground colours.

I've tried creating an engraved effect or a 3D effect (I really like this one) but I never got something that looked conclusive and I think it has to do with the size of the text because you can't have so many shadows. If you zoom in however the effect is revealed.

Here's my current CSS:

        h1 {
            background-color: #eeefee;
            color: #001d8c;
            font-size: 25px;                
            text-shadow: 0px 1px 0px #CCC, 0px 2px 0px #AAA, 0px 3px 3px #666;

and what it looks like: (effect is not obvious, harder to read, maybe even a bit dirty) enter image description here

What values should I use to get a good effect ?

  • Well for one I find this question a bit odd considering your "3D effect" link because it has Get code button which allows you to create same exact thing by just embedding the code in your site and applying it to the right element. So, if that was the effect you liked.. aren't those the values to get a good effect?
    – Joonas
    Oct 26 '11 at 6:26
  • @Lollero like I said it's for very large text, it has 8 shadows - apply them to smaller text and it just doesn't work. Oct 26 '11 at 7:01
  • "apply them to smaller text and it just doesn't work" = that's pretty much your answer. Shadows on text make most sense for display faces...no so much on body copy.
    – DA01
    Oct 26 '11 at 13:26

The difficulty here is that you're asking the wrong question. In fact, it's wrong twice over, because it's also unanswerable. There is no one answer to "What values should I use to get a good effect?" because it depends on what effect, at what size, on what background.

That you ask for values, rather than a technique, tells me you've not fully grasped what you are trying to do: emulate the appearance dimensionality in the real world. There is no substitute, then, for observing real objects and real embossing closely.

The illusion of dimension is created by light and shadow. In the real world, highlights and shadows tells us about the shapes and textures of things. Light, to look natural, has a dominant source that illuminates from a single direction, like the sun. Your 3D or embossing effect, then, has to be consistent, with the highlights at one angle and shadows at the opposite (180 degree) angle. If your highlight is 1 px up and 1 px left (a 45 degree angle), then your shadow must be down and to the right at a 135 degree angle. If these angles aren't exactly complementary the illusion is broken and the effect is hokey.

The size of the highlight or shadow indicates the distance, height or depth of an object, and the gradient (or lack of one) at the edge communicates roundness in an object, the relative size of the light source, or distance of a shadow.

The bottom line: you have to look at the real world and copy that. Highlights and shadows are not arbitrary.

On the web, you are limited by the fact that the smallest increment you have is a single pixel. A 3px-wide gradient highlight or shadow on a large letter can make it look slightly raised, but on 18px text will most likely look like an unnatural glob. Worse, it will also impair the readability of the text -- a far more important consideration.

  • I named 2 effects, linked to examples and provided my own code and screenshot with size and BG. I also named the technique: text-shadow CSS property. I as well already figured out how shadow works IRL when I tried to get a realistic effect. My question is can I get a realistic effect on that particular size/color ? if not how can I get rid of the flatness and bring some dimension to the main content ? Oct 27 '11 at 1:51

If you are looking just for a 3D effect you can use Mark Dotto's technique! but in general you can find various effects just Googling "CSS Text Shadow effects". Some of the good ones on Design Shack! This is just for a quick use, but Alan's Answer is probably what you're looking for in terms of learning what and why some values are a good shadow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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