1

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%);
  }
}

1 Answer 1

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);
  }
}

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.