왜 여러 그라디언트를 추가해도 작동하지 않습니까?

Question

제가

div { 

    width: 1000px; 
    height: 500px; 
    background: radial-gradient(yellow, orange), linear-gradient(180deg, red, rgba(0,0,0,0)); 
} 

그러나

에만 방사형 그라데이션 번째, 표시되지 않는 ... 아래에 오는 어두운 선형 톤 단순한 방사형 그라데이션을 원한다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

방사형 그래디언트가 선형 그래디언트 위에 배치됩니다. 두 색상의 불투명도가 모두 100 %이므로 위의 그래디언트는 그 아래의 그래디언트를 차단합니다.

그라디언트의 순서 만 전환하면됩니다.

div { 
 
    width: 1000px; 
 
    height: 500px; 
 
    background: linear-gradient(180deg, red, rgba(0,0,0,0)), radial-gradient(yellow, orange); 
 
}

<div></div>