Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}
</style>
</head>
<body>
<h1>Linear Gradient - two-position color stops</h1>
<p>This linear gradient goes from left to right. It uses two-position color-stops. The adjacent colors have the same color-stop value, which creates a striped effect:</p>
<div id="grad1"></div>
</body>
</html>