CODEWITHSUNDEEP
htmlcss
Warre Buysse
Warre Buysse

Reputation: 1345

Double text shadow on p element in CSS3

Is it possible to apply two text-shadow values on one p element with CSS3? I want to create a very light black background with a 1 pixel border.

Something like this:

text-shadow: 0 0 55px black; (very light black background to increase white text readabilitiy)
&
text-shadow: 0 1px 0 rgba(0,0,0, .25); (one pixel black drop shadow)

Upvotes: 8

Views: 24246

Answers (2)

Eng-Amir
Eng-Amir

Reputation: 80

You can try using this code :

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

REF : CSS SHADOW TRICKS

Upvotes: 3

SW4
SW4

Reputation: 71150

You can simply seperate the shadows with a comma:

text-shadow: 0 0 55px black, 0 1px 0 rgba(0,0,0, .25);

Demo fiddle

You may want to have a look at this article on MDN for further information.

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element.

Each shadow is specified as an offset from the text, along with optional color and blur radius values. Multiple shadows are applied front-to-back, with the first-specified shadow on top.

Upvotes: 21

Related Questions