<html>
<head>
<style>
.square {
margin: 25px;
height: 60px;
width: 60px;
background-color: black;
}
.rounded {
margin: 25px;
height: 60px;
width: 60px;
background-color: black;
border-radius: 30px;
}
#negative {
-webkit-box-shadow: 110px 0px 0px -10px #00f,
260px 0px 0px -15px #00d,
410px 0px 0px -20px #00b,
560px 0px 0px -25px #009;
}
#positive {
-webkit-box-shadow: 110px 0px 0px 10px #00f,
260px 0px 0px 15px #00d,
410px 0px 0px 20px #00b,
560px 0px 0px 25px #009;
}
</style>
</head>
<body>
<div class="square" id="negative"></div>
<div class="square" id="positive"></div>
<div class="rounded" id="negative"></div>
<div class="rounded" id="positive"></div>
</body>
</html>