A CodePen by Matt. Scalable textures : toolkit gallery v.1.2 - Please love and reuse these textures. I collected and display here 40+ elegant black or white textures with associated code. Helpful for designers to see and reuse them. Submissions: Patterns/texture submission welcome on the /details#chat! Source: Most patterns are available for fre…

index.html

<h2 class="msg"><br />Elegant textures' url & code. You know another ? Please submit on <a href="http://codepen.io/hugolpz/details/wsfbt">this pen's chat</a></h2>
<table><tr><td>
  <!-- <h2>Blacks </h2> -->
<div class="wrapper hixs_pattern_evolution"></div>
<div class="wrapper darkLeather"></div>
<div class="wrapper dark_wood"></div>
<div class="wrapper diagmonds"></div>  
<div class="wrapper real_cf"></div>
<div class="wrapper triangles"></div>
<div class="wrapper nami"></div>
<div class="wrapper black_scales"></div>
<div class="wrapper dark_stripes"></div>
<div class="wrapper dvsup"></div>
<div class="wrapper flowers"></div>
<div class="wrapper robots"></div>
<div class="wrapper squares"></div>
<div class="wrapper micro_carbon"></div>
<div class="wrapper tactile_noise"></div>
<div class="wrapper wood_1"></div>
  <!-- <h2>Grey</h2> -->
<div class="wrapper dotted1"></div>
<div class="wrapper carbonFibre"></div>
<div class="wrapper starring"></div>
<div class="wrapper px_by_Gre3g"></div>
<div class="wrapper zigzag"></div>
<div class="wrapper always_grey"></div>
<div class="wrapper stripsLarge"></div>
  </td><td>
  <!-- <h2>White </h2> -->
<div class="wrapper merely_cubed"></div>
<div class="wrapper whiteLeather"></div>
<div class="wrapper plaid"></div>
<div class="wrapper light_grey_floral_motif"></div>
<div class="wrapper knitted-netting"></div>
<div class="wrapper small-crackle-bright"></div>
<div class="wrapper soft_pad"></div>
<div class="wrapper whitediamond"></div>
<div class="wrapper pineapplecut"></div>
<div class="wrapper gold_scale"></div>
<div class="wrapper silver_scales"></div>
<div class="wrapper washi"></div>
<div class="wrapper cubes"></div>
<div class="wrapper white_carbon"></div><!--
<div class="wrapper "></div>
<div class="wrapper "></div>
<div class="wrapper "></div>
<div class="wrapper "></div>
<div class="wrapper "></div>
<div class="wrapper "></div>
<div class="wrapper "></div>-->
  <td></td>  </td></tr></table>

script.js

/* Most patterns are available for free @ http://subtlepatterns.com/snacks/ . For your offline developments, just download:
Subtle Patterns Volume 1
Subtle Patterns Volume 2
Subtle Patterns Volume 3
*/

style.css

@import url(http://fonts.googleapis.com/css?family=Allura);
body{background:url('http://hdwallpaperpics.com/wallpaper/picture/image/soft_bokeh_lights_background-other.jpg');}

/* TEXTURE's BOX */
.wrapper{ 
  width:100%;
  height:120px;
  margin:50px auto;
  position:relative;
  z-index:-15;
  border:3px dashed grey;
  box-shadow: 0 0 0 15px #111111;
  border-radius:20px;
}
/* TEXTURES */
/* Black ones */
.hixs_pattern_evolution { background-image: url('http://subtlepatterns.com/patterns/hixs_pattern_evolution.png'); }
.darkLeather { background:url('http://subtlepatterns.com/patterns/dark_leather.png'); }
.dark_wood { background-image: url('http://subtlepatterns.com/patterns/dark_wood.png'); }
.diagmonds { background-image: url('http://subtlepatterns.com/patterns/diagmonds.png'); }
.triangles { background-image: url('http://subtlepatterns.com/patterns/triangles.png'); }
.real_cf { background-image: url('http://subtlepatterns.com/patterns/real_cf.png'); }
.nami { background-image: url('http://subtlepatterns.com/patterns/nami.png'); }
.black_scales { background-image: url('http://subtlepatterns.com/patterns/black_scales.png'); }
.dark_stripes { background-image: url('http://subtlepatterns.com/patterns/dark_stripes.png'); }
.dvsup { background-image: url('http://subtlepatterns.com/patterns/dvsup.png'); }
.flowers { background-image: url('http://subtlepatterns.com/patterns/flowers.png'); }
.robots { background-image: url('http://subtlepatterns.com/patterns/robots.png'); }
.squares { background-image: url('http://subtlepatterns.com/patterns/squares.png'); }
.micro_carbon { background-image: url('http://subtlepatterns.com/patterns/micro_carbon.png'); }
.tactile_noise { background-image: url('http://subtlepatterns.com/patterns/tactile_noise.png'); }
.wood_1 { background-image: url('http://subtlepatterns.com/patterns/wood_1.png'); }
/* grey */
.dotted1 {      
    background-color: #111 ;
    background-image: -webkit-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.25)),
                      -webkit-radial-gradient(circle, hsla(0,0%,0%,.5) 25%, transparent 25%),
                      -webkit-radial-gradient(circle, hsla(0,0%,100%,.05) 30%, transparent 30%);
    background-position: 50% 75%, 50% 0, 50% .1em;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 150% 150%, .5em .5em, .5em .5em;
    font-size: 100%;
    padding-bottom: 1.5em; }
.carbonFibre { background-image: url('http://subtlepatterns.com/patterns/carbon_fibre.png'); }
.starring { background-image: url('http://subtlepatterns.com/patterns/starring.png'); }
.px_by_Gre3g { background-image: url('http://subtlepatterns.com/patterns/px_by_Gre3g.png'); }
.zigzag { background-image: url('http://subtlepatterns.com/patterns/zigzag.png'); }
.stripsLarge { background: repeating-linear-gradient(45deg, #555 0%,#555 10%, #222 10%, #222 20%); }

/* White ones */
.merely_cubed { background-image: url('http://subtlepatterns.com/patterns/merely_cubed.png'); }
.whiteLeather { background:url('http://subtlepatterns.com/patterns/white_leather.png'); }
.plaid { background-image: url('http://subtlepatterns.com/patterns/plaid.png'); }
.light_grey_floral_motif{ background-image: url('http://subtlepatterns.com/patterns/light_grey_floral_motif.png'); }
.knitted-netting { background-image: url('http://subtlepatterns.com/patterns/knitted-netting.png'); }
.small-crackle-bright { background-image: url('http://subtlepatterns.com/patterns/small-crackle-bright.png'); }
.soft_pad { background-image: url('http://subtlepatterns.com/patterns/soft_pad.png'); }
.whitediamond { background-image: url('http://subtlepatterns.com/patterns/whitediamond.png'); }
.pineapplecut { background-image: url('http://subtlepatterns.com/patterns/pineapplecut.png'); }
.always_grey { background-image: url('http://subtlepatterns.com/patterns/always_grey.png'); }
.gold_scale { background-image: url('http://subtlepatterns.com/patterns/gold_scale.png'); }
.silver_scales { background-image: url('http://subtlepatterns.com/patterns/silver_scales.png'); }
.washi { background-image: url('http://subtlepatterns.com/patterns/washi.png'); }
.cubes { background-image: url('http://subtlepatterns.com/patterns/cubes.png'); }
.white_carbon { background-image: url('http://subtlepatterns.com/patterns/white_carbon.png'); }

/* Empty template for new url from sublepatters.com */
. { background-image: url('http://subtlepatterns.com/patterns/.png'); }


h2.msg { color: #EEE; font-size: 22px; font-weight: bold; text-align: center ; }
h2.msg a { color: #69c; }
/* div { display: inline ; } */
table { width: 80%; margin-top:-50px;}
table, td { min-width: 100%; padding: 30px; vertical-align: top; align: center; }