Is there a way to remove the white background when opening a modal form with round corners?
https://i.sstatic.net/cpr2h.png
This is the CSS code for the modal form:
.modal-msg {
.modal-dialog {
width: 25vw !important;
max-width: 35vw !important;
}
.form-msg {
box-shadow: -20px 20px 30px 0 rgba(0, 0, 0, 0.16);
background-image: linear-gradient(41deg, #40d2ea, #964ada 54%, #7d2abd 77%, #7c29bb 77%, #541b7e 91%);
color: #fff;
overflow: hidden;
border-radius: 120px;
background-radius: 120px;
.modal-header {
border: none;
padding-bottom: 0 !important;
justify-content: space-around;
.close-icon {
background-image: url('close.svg');
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: contain;
margin-left: 10px;
z-index: 100;
&:focus {
outline: none;
}
}
.header {
font-size: 33px;
font-weight: 600;
}
}
.modal-body {
padding: 1rem 12%;
.header {
font-size: 33px;
font-weight: 600;
direction: rtl;
margin-bottom: 1rem;
}
.form-control {
color: #112d60;
font-weight: 600;
&:focus {
border-color: #112d60 !important;
}
}
}
.background {
width: 100%;
position: relative;
.circle {
position: absolute;
}
}
}
}
I've attempted to set the background to transparent and mess around with background-clip property, but it seems like I might be using it incorrectly or in the wrong order. Any advice would be greatly appreciated. Cheers!
The HTML code using this CSS is as follows:
<div class="form-msg">
<div class="background">
<div class="circle left-circle"></div>
<div class="circle right-circle"></div>
</div>
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 text-center header">
<span class="inspire-text">Inspiration Msg</span>
</div>
</div>
</div>
</div>