How to add 3d effect with css

With the help of CSS3 you can add shadow to text and to elements. You can simply add the 3d effects it’s a good way
CSS Code

h1 {
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 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);

And you can insert this in the html tag or class
Html Code

<h1 class="h1-3d">Hello World !</h1>


Hello World !


Leave a Comment

WhatsApp Logo Chat