1

Clarification: This solution is using svg and I wanted to use plain css for my problem. Also, my output 2 is no where near the solution given found in the link.

I am practicing css by following a background design in html. These are the outputs that I want to follow.

output 1

image_1

output 2

image_2

My problem is that I do not know how to use before and after pseudo elements in css so I do not know how to create these two wave thingy. Can someone with beast css knowledge help me get through this?

Currently, I have this setup:

*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    overflow-x: hidden;
}

.wrapper {
    position: relative;
    height: 100vh;
    overflow-x: hidden;
    background-image: linear-gradient(180deg, #A895E0 0%, #6D4CD8 35.86%, #6D4CD8 100%);
}

.pinkish {
    height: 768px;
    width: 100%;
    background: linear-gradient(104.42deg, #F7F6FD 0.08%, #FA7086 89.17%);
    background-blend-mode: overlay;
    filter: blur(75px);
}
<body>
    <section class="wrapper">
        <div class="pinkish">
            <div></div>
        </div>
        <div class="curve"></div>
    </section>
</body>
Seven
  • 330
  • 2
  • 15
  • Does this answer your question? [Wavy shape with css](https://stackoverflow.com/questions/17202548/wavy-shape-with-css) – Sfili_81 Nov 23 '22 at 07:33
  • @Sfili_81 not really, as much as possible, I want to use css and not svg. – Seven Nov 23 '22 at 07:34
  • hum think about clip-path? Tip if you search on google you can find a lot of material about wavy css – Sfili_81 Nov 23 '22 at 07:42

0 Answers0