Make a CSS gradient background

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root {
  font-family: system-ui, sans-serif;
  color: #18223b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  padding: 24px;
  background: #edf1ff;
  display: grid;
  place-items: center;
}
main {
  width: min(100%, 480px);
  background: white;
  border-radius: 20px;
  padding: 24px;
}
h1 {
  font-size: 24px;
  margin: 0 0 16px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  min-height: 44px;
  border: 1px solid #afbddd;
  border-radius: 10px;
  padding: 10px 14px;
  background: #eff3ff;
  color: #18223b;
  cursor: pointer;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #3658bf;
  outline-offset: 3px;
}
p {
  line-height: 1.65;
}
label {
  display: block;
  margin: 16px 0 6px;
}
input:not([type="checkbox"]),
select,
textarea {
  max-width: 100%;
  width: 100%;
  padding: 10px;
  border: 1px solid #7a8496;
  border-radius: 8px;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
#gradient-preview {
  height: 150px;
  border-radius: 14px;
  border: 1px solid #afbddd;
}
input[type="color"] {
  height: 44px;
}
</style>
</head>
<body>
<main
  ><h1>Two colors, a new mood</h1><label for="start-color">First color</label
  ><input
    type="color"
    id="start-color"
    value="#3658bf"
  /><label for="end-color">Second color</label
  ><input
    type="color"
    id="end-color"
    value="#b16fd8"
  /><label for="gradient-angle">Angle</label
  ><input
    type="range"
    id="gradient-angle"
    min="0"
    max="360"
    value="135"
  /><p><output id="angle-output">135°</output></p
  ><div
    id="gradient-preview"
    aria-label="Gradient preview"
  ></div
  ><label for="gradient-code">CSS to copy</label
  ><textarea
    id="gradient-code"
    readonly
    rows="3"
  ></textarea
  ></main
>
<script>
const start = document.querySelector("#start-color"),
  end = document.querySelector("#end-color"),
  angle = document.querySelector("#gradient-angle"),
  preview = document.querySelector("#gradient-preview"),
  code = document.querySelector("#gradient-code");
function update() {
  const value =
    "linear-gradient(" +
    Number(angle.value) +
    "deg, " +
    start.value +
    ", " +
    end.value +
    ")";
  preview.style.background = value;
  code.value = "background: " + value + ";";
  document.querySelector("#angle-output").textContent = angle.value + "°";
}
[start, end, angle].forEach((input) => input.addEventListener("input", update));
update();
</script>
</body>
</html>