しずく【css】
body{/*しずく柄の背景*/
background-size:40px 40px;
background-color:#f33;
background-image:
linear-gradient(64deg,#fff 4px,transparent 0),
linear-gradient(-64deg,#fff 4px,transparent 0),
radial-gradient(#fff 5px,transparent 0),
/*ここまで白いしずく↑↓ここからピンクのしずく*/
linear-gradient(64deg,#f99 4px,transparent 0),
linear-gradient(-64deg, #f99 4px, transparent 0),
radial-gradient(#f99 5px,transparent 0);
background-position:
20px 20px,20px 20px,0 2.2px,
/*ここまで白いしずく↑↓ここからピンクのしずく*/
0 0,0 0,20px 22.2px;
}
適宜必要なプロパティを追加してください
色違い(水色)【css】
body{/*しずく柄の背景(水色)*/
background-size:40px 40px;
background-color:#def;
background-image:
linear-gradient(64deg,#9cf 4px,transparent 0),
linear-gradient(-64deg,#9cf 4px,transparent 0),
radial-gradient(#9cf 5px,transparent 0),
/*ここまで濃いしずく↑↓ここから薄いしずく*/
linear-gradient(64deg,#bdf 4px,transparent 0),
linear-gradient(-64deg, #bdf 4px,transparent 0),
radial-gradient(#bdf 5px,transparent 0);
background-position:
20px 20px,20px 20px,0 2.2px,
/*ここまで濃いしずく↑↓ここから薄いしずく*/
0 0,0 0,20px 22.2px;
}