<div class="container">
<div class="gradient-viz"></div>
<input type="color" class="color-select stop1" value="#b3ffce"/>
<input type="color" class="color-select stop2" value="#9e5ac9"/>
<input type="range" value="40" min="0" max="100" class="gradient-hint">
<code class="gradient-output">
</code>
</div>
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap");
:root {
--stop1: #b3ffce;
--grad-hint: 40%;
--stop2: #9e5ac9;
}
.gradient-viz {
display: block;
width: 100%;
height: 4rem;
background: linear-gradient(to right, var(--stop1), var(--grad-hint), var(--stop2));
}
.gradient-hint {
width: 100%;
}
code {
display: block;
border: 1px solid lightgray;
background: #f3f3f3;
padding: 1.5rem;
font-family: 'IBM Plex Mono';
font-size: 1.25rem;
}
.container {
max-width: 600px;
margin: 2rem auto;
position: relative;
padding: 0 1.7rem;
}
.color-select {
appearance: none;
position: absolute;
top: 0;
border: 1px solid;
outline: none;
width: 25px;
height: 3.9rem;
padding: 0;
overflow: hidden;
background: none;
cursor: pointer;
}
input[type="color"]::color-swatch-wrapper {
padding: 0;
}
input[type="color"]::color-swatch {
border: none;
}
.stop1 {
left: 0;
background: var(--stop1);
}
.stop2 {
right: 0;
background: var(--stop2);
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;background-color: #313131;
}
document.querySelector('.gradient-hint').addEventListener('input', (e) => {
document.documentElement.style.setProperty('--grad-hint', e.target.value + '%')
updateCode()
})
document.querySelector('.stop1').addEventListener('input', (e) => {
document.documentElement.style.setProperty('--stop1', e.target.value)
updateCode()
})
document.querySelector('.stop2').addEventListener('input', (e) => {
document.documentElement.style.setProperty('--stop2', e.target.value)
updateCode()
})
updateCode = () => {
const body = window.getComputedStyle(document.body)
const codeBlock = document.querySelector('.gradient-output')
codeBlock.innerText = `background: linear-gradient(to right, ${body.getPropertyValue('--stop1')}, ${body.getPropertyValue('--grad-hint')}, ${body.getPropertyValue('--stop2')})`
}
updateCode()