JS Bin

圓點 .block0

CSS background: radial-gradient(#ff8da1 30%, pink 34%);
background-size: 30px 30px;

TIP 背景色要比圓點多1~5%，視background-size而定
※ background-size越小，%數差距要越多
→ 差距太小：邊緣會有鋸齒
→ 差距太大：邊緣會模糊

大圓點 .block1

CSS background: radial-gradient(pink 60%, #ff8da1 62%);
background-size: 70px 70px;

小圓點 .block2

CSS background: radial-gradient(pink 15%, #ff8da1 20%);
background-size: 15px 15px;

線條 .block3

CSS background: linear-gradient(90deg, lightblue 50%, #dceef4 0%);
background-size: 30px 30px;

TIP ※ 橫條紋：0deg
※ 斜線並不是45deg，要用其他方法

斜線 .block4

CSS background-size: 26px 26px;
background-color: lightblue;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);

TIP 要特定數字的px才不會有鋸齒，經實驗過後有：
8, 10, 12, 16, 18, 19, 26, 30, 32, 34....

細斜線 .block5

CSS background-size: 8px 8px;
background-color: lightblue;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);

TIP 要特定數字的px才不會有鋸齒，經實驗過後有：
8, 10, 12, 16, 18, 19, 26, 30, 32, 34....

格紋 .block6

CSS background-color: #86c5da;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 50%, transparent 50%), linear-gradient(rgba(255, 255, 255, 0.3) 50%, transparent 50%);
background-size: 25px 25px;

斜格紋 .block7

CSS background-size: 26px 26px;
babackground-color: #86c5da;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent), linear-gradient(135deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);

細格紋 .block8

CSS background: radial-gradient(lightblue 50%, #5fb3ce 50%);
background-size: 5px 5px;

變化型格紋 .block9

CSS background-color: lightblue;
background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;

變化型格紋 .block10

CSS background-color: lightblue;
background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05)), linear-gradient(120deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
background-size: 70px 120px;

棋盤型 .block11

CSS background-color: #d4ebf2;
background-image: linear-gradient(45deg, lightblue 25%, transparent 25%, transparent 75%, lightblue 75%, lightblue), linear-gradient(45deg, lightblue 25%, transparent 25%, transparent 75%, lightblue 75%, lightblue);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;

假3D .block12

CSS background-color: lightblue;
background-image: linear-gradient(30deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(150deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(30deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(150deg, #d4ebf2 12%, transparent 12.5%, transparent 87%, #d4ebf2 87.5%, #d4ebf2), linear-gradient(60deg, #86c5da 25%, transparent 25.5%, transparent 75%, #86c5da 75%, #86c5da), linear-gradient(60deg, #86c5da 25%, transparent 25.5%, transparent 75%, #86c5da 75%, #86c5da);
background-size: 80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;

TIP 改色要改很多地方，建議用sass顏色變數

實用 CSS3 background pattern