推荐资源

即梦AI

抖音出品 AI视频图片生成

Envato Elements

无限下载设计素材与模版

Eagle

图片素材文献管理神器

Setapp

畅享240+款Mac优质应用

2025 设计趋势

极光网格渐变生成器

拖拽颜色节点，创造梦幻般的流体极光背景。现代 UI 设计必备神器。

拖拽圆点调节位置

节点设置

颜色 (Color)

背景底色 (Background)

#ffffff

CSS 代码

background-color: #ffffff;
background-image:
    radial-gradient(at 20% 30%, #FF0080 0px, transparent 50%),
    radial-gradient(at 80% 20%, #7928CA 0px, transparent 50%),
    radial-gradient(at 30% 80%, #42A5F5 0px, transparent 50%),
    radial-gradient(at 70% 70%, #00E6CC 0px, transparent 50%),
    radial-gradient(at 50% 50%, #FFD700 0px, transparent 50%);

什么是 Mesh Gradient？

Mesh Gradient（网格渐变/极光渐变）是近年来 UI 设计中最热门的趋势之一。不同于传统的线性或径向渐变，它通过多个颜色节点在空间中的自由分布和模糊融合，创造出类似流体、极光或烟雾的梦幻效果。这种背景既具有丰富的色彩层次，又足够柔和，非常适合作为现代网页、App 的背景。

如何使用生成的代码

本工具生成的 CSS 使用了多重 radial-gradient 叠加的技术。这种方法兼容性好，不需要引入额外的 JavaScript 库或 WebGL。

将生成的 CSS 直接复制到你的容器类中（如 .hero-section）。
如果觉得效果不够平滑，可以在 CSS 中增加 filter: blur(100px); 对整体容器进行二次模糊（注意性能）。
你也可以通过调整各个 Radial Gradient 的位置（at X% Y%）来实现动画效果。

专注白噪音

雨声Lofi，为设计提供完美背景音。

精选神器

阿里云

爆款云服务器特惠抢购

腾讯云

云产品特惠性价比首选

腾讯元宝

免费DeepSeek AI助手

小绿鲸

英文文献阅读科研必备