how to make a 'wave' effect on a background with css [duplicate]

Question

I'm trying to make a wavy effect on the border of where one section meets another on a page (see pic below). What's the best approach to take here? The waves should be roughly equal in size.

EDIT: to the person who flagged this as 'already answered', the effect in your linked question looks nothing like this one. That effect cannot be used to make the low wide sloping waves in my image.

@tacoshy that's a link to a different question that with an answer with no explanation that is specific to that question. Not helpful at all, just as the answer further down is not helpful - which you agreed with. — dedles
– dedles, Commented Jun 15, 2022 at 18:43

Ruan Mendes · Accepted Answer · 2022-06-15 18:16:30Z

0

Please try this

body {
  background: #333;
}

.wrapper {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  overflow: hidden;
}

.wave {
  width: 1000px;
  height: 1025px;
  position: absolute;
  top: -25%;
  left: 50%;
  margin-left: -500px;
  margin-top: -500px;
  border-radius: 35%;
  background: rgba(255, 255, 255, .75);
  animation: wave 15s infinite linear;
}

@keyframes wave {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}

<div class="wrapper">
  <div class="wave"></div>
</div>

edited Jun 15, 2022 at 18:16

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

answered Jun 15, 2022 at 17:50

Midhun Raj

9882 gold badges8 silver badges25 bronze badges

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

5 Comments

dedles Over a year ago

That creates a moving wave effect. It doesn't need to be animated.

Ruan Mendes Over a year ago

I love this clever use of a radius with rotation animation. +1 even if it's not what the OP asked for... OP can learn from this... @dedles play with the CSS, that's why I made it runnable. But yes, it really should have some explanation.

tacoshy Over a year ago

Code only answers are considered low quality. Without sufficient explaination, your answer is hard to understand. If the OP can't understand your answer, then he also won't be able to reproduce your possible solution. As such it would be worthless to him/her. Please add a sufficient explaination of your possible solution.

tacoshy Over a year ago

@JuanMendes how can the OP elarn from ti without explaination of how this is achieved? also why should the OP learn from it when this it not what he asked for in the first place?

Ruan Mendes Over a year ago

@tacoshy They load up the example, edit it and learn, just like I just did, I had never seen this technique. Of course an explanation is much better, but if one really wants to learn, it's here for anyone. The OP didn't even show an attempt which didn't help their cause 😅

Collectives™ on Stack Overflow

how to make a 'wave' effect on a background with css [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related