Форма градиента и background-size

По умолчанию градиент занимает весь элемент. Но вы можете задать ему точные размеры через свойство background-size. Тогда градиент отрисуется только в этой области, а остальной фон останется прозрачным или будет заполняться повторениями.

background-image:
  radial-gradient(
    red,
    yellow,
    green
  );
background-repeat: no-repeat;
background-size: 180px 120px;

Обратите внимание: меняется не сам блок, а размер фонового изображения. За пределами заданной области градиент просто не рисуется. Это открывает возможности для наложения нескольких фонов или использования градиента как небольшого декоративного элемента.

Попробуйте изменить размер градиента с помощью background-size.