A reworking of the first two examples of “The Cicada Principle and Why It Matters to Web Designers” using CSS gradients. (The third example would be theoretically possible to do with gradients, but it would be the worst possible approach.)
Unprefixed CSS: 0.59KB (604 characters, unminified). Total CSS, both prefixed and not: 2.66KB (2,720 characters, unminified). Total, original images: ~7KB (plus two extra server hits).
This only covers the first two of the three ‘layers’ in the original example; the third layer would be easily possible but hasn’t yet been done.
Unprefixed CSS: 0.63KB (643 characters, unminified). Total CSS, both prefixed and not: 2.81KB (2,882 characters, unminified). Total, original images: ~23KB (plus two extra server hits).