cssimageeffectsdistortion

Is it possible to distort images in CSS? (wave effect)

Im developing a website and one of the requests is a division with an image, like below:

But this is what i got:

Is it possible to make it in CSS?

I already inserted the image and set the background colors, the one thing left on this is that wave effect on the image.

The CSS code, ive only set its position: `

/* Format coffepic */
img#coffee{
    position: absolute;
    top: 1200px;
}

`

Solution

  • I have an online generator for such shape: https://css-generators.com/wavy-shapes/.

    All you need is to select the top/bottom configuration, adjust the size and you get the code. I simply updated (manually) the position of the top wave to get the alignment you want.

    .box {
  height: 200px;
  background: url(https://previews.123rf.com/images/vandycandy/vandycandy1501/vandycandy150100067/35546889-coffee-grains.jpg) 50%/cover;
  --mask:
    radial-gradient(51.22px at 50% 72.00px,#000 99%,#0000 101%) 50% 0/160px 51% repeat-x,
    radial-gradient(51.22px at 50% -32px,#0000 99%,#000 101%) calc(50% - 80px) 40px/160px calc(51% - 40px) repeat-x,
    radial-gradient(51.22px at 50% calc(100% - 72.00px),#000 99%,#0000 101%) calc(50% - 80px) 100%/160px 51% repeat-x,
    radial-gradient(51.22px at 50% calc(100% + 32.00px),#0000 99%,#000 101%) 50% calc(100% - 40px)/160px calc(51% - 40px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
    <div class="box"></div>