Animating Gradient Background with CSS

CSSPosted on

1 min read

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.

Need a web developer? Maybe we can help, get in touch!

Looking for web dev job?
You can check them on Jooble.

To see and write comments, you must allow the related (Disqus) cookies. For more information, please visit our privacy policy page.

Similar Posts

More content in CSS category