背景样式
收集常用页面背景模板,覆盖网格、纹理、技术感和轻量动态背景。
Launch
Layered radial gradients create a warm, modern background without image assets.
背景详情
- 分类
- 光晕渐变
- 适用
- 参考 CSS Background soft clouds,用多层径向渐变模拟 mesh。
Tailwind 背景类
bg-[radial-gradient(circle_at_20%_30%,rgba(99,102,241,0.34),transparent_48%),radial-gradient(circle_at_80%_25%,rgba(34,211,238,0.28),transparent_50%),radial-gradient(circle_at_75%_80%,rgba(245,158,11,0.22),transparent_54%),radial-gradient(circle_at_25%_75%,rgba(124,58,237,0.22),transparent_56%),linear-gradient(to_bottom,#ffffff,#f8fafc)] bg-white/20
生成提示词
请为 [页面名称/业务场景] 设计一个「柔云 Mesh」背景样式。 适用场景: - 参考 CSS Background soft clouds,用多层径向渐变模拟 mesh。 视觉目标: - Layered radial gradients create a warm, modern background without image assets. 背景实现: 1. 主背景使用:bg-[radial-gradient(circle_at_20%_30%,rgba(99,102,241,0.34),transparent_48%),radial-gradient(circle_at_80%_25%,rgba(34,211,238,0.28),transparent_50%),radial-gradient(circle_at_75%_80%,rgba(245,158,11,0.22),transparent_54%),radial-gradient(circle_at_25%_75%,rgba(124,58,237,0.22),transparent_56%),linear-gradient(to_bottom,#ffffff,#f8fafc)] 2. 覆盖层使用:bg-white/20 实现要求: 1. 使用 CSS 或 Tailwind arbitrary values 实现,不依赖图片素材。 2. 背景必须放在内容层下方,正文和按钮要保持清晰可读。 3. 保持浅色、克制、可复用,不要出现大面积高饱和装饰。 4. 如果用于 Hero,背景需要从首屏自然过渡到下一段内容。 5. 如果用于工具或后台页面,背景只承担氛围和分区提示,不干扰操作密度。
