BACKGROUND & DECOR
径向聚光背景Radial Spotlight
一束从顶部打下来的椭圆光，中心亮四周暗——产品发布页的舞台感。
效果预览
一束顶光打下来
radial-gradient at 50% 0%
适合用在哪
产品发布页、定价页顶部、深色 Hero。
容易踩的坑
- 亮部与暗部过渡短于 40% 半径，会出现明显光圈边缘和色带。
- 光斑跟随鼠标时直接改 background 会每帧重绘，应改 CSS 变量配合合成层。
- 光斑中心偏离标题位置，导致白色标题落在暗部之外的区域难以聚焦。
设计提示词 · Prompt
径向聚光背景（Radial Spotlight）：background:radial-gradient(60% 50% at 50% 0-20%, 亮色 0%, 深色 60-70%)——光源在顶部中央，像舞台顶灯。亮部用品牌深色（靛蓝 #312E81），暗部接近纯黑（#0B0B12），过渡要长而柔。内容（标题、产品图）放在光斑中心。进阶：光斑跟随鼠标移动（用 CSS 变量 + mousemove），或做成随滚动的"开灯"动画。这个背景自带戏剧性，一页一次足够。
Radial Spotlight: background: radial-gradient(60% 50% at 50% 0-20%, light color 0%, dark color 60-70%) — the light source sits at the top center, like a stage spotlight. Use a deep brand color for the lit area (indigo #312E81) and near-black for the dark area (#0B0B12), with a long, soft transition. Place content (headline, product image) at the center of the light. Advanced: make the spotlight follow the mouse (CSS variables + mousemove), or turn it into a scroll-driven "lights on" animation. This background is inherently dramatic — once per page is enough.
常见搭配
同一页面里经常和「径向聚光背景」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-spotbg"> <b>一束顶光打下来</b> <span>radial-gradient at 50% 0%</span> </div>