Mais um exemplo: folha de caderno com recado do Walt Disney...
background-image: linear-gradient(90deg, transparent 79px, #fcc 79px, #fcc 81px, transparent 81px),
Ok? Então agora sim, os códigos:
1. Bolinha (Polkadot)
background:
radial-gradient(#f9b 2px, transparent 3px),
radial-gradient(#f9b 2px, transparent 3px),
#fee;
background-position: 0 0, 20px 20px;
background-size: 40px 40px;
2. Folha de caderno
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #fcc 79px, #fcc 81px, transparent 81px),
linear-gradient(#fee .1em, transparent .1em);
background-size: 100% 1.2em;
3. Gingham
background-image: linear-gradient(90deg, rgba(235, 198, 245, 0.5) 50%, transparent 50%),
linear-gradient(rgba(235, 198, 245, 0.5) 50%, transparent 50%);
background-size:50px 50px;
background-color: lightblue;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
background-color: pink;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;
6. Linha horizontal
background-color: mistyrose;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;
7. Borda de ondinha
background: linear-gradient(#8c7676 50%, rgba(205,235,215,0) 0) 0 0,
radial-gradient(circle closest-side, #8c7676 53%, rgba(205,235,215,0) 0) 0 0,
radial-gradient(circle closest-side, #8c7676 50%, rgba(205,235,215,0) 0) 55px 0 #f3eeda;
background-size:110px 200px;
background-repeat:repeat-x;
8. Madras
background-color: hsl(34, 53%, 82%);
background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
),
repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
);
9. Xadrez (ou losangos)
background-color: #cfeae3;
background-image: linear-gradient(45deg, aliceblue 25%, transparent 25%, transparent 75%, aliceblue 75%, aliceblue),
linear-gradient(-45deg, aliceblue 25%, transparent 25%, transparent 75%, aliceblue 75%, aliceblue);
background-size:60px 60px;
10. Brilhinho + bolinha
background-color: #faedfb;
background-image: radial-gradient(#faedfb 15%, transparent 0%), radial-gradient(#efd0f1 85%, transparent 0%);
background-size: 100px 100px, 100px 100px;
background-position: 50px -50px, 50px -50px;
11. Com blend-mode 'blendado' :)
background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.6) 0, rgba(192, 235, 250, 0.2) 2em), repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.4) 0, rgba(192, 235, 250, 0.1) 2em), #FFF;
background-blend-mode: multiply;
12. Listras (parece textura de madeira)
background-image: linear-gradient(to bottom, #c0bfa9 0.4571489685%, #b8b9a9 0.4571489685%, #b8b9a9 0.8883947959%, #c0bfa9 0.8883947959%, #c0bfa9 1.98070584%, #b8b9a9 1.98070584%, #b8b9a9 3.0130672537%, #c0bfa9 3.0130672537%, #c0bfa9 3.0147116294%, #b8b9a9 3.0147116294%, #b8b9a9 4.6701266926%, #c0bfa9 4.6701266926%, #c0bfa9 5.2862152891%, #b8b9a9 5.2862152891%, #b8b9a9 6.5646584192%, #c0bfa9 6.5646584192%, #c0bfa9 7.1270159769%, #b8b9a9 7.1270159769%, #b8b9a9 8.7520322731%, #c0bfa9 8.7520322731%, #c0bfa9 10.4563790872%, #b8b9a9 10.4563790872%, #b8b9a9 12.0167132363%, #c0bfa9 12.0167132363%, #c0bfa9 12.7328890949%, #b8b9a9 12.7328890949%, #b8b9a9 13.6890286982%, #c0bfa9 13.6890286982%, #c0bfa9 14.6565552527%, #b8b9a9 14.6565552527%, #b8b9a9 15.0995905188%, #c0bfa9 15.0995905188%, #c0bfa9 15.2472073952%, #b8b9a9 15.2472073952%, #b8b9a9 15.3900690988%, #c0bfa9 15.3900690988%, #c0bfa9 16.3124734464%, #b8b9a9 16.3124734464%, #b8b9a9 17.354547693%, #c0bfa9 17.354547693%, #c0bfa9 18.3048623185%, #b8b9a9 18.3048623185%, #b8b9a9 20.098474333%, #c0bfa9 20.098474333%, #c0bfa9 21.0486137989%, #b8b9a9 21.0486137989%, #b8b9a9 21.4176388434%, #c0bfa9 21.4176388434%, #c0bfa9 21.5431373903%, #b8b9a9 21.5431373903%, #b8b9a9 23.1714709001%, #c0bfa9 23.1714709001%, #c0bfa9 24.7048821657%, #b8b9a9 24.7048821657%, #b8b9a9 26.3200523937%, #c0bfa9 26.3200523937%, #c0bfa9 26.7846573925%, #b8b9a9 26.7846573925%, #b8b9a9 27.5890885249%, #c0bfa9 27.5890885249%, #c0bfa9 28.2125431169%, #b8b9a9 28.2125431169%, #b8b9a9 29.9973898993%, #c0bfa9 29.9973898993%, #c0bfa9 30.2358472951%, #b8b9a9 30.2358472951%, #b8b9a9 31.5512069664%, #c0bfa9 31.5512069664%, #c0bfa9 32.268265584%, #b8b9a9 32.268265584%, #b8b9a9 34.2297322967%, #c0bfa9 34.2297322967%, #c0bfa9 34.3062564826%, #b8b9a9 34.3062564826%, #b8b9a9 35.5346054428%, #c0bfa9 35.5346054428%, #c0bfa9 37.0439793929%, #b8b9a9 37.0439793929%, #b8b9a9 38.2372717679%, #c0bfa9 38.2372717679%, #c0bfa9 39.1368966117%, #b8b9a9 39.1368966117%, #b8b9a9 39.3907852365%, #c0bfa9 39.3907852365%, #c0bfa9 41.2608822237%, #b8b9a9 41.2608822237%, #b8b9a9 42.4042945394%, #c0bfa9 42.4042945394%, #c0bfa9 43.3649057818%, #b8b9a9 43.3649057818%, #b8b9a9 44.1740805741%, #c0bfa9 44.1740805741%, #c0bfa9 45.0769133316%, #b8b9a9 45.0769133316%, #b8b9a9 46.7413593435%, #c0bfa9 46.7413593435%, #c0bfa9 47.07741085%, #b8b9a9 47.07741085%, #b8b9a9 48.0993455587%, #c0bfa9 48.0993455587%, #c0bfa9 49.0385300321%, #b8b9a9 49.0385300321%, #b8b9a9 49.7378683796%, #c0bfa9 49.7378683796%, #c0bfa9 51.5077170467%, #b8b9a9 51.5077170467%, #b8b9a9 51.7955670194%, #c0bfa9 51.7955670194%, #c0bfa9 52.0756225544%, #b8b9a9 52.0756225544%, #b8b9a9 52.8497568234%, #c0bfa9 52.8497568234%, #c0bfa9 53.7794939436%, #b8b9a9 53.7794939436%, #b8b9a9 55.6833741253%, #c0bfa9 55.6833741253%, #c0bfa9 57.1914449764%, #b8b9a9 57.1914449764%, #b8b9a9 58.2116918023%, #c0bfa9 58.2116918023%, #c0bfa9 58.3865822615%, #b8b9a9 58.3865822615%, #b8b9a9 58.7824796219%, #c0bfa9 58.7824796219%, #c0bfa9 59.5773006849%, #b8b9a9 59.5773006849%, #b8b9a9 59.7427917896%, #c0bfa9 59.7427917896%, #c0bfa9 59.9930681439%, #b8b9a9 59.9930681439%, #b8b9a9 61.0015675204%, #c0bfa9 61.0015675204%, #c0bfa9 62.7129708687%, #b8b9a9 62.7129708687%, #b8b9a9 62.8683212375%, #c0bfa9 62.8683212375%, #c0bfa9 63.5682600909%, #b8b9a9 63.5682600909%, #b8b9a9 64.7677084327%, #c0bfa9 64.7677084327%, #c0bfa9 65.1754197204%, #b8b9a9 65.1754197204%, #b8b9a9 65.5165438371%, #c0bfa9 65.5165438371%, #c0bfa9 66.7723966392%, #b8b9a9 66.7723966392%, #b8b9a9 67.921176348%, #c0bfa9 67.921176348%, #c0bfa9 68.4241100697%, #b8b9a9 68.4241100697%, #b8b9a9 69.201582542%, #c0bfa9 69.201582542%, #c0bfa9 69.5777716302%, #b8b9a9 69.5777716302%, #b8b9a9 70.0825776024%, #c0bfa9 70.0825776024%, #c0bfa9 70.8848909419%, #b8b9a9 70.8848909419%, #b8b9a9 72.4912914846%, #c0bfa9 72.4912914846%, #c0bfa9 74.4164564795%, #b8b9a9 74.4164564795%, #b8b9a9 74.4843981286%, #c0bfa9 74.4843981286%, #c0bfa9 75.1220942301%, #b8b9a9 75.1220942301%, #b8b9a9 75.6066403932%, #c0bfa9 75.6066403932%, #c0bfa9 76.4052848281%, #b8b9a9 76.4052848281%, #b8b9a9 76.5835411271%, #c0bfa9 76.5835411271%, #c0bfa9 78.1367667834%, #b8b9a9 78.1367667834%, #b8b9a9 79.0619697657%, #c0bfa9 79.0619697657%, #c0bfa9 81.0153422158%, #b8b9a9 81.0153422158%, #b8b9a9 82.9300195084%, #c0bfa9 82.9300195084%, #c0bfa9 84.0172694942%, #b8b9a9 84.0172694942%, #b8b9a9 84.690065516%, #c0bfa9 84.690065516%, #c0bfa9 85.0502101454%, #b8b9a9 85.0502101454%, #b8b9a9 85.0533659235%, #c0bfa9 85.0533659235%, #c0bfa9 86.5579798808%, #b8b9a9 86.5579798808%, #b8b9a9 87.9376636384%, #c0bfa9 87.9376636384%, #c0bfa9 89.8989234878%, #b8b9a9 89.8989234878%, #b8b9a9 91.1433640225%, #c0bfa9 91.1433640225%, #c0bfa9 91.5161791994%, #b8b9a9 91.5161791994%, #b8b9a9 91.9020443522%, #c0bfa9 91.9020443522%, #c0bfa9 93.4116925235%, #b8b9a9 93.4116925235%, #b8b9a9 93.8134792077%, #c0bfa9 93.8134792077%, #c0bfa9 94.3501577199%, #b8b9a9 94.3501577199%, #b8b9a9 96.1574403963%, #c0bfa9 96.1574403963%, #c0bfa9 97.9497669857%, #b8b9a9 97.9497669857%, #b8b9a9 99.2101013768%, #c0bfa9 99.2101013768%, #c0bfa9 100.0580909051%, #b8b9a9 100.0580909051%);
Mude os códigos ou nome das cores para os que preferir; alguns valores podem ser mudados para posicionar as formas geométricas (círculos, linhas...) ou aumentar e diminuir os tamanhos.
Créditos:
Esses códigos foram encontrados no Codepen e no Codier de:
){kind=link}