跳至主要内容

Mesh Gradient 网格渐变与 4K 壁纸生成器

可拖拽控制点、随机种子复现、纯 CSS 代码导出与 4K 高清壁纸下载,100% 浏览器本地生成。

Mesh Gradient 网格渐变与 4K 壁纸生成器

100% 本地运算

可拖拽控制点、随机种子复现、纯 CSS 代码导出与 4K 高清壁纸下载,100% 浏览器本地生成。

精选预设方案

网格渐变参数调控

实时调节随机种子、控制点坐标、高斯模糊半径与底色。

控制点数量: 4 / 6

实时调节随机种子、控制点坐标、高斯模糊半径与底色。

至少需要保留 4 个控制点。

50 px
px

实时调节随机种子、控制点坐标、高斯模糊半径与底色。

#0f172a

实时调节随机种子、控制点坐标、高斯模糊半径与底色。

当前选中点

point-1

21 %
%

实时调节随机种子、控制点坐标、高斯模糊半径与底色。

34 %
%

实时调节随机种子、控制点坐标、高斯模糊半径与底色。

#2beeb3

实时调节随机种子、控制点坐标、高斯模糊半径与底色。

实时渲染画布
交互式预览

可通过鼠标拖拽控制点,也可使用键盘方向键或滑动条精确移动。

1
2
3
4

代码导出与图片下载

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);
filter: blur(50px);
导出分辨率

高清 PNG 壁纸导出

How CSS Mesh Gradients and Layered Radial Gradients Work

Mesh gradients create organic, fluid color transitions by blending multiple independent color nodes across a two-dimensional surface. Rather than restricting colors to linear or conical paths, mesh gradients distribute radial color fields from customized focal points with smooth transparent falloffs.

Mathematical Foundation of Seeded PRNG Generation

Deterministic generation uses a pseudo-random number generator (Mulberry32 PRNG) initialized with a 32-bit unsigned integer seed. Every execution with the same seed reproduces the exact spatial coordinates, color distributions, and layer hierarchies without variance:

s = (s + 0x6D2B79F5) >>> 0;
t = Math.imul(s ^ (s >>> 15), 1 | s);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;

Multi-Resolution Client-Side Canvas Rasterization

Exported PNGs are rendered directly on client-side HTML5 2D canvas surfaces at full device resolutions: 1080p Full HD (1920×1080), 2K Quad HD (2560×1440), and 4K Ultra HD (3840×2160). Because all rendering occurs strictly within your local browser sandbox without requesting external assets, exported canvases remain completely untainted and 100% private.

Frequently Asked Questions

不借助图片素材,纯 CSS 是如何实现流体网格渐变的?
纯 CSS 网格渐变通过在基底颜色上叠加多个具有透明渐晕的 radial-gradient() 径向渐变,再辅以 CSS filter: blur() 高斯模糊滤镜,由浏览器原生 GPU 进行平滑插值合成。
什么是基于随机种子的可复现性(Seeded Determinism)?
本工具采用 Mulberry32 伪随机数发生器算法,只要输入相同的数值 Seed,就会严格按确定性数学公式还原完全相同的控制点坐标与配色组合。
4K 壁纸下载是在我的电脑本地生成还是由服务器渲染?
完全由本地设备渲染。通过浏览器内置的 HTML5 2D Canvas API 以硬件加速输出高达 3840×2160 的纯净无污点 PNG 图像,不经过任何服务器。
导出的渐变样式与 4K 壁纸可以用于商业项目吗?
完全可以。所有生成的 CSS 代码与导出的高清图片均为开源免版税资产,您可以自由应用于商业网站、应用界面与视觉设计中。