<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/rxcss@latest/dist/rxcss.min.js
  2. https://unpkg.com/@reactivex/rxjs/dist/global/Rx.min.js