Material background

In this example below you will see how to do a Material background with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by blurges, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright blurges ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="z1 orange"></div>
  <div class="z2 teal"></div>
  <div class="z3 pink"></div>
</div>

/*Downloaded from https://www.codeseek.co/blurges/material-background-BWBEjR */
    html, body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 100vw;
  height: 50vh;
  padding: 0;
  margin: 0;
  background-color: #3949ab;
  overflow: hidden;
}
.z1 {
    position: absolute;
    display: inline-block;
    height: 200%;
    width: 30%;
    transform: rotate(45deg);
    transform-origin: 30% 0%;
    background-color: #e64a19;
    box-shadow:  0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);;
}
.z2 {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 30%;
    transform: rotate(45deg);
    transform-origin: 20% -20%;
    background-color: #00695c;
    box-shadow:  0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
/*     box-shadow: 2vh 0vh 2vh rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); */
    z-index: 1;
}
.z3 {
    position: absolute;
    display: inline-block;
    height: 60%;
    width: 12%;
    transform: rotate(45deg);
    transform-origin: -20% 00%;
    background-color: #512da8;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    z-index: 2;
}
.z4 {
    position: absolute;
    display: inline-block;
    height: 300%;
    width: 10%;
    transform: rotate(45deg);
    transform-origin: 100% 0%;
    background-color: #ffff8d;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    z-index: 2;
}
.z5 {
    position: absolute;
    display: inline-block;
    height: 300%;
    width: 10%;
    transform: rotate(45deg);
    transform-origin: 100% 0%;
    background-color: #d81b60;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    z-index: 2;
}


/*Downloaded from https://www.codeseek.co/blurges/material-background-BWBEjR */
    

Comments