如何用CSS创建类似示例的斜向蓝色渐变背景？

你当前的代码是做了纯色分割（白色和深蓝色各占50%），不是渐变效果。要实现平滑的蓝色渐变，需要调整linear-gradient的参数，让颜色之间自然过渡：

示例代码 #

<div style="background: linear-gradient(135deg, #66b3ff 0%, #3399ff 50%, #0066cc 100%); height: 300px;"></div>

关键调整说明 #

• 去掉原代码中50%和0%这类强制分割的位置值，让颜色自动过渡；如果需要控制渐变的过渡区间，也可以给每个颜色添加自定义百分比，比如#66b3ff 20%, #0066cc 80%，让渐变在20%-80%的范围内完成。
• 调整渐变角度：135deg对应右上到左下的渐变方向，你可以根据参考图的渐变走向修改，比如45deg是左上到右下，90deg是从上到下。
• 替换颜色值：参考图是浅蓝到深蓝的过渡，你可以用更匹配的色值，比如#e3f2fd（极浅蓝）到#1976d2（标准深蓝），来贴近参考效果。

兼容旧浏览器的写法 #

如果需要兼容老版本webkit内核浏览器，可以同时添加前缀：

<div style="background: -webkit-linear-gradient(135deg, #66b3ff 0%, #3399ff 50%, #0066cc 100%); background: linear-gradient(135deg, #66b3ff 0%, #3399ff 50%, #0066cc 100%); height: 300px;"></div>

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