< CSS Text Shadow />

5
(1)

Regular text shadow:

p { text-shadow: 1px 1px 1px #000; } 

Multiple shadows:

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; } 

The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

Also, remember you can use RGBA values for the color, for example, a 40% transparency of white:

p { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); } 

Did this help you?

Average rating 5 / 5. Vote count: 1

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on print
Print

Did this help you?

Average rating 5 / 5. Vote count: 1

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Justin van lier

Justin van lier

I am a self taught Software Engineer with experience in managing and developing game servers, websites, applications & backend systems. I began to work on a professional level since April, 2014. I'm always excited to teach people about Computer Science and the advantages that come along.