light text shade with CSS 3

Question

Is it possible to have the same text effect (inner shadow, shade) as this image:

Light shade text image preview

using CSS3, and how?

Try [this](http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/) or [this](http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/) — Harry Joy, Jul 28 '11 at 13:30

Pindatjuh · Accepted Answer · 2011-07-28T15:52:14.740

7

Example image on WebKit

WebKit-only (Safari/Chrome):

<style>
    h1 {
        background-color: rgba(0,0,0,0.8);
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0 2px 2px;
    }
</style>
<h1>Hello StackOverflow</h1>

Here you can see above snippet in JsFiddle: http://jsfiddle.net/HkTqe/6/

Firefox & WebKit:

<style>
    .trick1 {
        color: black;
        height: 2em;
    }
    .trick2 {
        color: transparent;
        text-shadow: rgba(255,255,255,0.8) 0 5px 5px;
        margin-top: -2em;
    }
</style>
<div class="trick1">Text in Light Shade</div>
<div class="trick2">Text in Light Shade</div>

Note that you must have two div's in that order, with the same textual content; else it won't work.

Comparison of both techniques: http://jsfiddle.net/bABuM/

edited Jul 28 '11 at 15:52

answered Jul 28 '11 at 13:39

Pindatjuh

10,550
1
41
68

No.. Fiddle didn't change. What browser are you using anyways? Chrome right. That's great, but look at it from FF and then forget about this method, as being not very browser-compatible. Though, I will give you vote up, since the question did not specify the browser-compatibility. – Kalle H. Väravas Jul 28 '11 at 14:48
Ok the first one does. Good job! – Kalle H. Väravas Jul 28 '11 at 15:25

score 1 · Answer 2 · edited May 23 '17 at 09:58

1

Not really, but you can try various almosts. See this post for lots of examples:

edited May 23 '17 at 09:58

Community

1
1

answered Jul 28 '11 at 13:32

sqwk

1,506
2
12
13

Thanks, but i does not give the same text effect that i want. – Neri Barakat Jul 28 '11 at 13:35

score 1 · Answer 3 · answered Jul 28 '11 at 14:05

You could also create it using -webkit-mask-image - but it will again work only in webkit browsers. You need to crate the transparent cloudy image in prohotshop (the way you want it to look - i just did a render/clouds and transformed it using aplha channel - by tweaking it a bit you could achieve the same looking effect as in your design) and than apply it as mask and clip the mask to text. Webkit is wonderful for this but sux since it's not supported in all browsers.

Creating that exact same effect with css3 is currently not possible

http://jsfiddle.net/easwee/VMSD6/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    h1 {
        font-size:50px;
        font-weight:bold;
        font-family:Arial Black;
        color:#666;
        -webkit-mask-image:url("mask.png");
        -webkit-mask-clip:text;
        background:black;
    }
    </style>
</head>
<body>
<h1>SAMPLE TEXT</h1>
</body>
</html>

light text shade with CSS 3

3 Answers3