.prism {
    /* Align absolute chidren relative to this element */
    position: relative;
}

/* Use psudo-elements to draw the effects */
.prism:before, 
.prism:after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    /* Don't interfere with interaction */
    pointer-events: none;

    /* Fix the background gradient to the viewport. This makes it look like it's moving when you scroll */
    background-attachment: fixed;
}

/* Draw the refracted light effect */
.prism:before{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 150px;
    /* Using a gradient mask image gives it that cut-glass edge look */
    -webkit-mask-image: linear-gradient(transparent 0%, rgba(0,0,0,0.02) 70%, rgba(0,0,0,0.1) 96.99%, rgba(0,0,0,0.5) 97%, rgba(0,0,0,0.5) 100%);
}

/* Draw the bright reflection effect */
.prism:after{
    height: 3px;
    /* 10k% seems excessive but it's needed */
    filter: brightness(1000%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Build a set of gradient backgrounds with varying angles and rainbows to get a variety of effects */
.prism:nth-child(1n-2):before,
.prism:nth-child(1n-2):after {
    background-image: linear-gradient(65deg, rgba(2,0,36,0) 0%, rgba(230,0,4,0) 18%, rgba(255,0,0,1) 20%, rgba(255,252,0,1) 27%, rgba(151,255,0,0.6) 30%, rgba(0,255,179,1) 33%, rgba(0,81,255,0.4) 36%, rgba(255,0,215,0.2) 39%, rgba(255,0,104,1) 44%, rgba(255,171,0,0) 53%, rgba(249,255,0,0.2) 64%, rgba(164,249,0,1) 66%, rgba(0,227,11,0.9) 69%, rgba(0,250,255,1) 72%, rgba(0,125,255,0.8) 74%, rgba(214,0,255,1) 77%, rgba(255,0,111,0) 80%, rgba(255,0,0,0) 100%);
}

.prism:nth-child(3n-2):before,
.prism:nth-child(3n-2):after {
    background-image: linear-gradient(165deg, rgba(2,0,36,0) 0%, rgba(255,0,0,0) 12%, rgba(255,252,0,0.2) 16%, rgba(151,255,0,0.6) 18%, rgba(0,255,179,1) 21%, rgba(0,81,255,1) 24%, rgba(255,0,215,0.2) 27%, rgba(255,0,104,0.7) 30%, rgba(255,171,0,0) 32%, rgba(250,247,0,0) 50%, rgba(249,255,0,0.9) 53%, rgba(164,249,0,1) 55%, rgba(0,227,11,0.8) 58%, rgba(0,250,255,0.9) 60%, rgba(0,125,255,0) 63%, rgba(132,48,255,0) 76%, rgba(214,0,255,1) 84%, rgba(255,0,111,1) 87%, rgba(255,0,94,0) 91%, rgba(255,0,0,0) 100%);
}

.prism:nth-child(5n-2):before,
.prism:nth-child(5n-2):after {
    background-image: linear-gradient(65deg, rgba(50, 255, 255, 0.5), rgba(50, 50, 255, 0.2), rgba(255, 50, 255, 0), rgba(255, 50, 50, 0.8), rgba(255, 255, 50, 0.7), rgba(50, 255, 50, 0.2));
}

.prism:nth-child(7n-2):before,
.prism:nth-child(7n-2):after {
    background-image: linear-gradient(165deg, rgba(255, 50, 50, 0.8), rgba(255, 255, 50, 0.7), rgba(50, 255, 50, 0.2), rgba(50, 255, 255, 0.5), rgba(50, 50, 255, 0), rgba(255, 50, 255, 0.5), rgba(255, 50, 50, 0.8), rgba(255, 255, 50, 0), rgba(50, 255, 50, 0), rgba(50, 255, 255, 0.5), rgba(50, 50, 255, 0.5), rgba(255, 50, 255, 0.5), rgba(255, 50, 50, 0.8), rgba(255, 255, 50, 0.7), rgba(50, 255, 50, 0.2), rgba(50, 255, 255, 0.5), rgba(50, 50, 255, 0.5), rgba(255, 50, 255, 0.5));
}