Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div>hsl( 0, 70%, 62% )</div> 
  <div>hsl( 40, 90%, 58% )</div> 
  <div>hsl( 60, 80%, 40% )</div> 
  <div>hsl( 180, 40%, 50% )</div>
</body>
</html>
 
BODY {
  padding-top: 30px;
  text-align: center;
}
DIV {
  display: inline-block;
  width: 10em;
  height: 10em;
  margin: .2em;
  border-radius: 50%;
  vertical-align: middle;
  line-height: 10.5em;
  text-shadow: 2px 0 rgba(0%, 0%, 0%,.4);
  color: #FFF;
  }
DIV:nth-child(1) {
  background: hsl( 0, 70%, 62% );
  }
DIV:nth-child(2) {
  background: hsl( 40, 90%, 58% );
  }
DIV:nth-child(3) {
  background: hsl( 60, 80%, 40% );
  }
DIV:nth-child(4) {
  background: hsl( 180, 40%, 50% );
  }
Output

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

Dismiss x