Combining the Cicada Principle with CSS3 Background Gradients

Lately I have been trying to use CSS as much as possible without having
to make images, especially for backgrounds. A few months back I read
about the cicada principle as it relates to design. It was a
fascinating read, if you haven't read it already, you should do yourself
a favor and read it now. Also check out their
cicada gallery for interesting
examples of the cicada principle in action.

In the example, the author uses png images and repeats them. I wanted
to try and do something similar but done purely in CSS. I found some
really good resources dealing with CSS 3 and backgrounds, specifically
this one dealing with patterns
and a pattern gallery.

These may not work depending upon how new your browser is. See the note
about browser compatibility
on the pattern gallery.

So naturally I wanted to combine them both into a pure CSS version of
the Cicada pattern:

And since it is is all generated with css there are no images and you could get fancier with the colors, gradients, and opacities if you want.

Here is an example of one that takes a single base color (#026873) and adds highlights to it: