CSS animted gradient

Question

Hello I am trying to make smoother changing angle (deg) of gradient in CSS. I wanna to make it animated like rolling.

Video showcase: https://i.sstatic.net/5xFHR.jpg

body {
  min-height: 100vh;
  min-width: 100vw;
  margin:0;
  
  background: linear-gradient(115deg, #007fff 55%, #f5fafa 45%);
}

@media only screen and (max-width: 800px) {
  body {
    background: linear-gradient(340deg, #f5fafa 60%, #007fff 40%);
  }
}

Temani Afif · Accepted Answer · 2020-08-01 14:13:47Z

3

You cannot do this with gradient but you can use rotation like below:

html::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  height: 150vmax;
  width: 150vmax;
  background: linear-gradient(0deg, #007fff 55%, #f5fafa 45%);
  transform: translate(-50%, -50%) rotate(115deg);
  transition: transform 1s;
}

@media only screen and (max-width: 800px) {
  html::before {
    transform: translate(-50%, -50%) rotate(155deg);
  }
}

answered Aug 1, 2020 at 14:13

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

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

Collectives™ on Stack Overflow

CSS animted gradient

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related