Solution 1 :

I created an example.

const body = document.querySelector("body");
const startInput = document.querySelector("#start");
const endInput = document.querySelector("#end");

let startHex = "#fff";
let endHex = "#fff";

let gradient;

function styleBody(){
  gradient = `linear-gradient(to right, ${startHex}, ${endHex})`; = gradient;

startInput.addEventListener("input", () => {
  startHex =;

endInput.addEventListener("input", () => {
  endHex =;
<input type="color" id="start">
<input type="color" id="end">

Solution 2 :

const colorPicker1 = document.querySelector("#picker1");
const colorPicker2 = document.querySelector("#picker2");
var firstColor = '#0F0';
var secondColor = '#F00'

document.body.addEventListener("input", gradientPick);

function gradientPick(event) {
  if( === colorPicker1){
    firstColor =;
  if( === colorPicker2){
    secondColor =;
  } = `linear-gradient(${firstColor}, ${secondColor})`; = "contain"; = "100vh";
<input id="picker1" type="color" value="#ff0000">
<input id="picker2" type="color" value="#00ff00">

Problem :

I would like to make it so that the user can input a hex into one text box and another hex into a different text box. This would then use linear-gradient so that it would gradient the first color to the second color. In the code snippet is an example of what it may produce. I would prefer to only use css and html but can use javascript if neccessary. Thanks to anyone who attempts to solve this problem any bit. I will respond to any questions in case I am being vague.

body {
  background: linear-gradient(to right, #ffb6ce, #ff00ea);
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


Comment posted by Dhaval Jardosh

You will have to use JS, and let the user select the gradients and have those gradients as variables.

Comment posted by kloddant

I would use specifically for this, because most modern browsers now support this input type, and those that don’t support it fall back to text anyway. Using this type will allow the user to select a color more easily for browsers that do support it, because those browsers will present the user with a color wheel or some such thing to help them choose, rather than requiring them to manually enter a hex value.