I'm tried to create more CSS background patterns not included on http://lea.verou.me/css3patterns/ by Lea Verou

index.haml

.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern
.pattern

style.css

body{
  background: #cccccc;
}

.pattern{
  width: 200px;
  height: 200px;
  margin: 15px;
  box-shadow: 2px 2px 10px #000;
  border-radius: 15px;
  border: solid 10px rgba(0, 0, 0, .3);
  display: inline;
  float: left;
  
}
.pattern:nth-child(1){
  background:
    linear-gradient(-45deg, #000 5px, transparent 50px);
  background-color: #444;
  background-size: 50px 50px;
  
}

.pattern:hover{
  transform: scale(1.1);
}

.pattern:nth-child(2){
  background:
    radial-gradient(#fff 8px, transparent 10px);
  background-color: #111;
  background-size: 50px 50px;
}

.pattern:nth-child(3){
  background:
    radial-gradient(#fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
  background-color: #111;
  background-size: 30px 30px;
}

.pattern:nth-child(4){
  background:
    linear-gradient(45deg, #fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
  background-color: #111;
  background-size: 50px 50px;
}

.pattern:nth-child(5){
  background:
    linear-gradient(#fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
  background-color: #111;
  background-size: 50px 40px;
}

.pattern:nth-child(6){
  background:
    linear-gradient(-0deg, #fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
  background-color: #111;
  background-size: 40px 50px;
}

.pattern:nth-child(7){
  background:
    linear-gradient(90deg, #fff 3%, transparent 5%, #fff 7%, transparent 9%, #fff 11%, transparent 13%, #fff 15%, transparent 17%, #fff 19%, transparent 21%, #fff 23%, transparent 25%, #fff 27%, transparent 29%, #fff 31%, transparent 33%);
  background-color: #111;
  background-size: 100px 40px;
}

.pattern:nth-child(8){
  background:
    radial-gradient(#fff 20%, transparent 50%), 
    linear-gradient(45deg, #fff 10%, transparent 30%);
  background-color: #111;
  background-size: 15px 15px;
}

.pattern:nth-child(9){
  background: 
    linear-gradient(90deg, #fff 5%, #000  );
  background-color: #111;
  background-size: 15px 15px;
}

.pattern:nth-child(10){
  background: 
    linear-gradient(45deg, #fff 5%, #000  );
  background-color: #111;
  background-size: 15px 15px;
}

.pattern:nth-child(11){
  background: 
    radial-gradient(#fff 5%, #000 40%);
  background-color: #111;
  background-size: 40px 40px;
}

.pattern:nth-child(12){
  background: 
    linear-gradient(45deg, #fff 5%, #111 50%, transparent 40%), 
    linear-gradient(-45deg, #111 5%, #fff 50%, transparent 40%);
  background-color: #111;
  background-size: 20px 20px;
}

.pattern:nth-child(13){
  background: 
    linear-gradient(#fff 5%, #111 10%, transparent 40%),
    linear-gradient(0deg, #fff 5%, #111 10%, transparent 40%),
    radial-gradient(#111 10%, #fff 20%, transparent 30%);
  background-color: #111;
  background-size: 25px 25px;
}

.pattern:nth-child(14){
  background: 
    radial-gradient(#fff 7%, #111 10%, transparent 40%),
    linear-gradient(45deg, #fff 5%, #111 10%, transparent 10%, transparent 90%, #fff 95%);
  background-color: #111;
  background-size: 50px 50px;
}

.pattern:nth-child(15){
  background: 
    radial-gradient(#fff 17%, #111 20%, transparent 40%),
    linear-gradient(45deg, #fff 7%, #111 10%, transparent 10%, transparent 90%, #fff 95%),
    linear-gradient(-45deg, #fff 7%, #111 10%, transparent 10%, transparent 90%, #fff 95%);
  background-color: #111;
  background-size: 40px 40px;
}

CSS background patterns library - I've tried to create more CSS background patterns not included on http://lea.verou.me/css3patterns/ by Lea Verou