Ary Ary - 1 year ago 65
HTML Question

Is there possible to put more than one radial-gradient in a div

I need to show a div with to radial-gradient something like this:

I need this

I have this area in a div like this:

<div class="ticketInfo">
<div class="itemInfo">
<h6 class="colorBlack">AREA</h6>
<h5 class="colorBlack">{{ticketSelected.location}}</h5>
</div>
<div class="itemInfo">
<h6 class="colorBlack">DOORS</h6>
<h5 class="colorBlack">{{ticketSelected.date}}</h5>
</div>
<div class="itemInfo">
<h6 class="colorBlack">DEPART</h6>
<h5 class="colorBlack">{{ticketSelected.time}}</h5>
</div>
</div>


I write this one in my css:

.ticketInfo {
display: flex;
flex-direction: column;
background-image: radial-gradient(circle at -2% 103%, $mainBackground 14px, white 15px), radial-gradient(circle at 100% 103%, $mainBackground 14px, white 15px);
padding: 13px;
}


But in that way I only have the first one, the left one, but the right one I can't show.

I need help! Thanks!!

Answer Source

The white color of the first gradient is over the second one, you have to set transparent to see the second gradient that is below.

.radial {
  background-image: radial-gradient(circle at -2% 103%, red 14px, transparent 15px), radial-gradient(circle at 100% 103%, blue 14px, white 15px);
  width: 300px;
  height: 200px;
}
<div class="radial"></div>