30 Examples Of CSS Text Shadows Out In The Wild
Nicole Dominguez
CSS Text Shadows can create a variety of different effects on a website,like being able to create depth, dimension, contrast and so on just with the plain CSS code. Using images to show letterpress effects or text shadows are beginning to be a thing of the past in Web Design. This is new trend in Web design and if you are not using it or are not aware of it you definitely need to see those best examples and start to use these features in your own designs! In order to continue check out – 22 Advanced CSS Text Effects And Web Typography Tips.
Here is a showcase of beautiful websites using CSS to recreate what image editing programs can do.
1. atebits
2. NotePad Theme by N.Design Studio
3. Tapmates
4. Made by Tinder
5. Adii Rockstar
6. Squarespace’s Blog
The blog at Squarespace uses text shadows in headlines to make them stand out from the rest of the page.
7. Abduzeedo
8. Tim Van Damme
9. Mint
10. Anderbose
11. Northstar Web Design
12. Bright Kite
13. CSS Bake
14. Mark Jardine
15. 280 North
16. Square Space
17. Neutron Creations
18. Fuel Brand Inc.
19. Ross Brown
20. Tapbots
21. Spaceship Collaborative
22. Melissa Ward
23. Tri Vuong
24. Ordered List
25. Anton Peck
26. Meta Lab Design
27. Suciu Vlad
28. Matt Pruitt
29. All Dev Jobs
30. Flyosity
Can you think of any more websites using CSS text shadows? Let us know in the comment section below!
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
baidu
Posted 154 days ago 21A subject close to my heart cheers, ive been thinking about this subject for a while.
Reynolds Web Design
Posted 227 days ago 20CSS text shadow is great fun, it can really make a site stand out so try to use it where possible. Thanks for the inspiration.
Ruben Berenguel @mostlymaths.net
Posted 242 days ago 19I use them in my blog for the first capitalised letter in my posts, inspired by the same effect in litemind.com.
Cheers,
Ruben
Wombat Web Design
Posted 266 days ago 18Thanks for the inspiration it just goes to show how simple changes can transform a site.
Porinterne
Posted 323 days ago 17I am surprised by the possibilities of CSS. I love changes in the texts with shadow effects.
ertan
Posted 377 days ago 16very nice collection,
css shadows are useful, sometimes very effective.
thank you
Lisa Thomason
Posted 527 days ago 15Great, have got some good ideas from this. LT
Phil
Posted 531 days ago 14It’s amazing how big a difference such a subtle effect can have, some of these examples are excellent, although keep it away from the body text!
Creare Design
Posted 688 days ago 13Thank’s for the inspiration, after seeing those we’ve just added CSS 3 Text Shadows to our homepage, take a look at the homepage navigation and the 4 coloured tabs under the flash. All the Headings have subtle shadows to help the text stand out.
.-= Creare Design´s last blog ..Web designers guide to CSS3 =-.
Hoxxy
Posted 703 days ago 12Great post with some great effects.
Hoxxy
Posted 703 days ago 11Nice list, I’m slowly succombing to CSS3 and have recently added textshadow to a design im working on and with cufon aswell its great.
Before I was just to worried about getting my designs to validate 100% but I guess with CSS3 its not going to break anything but only inhanse designs for those that use relevant browsers …:)
Jasmin Halkic
Posted 709 days ago 10http://www.livingforart.com/ too :P
John Phillips
Posted 714 days ago 9I used a bit of text shadowing on my new site: http://justpressrecord.com/
sriganesh
Posted 714 days ago 8came to know some shadow effects :D i know only from adudeezoo
Melody
Posted 714 days ago 7Shadows are so subtle, but sometimes so necessary!
.-= Melody´s last blog ..Understanding Color Meaning In Sexy Design =-.
Alex C.
Posted 715 days ago 6Great examples! I’ve used text-shadow on my website as well! It’s a really useful CSS3 effect! Too bad it doesn’t validate, yet!
valiant
Posted 715 days ago 5I’m blown away by how simple changes can transform a site. Tinder and Mark Jardine are my favorites on the list.
I can see it already becoming a little overused. All over body copy in an entire blog, really? But that’s perhaps not stepping back from it–who didn’t think lens flares were SO AWESOME the first time they found Photoshop?
Ricardo
Posted 715 days ago 4text-shadows are one of the most abused CSS3 features. Please keep it away from your body text.
SJL Web Design
Posted 715 days ago 3Some really nice examples of CSS text shadow, Such a nice little effect. My favourite from this collection is the tinder website.
Thanks for sharing.
.-= SJL Web Design´s last blog ..Our Top 10 Web Design Tools =-.
Codesquid
Posted 715 days ago 2These are some really nice effects! I have used text-shadow myself with some great results in a few sites.
.-= Codesquid´s last blog ..CSS3 rainbow =-.
Maris
Posted 715 days ago 1Great read! I have also started to use CSS shadows recently – looks great in designs!
.-= Maris´s last blog ..Create Tilt-shift Miniature Effect in Photoshop =-.