Animating Gradient Background with CSS

In CSS we can make a lot of spectacular things which vivify our design. One great feature is the animation. We can make traditional keyframe ones and simpler state behaviors.

The only drawback when it comes to animating in CSS is the lack of changing our gradients. Animating a state of a gradient-based button is handy because we can create smoother hovers. This technique is working in some JS library like GSAP, but in CSS we have to trick.

We can animate gradient in our stylesheets not changing the colors but our oversized background’s position.

.button {
    display: inline-block;
    color: #fff;
    padding: 20px 30px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    
    background-image: linear-gradient(45deg, #ffc459, #ff6638);
    background-size: auto 200%;
    background-position: 0 100%;
    
    transition: background-position 0.25s ease;
    
    &:hover,
    &:focus {
        background-position: 0 0;
    }
}

In this snippet, you can see that we have set a vertically oversized background with a position offset which is changing on hover state.

See the Pen Animating Gradient Background with CSS by Adam Laki (@adamlaki) on CodePen.