Create flat design shadow in Photoshop and in CSS3

Creation of flat shadow is an essential element to create a flat design elements look more upgraded.In this post I am going to describe two ways to create flat design shadow.First is in Photoshop using a simple action.Second is by using a online CSS3 shadow generator.Lets start:

Photoshop

To start with Photoshop first download the resources and let me tell you that I've just created a demo logo to demonstrate the flat long shadow in Photoshop.The version that I've used is CS5 Extended.

Read More:Create metro style banners using photoshop

Resources

• Ready PSD file.
• Photoshop Action.

Download

Steps

This is Logo we need to apply shadow.

Now select the text layer and apply the shadow action by selecting and then click on play button on bottom.

Now as you can see the layer is below that is why shadow is not visible correctly.Drag the shadow layer to below the text layer.

After dragging the layer apply the action on outer box too.

Now as you can see the shadows are overlapping so hold alt and click between outer box layer and text shadow layer so that the text shadow layer will lock under the outer box layer.Then it will be visible correctly.(Finish image is at the top of the post)

CSS

To create shadow for web,use CSS3 text shadow property.The online tool that is used is juan-i.com.You can do it easily just you have to make sure that the colour of the background you are using is should be as the same of the site background or else it won't work good.

This tool uses the CSS property that is text-shadow and is it multiple times.To know how to create multiple text-shadow click here.