Color bar on webflow CMS page

Community resources Webflow Tips
1

Would be awesome if someone could show how to make the skinny color bar effect on the “sign up” form for beta page. I like how it changes colors in a loop. Really cool!

anybody have the time and patience to attempt this cool effect? :smile:

2

After seeing that as well, I was blown away. Here is the custom CSS our designer, @nate, used:

@-webkit-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@-moz-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@keyframes beta-gradient { 
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
    .beta-colorbar {
        background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
        background-size: 500% auto;    
        -webkit-animation: beta-gradient 3s linear infinite ;
        -moz-animation: beta-gradient 3s linear infinite;
        animation: beta-gradient 3s linear infinite ;
    }
8 Likes
3

Great job @nate !! Thanks @PixelGeek this was a nice little trick!

5

Hey @PixelGeek thanks for sharing, where did he put the code to make this work?

6

Awesome! Just copied that and looks great

7

he put it in the custom code area.

For more information on this, please refer to this article: Custom code in head and body tags | Webflow University

8

This is wikipedias new definition of awesome looks like @PixelGeek :slight_smile: Thanks for sharing your code @nate!

made a quick clonable with a simple roll over transition just for grins - it worked :slight_smile:
https://webflow.com/website/bar-gradient

…now to make it flow through jake’s noodley arms as they wave hypnotically. Do I need an SVG animation for that?
http://cdn5.thr.com/sites/default/files/imagecache/scale_crop_768_433/2014/07/adventure_time.jpg

9

Thanks for posting this that helped a lot :grinning:

10

I’m sorry none of the links seem to be working in this thread! Could someone repost?

11

Hi @mrgovindrai,
A new clonable version:

https://webflow.com/website/gradient-color-bar

Custom code is in the page level > header > custom code section nested between <style> </style> tags
Create a div with the class name of beta-colorbar

<style>
@-webkit-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@-moz-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@keyframes beta-gradient { 
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
    .beta-colorbar {
        background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
        background-size: 500% auto;    
        -webkit-animation: beta-gradient 3s linear infinite ;
        -moz-animation: beta-gradient 3s linear infinite;
        animation: beta-gradient 3s linear infinite ;
    }
</style>

For tips on inserting custom code and the custom code sections:

enjoy! :smiley:

1 Like