JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Change Background Gradient on Scroll</h1>

<h2>Linear Gradient - Top to Bottom</h2>
<p>This linear gradient starts at the top. It starts green, transitioning to blue.</p>

<h2 style="position:fixed;">Scroll to see the effect.</h2>

</body>
</html>

CSS

body {
  height: 3000px;
  background-image: linear-gradient(to bottom, #dd2a90 0%, #e7157c 5%, #ed0067 10%, #f00051 15%, #ef0039 20%, #ec3529 25%, #e64e18 30%, #df6200 35%, #d38400 40%, #b8a500 45%, #8bc400 50%, #23df0c 60%, #4121d8 63%, #0064fc 68%, #008fff 70%, #00b4ff 75%, #00d5ff 80%, #00e1f4 85%, #00ebdf 90%, #40f2c2 92%, #71e690 94%, #99d75e 96%, #bdc431 98%, #dfac0c 100%);
}