<h1>Credit - Kevil Powell</h1>
<div class="effect">
  This is a 3d Card
</div>

body{
  height:100vh;
  display:grid;
  place-items:center;
  background-color:#000000;
  color:white;
}

.effect{
  position:relative;
  color:white;
  padding:2rem;
  background-image:linear-gradient(to right,crimson,purple,rebeccapurple);
  width:200px;
  height:100px;
  border-radius:20px;
  font-size:2rem;
  transform-style: preserve-3d;
  transform:perspective(5000px) rotateX(-10deg) rotateY(45deg)
}

.effect::before,
.effect::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
}
.effect::before{
  background-image:linear-gradient(to right,white,lightgrey,grey);
  display:block;
  width:350px;
  height:200px;
  border-radius:inherit;
  transform:translateZ(-60px);
}

.effect::after{
  top:50%;
  left:50%;
  transform:translateX(-40%) translateY(-45%) translateZ(-59px);
  filter:blur(10px);
  background-color:rgb(0,0,0,0.7);
  display:block;
  width:250px;
  height:170px;
  border-radius:inherit;
}