<div class="shelf">
</div>
$T: transparent;
$b: #9D5B4B;
$db:#5D1E20;
$g: #82ba33;
$sg:#438a5e;
$dg:#333333;
$w: #fff;
$r: #ED4135;
$y: #F5AD00;
$o: #EE5C25;
$blue: #00A1A9;
$rb: #0177BE;
$v:#6438B2;
$shadow: rgba(0, 0, 0, 0.3);
$shine: rgba(255, 255, 255, 0.1);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
}
*::before,
*::after {
  position: absolute;
  content: "";  
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  
}
.shelf {
  top: 72vmin;
  width: 83.2vmin;
  height: 64vmin;
  background:
   linear-gradient($db 0.12vmin, $T 0.2vmin),
    linear-gradient(75deg, $T 40%, $b 41% 68%, $T 66%) 5% 0vmin /12.8vmin 16vmin,
    linear-gradient(-75deg, $T 40%, $b 41% 68%, $T 66%) 95% 0vmin /12.8vmin 16vmin,
    linear-gradient(75deg, $T 50%, $db 51% ) 5% 0 /11.6vmin 16vmin,
    linear-gradient(-75deg, $T 50%, $db 51% ) 95% 0 /11.6vmin 16vmin;
  background-repeat:no-repeat;
  box-shadow: 0 -6.4vmin 0  $b,                                      78.8vmin -24vmin 0 $w,
                        26.8vmin -38.4vmin 0 -26.4vmin $v,
                        27.6vmin -42.4vmin 0 -26.4vmin $blue,
                        27.6vmin -46.4vmin 0 -26.4vmin $g;
  
  
  &:before{ 
    z-index:-1;
    height:32vmin;
    width:8vmin;  
    left:4vmin;
    bottom:70vmin;
    background:$r;
      
    box-shadow:
      7.6vmin 0 $r,
      12.4vmin 1.6vmin 0 -0.8vmin $g,
      10.8vmin -1.2vmin 0 0.8vmin white,
      16vmin -0.8vmin 0 0.8vmin $dg,
      26.4vmin 0 0 1.6vmin $sg,
      32vmin 0 0 $w,
      28vmin 0 0 4vmin white,
      33.6vmin 0 0 4vmin $v,
      42.4vmin 1.6vmin 0 -1.6vmin $y;
    
  }
  &:after{    
    width: 80vmin;
    bottom:70vmin;
    height:36vmin;
    background: linear-gradient(
    to right,
    $T 4vmin, $shine 6.4vmin 7.2vmin, $T 8vmin 13.6vmin, $shine 14.4vmin 15.2vmin, $T 15.6vmin 20vmin, $shine 20.4vmin 21.4vmin, $T 21.6vmin 24.4vmin, $shine 25.2vmin 25.6vmin, $T 26.4vmin 32vmin, $shine 32.8vmin 33.2vmin, $T 33.6vmin 40.8vmin, $shine 41.6vmin 42vmin, $T 42.4vmin 45.2vmin, $shine 46vmin 46.4vmin, $T 47.2vmin 49.2vmin, $shine 50vmin 50.8vmin, $T 51.2vmin),
      
      linear-gradient($T 1.2vmin,$shine 2vmin 2.8vmin, $T 3.2vmin 5.2vmin, $shine 6vmin 6.8vmin, $T 7.6vmin 10.4vmin, $shine 11.2vmin 12vmin, $T 12.8vmin )53.2vmin 22vmin/25.6vmin 16vmin,
      
      linear-gradient(to bottom, $T 6.8vmin, darken( $r, 25% ) 6.8vmin 9.6vmin, $T 8.4vmin 23.2vmin, darken( $r, 25% ) 23.2vmin 26vmin, $T 26vmin)4vmin 4vmin / 7.6vmin 36vmin,
      linear-gradient(to bottom, $T 4vmin, darken( $r, 25% ) 4vmin 4.8vmin, $T 4.8vmin 5.6vmin, darken( $r, 25% ) 5.6vmin 6.4vmin, $T 6.6vmin 27.2vmin, darken( $r, 25% ) 27.2vmin 28vmin, $T 7vmin)11.6vmin 4vmin / 8vmin 36vmin,
      
      linear-gradient(135deg,$T 8vmin, $db 8vmin 9.6vmin, $T 9.6vmin 11.2vmin, $db 11.2vmin 12.8vmin, $T 12.8vmin, 14.4vmin, $db 14.4vmin 16vmin, $T 4vmin)19.6vmin 6.4vmin / 4.2vmin 36vmin,
      
      radial-gradient(circle at 0vmin 6vmin,$blue 10%, $T 11%)23.6vmin 2.4vmin / 5.64vmin 33.6vmin,
      radial-gradient(circle at 5.2vmin 18vmin,$blue 24%, $T 25%)23.2vmin 2.4vmin / 5.6vmin 33.6vmin,
      radial-gradient(circle at 0vmin 30vmin,$blue 10%, $T 11%)23.6vmin 2.4vmin / 5.6vmin 33.6vmin,
      
      linear-gradient(to right, darken( $sg, 0.5% ) 10%, lighten( $sg, 6% ))31.6vmin 12vmin / 5.6vmin 8vmin,
      linear-gradient(darken( $sg, 10% ), darken( $sg, 10% ))30vmin 9.6vmin / 8.8vmin 12.8vmin,
      
      linear-gradient(to bottom,$T 4vmin, $b 4vmin 4.82vmin, $T 4.8vmin 28vmin, $b 28vmin 28.8vmin, $T 28.8vmin )40vmin 4vmin / 4vmin 36vmin,
     
      linear-gradient(to bottom, $T 0.8vmin, lighten( $v, 20% ) 0.8vmin 4vmin, $T 4vmin 24vmin, lighten( $v, 20% ) 24vmin 27.2vmin, $T 6.8vmin)44vmin 4vmin / 5.6vmin 36vmin,
      
      linear-gradient(to bottom, $T 1vmin,lighten( $y, 4% ) 3.2vmin 24.8vmin, $T 24.8vmin)50.8vmin 7.2vmin / 0.8vmin 28.8vmin,
      
      linear-gradient(to right,$T 3.2vmin, lighten( $v, 20% ) 3.2vmin 5.6vmin,$T 5.6vmin 20vmin, lighten( $v, 20% ) 20vmin 22.4vmin, $T 5.6vmin)53.2vmin 30vmin/25.6vmin 8vmin,
      
      linear-gradient($T 1.2vmin, $rb 1.2vmin 2.4vmin,$T 2.6vmin 5.2vmin, $y 5.2vmin 6.4vmin, $T 6.6vmin)58vmin 22vmin/16.8vmin 8vmin,
          
      linear-gradient(to right,$shadow, $T 4.4vmin )11.6vmin 4vmin / 8vmin 36vmin,
      /*linear-gradient(to right, $shadow, $T 1.2vmin)1vmin 1vmin / 2vmin 9vmin,*/
      linear-gradient(to right,$shadow, $T 4.4vmin )19.6vmin 6.4vmin / 8vmin 36vmin,
      linear-gradient(
        to right, $shadow, $T 4.8vmin)4vmin 4vmin / 8vmin 36vmin,
      linear-gradient(to right,$shadow, $T 4.4vmin )23.6vmin 2.4vmin / 8vmin 36vmin,
      linear-gradient(to right,$shadow, $T 4.4vmin )28.8vmin 2.4vmin / 11.2vmin 36vmin,
      linear-gradient(to right,$shadow, $T 4.4vmin )40vmin 4vmin / 11.2vmin 36vmin,
      linear-gradient(to right,$shadow, $T 4.4vmin )44vmin 0vmin / 11.2vmin 36vmin,
      linear-gradient(to right,$shadow, $T 4.2vmin )49.4vmin 7.2vmin / 11.2vmin 28.8vmin,
      linear-gradient($T 3vmin, $shadow  4vmin, $T 4vmin 7vmin, $shadow 8vmin)54vmin 22vmin/24.8vmin 8vmin,
      linear-gradient($T, $shadow 7vmin)53.2vmin 30vmin/24.8vmin 8vmin;
      
    background-repeat: no-repeat;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.