Czy jest jakikolwiek magiczny sposób, żeby połączyć ze sobą grafikę i gradient w taki sposób żeby wyszło to co mam w projekcie czyli:

projekt:


Jak połączę ze sobą to jest OK, tyle, że gradient obejmuje całą powierzchnię pliku. W jaki sposób uzyskać łuk z góry na dół z półelipsą?

osobne pliki:
header background[png] - plik poniżej:
football:
gradient:

[HTML] pobierz, plaintext 
    background: url('../img/header_form.png') no-repeat center center, linear-gradient(69deg,#ff835e 26%,#fa0 100%);
    background-size: auto, auto;
    background-size: cover;
    clip-path: polygon(59% 92%, 61% 95%, 64% 96%, 68% 99%, 71% 100%, 73% 100%, 76% 100%, 80% 99%, 82% 98%, 85% 96%, 87% 94%, 90% 91%, 92% 89%, 95% 85%, 97% 82%, 100% 75%, 100% 0%, 100% 0%, 100% 0%, 0% 0%, 0% 17%);
[HTML] pobierz, plaintext