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

Сборник анимированных градиентов 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
14060

Комментарии

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

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

Сборник CSS градиентов
Подборка 23-х фонов с линейным и радиальным градиентом.
65654
+9
Не стандартный СSS градиент
Подборка необычных градиентов CSS3 показывающая все возможности linear-gradient.
9506
+4
Полупрозрачный градиент поверх картинки
Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с...
56223
+7
Эффекты анимации на CSS animation keyframes
Сборник примеров анимации на CSS 3 Animation.
27475
+7
Рамки блоков с градиентом
Примеры, как сделать рамку блока с градиентом и анимировать её.
7882
+3
Преобразование цветов в PHP
Несколько примеров как перевести цвета из HEX в RGB и обратно с помощью PHP.
14041
+1