3D Box Shadow Effect Using CSS,CSS3 by #BKTutorial

Source Code:

<style>

body{

margin:0px;

padding:5vw;

font-size:1.02em;

text-align:center;

}

div.bktshadow{

background: linear-gradient(to top right, #02aab0 44%, #00cdac 73%);

padding-top:5px;

font-size:2em;

text-align:center;

width:90vw;

color:#FFF;

font-family:Calibri;

box-sizing:border-box;

position:relative;

box-shadow:0px 5px 5px 0px #333;

font-variant:capitalize;

margin-bottom:0vh;

}

div.bktshadow:before{

content:'';

height:100%;

width:100%;

display:block;

position:absolute;

bottom:-2px;

border-radius:20%;

transform:translateY(100%);

background:#FFF;

}

h1{

color:#00fail0;

font-family:NegativeSpace;

}

</style>

<h1>3D Box Shadow Effect by BK Tutorial</h1>

<div class="bktshadow"> BK Tutorial </div>

Output:

BK Tutorial