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!

Step 1

Open Photoshop and create a new document 1000x800px. Use radial gradient to add background as the picture below.

Use RGB color : #051601 and black #000000.

Step 2

Now write some text in the center of the document, I used verdana font,207pt, text “Natural” – no matters which color You use, we won’t be using it anyway, just shape of it. After that increase tracking between the letters, by selecting all text and using CTRL+ Right arrow or CTRL + Left arrow to decrease. We do this so later we could more easily see the text, while it’s covered with brush.

Step 3

So let’s use now letter shapes and convert it to path. You can bring up paths panel – Windows–>Paths. Right click on the text layer and choose option Create Work Path. Hide now Natural text layer, create new layer with commands CTRL+SHIFT+N. Your result should look like the same as in the image below.

Step 4

Ok, now select brush tool, I wanted to create natural effect so pick any of those natural and floral brushes, I used Suddenly Spring beautiful brushes, download them, just double click on the *.abr file to get brushes loaded into the photoshop. Now press B(brush) and F5(to get brush panel). I added roundness so the brush would rotate along the path. Use brush size ~60px

Step 5

And now with the new layer selected brush stroke the path. After that with CTRL+H switch off path outlines.

You should be result like mine, so in the next step in the blending options we will be changing colors to get natural effect:

Step 6

In the blending options select Gradient Overlay, change rotation angle to 0 and add gradient with these options:

Your outcome should look like mine now, looks pretty cool already? :) :

Step 7

In paths panel, delete natural text path or just create new path.

Now lets add some more effects, select pen tool and create path through the letters like me:

Now switch to the brush panel pressing B button and then F5 to get brushes panel.

Use 7px soft mechanical brush and add the same settings as in the images:

Okay, now again switch to Pen tool(P) and right click on the path–>stroke path:

Now right click again on the path and click delete path.

Step 8

Change the color and add outer glow in the blending options, to maximize the effect. I used these settings:

Outer glow: #45ff13

Color Overlay: #d1fad1

Step 9

Select Eraser tool (E) and erase parts like in the picture below:

Step 10

Download this grass image and paste it in the document above the background and set blending to overlay, resize it to fit Your needs.

This is finished result, I hope You will find this tutorial and method useful for Yourself.

Download *.psd version to compare the result! Hope You enjoyed this one too!

Click on the image to view it on the full size.

Download PSD version