如何使用CSS linear-gradient实现带弧度倾斜的三种蓝色渐变背景

问题原因 #

• 单个linear-gradient无法承载两个独立的色块需求，色标相邻会自然产生过渡效果，导致浅蓝辨识度低
• 线性渐变本身只有直边，无法直接生成弧形边缘

实现代码 #

html, body {
    height: 100%;
    margin: 0;
}
body {
    /* 主背景色 */
    background-color: #005A83;
    /* 叠加两层独立浅蓝区块，用径向渐变实现弧形边缘 */
    background-image: 
        radial-gradient(ellipse at 100% 100%, transparent 15%, #0571A4 15%) 0 0/100% 45%,
        radial-gradient(ellipse at 100% 100%, transparent 12%, #036595 12%) 0 0/100% 30%;
    background-repeat: no-repeat;
    /* 控制整体倾斜角度 */
    transform: skewY(-5deg);
    transform-origin: top left;
}
/* 可选：如果有页面内容，添加外层容器抵消背景倾斜，避免内容变形 */
.page-content {
    transform: skewY(5deg);
}

参数调整说明 #

• 倾斜角度：修改skewY的数值即可，正负值控制倾斜方向
• 浅蓝块高度：修改对应渐变层尺寸参数的第二个百分比（示例中的45%、30%）
• 弧度大小：修改径向渐变中transparent对应的百分比（示例中的15%、12%），数值越大弧度越明显
• 浅蓝块上下位置：修改对应渐变层位置参数的第二个值，比如0 20px/100% 45%就是区块向下偏移20px

内容的提问来源于stack exchange，提问作者kurtixl