how to create 3D Text Effect Using CSS3

The css3 properties gives Designers a wonderful chance to magnify their designs in quick and easy way. CSS3 helps to give style to design including various effects in text or typography. so in this tutorials i am going to show you how to create 3d text using to text shadow properties that is supportd by most of the browser as well.
you can copy and paste for your own work.

let’s start html with simple h1 tag. you can use class, id and what ever you want.

<h1>Hello Readers</h1>

Here is some fairly simple CSS for ‘inset’ shadow –

/*import custom font*/
@import url('https://fonts.googleapis.com/css?family=Pacifico');

body{
      background:#a4d914;
}

h1 {
      color:#fff;
      font-size:100px;
      font-family:'Pacifico', cursive;
      Text-align:center;
      Text-shadow :0 1px 0 #ccc,
                  0 2px 0 #c9c9c9,
                  0 4px 0 #b9b9b9,
                  0 5px 0 #aaa,
                  0 6px 1px rgba(0,0,0,.1),
                  0 0 5px rgba(0,0,0,.1),
                  0 1px 3px rgba(0,0,0,.3),
                  0 3px 5px rgba(0,0,0,.2),
                  0 5px 10px rgba(0,0,0,.25),
                  0 10px 10px rgba(0,0,0,.2),
                  0 20px 20px rgba(0,0,0,.15);
}

Here’s the result of this code

text-shadow

I hope you will enjoy this article.
Happy coding 🙂

Share
Shares 0

2 thoughts on “how to create 3D Text Effect Using CSS3”

  1. Char says:

    Gee wiklliers, that’s such a great post!

  2. Pingback: CSS3 Text Effects: 20+ Beautiful & Creative CSS3 Typography | csshint : A Designer hub
  3. Trackback: CSS3 Text Effects: 20+ Beautiful & Creative CSS3 Typography | csshint : A Designer hub

Leave a Reply

Your email address will not be published. Required fields are marked *