Ary Ary - 3 months ago 5x
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 class="itemInfo">
<h6 class="colorBlack">DOORS</h6>
<h5 class="colorBlack">{{}}</h5>
<div class="itemInfo">
<h6 class="colorBlack">DEPART</h6>
<h5 class="colorBlack">{{ticketSelected.time}}</h5>

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!!


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>