<div class="bg-isometric">
  <div class="isometric"></div>
</div>
html, body {
  height: 100%;
  min-height: 100%;
}

body {
  background: #162229;
  position: relative;
}

.bg-isometric, .bg-isometric:after, .isometric {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
}

.bg-isometric {
  &:after {
    content: '';
    display: block;
    background: radial-gradient(ellipse at bottom,  rgba(23,35,42,0) 0%,rgba(23,35,42,1) 95%),
      linear-gradient(to bottom, rgba(23,35,42,1) 1%,rgba(23,35,42,1) 25%,rgba(23,35,42,0) 100%);
  }
}

.isometric {
  background-color: transparent;
  background-image: linear-gradient(HSLA(210, 2%, 43%, 1) 1%, transparent 1%, transparent 99%, HSLA(210, 2%, 43%, 1) 99%),
    linear-gradient(90deg, HSLA(210, 2%, 43%, 1) 1%, transparent 1%, transparent 99%, HSLA(210, 2%, 43%, 1) 99%);
  background-size: 100px 100px;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  transform: rotateX(45deg) rotateZ(45deg) skewX(-5deg) skewY(-5deg);
}
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.