<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 3d pyramid with glow shadow</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to right, #16272e, #96157a);
perspective: 600px;
background-blend-mode: multiply;
background-size: cover;
background-repeat: no-repeat;
}
.pyramid{
position: absolute;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: animate-pyramid 10s linear infinite;
}
@keyframes animate-pyramid {
0%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.pyramid div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.pyramid div span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* background: linear-gradient(black, slateblue); */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
transform: rotateY(calc(90deg * var(--i)))
translateZ(150px) rotateX(30deg);
transform-origin: bottom;
filter: drop-shadow(30px 10px 4px #ffffff);
background-blend-mode: multiply;
background-size: 100% 100%, 60% 60%;
background-position: center;
background-repeat: no-repeat;
}
.glow{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(105, 90, 205, 0.404);
transform: rotateX(90deg) translateZ(-200px);
filter: blur(20px);
box-shadow: 0 0 120px rgba(74, 59, 173, 0.2),
0 0 120px rgba(163, 59, 173, 0.4),
0 0 200px rgba(59, 173, 173, 0.6),
0 0 300px rgba(63, 173, 59, 0.8),
0 0 400px rgba(173, 146, 59, 0.9),
0 0 500px rgba(74, 59, 173, 1);
}
.span1{
background: linear-gradient(black, slateblue);
}
.span2{
background: linear-gradient(black, rgb(205, 90, 171));
}
.span3{
background: linear-gradient(black, rgb(94, 205, 90));
}
.span4{
background: linear-gradient(black, rgb(90, 205, 205));
}
</style>
<body>
<div class="pyramid">
<!-- <div class="glow"></div> -->
<div>
<div class="wrap"><span style="--i:0;" class="span4"></span> </div>
<span style="--i:1;" class="span1"></span>
<span style="--i:2;" class="span2"></span>
<span style="--i:3;" class="span3"></span>
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.