<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();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.