本サイトはアフィリエイト広告を利用しています

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

- スポンサーリンク -

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

水玉模様

▼ 水玉(間隔広め)

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%);

参考カラー 16パターン

配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]第2版

本で見るのと、ブラウザで見るのとでは少し違って見えるので、いくつか抜粋してみました。

#f9d2d9 、 #fff6e4 、 #84ccce

#f3eed5、 #e4af9b、 #d4dfbb

#deeae7、 #f5bdc8、 #a3b6de

#f5b8cc、 #2e69b3、 #4abcb9

#404a95、 #e6eef6、 #44b8dc

#1f1e63 、 #a2a2ad、 #dcd5c8

#254678、 #bbe3f5、 #da6a38

#cb5266、 #f1b0b2、 #f9bf33

#d36899、 #f6e27a、 #cdd866

#ec7986、 #ffe873、 #a3b6de

#cb7f69、 #f8ecba、 #d7b63d

#864544、 #b5c97c、 #e2e28a

#ea5419、 #ffe600、 #a2ca0e

#920683、 #f8d2e3、 #f3abae

#92d2db、 #e4007e、 #efea44

#f5e6dd、 #a6417f、 #75c9e2


見本が多いので、きっと好きな配色が見つかるはず


HTML&CSS
タイトルとURLをコピーしました