Anvar Freelance Web Designer and SEO Expert Logo
01 / 01
WhatsApp Logo +91 808 999 0405

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>

Preview

Hello World !

 

by anvar
Published : Feb , 25

Post a comment

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