サイト閲覧者が背景色を２色選びグラデーションを作成する

HTML, JSについて質問です。
サイト閲覧者が要素の背景色を選ぶような機能を検討しております。
その際、閲覧者には2色を選んでもらいグラデーション表示をさせたいと考えております。
下記コードでうまく実装できておらず、改善策を教えていただきたいです。

JS

javascript

<script type="text/javascript">function setBGcolor2(e) {function setBGcolor2(f) {document.getElementById('msg').style.background = `linear-gradient(#${e}, #${f})`;}}</script>

HTML

html

<ul><p>Background color1 <input type="color" onChange="setBGcolor1(this.value);"><br><p>Background color2 <input type="color" onChange="setBGcolor2(this.value);"><br></ul>