The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Animating Gradient Color BG

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #171703
    Henri Helvetica

    Hmm that sounds like the challenge I’m having.

    I’m trying to end up w/ something pretty much like this header.

    I went to look @ the code but couldn’t find anything that looks like an animation/transition. I feel like I saw once and never paid it any mind, but can’t find it now. I read that gradients can’t be animated – which I find odd

    Can anyone describe how that smooth gradient transition/animation is happening??

    This started as I was tinkering w/ something quick like this:

            font-family: 'Advent Pro';
            font-weight: 400;
            font-size: 10em;    
            margin-left: 1em;
            text-transform: uppercase;
            background: -webkit-linear-gradient(-75deg, yellow, red 60%, rgb(0,255,555) 69%, blue 85%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: kaleidoscope 4s ease infinite;
        @-webkit-keyframes kaleidoscope {
            0%, 100% {
                background: -webkit-linear-gradient(-75deg, yellow, red 60%, rgb(0,255,555) 69%, blue 85%);
            25% {
                background: -webkit-linear-gradient(-75deg, blue, yellow 60%, red 69%, rgb(0,255,555) 85%);
            50% {
                background: -webkit-linear-gradient(-75deg, rgb(0,255,555), blue 60%, yellow 69%, red 85%);
            75% {
                background: -webkit-linear-gradient(-75deg, red, rgb(0,255,555) 60%, blue 69%, yellow 85%);

    thanks a million ahead of time.



    You can see how it’s done in DevTools; within the style-block in head (under: <– Art Direction Styles –> ). It’s a very nifty css-animation on the background-position of a (zero height?) background-image within a zero height element with a large amount of padding-bottom in percentages. (Title itself is an image too).

    BTW, try the background-size property for the faking of animations on gradients:



    If you use a long gradient and then manipulate the background-position you can create the effect you are after (more or less).

    I’m not sure how useful it will be as it uses : after to add some content. You could use a span instead and avoid duplicating the text but then you would need to fix widths and heights.

    I’m sure there’s a better solution in there somewhere.

    Henri Helvetica

    Thanks for that. I’m looking at the bg-size codepen now. I also looked @ LL’s option, but may have rushed through it. I’ll take a closer look again.

    Oddly enough, I didn’t bother looking for more than a few style blocks in that one page, and there are a few. DUH. Thanks for the heads up there and yes… this looks quick like an interesting hack.

    Henri Helvetica

    @Paulob This is absolutely the solution i had in mind thx! I had been thinking of something very like that but was playing around w/ ideas (in my head of course) on how to make that work.

    Thanks a million for coding that up. I’ve been toying around and changed the direction (since I actually wanted a vertical motion).

    major teachable moment.

    cheers man!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.