This block uses SVG's linearGradient
element to create a linear gradient that you can update.
Use the color picker to change the colors. Drag the circles to change the gradient's orientation.
Libraries used: D3, jQuery, Spectrum, Font Awesome
xxxxxxxxxx
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/FontAwesome.otf" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
https://d3js.org/d3.v4.min.js
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js