<div class="card">
  <div class="gradient-preview"></div>
  <div class="controls">
    <div class="control">
      <label for="gradient-type">Gradient Type:</label>
      <select id="gradient-type">
        <option value="linear" selected>Linear</option>
        <option value="radial">Radial</option>
      </select>
    </div>
    <div class="control">
      <label for="direction">Direction (For Linear):</label>
      <select id="direction">
        <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 class="controlColor">
  <label for="color1">Color 1:</label>
  <input id="color1" type="color" value="#5665E9" />
  <label for="opacity1">Opacity 1:</label>
  <input id="opacity1" type="range" min="0" max="1" step="0.01" value="1" />
</div>
<div class="controlColor">
  <label for="color2">Color 2:</label>
  <input id="color2" type="color" value="#A271F8" />
  <label for="opacity2">Opacity 2:</label>
  <input id="opacity2" type="range" min="0" max="1" step="0.01" value="1" />
</div>

    
  </div>
  <textarea id="css-output" readonly>background: linear-gradient(to left top, rgba(86, 101, 233, 1), rgba(162, 113, 248, 1));</textarea>
  <div class="buttons">
    <button id="refresh">Refresh Colors</button>
    <button id="copy">Copy Code</button>
  </div>
</div>
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
 background: radial-gradient(circle, rgba(86, 101, 233, 1), rgba(152, 122, 205, 1));  padding: 10px;
}

.card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.gradient-preview {
  height: 200px;
  border-radius: 8px;
  background: linear-gradient(to left top, #5665e9, #a271f8);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.control {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.controlColor{
  display: flex;
  flex-direction: column;
 justify-content: space-evenly;
  gap: 8px;
}

label {
  font-size: 0.9rem;
  font-weight: 500;
}

select,
input {
  padding: 10px;
  font-size: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}
input{
  height: 45px;
  width:80%;
}
textarea {
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: none;
}

.buttons {
  display: flex;
  gap: 10px;
}

button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 5px;
  font-size: 0.9rem;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}

#refresh {
  background: #6c757d;
}

#refresh:hover {
  background: #5a6268;
}

#copy {
  background: #8a6cff;
}

#copy:hover {
  background: #704dff;
}

@media (max-width: 480px) {
  .gradient-preview {
    height: 150px;
  }

  textarea {
    font-size: 0.8rem;
  }

  button {
    font-size: 0.8rem;
  }
}
.controlColor input[type="range"] {
  width: 100%;
} 
input[type="color"] {
  width: 100%; /* Ensure full width */
  height: 45px; /* Consistent height */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 0; /* Remove padding */
}
const gradientPreview = document.querySelector(".gradient-preview");
const gradientTypeSelect = document.querySelector("#gradient-type");
const directionSelect = document.querySelector("#direction");
const colorInputs = document.querySelectorAll("input[type='color']");
const opacityInputs = document.querySelectorAll("input[type='range']");
const cssOutput = document.querySelector("#css-output");
const refreshButton = document.querySelector("#refresh");
const copyButton = document.querySelector("#copy");

// Generate random hex color
const getRandomColor = () =>
  `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0")}`;

// Update gradient preview and CSS output
const updateGradient = () => {
  const gradientType = gradientTypeSelect.value;
  const direction = directionSelect.value;
  const color1 = hexToRgba(colorInputs[0].value, opacityInputs[0].value);
  const color2 = hexToRgba(colorInputs[1].value, opacityInputs[1].value);

  let gradient;
  if (gradientType === "linear") {
    gradient = `linear-gradient(${direction}, ${color1}, ${color2})`;
  } else {
    gradient = `radial-gradient(circle, ${color1}, ${color2})`;
  }

  gradientPreview.style.background = gradient;
  cssOutput.value = `background: ${gradient};`;
};

// Convert hex color to rgba
const hexToRgba = (hex, opacity) => {
  const bigint = parseInt(hex.slice(1), 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};

// Generate random colors and update gradient
const randomizeColors = () => {
  colorInputs[0].value = getRandomColor();
  colorInputs[1].value = getRandomColor();
  opacityInputs[0].value = Math.random().toFixed(2);
  opacityInputs[1].value = Math.random().toFixed(2);
  updateGradient();
};

// Copy CSS code to clipboard
const copyToClipboard = () => {
  navigator.clipboard.writeText(cssOutput.value);
  copyButton.textContent = "Copied!";
  setTimeout(() => (copyButton.textContent = "Copy Code"), 1500);
};

// Event listeners
colorInputs.forEach((input) => input.addEventListener("input", updateGradient));
opacityInputs.forEach((input) => input.addEventListener("input", updateGradient));
gradientTypeSelect.addEventListener("change", updateGradient);
directionSelect.addEventListener("change", updateGradient);
refreshButton.addEventListener("click", randomizeColors);
copyButton.addEventListener("click", copyToClipboard);

// Initialize gradient
updateGradient();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.