CSSグラデーションで作る背景デザインの覚え書き

ボックス背景のデザイン備忘録です。

水玉模様
四角形
その他
参考カラー 16パターン

水玉模様

▼ 水玉（間隔広め）

コードを見る

background-color: #fff; /* 背景色 */
background-image: radial-gradient(#ffc0cb 4px, transparent 5px);
background-size: 50px 50px;

▼ 水玉（間隔狭め）

コードを見る

background-color: #fff; /* 背景色 */
background-image: radial-gradient(#ffc0cb 4px, transparent 5px);
background-size: 30px 30px;

▼ 交互水玉

コードを見る

background-color: #ffffff; /* 背景色 */
background-image: 
   radial-gradient(#ffc0cb 4px, transparent 5px),
   radial-gradient(#ffc0cb 4px, transparent 5px);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;

▼ 交互水玉（大）

コードを見る

background-color: #ffffff; /* 背景色 */
background-size: 50px 50px;
background-image: 
   radial-gradient(#ffc0cb 6px, transparent 7px),
   radial-gradient(#ffc0cb 6px, transparent 7px);
background-position: 0 0, 25px 25px;

▼ 水玉背景（透明度指定）

rgba値で水玉の透明度を変更

コードを見る

background-color: #ffffff; /* 背景色 */
background-size: 50px 50px;
background-image: 
     radial-gradient(rgba(247, 141, 167, .3) 6px, transparent 7px),
     radial-gradient(rgba(247, 141, 167, .3) 6px, transparent 7px);
background-position: 0 0, 25px 25px;

▼ 白水玉＋背景色

コードを見る

background-color: #ffc0cb; /* 背景色 */
background-size: 50px 50px;
background-image: 
   radial-gradient(#ffffff 6px, transparent 7px),
   radial-gradient(#ffffff 6px, transparent 7px);
background-position: 0 0, 25px 25px;

背景色を変える場合は「#」の後ろの6桁数値を任意のカラーコードに書き換えます。

▼ 2色水玉

コードを見る

background-color: #ffffff; /* 背景色 */
background-size: 50px 50px;
background-image: 
   radial-gradient(#ffea97 6px, transparent 7px), /* 1色目 */
   radial-gradient(#7bc7ff 6px, transparent 7px); /* 2色目 */
background-position: 0 0, 25px 25px;

▼ 2色水玉

コードを見る

background-color: #232946; /* 背景色 */
background-size: 60px 60px;
background-image: 
   radial-gradient(#eebbc3 10px, transparent 11px), /* 1色目 */
   radial-gradient(#b8c1ec 10px, transparent 11px); /* 2色目 */
background-position: 0 0, 30px 30px;

▼ 2色水玉＋丸背景乗せ

Sample

コードを見る

<div class="bg-dotted">
   <div class="bg-circle">
      <p>Sample</p>
   </div>
</div>

.bg-dotted{
   background-color: #232946; /* 背景色 */
   background-size: 20px 20px;
   background-image: 
      radial-gradient(#eebbc3 3px, transparent 4px),
      radial-gradient(#b8c1ec 3px, transparent 4px);
background-position: 0 0, 10px 10px;
}

.bg-circle{
   width: 180px;
   height: 180px;
   background: #fff;
   border-radius: 50%;
   opacity: 0.9;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #333;
   font-size: 24px;
}

四角形

▼ 市松模様（小）

コードを見る

   background-color: #87ceeb; /* 背景色 */
   background-size: 20px 20px;
   background-position: 0 0, 10px 10px;
   background-image: 
      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%););

▼ 市松模様（大）

コードを見る

   background-color: #87ceeb; /* 背景色 */
   background-size: 60px 60px;
   background-position: 0 0, 30px 30px;
   background-image: 
      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);

▼ 市松模様（透明度）

コードを見る

   background-color: #87ceeb; /* 背景色 */
   background-size: 60px 60px;
   background-position: 0 0, 30px 30px;
   background-image: 
      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
   opacity: 0.3; /* 透明度（0～1で指定） */

▼ 斜め市松

コードを見る

   background-color: #87ceeb; /* 背景色 */
   background-size: 30px 30px;
   background-position:  30px 0, 30px 0, 0 0, 0 0;
   background-image:
      linear-gradient(135deg, #fff 25%, transparent 25%), 
      linear-gradient(225deg, #fff 25%, transparent 25%), 
      linear-gradient(45deg, #fff 25%, transparent 25%), 
      linear-gradient(315deg, #fff 25%, transparent 25%);
}

▼ 斜め市松（透明度）

コードを見る

background-color: #87ceeb; /* 背景色 */
background-image:   
   linear-gradient(135deg, #fff 25%, transparent 25%), 
   linear-gradient(225deg, #fff 25%, transparent 25%), 
   linear-gradient(45deg, #fff 25%, transparent 25%), 
   linear-gradient(315deg, #fff 25%, transparent 25%);
background-position:  30px 0, 30px 0, 0 0, 0 0;
background-size: 30px 30px;
opacity: 0.3; /* 透明度（0～1で指定） */

その他

▼ 波線

コードを見る

   background-color: #87ceeb; /* 背景色 */
   background-size: 10px 30px;
   background-position:  10px 0, 10px 0, 0 0, 0 0;
   opacity: 0.8;
   background-image:   
      linear-gradient(135deg, #fff 25%, transparent 25%), 
      linear-gradient(225deg, #fff 25%, transparent 25%), 
      linear-gradient(45deg, #fff 25%, transparent 25%), 
      linear-gradient(315deg, #fff 25%, transparent 25%);

▼ 波線（スイカ？）

コードを見る

   background-color: #018d3d; /* 背景色 */
   background-size: 10px 40px;
   background-position:  10px 0, 10px 0, 0 0, 0 0;
   opacity: 0.8;
   background-image:   
      linear-gradient(135deg, #011e20 25%, transparent 25%), 
      linear-gradient(225deg, #011e20 25%, transparent 25%), 
      linear-gradient(45deg, #011e20 25%, transparent 25%), 
      linear-gradient(315deg, #011e20 25%, transparent 25%);