Loading...
Loading...
用纯 CSS 做柔和的网格弥散渐变背景。
网格(弥散)渐变就是现代落地页上那种柔和的多色背景:几种颜色融成一片平滑的云雾场。这个工具用多层 CSS 径向渐变做出这种效果,纯 CSS、不用图片。
每种颜色是放在画布某点、渐隐到透明的一道径向渐变,叠几道就成了融合的网格。点随机从种子生成一套和谐配色,最多加六个点,给任意点重着色,再设底层的底色。预览就是真实 CSS,可复制的输出是一个 background-color 加一摞 radial-gradient 图层,粘到哪都行。一切都在浏览器里运行。
网格是多层径向渐变,可缩放且始终清晰。
带种子的配色把色相均匀铺开,融合好看。
增删并给每个颜色点重着色。
设置渐变图层下面的颜色。
预览就是你复制的那段 CSS。
无需注册;渐变在你的设备上生成。
底色用深、点用亮,得到发光的极光感背景;底色用浅则更柔和的马卡龙感。
反复点随机,直到喜欢这片融合。
给单个点重着色,或加更多点。
调整下层的底色。
把 CSS 复制进你的样式表。
给落地页一片柔和的现代色场。
在卡片或功能块后加一点微妙层次。
用品牌色搭一片彩色背景。
把这种效果用在演示、社交横幅或应用画面里。
每个点变成放在百分比位置、渐隐到透明的 radial-gradient,这些图层叠在纯色底色之上的 background-image 里,带种子的生成器把色相铺开形成均衡配色。
无账号、无网络请求;渐变在你的浏览器本地生成。
几层 CSS 渐变在 GPU 上渲染,所以预览保持流畅。