Interactive Rating Component using HTML, CSS and JavaScript

What challenges did you encounter, and how did you overcome them?

In this challenge the thing that I found most difficult was to be able to create a good linear-gradient as background, similar to the pretended design. Creating good and visually appealing linear-gradients has always been something that I found hard to do with CSS, and when I see them used by other developers I find it fascinating, because it really gives a more professional look to every app, so any tips and advice in that regard will be extremely appreciated.

This is the code for my linear-gradient that I would like to improve:

    to bottom,
    hsla(217, 12%, 63%, 0.11) 0%,
    hsla(213, 20%, 18%, 0.712) 20%,
    hsla(213, 20%, 18%, 0.404) 100%,
    hsla(213, 20%, 18%, 0.116) 100%
  ); ```