<div class="container">
        <div class="box"></div>
            <div class="row options">
                <div class="column direction">
                    <p>Verlauf:</p>
                    <div class="select-box">
                        <select>
                            <option value="to top">Top</option>
                            <option value="to right top">Right top</option>
                            <option value="to right">Right</option>
                            <option value="to right bottom">Right Bottom</option>
                            <option value="to bottom">Bottom</option>
                            <option value="to left bottom">Left Bottom</option>
                            <option value="to left">Left</option>
                            <option value="to left top" selected >Left Top</option>
                        </select>
                    </div>
                </div>
                <div class="column colors">
                    <p>Farben:</p>
                        <div class="inputs">
                            <input type="color" name="" id="" value="#fa2929">
                            <input type="color" name="" id="" value="#4d58f9">
                        </div>
                </div>
            </div>
            <textarea class="row" disabled></textarea>
            <div class="row buttons">
                <button class="copy">Kopieren</button>
            </div>
 
        </div>
 
    </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #00509d;
}
 
.container {
  width: 450px;
  padding: 25px;
  border-radius: 7px;
  background: #fff;
}
 
.container .box {
  width: 100%;
  height: 220px;
  background: linear-gradient(to left top, #fa2929, #4d58f9);
  border-radius: 7px;
}
 
.container .row {
  display: flex;
  margin: 20px 0;
  justify-content: space-between;
}
 
.row :where(.column, button) {
  width: calc(100% / 2 - 12px);
}
 
.options p {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
 
.options .select-box {
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #aaa;
}
 
.select-box select {
  width: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: 0.8rem;
}
 
.options .colors {
  margin-left: 60px;
}
 
.colors input {
  height: 40px;
  width: calc(100% / 2 - 20px);
}
 
.colors input:last-child {
  margin-left: 10px;
}
 
.container textarea {
  width: 100%;
  resize: none;
  font-size: 1rem;
  color: #333;
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #ccc;
}
 
.buttons button {
  padding: 15px 0;
  font-size: 1rem;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 5px;
  background: #fff;
  color: #000;
  width: 100%;
}
 
.buttons button:hover {
  background: #6c757d;
  color: #fff;
  border: 1px solid #ccc;
}

const box = document.querySelector(".box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const copyButton = document.querySelector(".copy");
 
const generateGradient = () => {
  const gradient = `linear-gradient( ${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
  box.style.background = gradient;
  textarea.value = `background: ${gradient}`;
};
 
const copyCode = () => {
  navigator.clipboard.writeText(textarea.value);
  copyButton.innerText = "Kopiert";
  setTimeout(() => (copyButton.innerText = "Kopieren"), 1600);
};
 
colorInputs.forEach((input) => {
  input.addEventListener("input", generateGradient);
});
 
selectMenu.addEventListener("change", generateGradient);
 
copyButton.addEventListener("click", copyCode);