<div class="container">
<h1>Gradient Generator</h1>
<div class="preview"></div>
<div class="gradient-type">
<label>
<input type="radio" name="gradient-type" value="linear" checked> Linear
</label>
<label>
<input type="radio" name="gradient-type" value="radial"> Radial
</label>
</div>
<div class="color-control">
<div class="color-list">
<!-- colors added here -->
</div>
<div class="add-color">
<button class="add-color-btn">+</button>
</div>
</div>
<div class="slider-wrapper ">
<div class="slider-content">
<span>0°</span>
<span id="angle-value">45°</span>
<span>360°</span>
</div>
<input class="slider" type="range" id="angle" min="0" max="360" value="45" />
</div>
<pre id="output"></pre>
<input type="text" name="" class="css-output">
<button class="copy-css">
Copy CSS
</button>
</div>
xxxxxxxxxx
@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"] {
appearance: none;
appearance: none;
width: 100%;
height: 10px;
background: #e5e7eb;
border-radius: 2px;
outline: none;
cursor: pointer;
}
.slider-wrapper input[type="range"]::slider-thumb {
appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 5px;
background: #119cec;
cursor: pointer;
}
.slider-wrapper input[type="range"]::range-thumb {
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;
}
xxxxxxxxxx
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));
});
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.