JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Background color1 <input type="color"></li>
  <li>Background color2 <input type="color"></li>
</ul>

<p id="msg" class="msg">背景色（CSSでデフォルト灰色にしてます）</p>

CSS

.msg {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

JavaScript

// 必要な要素の取得
const colorInputs = document.querySelectorAll('input[type="color"]');
const msgArea = document.getElementById('msg');

// input2つともにイベントリスナーを設定
colorInputs.forEach(input => input.addEventListener('change', setBGcolor));

// 背景色を変更する関数
function setBGcolor() {
	// input２つとものvalueを取得し、それぞれ変数に代入
	const [color1, color2] = [...colorInputs].map(input => input.value);
  // 取得されるvalueにはすでに#がついているので、↓の中で#を書いてはいけない
  msgArea.style.background = `linear-gradient(${color1}, ${color2})`;
}