Ambient light effects

Html part

CSS part

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  min-height: 100vh;
  background: #000;
  font-family: sans-serif;
  color: #fff;

}
h1,h2{
  font-size: 20px;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}
h2{
  border-bottom: 1px solid rgb(5, 3, 3);
border-bottom-width: 7px;

letter-spacing: 1px;
font-family: sans-serif;
}
.cube{
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  left: 30%;
  top: 40px;
animation: animate 4s linear
 infinite;
}
@keyframes animate{
  0%{
    transform: rotateX(-30deg)
     rotateY(0deg);
  }
  100%{
    transform: rotateX(-30deg)
    rotateY(360deg);
  }
}
.cube div{
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;

}
.cube div span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    #151515, #e41515
  );
  transform: rotateY(calc(90deg*
  var(--i))) translateZ(74px);
}
.top{
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: #222;
  transform: rotateX(90deg)
   translateZ(74px);
}
.top::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
    height: 150px;
    background: 
    rgba(231, 12, 12);
    transform: translateZ(-220px);
    filter: blur(20px);
    box-shadow: 
    0 0 80px rgb(212, 6, 6,0.2),
    0 0 140px rgb(212, 6, 6,0.4),
    0 0 240px rgb(212, 6, 6,0.6),
    0 0 340px rgb(212, 6, 6,0.8),
    0 0 440px rgb(212, 6, 6,1);
}

CodeWithCreativity

Search This Blog