::after / ::before

::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::after { content: "hi"; }

<!-- Rest of stuff inside the div -->
<div> hi </div>

Give your multiple background canvases

Transparent circle using css.

jsfiddle