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

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

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

1
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%)`;
});
JS

Результат:

2
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%)`;
});
JS

Результат:

3
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%)`;
});
JS

Результат:

4
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))`;
});
JS

Результат:

5
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)`;
});
JS

Результат:

06.04.2022
5235

Комментарии

, чтобы добавить комментарий.

Другие публикации

Сборник CSS градиентов
Подборка 23-х фонов с линейным и радиальным градиентом.
76620
+9
Сборник анимированных градиентов
Сборник анимированных градиентов c использованием CSS keyframes.
22310
-2
Не стандартный СSS градиент
Подборка необычных градиентов CSS3 показывающая все возможности linear-gradient.
11110
+2
Полупрозрачный градиент поверх картинки
Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с...
65268
+7
Рамки блоков с градиентом
Примеры, как сделать рамку блока с градиентом и анимировать её.
10215
0
Эффекты анимации на CSS animation keyframes
Сборник примеров анимации на CSS 3 Animation.
32556
+4