纯CSS渐变可通过多层linear-gradient与radial-gradient叠加配合background-blend-mode模拟类星空效果：底层深蓝到黑表现纵深，中层随机径向渐变模拟星云，上层斜向细线渐变营造星轨，再加噪点层提升细节，兼顾性能与视觉层次。
纯 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，控制整体通透感
示例代码：
立即学习“前端免费学习笔记（深入）”；
.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 范围内，否则会盖住下层渐变细节
性能与兼容性提醒
多层渐变叠加对渲染压力小，但需注意：
- 避免超过 5 层渐变（含噪点层），否则 Safari 可能出现渲染异常或闪屏
-
background-blend-mode在 IE 完全不支持，Edge 17+、Chrome 35+、Firefox 30+ 支持良好 - 若需支持旧浏览器，可降级为单层深色渐变 + Canvas 星空（仅对 JS 启用）
- 不要给该容器设
pointer-events: none——它只是背景，无需事件透传；若你另有一层全屏动画覆盖，才需对该动画层设置
