Adding shadow to my text?

Question

Can anyone please help me to add shadow to this: http://jsfiddle.net/qzeohf20/3/

.rainbow {
    font-size: 35px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 10px;
    font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', 'sans serif';
    background-image: -webkit-gradient( linear, left bottom, right top, color-stop(0, #C6781D),  color-stop(1, #D1B72D) );
    background-image: gradient( linear, left bottom, right top, color-stop(0, #C6781D), color-stop(1, #D1B72D) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-style:
}

And is it even possible?

I have already tried this: text-shadow: 1px 1px #000000;

mmgross · Accepted Answer · 2015-02-28 16:25:53Z

It is possible, but I guess the result is not what you expect. With -webkit-background-clip: text; you actually cut put a piece of the background in the shape of your text and with color:transparent you make the text itself invisible.

So what you see here is actually the background. That means, if you add a shadow, that shadow will be rendered above your text.

You can get around this, by stacking 2 divs: The bottom div will be responsible for creating the shadow while the top div will add the gradient.
updated fiddle

Some additional things:

-webkit-background-clip: text;
background-clip: text;

There is no value text for the background-clip property. This is just a proprietary solution in WebKit browsers, so what you want will only work in those.

your last line is font-style: Apparently you forgot to add something there. Either give that property a value or delete the line.

Majid Sadr · Accepted Answer · 2015-02-28 16:30:42Z

0

it is possible with jquery:

$(document).ready(function(){
  main_width = $(".text").width();
  main_text = $(".text").html();
  $(".text2").width(main_width);
  $(".text2").html(main_text);
});

and now you can define your second div in css with a normal style behind your text div.

answered Feb 28, 2015 at 16:30

Majid Sadr

1,10110 silver badges19 bronze badges

Collectives™ on Stack Overflow

Adding shadow to my text?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related