Gradients
Live previewPerformance varies by device
No account needed to copy or download. Check dependencies and thelicense status before publishing.
<!DOCTYPE html>
<html>
<head>
<title>Gradients</title>
<meta name="category" content="Abstract">
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: diagonalShift 15s ease infinite;
}
@keyframes diagonalShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@media (prefers-reduced-motion: reduce) {
body { animation: none; }
}
</style>
</head>
<body>
</body>
</html>About this animation
Smooth, flowing color gradients for a modern look.
Under the hood
Animated Linear Gradient
A single CSS
linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) fills the body, enlarged with background-size: 400% 400%. A 15-second @keyframes diagonalShift animation moves only background-position between 0% 50% and 100% 50%, with no radial gradients, layered mesh, or scale changes.Related
