How to animate linear-gradient from top right to bottom left?

Question

In my code, on hover the direction of linear-gradient animation is like counterclockwise, how can do it stright linear from top right to bottom left?

.boxstyle
{
  background-color:rgba(0,69,255,1);
  background-size: 0% 100%;
  transition: background-color .5s;
  width: 150px;
  height: 150px;
}

.boxstyle:hover
{
  background-image:linear-gradient(to left bottom, rgba(189,41,242,0) 0%, rgba(189,41,242,0) 40%, rgba(189,41,242, 0.9) 100%);
  background-repeat:no-repeat;
  background-size: 200% 100%; 
  transition:background-size 1s, background-color 1s;
}

<div class="boxstyle">hover it</div>

Could you explain a bit more what effect you want. Is the pink to sort of start at the top right and end up at the bottom left? — A Haworth, Nov 17 '22 at 20:44
The pink have to start at the top right and end up at the bottom left. — Sevi, Nov 17 '22 at 20:47

Temani Afif · Answer 1 · 2022-11-17T20:51:36.263

1

You can try like below. Invert the positions to get the opposite direction. More details: Using percentage values with background-position on a linear-gradient

.boxstyle {
  background: linear-gradient(to top right, #0000 40%, rgb(189 41 242/0.9) 100%);
  background-size: 200% 200%;
  background-position: 0% 100%;
  background-color: rgba(0, 69, 255, 1);
  transition: .5s;
  width: 150px;
  height: 150px;
}

.boxstyle:hover {
  background-position: 100% 0;
}

<div class="boxstyle">hover it</div>

edited Nov 17 '22 at 20:51

answered Nov 17 '22 at 20:42

Temani Afif

245,468
26
309
415

Its still moving from left to right. – Sevi Nov 17 '22 at 20:50
@Sevi simply invert the positions like I said, see the edit – Temani Afif Nov 17 '22 at 20:51

A Haworth · Accepted Answer · 2022-11-17T21:35:37.473

If you really want the pink to start at the top right and move to the bottom left you could use before and after pseudo elements, the before with just the color, the after also with the linear-gradient.

The after pseudo element moves diagonally across to the bottom left on hover of the main element.

.boxstyle {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.boxstyle::before,
.boxstyle::after {
  content: '';
  position: absolute;
  z-index: -1;
}

.boxstyle::before {
  background-color: rgba(0, 69, 255, 1);
  width: 100%;
  height: 100%;
}

.boxstyle::after {
  background-image: linear-gradient(to left bottom, rgba(189, 41, 242, 0) 0%, rgba(189, 41, 242, 0) 40%, rgba(189, 41, 242, 0.9) 100%);
  bottom: 100%;
  left: 100%;
  transition: all 1s linear;
  width: 200%;
  height: 200%;
}

.boxstyle:hover::after {
  bottom: -10%;
  left: -10%;
}

<div class="boxstyle">hover it</div>

Old comment: This fits your verbal description of the effect desired, but I suspect it isn't exactly what you intended - did you want it more 'blendy' and subtle, becoming the final picture only at the very end?

UPDATE: Since seeing your images this snippet uses an after that has twice the dimensions of the main element so spreading out the colors more. It 'settles' on a hover a bit beyond the bottom left.

John Li · Answer 3 · 2022-11-17T22:00:38.927

If you prefer the pink color area to travel through the box (from top right corner to bottom left corner), it can be implemented by setting the linear-gradient so that has the pink area in the middle.

Example:

.boxstyle {
  background: linear-gradient(to top right, #0000 10%, rgb(189 41 242/0.9) 40%, rgb(189 41 242/0.9) 60%, #0000 90%);
  background-size: 500% 500%;
  background-position: 0% 100%;
  background-color: rgba(0, 69, 255, 1);
  transition: .5s ease-in-out;
  width: 150px;
  height: 150px;
  color: #fff;
}

.boxstyle:hover {
  background-position: 100% 0;
}

<div class="boxstyle">hover it</div>

How to animate linear-gradient from top right to bottom left?

3 Answers3