Изменение CSS-градиента в зависимости от положения курсора

06.04.2022

6022

Изменение градиента, в зависимости от положения курсора над элементом (например <body> или кнопки) можно сделать с помощью JS, получив его координаты с преобразованием в цвет.

Во всех примерах через CSS назначается «стартовый» градиент, чтобы не было белого фона.

Смена градиента при перемещении по оси x

body {
	background: linear-gradient(90deg, rgb(255, 9, 0), rgb(191, 66, 64));
}

CSS

document.addEventListener('mousemove', e => {
	const x = (e.clientX / window.screen.availWidth) * 360;
	const x2 = (e.clientX / window.screen.availWidth) * 180;
	document.body.style.background = `linear-gradient(90deg, hsl(${x}, 100%, 50%), hsl(${x2}, 50%, 50%)`;
});

Результат:

Смена градиента при перемещении по оси y

body {
	background: linear-gradient(rgb(255, 13, 0), rgb(191, 67, 64));
}

CSS

document.addEventListener('mousemove', e => {
	const y = (e.clientY / window.screen.availHeight) * 360;
	const y2 = (e.clientY / window.screen.availHeight) * 180;
	document.body.style.background = `linear-gradient(180deg, hsl(${y}, 100%, 50%), hsl(${y2}, 50%, 50%)`;
});

Результат:

Смена градиента при перемещении по всем осям

body {
	background: linear-gradient(rgb(255, 0, 0), rgb(255, 13, 0));
}

CSS

document.addEventListener('mousemove', e => {
	const x = (e.clientX / window.screen.availWidth) * 360;
	const y = (e.clientY / window.screen.availHeight) * 360;
	document.body.style.background = `linear-gradient(180deg, hsl(${x}, 100%, 50%), hsl(${y}, 100%, 50%)`;
});

Результат:

Круглый ореол вокруг курсора

body {
	background: radial-gradient(circle at 13px 3px, rgb(255, 175, 75), rgb(155, 146, 10));
}

CSS

document.addEventListener('mousemove', e => {
	const x = e.clientX;
	const y = e.clientY;
	document.body.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(255,175,75,1), rgba(155,146,10,1))`;
});

Результат:

Овальный ореол вокруг курсора

body {
	background: radial-gradient(at 0% 0%, #6b5ef7, #f75e5e);
}

CSS

document.addEventListener('mousemove', e => {
	w = window.innerWidth;
	h = window.innerHeight;
	x = Math.round(e.pageX / w * 100);
	y = Math.round(e.pageY / h * 100);
	document.body.style.background = `radial-gradient(at ${x}% ${y}%, #6b5ef7, #f75e5e)`;
});