CSS Curved Separator Generator
Generate content separators for your website with our CSS curved separator generator, allowing you to easily create curved dividers with customizable properties.
Preview
Code
<section class="curved">
Hello World!
</section>CSS
.curved {
background: #9679d7;
position: relative;
width: 100%;
min-height: 20%;
z-index: 0;
box-sizing: border-box;
}
.curved:after {
content: '';
background: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transform: translate(0px, 100%);
transform-origin: top left;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
}