@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

​

body {

  display: flex;

  flex-direction: column;

  align-items: center;

  min-height: 100vh;

  padding: 20px;

  font-family: "DM Mono", monospace;

}

.container {

  width: 80%;

  max-width: 600px;

  display: flex;

  gap: 20px;

  flex-direction: column;

  align-items: center;

  border-radius: 20px;

  border: #f3ecec solid 1px;

  padding: 40px 80px;

}

.preview {

  width: 100%;

  height: 200px;

  border-radius: 8px;

}

.color-control {

  display: flex;

  gap: 25px;

  padding: 20px;

  border-radius: 8px;

}

.color-list {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 15px;

}

.color-list input[type="color"] {

  width: 48px;

  height: 48px;

  border: none;

  border-radius: 8px;

  padding: 4px;

  cursor: pointer;

}

​

.color-stop .add-color {

  width: 60px;

  height: 60px;

}

.fa-solid.fa-trash-can {

  position: absolute;

  opacity: 0;

  top: -35%;

  left: calc(100% - 20px);

  transform: none;

  background: transparent;

  font-size: 24px;

  cursor: pointer;

  color: red;

  transition: all 0.3s ease-in-out;

}

​

.color-stop {

  position: relative;

}

.color-stop:hover .fa-solid.fa-trash-can {

  opacity: 1;

}

​

.add-color-btn {

  width: 48px;

  height: 48px;

  border: none;

  border-radius: 8px;

  padding: 4px;

  cursor: pointer;

}

​

.slider-wrapper {

  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 10px;

  font-family: Arial, sans-serif;

  width: 100%;

}

.slider-wrapper input[type="range"] {

  -webkit-appearance: none;

  appearance: none;

  width: 100%;

  height: 10px;

  background: #e5e7eb;

  border-radius: 2px;

  outline: none;

  cursor: pointer;

}

​

.slider-wrapper input[type="range"]::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 25px;

  height: 25px;

  border-radius: 5px;

  background: #119cec;

  cursor: pointer;

}

​

.slider-wrapper input[type="range"]::-moz-range-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 25px;

  height: 25px;

  border-radius: 5px;

  background: #119cec;

  cursor: pointer;

}

​

.slider-content {

  display: flex;

  justify-content: space-between;

  width: 100%;

}

​

#output {

  color: #000;

  width: 100%;

  height: 80px;

  padding: 15px;

  border: 1px solid #e7e2e2;

  border-radius: 12px;

}

​

.css-output {

  display: none;

}

​

.copy-css {

  color: #fff;

  width: 100%;

  font-size: 1.2rem;

  width: 100%;

  height: 45px;

  background-color: #119cec;

  border-radius: 8px;

  font-weight: 800;

  border: none;

}

pre {

  white-space: pre-wrap;

  word-wrap: break-word;

}

​

document.addEventListener('DOMContentLoaded',()=>{

​

const slider = document.getElementById("angle");

const sliderValue = document.getElementById("angle-value");

const colorlist = document.querySelectorAll(".color-list");

const addColorBtn = document.querySelector(".add-color-btn");

const gradientTypeInputs = document.querySelectorAll('input[name="gradient-type"]');

const sliderContainer = document.querySelector('.slider-wrapper');

​

addColorBtn.addEventListener("click", addColorStop);

slider.addEventListener("input", () => {

  sliderValue.textContent = `${slider.value}°`;

  updateGradient();

});

​

gradientTypeInputs.forEach(input => {

  input.addEventListener('change', () => {

    updateGradient();

    toggleAngleSlider();

  });

});

​

let colors = ['#d81848', '#fd26ae', '#0c43c6'];

​

const updateGradient = () => {

  let gradientString;

  const angle = document.getElementById("angle").value;

  const gradientType = document.querySelector('input[name="gradient-type"]:checked').value;

  console.log(gradientType);

​

  if (gradientType === 'linear') {

    gradientString = `linear-gradient(${angle}deg, ${colors.join(", ")})`;

  } else {

    gradientString = `radial-gradient(circle, ${colors.join(", ")})`;

  }

​

  const gradientPreview = document.querySelector(".preview");

  gradientPreview.style.background = gradientString;

  document.getElementById(

    "output"

  ).textContent = `.gradient {\n    background: ${gradientString};\n}`;

};

​

function toggleAngleSlider() {

  const gradientType = document.querySelector('input[name="gradient-type"]:checked').value;

  sliderContainer.style.display = gradientType === 'linear' ? 'block' : 'none';

}

​

function initializeGradient() {

  const colorList = document.querySelector(".color-list");

  colorList.innerHTML = "";

  colors.forEach((color, index) => {

    const colorStop = document.createElement("div");

    colorStop.className = "color-stop";

​

    const colorInput = document.createElement("input");

    colorInput.type = "color";

    colorInput.className = "color-input";

    colorInput.value = color;

    colorInput.dataset.index = index;

    colorInput.addEventListener("input", (e) =>

      updateColor(e.target.dataset.index, e.target.value)

    );

​

    const removeButton = document.createElement("i");

    removeButton.className = "fa-solid fa-trash-can";

    removeButton.onclick = () => removeColorStop(index);

​

    colorStop.appendChild(colorInput);

    colorStop.appendChild(removeButton);

    colorList.appendChild(colorStop);

  });

​

  updateGradient();

  toggleAngleSlider();

}

​

initializeGradient();

​

function removeColorStop(index) {

  if (colors.length > 2) {

    colors.splice(index, 1);

    initializeGradient();

  } else {

    alert("Minimum 2 colors required!");

  }

}

​

function addColorStop() {

  if (colors.length >= 6) {

    alert("Maximum 6 colors allowed!");

    return;

  }

  colors.push("#ffffff");

  initializeGradient();

}

​

function updateColor(index, color) {

  colors[index] = color;

  updateGradient();

}

​

const copyCssBtn = document.querySelector(".copy-css");

copyCssBtn.addEventListener("click", () => {

  const cssGradient = document.querySelector(".css-output");

  cssGradient.value = document.getElementById("output").textContent;

  cssGradient.select();

  navigator.clipboard

    .writeText(cssGradient.value)

    .then(() => alert("CSS copied to clipboard!"))

    .catch((err) => console.error("Failed to copy: ", err));

});

})