CSSで方眼紙パターンを作成

CSSで方眼紙風のパターンは「repeating-linear-gradient」を縦横で組み合わせて利用することで簡単に作成することが出来ます。
当ページでは、方眼紙模様の色や大きさ、間隔などを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="box">
</div>

<style type="text/css">
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                            /* ドット（水玉）模様のCSS */
  background-color : #4b8161;
  background-image :
    repeating-linear-gradient(to bottom,          /* 横線 */
       transparent 12px,
       rgba(255, 255, 255, 0.20) 13px,  rgba(255, 255, 255, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(255, 255, 255, 0.20) 26px,  rgba(255, 255, 255, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(255, 255, 255, 0.20) 39px,  rgba(255, 255, 255, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(255, 255, 255, 0.20) 52px,  rgba(255, 255, 255, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(255, 255, 255, 0.20) 65px,  rgba(255, 255, 255, 0.20) 65px),
    repeating-linear-gradient(to right,          /* 縦線 */
       transparent 12px,
       rgba(255, 255, 255, 0.20) 13px,  rgba(255, 255, 255, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(255, 255, 255, 0.20) 26px,  rgba(255, 255, 255, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(255, 255, 255, 0.20) 39px,  rgba(255, 255, 255, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(255, 255, 255, 0.20) 52px,  rgba(255, 255, 255, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(255, 255, 255, 0.20) 65px,  rgba(255, 255, 255, 0.20) 65px);
}
</style>