Html 如何在CSS中创建具有2个渐变的背景

我有一个div，顶部30%为白色背景，底部70%为蓝色背景

现在我需要的是底部也有一个梯度

我对白色/蓝色部分使用以下行：

background: -webkit-linear-gradient(top, white, white 30%, #030A69 30%, #01063e);

我对当前效果有一点了解：

这就是理想的效果：

如何实现这一点？

使用以下css：

background: linear-gradient(white 30%, #030A69 30%, #01063e);

#主列{
背景：线性梯度（白色30%，#030A69 30%，#01063e）；
高度：500px；
宽度：500px；
边框：2倍纯色品红；
}

使用以下css：

background: linear-gradient(white 30%, #030A69 30%, #01063e);

#主列{
背景：线性梯度（白色30%，#030A69 30%，#01063e）；
高度：500px；
宽度：500px；
边框：2倍纯色品红；
}

背景：-webkit线性渐变（顶部、白色、白色30%、#030A69 30%、#010431）使用百分比时，不能使用方向
背景：-webkit线性渐变（顶部、白色、白色30%、#030A69 30%、#010431）使用百分比时，不能使用方向