loading...

Create Waves With Pure CSS

pixmy profile image Arturo Cabrera ・2 min read

Hello everyone!

Today we are going to learn how to create waves with pure CSS like in ps4 interface, Here is the final result:

Let's get started

HTML

<div class='box'>
          <div class='wave -one'></div>
          <div class='wave -two'></div>
          <div class='wave -three'></div>
      </div>

We need a "div" for each wave you want to set up, in this example we are going to use 3 of them with the class "wave" and we are going to wrap them in another div with class "box".

CSS

.box {
  position: fixed;
  top: 0;
  transform: rotate(80deg); 
  left: 0;
}

.wave {
  position: absolute;
  opacity: .4;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  border-radius: 43%;
}

First we need to defined the "box" container as fixed position in this case, to achieve the same effect as the ps4 interface, the next 3 css rules are only for positioning the "box" element wherever you want. You can play around with those values.

After you set up the "box" element it is time to create the waves. If you look at the rules in the "wave" class most of the rules are for the positioning of the waves, but the key rule for this animation is the border-radius, here is the reason why:

We are creating rectangles with a moderate value of border-radius, if we zoom into a corner of this animation, and we position this waves in the right place we are going to achieve the wave effect.

Now we need to create the animation in order to rotate the waves. Super simple!

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

Once we have our animation in the css, we need to set the animation into our waves with different timing and background colors, you can also play around with the opacity :D

.wave.-one {
  animation: rotate 7000ms infinite linear;
  opacity: .1;
  background: #0af;
}

.wave.-two {
  animation: rotate 3000ms infinite linear;
  opacity: .1;
  background: black;
}

.wave.-three {
  animation: rotate 7500ms infinite linear;
  background-color: #77daff;
}

And we are done! now you should be able to see the waves!!! Similar to this codepen I made a while back (works correctly on desktop only)

This was my first post! Hope you like it :D

Discussion

pic
Editor guide
Collapse
felipperegazio profile image
Felippe Regazio

Oww thats really cool, thanks for sharing

Collapse
ronsoak profile image
ronsoak

That’s really cool! Thanks !

Collapse
nguyenluonghuy6 profile image
Nguyen Luong Huynh

beautifull animation, thank you pro. Hope you make more articles about animation with html, css.

Collapse
jammypiece profile image
Lorna

Very cool! I'll have a go myself tomorrow!

Collapse
badrecordlength profile image
Henry πŸ‘¨β€πŸ’»

Woah! That recreation of the PS4 UI is amazing! 😲

Collapse
pixmy profile image
Arturo Cabrera Author

Thank you so much!!

Collapse
devmohdx profile image
DevMohdx

Wooow, that is really cool

Collapse
steffenpedersen profile image
Steffen Pedersen

I love this kind of creativity πŸ€“

Collapse
co0kie profile image