CSSで背景うっすら斜め変則ドット

黒のベタ塗りだとカッコつかないな…という時、

うっすら斜めドットにすると良い感じである。

background: #3d3d3d;
background-image: radial-gradient(#333 20%, transparent 20%), radial-gradient(#333 35%, transparent 35%);
background-repeat: repeat;
background-size: 5px 5px;
background-position: 0 0, 2px 2px;

background-sizeとbackground-positionの値をいじることで
ドットの大きさを変えられる。

こういう感じになる。

参考

www.esz.co.jp