GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Curved background

HTML

<div class="curved-background">
<div class="curved-background__curved"></div>
</div>

CSS

.curved-background__curved {
/* Background color */
background-color: #d1d5db;

/* You can use gradient background color such as */
/* background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */

/* Curved corners */
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;

/* Size */
height: 50%;
width: 100%;
}
Demo
Follow me on and to get more useful contents.