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).
Testing.