Search code examples
htmlcssradial-gradients

CSS - Rotate radial-gradient

I have got a <div> with radial-gradient, but it is at a wrong angle. Changing the angle of simple linear-gradient is easy, but it has multiple gradients. I can't add 90deg at the start, because it doesn't work.

Below is my gradient. The waves are from bottom to top, how can I turn them to make them from left to right (I want to use only background property)? Thanks for help.

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at 100% 50%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) 0 -50px;
  background-size: 75px 100px;
}
<div>

</div>

Solution

  • This should work. Swapped the values for the circles and background size.

    div {
width: 400px;
height: 400px;
background: radial-gradient(circle at 50% 100%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) 50px 0, radial-gradient(circle at 50% 0%, transparent 20%, #ff0000 21%, #ff0000 34%, transparent 35%, transparent) 0 0;
background-size:100px 75px;
}
    <div>

</div>