<css-doodle grid="5" class="doodle">
:doodle {
@grid: 20 / 100vmax;
grid-gap: 4vmax;
}
background: #26C6DA;
transform: scale(@rand(.1, .9)) translate3d(@r(50px), @r(100px), 0);
background: hsla(@r(360), 85%, @r(70%, 90%), @r(.9));
border-radius: @r(10px);
</css-doodle>
<!-- <div class="container">
Page content.
</div> -->
.doodle {
position: fixed;
z-index: -1;
}
.container {
width: 75%;
background: #fff;
margin: 2rem auto;
padding: 5rem;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, .2);
}
This Pen doesn't use any external CSS resources.