Сборник анимированных градиентов

Сборник анимированных градиентов c использованием CSS keyframes.

body {
	background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	transform: translate3d(0, 0, 0);
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
CSS

Результат:

body {
	background: linear-gradient(180deg, #641e39, #98749b, #ddf810, #8f4ff4);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 50% 100%;
	}
	100% {
		background-position: 50% 0%;
	}
}
CSS

Результат:

body {
	background: linear-gradient(-45deg, #ed193b, #a98055, #f286e2, #681d7a);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
CSS

Результат:

body {
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 1rem, #ccc 1rem, #ccc 2rem);
	background-size: 200% 200%;
	animation: gradient 10s linear infinite;
}

@keyframes gradient {
	100% {
		background-position: 100% 100%;
	}
}
CSS

Результат:

body {
	background: linear-gradient(#FF3155 0%, #FF3155 25%, #FFAF42 25%, #FFAF42 50%, #FFED5E 50%, #FFED5E 75%, #2DAEFD 75%);
	bakground-position: 100px 100vh;
	background-repeat: repeat-y;
	background-position: 0px 0px;
	animation: gradient 10s infinite linear;
}

@keyframes gradient {
	to {
		background-position: 0 1000px;
	}
}
CSS

Результат:

05.04.2022, обновлено 13.04.2022
2898

Комментарии

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

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

Сборник CSS градиентов
Подборка 23-х фонов с линейным и радиальным градиентом.
56068
+9
Не стандартный СSS градиент
Подборка необычных градиентов CSS3 показывающая все возможности linear-gradient.
7662
+2
Полупрозрачный градиент поверх картинки
Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с...
46610
+5
Эффекты анимации на CSS animation keyframes
Сборник примеров анимации на CSS 3 Animation.
20639
+4
Рамки блоков с градиентом
Примеры, как сделать рамку блока с градиентом и анимировать её.
5443
+2
Преобразование цветов в PHP
Несколько примеров как перевести цвета из HEX в RGB и обратно с помощью PHP.
12085
0