コニファ・ロゴ

ツール集:backgroundにCSSだけで作るパターンまとめ

svgを含めて画像をいっさい使わずCSSだけで作るパターンのまとめです。各サンプルの上側がCSSのソース、下側が実際に要素のbackgroundに表示したパターンです。

サンプル1

  background: radial-gradient(#cbf 20%, transparent 0), radial-gradient(#cbf 20%, transparent 0);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
サンプル1

サンプル2

  background: radial-gradient(#bcf 20%, transparent 0), radial-gradient(#bcf 20%, transparent 0);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
サンプル2

サンプル3

  background: radial-gradient(#9ef 20%, transparent 0), radial-gradient(#9ef 20%, transparent 0);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
サンプル3

サンプル4

  background: radial-gradient(#9e9 2px, transparent 0), radial-gradient(#9e9 2px, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
サンプル4

サンプル5

  background: radial-gradient(#be9 3px, transparent 0), radial-gradient(#be9 3px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル5

サンプル6

  background: radial-gradient(#fda 4px, transparent 0), radial-gradient(#fda 4px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル6

サンプル7

  background: radial-gradient(#fdd 5px, transparent 0), radial-gradient(#fdd 5px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル7

サンプル8

  background: radial-gradient(#fce 6px, transparent 0), radial-gradient(#fce 6px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル8

サンプル9

  background: radial-gradient(#ecf 7px, transparent 0), radial-gradient(#ecf 7px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル9

サンプル10

  background: linear-gradient(-45deg,#fff 25%,#bbf 25%,#bbf 50%,#fff 50%,#fff 75%,#bbf 75%,#bbf);
  background-size: 4px 4px;
サンプル10

サンプル11

  background: linear-gradient(-45deg,#fff 25%,#adf 25%,#adf 50%,#fff 50%,#fff 75%,#adf 75%,#adf);
  background-size: 5px 5px;
サンプル11

サンプル12

  background: linear-gradient(-45deg,#fff 25%,#9ff 25%,#9ff 50%,#fff 50%,#fff 75%,#9ff 75%,#9ff);
  background-size: 6px 6px;
サンプル12

サンプル13

  background: linear-gradient(-45deg,#fff 25%,#8fb 25%,#8fb 50%,#fff 50%,#fff 75%,#8fb 75%,#8fb);
  background-size: 7px 7px;
サンプル13

サンプル14

  background: linear-gradient(-45deg,#fff 25%,#9f9 25%,#9f9 50%,#fff 50%,#fff 75%,#9f9 75%,#9f9);
  background-size: 8px 8px;
サンプル14

サンプル15

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#fd8;
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
サンプル15

サンプル16

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#fbb;
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
サンプル16

サンプル17

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#fbf;
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
サンプル17

サンプル18

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#dcf;
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
サンプル18

サンプル19

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#ccf;
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
サンプル19

サンプル20

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#bdf;
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
サンプル20

サンプル21

  background: radial-gradient(#fff 2px, transparent 0), radial-gradient(#fff 2px, transparent 0),#7ff;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
サンプル21

サンプル22

  background: radial-gradient(#fff 2px, transparent 0), radial-gradient(#fff 2px, transparent 0),#8fc;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
サンプル22

サンプル23

  background: radial-gradient(#fff 3px, transparent 0), radial-gradient(#fff 3px, transparent 0),#9f9;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル23

サンプル24

  background: radial-gradient(#fff 3px, transparent 0), radial-gradient(#fff 3px, transparent 0),#bf8;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル24

サンプル25

  background: radial-gradient(#fff 4px, transparent 0), radial-gradient(#fff 4px, transparent 0),#ff7;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル25

サンプル26

  background: radial-gradient(#fff 4px, transparent 0), radial-gradient(#fff 4px, transparent 0),#fcc;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル26

サンプル27

  background: radial-gradient(#fff 5px, transparent 0), radial-gradient(#fff 5px, transparent 0),#fcf;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル27

サンプル28

  background: radial-gradient(#fff 5px, transparent 0), radial-gradient(#fff 5px, transparent 0),#dcf;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル28

サンプル29

  background: radial-gradient(#fff 6px, transparent 0), radial-gradient(#fff 6px, transparent 0),#ccf;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル29

サンプル30

  background: radial-gradient(#fff 6px, transparent 0), radial-gradient(#fff 6px, transparent 0),#bdf;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル30

サンプル31

  background: radial-gradient(#fff 7px, transparent 0), radial-gradient(#fff 7px, transparent 0),#9ff;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル31

サンプル32

  background: radial-gradient(#fff 7px, transparent 0), radial-gradient(#fff 7px, transparent 0),#9fb;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
サンプル32

サンプル33

  background: linear-gradient(-45deg,#aaf 25%,#8fb 25%,#8fb 50%,#aaf 50%,#aaf 75%,#8fb 75%,#8fb);
  background-size: 5px 5px;
サンプル33

サンプル34

  background: linear-gradient(-45deg,#9fc 25%,#8bb 25%,#8bb 50%,#9fc 50%,#9fc 75%,#8bb 75%,#8bb);
  background-size: 6px 6px;
サンプル34

サンプル35

  background: linear-gradient(-45deg,#8cf 25%,#afa 25%,#afa 50%,#7fb 50%,#7fb 75%,#fff 75%,#fff);
  background-size: 7px 7px;
サンプル35

 

 

戻るボタン