纯CSS径向渐变可实现宇宙星空横幅：以#020818深蓝紫黑为底，叠加3–4层由远及近的rgba径向渐变模拟星云光晕，再用box-shadow伪随机生成星光点，辅以微动效与视差滚动增强纵深感。
用 CSS 径向渐变模拟宇宙星空横幅，核心是叠加多层不同色值、透明度和尺寸的径向渐变，配合深蓝/紫黑底色与微光点效果，营造出空间纵深感。不需要图片，纯 CSS 即可实现轻量、响应式、可缩放的星空背景。
基础星空底色：深空主调
从一个接近纯黑但带极细微蓝紫倾向的背景开始，避免死黑（#000），推荐使用 #020818 或 #0a0e21。这是所有渐变的基底，确保后续光晕有足够对比度。
分层径向渐变：模拟星云与光晕
在 background 属性中按顺序叠加 3–4 层 radial-gradient()，由远及近、由淡到亮：
-
最底层（遥远星云）：大范围、低透明度的紫蓝色渐变，如
radial-gradient(circle at 20% 30%, rgba(100, 50, 200, 0.08) 0%, transparent 70%) -
中层（主星云团）：偏心放置、稍高透明度的青蓝渐变，例如
radial-gradient(circle at 70% 60%, rgba(30, 120, 200, 0.12) 0%, transparent 60%) -
近层（恒星辉光）：小而亮的白色/淡黄渐变，模拟恒星周围散射光，如
radial-gradient(circle at 40% 20%, rgba(255, 255, 220, 0.2) 0%, transparent 30%)
添加星光点缀：伪随机光点
仅靠渐变还不够“星”。可用 box-shadow 配合伪元素或额外 div 模拟星点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 新建一个绝对定位的
::before伪元素，设为透明背景 - 用多个
box-shadow值生成数十个不同位置、大小、亮度的白点，例如：box-shadow: 10px 20px 0 #fff, 200px 150px 0 #eef, 320px 80px 0 #fff; - 为增强真实感，可对部分“星点”加
blur（如1px 1px 2px #fff）模拟大气散射
增强纵深与动效（可选）
让星空“呼吸”起来，提升沉浸感：
- 给某一层渐变（如中层星云）添加轻微
animation: pulse 15s infinite alternate，改变其background-size或透明度 - 结合
background-attachment: fixed实现视差滚动效果（需父容器有高度且内容可滚动） - 避免过度动画——宇宙是静谧的，微动即可
实际使用时，把多层渐变写进 banner 的 background，再叠加上述光点与动效，就能得到一片无需加载、适配 Retina、缩放不糊的 CSS 宇宙横幅。
