How do I get it so that if I have an image in a div, or just a div in general, and i want to have a glow coming from the middle of that div and expand out past the border of the div but it still be a singular continuous gradient? and not have an irregular break going from inside the the border to outside the border?

image of div without the glow going into the box

Here is my HTML snippet:

<div class="stats-grid">
                <div class="stat-item championships">
                    <img class="stat-label" src="../../assets/noto-v1--trophy.png" alt="overlay image" style="height: 64px;width: 64px">
                  <span class="stat-value trophyValue">3</span> <!-- Example value -->
                </div>
                <div class="stat-item">
                  <span class="stat-label">WINS:</span>
                  <span class="stat-value">20</span> <!-- Example value -->
                </div>
                <div class="stat-item">
                    <span class="stat-label">DRAWS:</span>
                    <span class="stat-value">5</span> <!-- Example value -->
                  </div>
                <div class="stat-item">
                  <span class="stat-label">LOSSES:</span>
                  <span class="stat-value">5</span> <!-- Example value -->
                </div>
                <div class="stat-item">
                  <span class="stat-label">WIN %:</span>
                  <span class="stat-value">80%</span> <!-- Example value -->
                </div>
              </div>
          </div>

and then here is my CSS:

 .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
    gap: 20px;
    background-color: #192842;
    padding: 20px;
    border-radius: 10px;
    align-items: start; /* Aligns items to the start of the grid area */
  }
  
  .championships {
    grid-column: 1 / span 2;
    justify-self: center; /* Centers the championships item */
    align-items: center;
    /* color: #111; */
    /* background: radial-gradient(circle, rgba(255,204,0,0.7) 0%, rgba(255,204,0,0) 100%); */
    /* left: 50%; */
    /* top: 0; */
    
    box-shadow: 0 0 100px rgba(255,204,0,0.7);
    border-radius: 10px;
    /* background:transparent !important;
    background-color: transparent !important; */
  }
.stat-item {
    display: flex;
    justify-content: space-between;
    background-color: #101f3c;
    padding: 10px;
    border-radius: 5px;
  }
  
  
  .stat-label {
    font-family: 'Roboto', sans-serif; /* You can change the font family here */
    font-weight: 700;
    color: #ffcc00; /* Example color */
    margin-right: 20px; /* Adds space between label and value */
  }
  
  .stat-value {
    font-family: 'Roboto', sans-serif; /* You can change the font family here */
    font-weight: 400;
    color: #ffffff; /* Example color */
  }

  .trophyValue {
    font-size: 64px;
    
  }

I’ve tried doing it with a radial-gradient (I have it commented out) and I’ve tried using insets with no luck.