Freelance Web Designer in Dubai & SEO Expert in Kerala
01 / 01

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

<style>
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);
}
</style>

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

<h1 class="h1-3d">Hello World !</h1>
by anvar
Published : May , 9

Post a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp Logo Chat
design specialist