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); }
For ‘shadow’ use black eg: rgba(0, 0, 0, 0.4);
Sometimes you need a white shadow for more contrast with the background
i wish i had coda.. (i have windows)
Use SublimeText! : )
http://www.sublimetext.com/
I am a windows user and use Brackets, an Adobe open-source project. Its simply awesome and gives a great coding experience.
Download it at http://brackets.io
The Coda clips addition is a great feature Chris. Thanks.
Love the coda snippet feature. Very nifty.
Great job Chris! Loving the Coda addition.
Oooh! Nice. And lovin’ Coda even more.
Thanks!
AWESOME! Yet another great feature to the site!
Just another great reason why Textmate owns.
Why doesn’t Firefox support CSS text shadows? Is there a workaround for FF?
How about a double – punched out text effect,
text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5), -1px -1px 1px rgba(0, 0, 0, 0.7);
All text-shadow works in FireFox, this works in FireFox also?
Firefox supports text-shadows just fine, and has for a long time now. It’s Chrome they don’t show up in for me. It’s not a Webkit thing either. I get text shadows in Safari, just not Chrome. Webkit seems to have a problem with CSS transitions that I don’t have with Firefox.
Firefox latest does support it.
You may have to use -mozilla-text-shadow. (Not sure though.)
For firefox, just add a copy of those lines and replace “text-shadow” with “-moz-text-shadow”.
Or you can modernizr.js plugin it can add support to any browser for all css attributes and selectors
Is there a way to be able to achieve this effect while still having valid CSS(2.1, I know it’s valid in CSS3, but I need it for CSS2.1 as well).
ya ofcourse u can do in css 2.1 itself.. cheers…
nope -moz-text-shadow doesn’t work
When using multiple shadows… are they rendered in the order they are listed? For example, if I have a 1px shadow could I accidentally cover it with a 3px shadow because I listed them in my CSS in reverse order?
isnt there any other way of using colours in the website codes without typing the color codes. e,g using the name of the colour like red instead of something like this #FFFFF
Scott, you can use names of colors. Just use the name of the color in place of the hex value. The color “blue” is even used in this text-shadow example.
You can find a list of supported CSS color names here:
http://en.wikipedia.org/wiki/Web_colors
Grazie per l’articolo, non puoi immaginare quanto mi sia stato d’aiuto!
Complimenti per il sito!
Hello
Be aware that setting css3 text-shadow will affect the anti-aliasing in google chrome on windows.
Make a try if you are using Microsoft windows and you will see that in chrome fonts are ugly if you use css3 text-shadow.
check the bug report in the Google chrome help forum”.
And by the way, thanks Chris for sharing your knowledge.
Great!!!
But it is not a valid property……
This is nice to know. I have used it once or twice now.
Finally! I find a straight forward way to use drop shadow with css. I’m a newbie so I appreciate your post. Thank you
props on the fools and horses reference :)
Thanks for this Nice thread ;)
I’m playing with it but I’m little confused about inner shadow!
Is it possible or any way to use inner-shadow?
Nice Tutorial!, The text-shadow property really rocks.
Okay, I’ll speak my friend…..
Hmmm….. you should show the demo page, so the other user can see what the exact goal of the article you write.
good tutorial, its really helpful for my website.
thank you
Its not working on explorer.
But grate post
how i can do it to works in IE?????
Perfect! Thank you so much. I’m assuming no support for IE? Surprise surprise.
Thank you sir.
Here’s an example to brighten up your day – my own text shadow rainbow effect…
Absolutely of no use at all, but I like it.
I agree, the rainbow text is beautiful!
Useless yes. But still beautiful :)
I think we can make this more browser friendly by attaching browser names in front of property like ::
-webkit-text-shadow:0px 0px 10px #333; /* for chrome */
-text-shadow:0px 0px 10px #333; /* for all browser*/
text-shadow:0px 0px 10px #333; /* same as above*/
-moz-text-shadow:0px 0px 10px #333; /* for firefox */
-o-text-shadow:0px 0px 10px #333; /* for opera */
-ms-text-shadow:0px 0px 10px #333; /* for ie 9+ */
-khtml-text-shadow:0px 0px 10px #333; /* for gecko based browser*/
and thats all
Thanks man. Your code helped me alot. I appreciated that! ;)
@kishan sharma.
Make sure the “standard” property is the last one you use.
“text-shadow:….” should be after all “browser specific properties”
This way when a browser finally implements the property standard, it uses it.
@Isaac Designer
You can go to http://fetchak.com/ie-css3/ and download ie.htc file in root of ur server and then you can enjoy text-shadow in ie 5 also
also you can use
p
{
zoom: 1;
background-color: #cccccc;
filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}
<p>Catpops Design Shadow goes here</p> if you still dont wanna use ie.htc file chroma and zoom will do all your required editing good luck
nice site anyway. ;)
@Charles Bodman
Thanks for awsome note sir ya i do agree good point
No more coda snippet feature?
Heu Louis take a look at http://css3pie.com/. Its a nice lib that allow using most CSS3 features on IE using and .HTC solution. It work nice and is one of best solutions i have seen for now.
Reggards from Ccss-tricks, continue posting
Thank you very much. This article help me alot to complete a CSS3 project. I also thankful to @kishan sharma for the codes provided for other browsers. Thank you for sharing.
Newbie here… how would you do this to a single word within a paragraph of text?
@Kevin
Add a span around your word using the text shadow property. For example:
<p>This is how to apply a text shadow to this <span style=”text-shadow: 1px 1px 1px #000;”>word</span></p>
Though you would probably create a class for this and include it in your stylesheet instead of having in the HTML.
i also had this problem with firefox
but kishan solution was really useful and works
thanks kishan
Nice, text-shadow property….really it’s awesome.
moz-text-shadow doesn’t work
Brilliant, thank you!
My Firefox works with text-shadow, shame even ie9 won’t play though.
This is so great! With a little more experimentation I made some more elaborate styles using the text-shadow property. You can see them here, Extruded Styles and Elegant Styles.
IE 10 now supports text-shadow !!!
Finally
Cheers’
This works well for large text. I’m going to use it of article headings that link to the article.
check out other css3 text-shadow effects, and text board with text-shadow
http://jignesh2882.wordpress.com/2013/06/03/text-shadow-using-css3/
Thanks a lot! Can make buttons look a lot better now.
Text glow effects can be achieved like this :
text-shadow: 0 0 10px #c61a1a;
Create a raised text effect with this code
Can see a detailed demo
here
I saw a shadow once. It was dark. I was scared.
Very nice good job.. i am really thank full to you all guys… thanks.
Example
Basic text-shadow:
h1 {
text-shadow: 2px 2px #ff0000;
}
label { text-shadow: 1px 1px 1px #000, 4px 4px 4px red; }
No company shifted quite sufficient Hess אחסון אתרים וורדפרס Israel from 5 per month .All appropriate web hosting packages owners of WordPress sites, image site, and Irtaolit store, e-commerce, portal and more.
In addition, the company shifted quite hes no specialized Peron Intentia business owners such as advanced virtual server rental, domain registration and packs boxes.
Mail under the domain name of the business.
No ace diverted enough – Hostdns.co.il –
I’m a newbie at this so how would I add a shadow to a single word within a paragraph? It would be a big help.
Try wrapping that word in a
<span>
and adding the shadow to it.For example, in your HTML:
Hello <span class="text-shadow">World</span>
…and in your CSS:
.text-shadow: {
text-shadow: 3px 3px 3px #333; /* or however you want to style it */
}