I’m trying to create a smooth animation effect for a conic gradient background in CSS. My goal is to have the gradient appear to shift smoothly without rotating the entire element.
Here’s the CSS I’m currently using:
body {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
margin: 0;
position: relative;
background: conic-gradient(from 0deg, #d5d06a, #be6d11);
animation: animateGradient 10s linear infinite;
}
@keyframes animateGradient {
0% {
background: conic-gradient(from 0deg, #d5d06a, #be6d11);
}
25% {
background: conic-gradient(from 90deg, #d5d06a, #be6d11);
}
50% {
background: conic-gradient(from 180deg, #d5d06a, #be6d11);
}
75% {
background: conic-gradient(from 270deg, #d5d06a, #be6d11);
}
100% {
background: conic-gradient(from 360deg, #d5d06a, #be6d11);
}
}
However, the animation doesn’t look smooth—it appears to be jerky and not continuous. I’m aiming for a seamless and fluid transition.
My questions are:
- How can I achieve a smooth, continuous shifting animation for a conic gradient background?
- Are there better techniques or optimizations to animate conic gradients in CSS for a more fluid result?
I initially tried animating the background property with keyframes to create a shifting effect in the conic gradient. My expectation was a smooth, seamless animation where the gradient would appear to flow continuously. However, the result was a jerky and non-fluid transition. I also experimented with using CSS variables to adjust the starting angle dynamically and tried rotating a pseudo-element, but neither approach yielded the desired smoothness. I’m looking for a method to make this animation as smooth and continuous as possible.