How to change DIV `background linear-gradient` on hover with fade effect using CSS only? [duplicate]

Question

First of all, I'm talking of background and not background-color. I looked around on stack-overflow but this solution but this is for images. Though I won't prefer creating an image of gradient and using this method. It might just blur up the original image as the image size would be variable.

The fade effect I want works with background-color but there seems no way to use linear-gradient in background color.

Here is my code:

#div-text {
  display: flex;
  flex-direction: row;
  width: 80%;
  height: 80%;
  border-radius: 20px;
  background: #2d2e31;
}

.cl-button {
  font-family: 'Merienda One', monospace;
  order: 2;
  align-self: center;
  height: 80%;
  width: 60%;
  border: 0;
  background-color: transparent;
  color: aliceblue;
  font-size: 16px;
  margin-left: 10px;
  text-align: left;
}

#div-text:hover {
  animation-name: div-text-hover;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes div-text-hover {
  0% {
    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
  }
  100% {
    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
  }
}

<div id="div-text">
  <button id="button-text" class="cl-button">Text Here</button>
</div>

When I hover my mouse on the DIV it should change the background to the above gradient with FADE effect. But when I hover, the background changes instantly like this:

I want that background to fade-in slowly and not so sharply with pure CSS without Jquery or anything else. Just like when we use background-color . I found no way to do this with background.

EDIT: I tried out adding @keyframes every 10% and it's still sharply changes opacity every frame. And it's not efficient to type of the same lines 60 times to get 60fps :-(

You should use transition: 2s ease-in-out; instead of animation: 2s; in #div-text. — Rishab Tyagi
– Rishab Tyagi, Commented Apr 30, 2020 at 9:19

Rahul Vyas · Accepted Answer · 2020-04-30 09:15:09Z

4

For this, you can use transition but transition does not work for linear-gradient so I'm changing here opacity of ::after pseudo element. button name will not show that why i used z-index for stack order.

#div-text {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 80%;
    border-radius: 20px;
    background: #2d2e31;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  
  #div-text::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease;
    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
    opacity: 0;
  }

  .cl-button {
    font-family: 'Merienda One', monospace;
    order: 2;
    align-self: center;
    height: 80%;
    width: 60%;
    border: 0;
    background-color: transparent;
    color: aliceblue;
    font-size: 16px;
    margin-left: 10px;
    text-align: left;
    position: relative;
    z-index: 3;
  }


    #div-text:hover::after{
      opacity: 1;
  }

<div id="div-text">
  <button id="button-text" class="cl-button">Text Here</button>
</div>

I think, it will be helpful for you.

edited Apr 30, 2020 at 9:15

answered Apr 30, 2020 at 9:00

Rahul Vyas

1215 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dharmaraj Over a year ago

This is what I want. But can you help me a little more. When I added this in my actual code, the blue background wraps up whole screen and not just the button.

Dharmaraj Over a year ago

It goes out of the DIV element in short. Any reason for it?

Rahul Vyas Over a year ago

did you used position: relative in #div-text?

Rahul Vyas Over a year ago

if you added then please share your code.

Dharmaraj Over a year ago

Please check my code here

|

Sangeeth A V · Accepted Answer · 2020-04-30 09:38:22Z

2

I am sure This will help You.I just changed the keyframe and place that linear-gradiant in hover section.

 @keyframes div-text-hover {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        #div-text {
            display: flex;
            flex-direction: row;
            width: 80%;
            height: 80%;
            border-radius: 20px;
            background: #2d2e31;
        }
        
        .cl-button {
            font-family: 'Merienda One', monospace;
            order: 2;
            align-self: center;
            height: 80%;
            width: 60%;
            border: 0;
            background-color: transparent;
            color: aliceblue;
            font-size: 16px;
            margin-left: 10px;
            text-align: left;
        }
        
        #div-text:hover {
            background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
            background-size: 400% 400%;
            -webkit-animation: div-text-hover 2s ease infinite;
            animation: div-text-hover 2s ease infinite;
            animation-fill-mode: forwards;
        }

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
   
</head>

<body>

    <div id="div-text">
        <button id="button-text" class="cl-button">Text Here</button>
    </div>

</body>

</html>

edited Apr 30, 2020 at 9:38

answered Apr 30, 2020 at 9:18

Sangeeth A V

194 bronze badges

3 Comments

Dharmaraj Over a year ago

The post hover animation is exactly how I wanted. But when I hover over the button, it instantly turns blue. I want that transition also with such fade effect. Like slowly turning blue from grey.

Sangeeth A V Over a year ago

Try to change aniamtion duration and add animation-delay.

Dharmaraj Over a year ago

Animation delay simply adds some time before the animation. But it will still be sharp. I've tried that.

Prakhar Londhe · Accepted Answer · 2020-04-30 06:19:05Z

0

I also ran into same problem a while ago, and didn't get an answer. Turns out it is because background's linear gradient property is not animatable, just like background-img. There are some workarounds though:

Stack 2 gradients on top of each other and animate the opacity of the top one. This is given in detail here : https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
What I used is that create a gradient that is 2 times the width of screen and animate the position of the gradient.

answered Apr 30, 2020 at 6:19

Prakhar Londhe

1,4711 gold badge13 silver badges27 bronze badges

3 Comments

Dharmaraj Over a year ago

I'll try them out right away and let you know the results.

Dharmaraj Over a year ago

I don't know why it isn't working for me, so I copy paste the entire things and checked still that isn't working for me :-(

Prakhar Londhe Over a year ago

can you post the screenshot of the problem, why it is not working

Rohan Nagmoti · Accepted Answer · 2020-04-30 07:29:47Z

0

I think in your code, the animation is working but your both the linear gradients have same values of color, hence you cant see it working. In short it is like changing gradient from white to white, which is working but there is no visual change. Instead you can try this :-

#div-text {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 80%;
    border-radius: 20px;
    background: #2d2e31;
  }

  .cl-button {
    font-family: 'Merienda One', monospace;
    order: 2;
    align-self: center;
    height: 80%;
    width: 60%;
    border: 0;
    background-color: transparent;
    color: aliceblue;
    font-size: 16px;
    margin-left: 10px;
    text-align: left;
  }


    #div-text:hover {
      animation: hover-animation 2s infinite ease-in;
  }
@keyframes hover-animation{
    0%{
      background: #2d2e31;
    }

    100%{
      background: linear-gradient(45deg,#36D8FF, #00acee, #66757f);
    }

}

I too am a beginer so this is not a perfect code. So you might want to make changes to it. And sorry if i have made any mistake.Let me know how it works out. Thank you.

answered Apr 30, 2020 at 7:29

Rohan Nagmoti

311 silver badge7 bronze badges

4 Comments

Dharmaraj Over a year ago

Unfortunately this didn't work. The div remains remains [#2d2e31] until the 99% of animation and turns into that gradient sharply as the gif in my question at final few moments of the animation.

Rohan Nagmoti Over a year ago

did you try to play around with opacity??I mean like take the gradient at 100% and add same at 75%-80% with 70% opacity which might smooth it, or change the ease-in to ease,linear,etc.

Dharmaraj Over a year ago

Tried opacity 0 at 0% and Opacity 1 at 100%. No use. Opacity also changes sharply

Rohan Nagmoti Over a year ago

Okey. Sorry then. I will let you know if i find something.Thank you.

Collectives™ on Stack Overflow

How to change DIV `background linear-gradient` on hover with fade effect using CSS only? [duplicate]

4 Answers 4

7 Comments

3 Comments

3 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

3 Comments

4 Comments

Linked

Related