Bloom solution

for a very long time, i've been meaning to find the solution to creating the perfect "bloom" effect through css, to no avail. however, i have found a way to make a good bloom effect without any major issues or having to resort to third party post-processing effects in javascript.

(without bloom)
(WITH bloom)

How that work?

the answer is that you'll need to rely on SVG effects, instead of the preset css filter. to do this, you'll need to create an SVG element, hide it well with opacity:0; position: absolute; pointer-events: none;. DO NOT use display: none; otherwise the effect will be hidden! then define it's filter properties, you'll also need to index an id so that it can be called whenever you need to use it, then, the filter will use the feGaussianBlur filter, you'll need to define it's properties. set edgeMode="wrap" and use the stdDeviation="x","y" (higher values = stronger effect). after it is done, you will have to create a backdrop-filter mask and top it on whatever element that you desire, to call the filter, simply use backdrop-filter="url('#gaussian')", it is important that you'll need to make the opacity lower, otherwise, the filter will blur everything in sight. top it with "brightness(n)" and the bloom effect will even be more prettier!

code:

      // this is CSS
      
.svgEffect {
  opacity: 0;
  position: absolute; 
  pointer-events: none;
}
  
.bloom {
  backdrop-filter: url('#gaussian') brightness(2);
  position: absolute;
  inset: 0;
  opacity: 50%;
  z-index: 2;
}

      // place it under your HTML. change the stdDeviation to your liking. higher values = stronger
      
<svg class="svgEffect">
    <filter id="gaussian">
      <feGaussianBlur edgeMode="wrap" stdDeviation="12,12"></feGaussianBlur>
    </filter>
</svg>