CSS Background Gradient Pattern - Dashed Lines

Question

I'm wanting to recreate the background pattern on https://meta.stackexchange.com/, and was wondering if it's achievable through CSS gradients?

I've managed to do the squares, but adding the dashed lines is proving troublesome.

background-color: #16A6DA;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
background-size:50px 50px;

http://jsfiddle.net/04fjos8x/

Answer 1

I suggest you to take a look in the following links. They're CSS generators which could save you some time. I hope they help you.

Ultimate CSS Gradient Generator

Linear gradients

CSS background patterns - this is good

Answer 2

Well its not semantic but its what you requested i think:

http://cssdeck.com/labs/full/zfogyyuf

I created a lot of empty div-s and added borders to those divs. Using the borders of the divs created using only HTML & CSS a design like you requested.

Probably some jQuery/Javascript could have been used there too to "infinitely" create new empty divs but i didnt wanted to use javascript since it was just an easy example.