Fun with CSS3 Gradients – Graphing paper background

Fun with CSS3 Gradients – Graphing paper background

Inspired by Lea Verou’s CSS3 Pattern Gallery, I decided to create a pattern with CSS3 Gradients. The pattern, a graphing paper like background, is based on Graphy on Subtle Patterns, submitted by We Are Pixel8.

The pattern consists of eight CSS3 gradients, half of them for the little “plusses”.

The goods

Check the demo

And here’s my code without vendor prefixes:

background:
	linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
	linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
	linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
	linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
	linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
	linear-gradient(-90deg, #aaa 1px, transparent 1px),
	linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
	linear-gradient(#aaa 1px, transparent 1px),
	#f2f2f2;
background-size:
	4px 4px,
	4px 4px,
	80px 80px,
	80px 80px,
	80px 80px,
	80px 80px,
	80px 80px,
	80px 80px;

Feel free to use in your projects.

Github Gist

Codepen