CSS 渐变怎么通过多次叠加制作复杂的星空背景-H5教程-PHP中文网

纯CSS渐变可通过多层linear-gradient与radial-gradient叠加配合background-blend-mode模拟类星空效果：底层深蓝到黑表现纵深，中层随机径向渐变模拟星云，上层斜向细线渐变营造星轨，再加噪点层提升细节，兼顾性能与视觉层次。

css 渐变怎么通过多次叠加制作复杂的星空背景

纯 CSS 渐变本身不能直接模拟真实星空（比如点状星星、深度感、闪烁或流星），但通过多层 linear-gradient 和 radial-gradient 叠加 + background-blend-mode，可以构建出富有层次感、光影交错的「类星空」氛围底图——适合作为 Canvas 或粒子动画的视觉基底，或轻量级静态星空背景。

用多层渐变模拟星空层次

真实星空有远近、明暗、色温差异。CSS 中可用不同方向、角度、透明度和颜色的渐变分层模拟：

底层：深蓝到纯黑的垂直线性渐变，模拟宇宙纵深 —— linear-gradient(to bottom, #0a0e2a, #000)
中层：多个微弱的径向渐变（radial-gradient(circle at X% Y%, #fff2, transparent 70%)），随机定位，模拟稀疏亮星云或星团光晕
上层：极细的斜向线性渐变（如 linear-gradient(135deg, transparent 49%, rgba(255,255,255,0.03) 50%, transparent 51%)），重复平铺后形成细微“星轨”纹理

用 background-blend-mode 混合出星雾与辉光

单靠叠加容易发灰或过曝，关键在混合模式。推荐组合：

background-blend-mode: overlay; —— 增强对比，让浅色星点更突出，深色区域更沉静
background-blend-mode: screen; —— 适合叠加多层微光，产生柔和辉光效果（慎用过多，易泛白）
可混搭：前两层用 overlay，最上层噪点/星轨层用 screen，控制整体通透感

示例代码：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

.starry-sky {
  background:
    linear-gradient(to bottom, #0a0e2a, #000),
    radial-gradient(circle at 20% 30%, #8af8ff22, transparent 70%),
    radial-gradient(circle at 75% 65%, #ff9ecb1a, transparent 65%),
    linear-gradient(135deg, transparent 49%, rgba(255,255,255,0.02) 50%, transparent 51%);
  background-size: cover, 300px 300px, 400px 400px, 4px 4px;
  background-position: 0 0, 20% 30%, 75% 65%, 0 0;
  background-blend-mode: overlay, overlay, overlay, screen;
}

加噪点提升真实感（无图片）

CSS 无法生成真正随机噪点，但可用 repeating-linear-gradient 模拟低频星点纹理：

添加一层：repeating-linear-gradient(0deg, transparent, transparent 1px, #fff05 1px, #fff05 2px) 与另一方向叠加，形成细密网点
配合 background-size: 8px 8px 和 background-blend-mode: hard-light，让白点更锐利、不糊成一片
注意：此层务必放在最顶层，且 opacity 控制在 0.05–0.1 范围内，否则会盖住下层渐变细节