Gradient List

HTML
<ul class="graded-list"> <li>NO. 1</li> <li>NO. 2</li> <li>NO. 3</li> <li>NO. 4</li> <li>NO. 6</li> </ul>
SCSS
html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; } body { font-family: Abel, sans-serif; font-size: 120%; } ul { list-style-type: none; margin: 0; padding-left: 0; } .graded-list li:nth-child(1) { background-color: rgba(157, 47, 212, 0.5); } .graded-list li:nth-child(2) { background-color: rgba(167, 68, 216, 0.5); } .graded-list li:nth-child(3) { background-color: rgba(177, 89, 221, 0.5); } .graded-list li:nth-child(4) { background-color: rgba(187, 111, 225, 0.5); } .graded-list li:nth-child(5) { background-color: rgba(197, 132, 229, 0.5); } .graded-list li:nth-child(6) { background-color: rgba(207, 153, 234, 0.5); } .graded-list li:nth-child(7) { background-color: rgba(217, 174, 238, 0.5); } .graded-list li:nth-child(8) { background-color: rgba(227, 195, 243, 0.5); } .graded-list li:nth-child(9) { background-color: rgba(237, 216, 247, 0.5); } .graded-list li:nth-child(10) { background-color: rgba(247, 237, 251, 0.5); } .graded-list li:nth-child(11) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(12) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(13) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(14) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(15) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(16) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(17) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(18) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(19) { background-color: rgba(255, 255, 255, 0.5); } .graded-list li:nth-child(20) { background-color: rgba(255, 255, 255, 0.5); } .graded-list { background: -webkit-gradient(linear, left top, left bottom, from(indigo), to(orange)); background: -moz-linear-gradient(top, indigo, orange); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='indigo', endColorstr='orange'); display: flex; height: 100vh; flex-direction: column; } .graded-list li { flex-grow: 1; background-blend-mode: overlay; padding: 1em 0 0 2em; color: white; box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05); transition: all .2s ease-out; } .graded-list li:hover { flex-grow: 3; }
JAVASCRIPT
Expand for more options Login