CSSで格子グラデーション・モザイクグラデーションを作成

CSSで格子柄・モザイクのグラデーションパターンを作成するには「linear-gradient」を縦と横に組み合わせて利用することで簡単に作成することが出来ます。
当ページでは、格子のサイズ・数やグラデーションの濃さ、向きなどを自由に指定しながら実際のデザインを確認することが出来ます。

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

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

<style type="text/css">
 /* --- 格子グラデーション背景 ----------------------------- */
.box {
  max-width  : 250px;
  height     : 250px;
                                    /* チェックパターンのCSS */
  background-color : rgba(255, 255, 255, 0.60);
  background-image :
             linear-gradient(to right,
                             rgba(255, 0, 0, 0.00) 0%,
                             rgba(255, 0, 0, 0.00) 16.7%,
                             rgba(255, 0, 0, 0.200) 16.7%,
                             rgba(255, 0, 0, 0.200) 33.3%,
                             rgba(255, 0, 0, 0.300) 33.3%,
                             rgba(255, 0, 0, 0.300) 50%,
                             rgba(255, 0, 0, 0.400) 50%,
                             rgba(255, 0, 0, 0.400) 66.7%,
                             rgba(255, 0, 0, 0.500) 66.7%,
                             rgba(255, 0, 0, 0.500) 83.3%,
                             rgba(255, 0, 0, 0.600) 83.3%,
                             rgba(255, 0, 0, 0.600) 100%),
             linear-gradient(to bottom,
                             rgba(255, 0, 0, 0.00) 0%,
                             rgba(255, 0, 0, 0.00) 16.7%,
                             rgba(255, 0, 0, 0.200) 16.7%,
                             rgba(255, 0, 0, 0.200) 33.3%,
                             rgba(255, 0, 0, 0.300) 33.3%,
                             rgba(255, 0, 0, 0.300) 50%,
                             rgba(255, 0, 0, 0.400) 50%,
                             rgba(255, 0, 0, 0.400) 66.7%,
                             rgba(255, 0, 0, 0.500) 66.7%,
                             rgba(255, 0, 0, 0.500) 83.3%,
                             rgba(255, 0, 0, 0.600) 83.3%,
                             rgba(255, 0, 0, 0.600) 100%);
}
</style>