If you’re looking for a simple and handy online HTML, CSS and JS playground, you might light LiveWeave. You don’t have to create an account to get started and the UI is pretty polished.
LiveWeave also comes with a super handy tool called the CSS Explorer that make playing around with certain settings very easy. You can drag a slider to adjust most settings including the gradient position value. 
It also comes with a Color Explorer which makes it easy to find colors, complementary colors, shades of colors, and more. To change the shade, move the Brightness slider.
You can also browse their Color List to find a color.
