Problems with some glowing style on safari

Im having trouble with safari, that makes me that square effect, I don’t remember how to fix it!

const getGlowingStyles = (theme: Theme) => {
  const glowing = keyframes`
    0% { background-position: 0 0; }
     50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
  `

  const glowingStyles = {
    position: 'absolute',
    right: '0px',
    bottom: '0px',
    background: `linear-gradient(45deg, ${theme.palette.accent.light}, ${theme.palette.accent.main}, ${theme.palette.accent.main}, ${theme.palette.accent.main}, ${theme.palette.accent.light}, ${theme.palette.accent.main}, ${theme.palette.accent.light}, ${theme.palette.accent.main})`,
    backgroundSize: '800%',
    borderRadius: '50%',
    filter: 'blur(8px)',
    animation: `${glowing} 15s linear infinite`,
    zIndex: -1,
    overflow: 'hidden'
  }
  return glowingStyles
}

<Box
  sx={{
    width: 115,
    height: 115,
    top: '25px',
    left: '25px',
    ...getGlowingStyles(theme)
  }}
/>

Safari’s view:

Chrome’s view: