<p>I whip my mouse back and forth</p>
:root {
--font-title: 18px;
--grad-start: hsl(280, 100%, 75%);
--grad-end: hsl(40, 100%, 50%);
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
background: linear-gradient(135deg, var(--grad-start), var(--grad-end))
}
p {
position: relative;
padding: 5px 10px;
border: 1px solid currentColor;
border-radius: var(--font-title);
font: 100 var(--font-title)/1 sans-serif;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
&::before, &::after {
position: absolute;
display: block;
width: 100%;
padding: 5px;
font-size: 12px;
font-variant-numeric: tabular-nums;
color: #fff;
}
&::before {
content: attr(data-gradStart);
bottom: 100%;
}
&::after {
content: attr(data-gradEnd);
top: 100%;
}
}
View Compiled
const w = window.innerWidth
const p = document.querySelector('p')
const getPercentX = (x) => Math.round(x / w * 360)
const styleEl = document.documentElement.style
const setStyle = styleEl.setProperty.bind(styleEl);
document.addEventListener('mousemove', (e) => {
const percentX = getPercentX(e.clientX)
console.log(percentX);
const gradStart = `hsl(${percentX}, 100%, 75%)`
const gradEnd = `hsl(${(percentX + 120) % 360}, 100%, 50%)`
setStyle('--grad-start', gradStart)
setStyle('--grad-end', gradEnd)
p.setAttribute('data-gradStart', gradStart)
p.setAttribute('data-gradEnd', gradEnd)
})
View Compiled
This Pen doesn't use any external CSS resources.