Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>Grids</title>
</head>
<body>
  <div class="grid-gradient"></div>
</body>
</html>
 
BODY {
  text-align: center;
  color: #999;
  text-shadow: 1px 0 1px rgba(0,0,0,.5);
  }
DIV {
  display: inline-block;
  position: relative;
  width: 45%;
  height: 15em;
  overflow: hidden;
  margin: 0 2%;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: top;   
  }
​
.grid-gradient {
  background: 
    repeating-linear-gradient(
    transparent,transparent 20px, yellowgreen 22px
    ),
    repeating-linear-gradient(
    90deg,
    transparent,transparent 20px, yellowgreen 22px
    );
  border: 2px solid yellowgreen;
  }
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x