Elysia Tools
导航
Design
生成 2024 年以来 Dribbble/Behance 流行的“渐变网格”：多个径向渐变（色斑 → 同色透明衰减）叠加在底色（可选角向渐变底层）上，支持混合模式、SVG 胶片颗粒、种子化布局（四角 / 环形 / 散点 / 网格），实时预览 + 可复制 CSS + Tailwind 任意值类名导出。色斑用 #RRGGBB00 八位十六进制同色衰减，避免 transparent 关键字的灰圈问题。
详情
核心语法（MDN）：background-image 多层渐变中第一层最靠上；径向层写作 radial-gradient(circle at x% y%, #色 0%, #色00 60%)——透明终止位 35–50% 为硬色斑、50–70% 为经典网格（默认 60%）、80–100% 为柔和底纹；底色写 background-color。角向底层 conic-gradient(from 角度deg at 50% 50%, …) 提供极光式角度变化。background-blend-mode 列表与图层顺序一一对应（normal 普通叠放 / multiply 油墨感 / screen 发光 / overlay 饱和中间调 / soft-light 柔和极光 / hue / difference 迷幻）。胶片颗粒为内联 feTurbulence SVG data-URI，低不透明度 + mix-blend-mode: overlay。布局由 mulberry32 种子驱动，同种子完全可复现。Tailwind 导出为单条任意值（空格替换为下划线）：bg-[radial-gradient(circleat20%25%,#7c3aed0%,#7c3aed00_60%),…] + bg-[#底色]。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
CSS 渐变网格生成器可通过多层径向渐变与可选角向渐变底层叠加，快速生成现代风格的渐变网格与极光背景，并提供实时预览、纯 CSS 代码及 Tailwind 任意值类名导出。
背景
正在开发一款暗黑主题的开发者工具落地页，需要一个具科技感且加载极快的主视觉背景。
问题
使用 PNG 图像体积过大且缩放模糊，手动手写多层径向和角向混合渐变语法繁琐。
如何使用
选择 Ember 预设，色斑数量设为 5，布局选择 scatter 并指定种子 777，开启角向渐变底层与胶片颗粒，混合模式设为 screen。
{
"preset": "ember",
"blobCount": 5,
"layout": "scatter",
"seed": 777,
"falloff": 65,
"blendMode": "screen",
"conicUnderlay": true,
"conicAngle": 45,
"grain": true
}结果
生成带有微噪点和流动发光感的深色背景 CSS 与 Tailwind 类名，直接嵌入组件使用。
背景
设计团队需要为新版产品控制台卡片统一一套明亮柔和的四角色彩过渡规范。
问题
不同设计稿中渐变终止位置不一致，容易出现色彩断层或边缘发灰。
如何使用
选择 Cosmic 预设，布局选择 corners，衰减设为 60%，混合模式保持 normal，关闭底层与颗粒以保持界面清爽。
{
"preset": "cosmic",
"blobCount": 4,
"layout": "corners",
"seed": 42,
"falloff": 60,
"blendMode": "normal",
"conicUnderlay": false,
"grain": false
}结果
工具采用 8 位十六进制同色衰减（#RRGGBB00）代替 transparent 关键字，避免了浏览器插值到透明黑产生的灰圈瑕疵。
通过内联 SVG 的 feTurbulence 滤镜 data-URI 结合 overlay 混合模式实现，无需额外引入外部图片文件。
是的，内部采用确定性算法（mulberry32），只要种子数值相同，散点坐标与渐变分布即可完全复现。
复制导出的 bg-[...] 单行任意值类名，它已将空格转换为下划线，直接贴入 HTML 元素的 class 属性即可。
在径向色斑下方提供 360 度旋转的色彩过渡，与上层混合后能呈现出极光或流动光晕的视觉深度。
获得规范的 4 色四角叠加纯 CSS 规则，色斑边缘平滑衰减，适配各类亮色 UI 卡片。