BACKGROUND & DECOR
圆锥渐变背景Conic Gradient Background
绕中心旋转的色轮，配深色径向蒙版——中心内容、边缘流光。
效果预览
边缘流光旋转 · 中心留给内容
适合用在哪
AI 产品 Hero、创意工具、颁奖/活动页。
容易踩的坑
- 旋转层 inset 不足 -40%，转到 45° 时会露出直角空白边。
- 直接动画 conic-gradient 的 from 角度需要逐帧重绘，CPU 占用远高于 rotate 整层。
- 无限旋转未在 prefers-reduced-motion 下停止，长时间盯看易引发眩晕。
设计提示词 · Prompt
圆锥渐变背景（Conic Gradient）：一个超大元素（inset:-40% 以上，确保旋转时不露边）铺 conic-gradient(from 0deg, 色1, 色2, 色3, 色1)，animation 匀速旋转 8-12s linear。上面盖一层径向深色蒙版（radial-gradient，中心 80% 不透明深色），只让边缘漏出彩轮——形成"中心舞台 + 流光边缘"的构图。rotate 整层元素而非动画角度（性能更好）。与深色产品截图、白色大标题组合效果最佳。
Conic Gradient: One oversized element (inset:-40% or more, so no edges show while rotating) filled with conic-gradient(from 0deg, color1, color2, color3, color1), animated with a constant 8-12s linear rotation. Cover it with a dark radial mask (radial-gradient, 80% opaque dark at the center) so only the edges reveal the color wheel — creating a "center stage + flowing light edges" composition. Rotate the whole layer rather than animating the angle (better performance). Works best with dark product screenshots and large white headlines.
常见搭配
同一页面里经常和「圆锥渐变背景」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-conicbg"> <b>边缘流光旋转 · 中心留给内容</b> </div>