how to make gradient on bar not look squashed?

[simply-zaki]

i added a gradient to fill and it looks good but if its height is too small it looks squashed, how do i do something like background-image in css?
the fill:
fill: { type: 'gradient', gradient: { shade: 'dark', type: 'vertical', shadeIntensity: 1, gradientToColors: ['#c026d3'], stops: [0, 60, 100], colorStops: [ { offset: 0, color: '#7c3aed' }, { offset: 60, color: '#d946ef' }, { offset: 100, color: '#5b21b6' }, ] } }

[simply-zaki]

pls this is a project for a client