<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
@import "lesshat";

body {
  margin: 0;
  padding: 0;
}

section {
  display: table;
  height: 100%;
  position: absolute;
  width: 100%;
  div {
    display: table-cell;
    padding: 0.5em;
  }
}

@iterations: 15;
@degrade-color: #fff;

.loop-degrade(@i) when (@i > 0) {
 	div:nth-child(@{i}) {
 		@percent: unit(@i*6.5, ~"%");
 		background-color: darken(@degrade-color, @percent);
 	}
 	.loop-degrade((@i - 1));
}
.loop-degrade(@iterations);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.