codepens/zig-zag-gradient-lab/dist/script.js

const angleInput = document.querySelector('[data-input="range"]')
const thicknessInput = document.querySelector('[data-input="thickness"]')
const widthInput = document.querySelector('[data-input="width"]')
const colorInput = document.querySelector('[data-input="color1"]')
const contrastInput = document.querySelector('[data-input="contrast"]')
const outputContainer = document.querySelector('[data-output]')
const bg = document.querySelector('[data-bg]')
const inputs = [...document.querySelectorAll('[data-input]')]

const angleChange = (e) => {
	const newAngle = `${e.target.value}deg`
	setItem('--angle', newAngle, 'angle', e.target.value)
}

const thicknessChange = (e) => {
	const newThickness = `${e.target.value}rem`
	setItem('--t', newThickness, 'thickness', e.target.value)
}

const setItem = (cssVar, newValue, property, unitlessValue) => {
	bg.style.setProperty(cssVar, newValue)
	getCSSOutput()
	localStorage.setItem(property, unitlessValue)
}

const widthChange = (e) => {
	const newWidth = `${e.target.value}rem`
	setItem('--w', newWidth, 'width', e.target.value)
}

const colorChange = (e) => {
	const newColor = `${e.target.value}deg`
	setItem('--h1', newColor, 'color', e.target.value)
}

const setContrast = (contrast) => {
	const newL = `${contrast}%`
	const newD = `${100 - contrast}%`
	bg.style.setProperty('--l', newL)
	bg.style.setProperty('--d', newD)
}

const contrastChange = (e) => {
	setContrast(e.target.value)
	getCSSOutput()
	localStorage.setItem('contrast', e.target.value)
}

const getCSSOutput = () => {
	const { backgroundImage, backgroundSize } = getComputedStyle(bg)
	const backgroundImageAfter = getComputedStyle(bg, '::after').backgroundImage
	const mask = getComputedStyle(bg, '::after').maskImage
	const cssOutput = `
<pre>
.bg {
	background-image: ${backgroundImage};
	background-size: ${backgroundSize};
}

.bg::after {
	background-image: ${backgroundImageAfter};
	background-size: ${backgroundSize};
	-webkit-mask-image: ${mask};
	mask-image: ${mask};
}
</pre>`
	
	outputContainer.innerHTML = cssOutput
}

const setStyle = (input, property, unitlessValue, value) => {
	if (unitlessValue) {
		input.value = unitlessValue
		bg.style.setProperty(property, value)
	}
}

const getInitialStateFromLocalStorage = () => {
	const angle = localStorage.getItem('angle')
	const thickness = localStorage.getItem('thickness')
	const width = localStorage.getItem('width')
	const color = localStorage.getItem('color')
	const contrast = localStorage.getItem('contrast')
	
	setStyle(angleInput, '--angle', angle, `${angle}deg`)
	setStyle(thicknessInput, '--t', thickness,  `${thickness}rem`)
	setStyle(widthInput, '--w', width, `${width}rem`)
	setStyle(colorInput, '--h1', color, `${color}deg`)
	
	if (contrast) {
		setContrast(contrast)
		contrastInput.value = contrast
	}
}

getInitialStateFromLocalStorage()
getCSSOutput()

angleInput.addEventListener('change', angleChange)
thicknessInput.addEventListener('change', thicknessChange)
widthInput.addEventListener('change', widthChange)
colorInput.addEventListener('change', colorChange)
contrastInput.addEventListener('change', contrastChange)

let activeInput

const handleMouseDown = (e) => {
	console.log(e)
	activeInput = e.target
}

const updateValues = (e) => {
	const { id } = e.target
	
	if (id === 'angle') {
		angleChange(e)
	}
	
	if (id === 'thickness') {
		thicknessChange(e)
	}
	
	if (id === 'color1') {
		colorChange(e)
	}
	
	if (id === 'width') {
		widthChange(e)
	}
	
	if (id === 'contrast') {
		contrastChange(e)
	}
}

const handleMouseMove = (e) => {
	if (activeInput === e.target) {
		updateValues(e)
	}
}

inputs.forEach(el => {
	el.addEventListener('mousedown', handleMouseDown)
	el.addEventListener('mousemove', _.throttle(handleMouseMove, 100))
})

CSS.registerProperty({
  name: '--angle',
  syntax: '<angle>',
  inherits: true,
  initialValue: '45deg',
})

CSS.registerProperty({
  name: '--t',
  syntax: '<length>',
  inherits: true,
  initialValue: '30px',
})

CSS.registerProperty({
  name: '--w',
  syntax: '<length>',
  inherits: true,
  initialValue: '30px',
})