CODEWITHSUNDEEP
htmlcssradial-gradients
Kacper G.
Kacper G.

Reputation: 692

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>

Upvotes: 4

Views: 9161

Answers (4)

Temani Afif
Temani Afif

Reputation: 272842

Simply change some values. You may also specify a background-position to avoid the first cut part of the wave:

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

</div>

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

You can use :before pseudo class for the gradient background and then apply transform to the :before(will not affect div).

Stack Snippet 

div {
  width: 400px;
  height: 400px;
  position: relative;
  z-index: 0;
}

div:before {
  content: "";
  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;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotate(90deg);
  z-index: -1;
}
<div>Content</div>

Upvotes: 1

JwJB
JwJB

Reputation: 61

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>

Upvotes: 2

vicbyte
vicbyte

Reputation: 3790

You can use CSS transform: rotate property to rotate the div, instead of gradient. :)

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;
transform: rotate(90deg);
}
<div></div>

Upvotes: 1

Related Questions