# CSS 渐变网格生成器（角向 + 径向混合）

生成 2024 年以来 Dribbble/Behance 流行的“渐变网格”：多个径向渐变（色斑 → 同色透明衰减）叠加在底色（可选角向渐变底层）上，支持混合模式、SVG 胶片颗粒、种子化布局（四角 / 环形 / 散点 / 网格），实时预览 + 可复制 CSS + Tailwind 任意值类名导出。色斑用 #RRGGBB00 八位十六进制同色衰减，避免 transparent 关键字的灰圈问题。

> 标准页面: https://elysiatools.com/zh/tools/css-gradient-mesh-generator

- **分类:** Design

- **关键词:** css 渐变网格, 角向渐变生成器, 径向渐变叠加, 极光背景, tailwind 渐变

## 概述

核心语法（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(circle_at_20%_25%,_#7c3aed_0%,_#7c3aed00_60%),…] + bg-[#底色]。

## 输入项

- **调色板预设** (select)
- **自定义颜色 1** (color)
- **自定义颜色 2** (color)
- **自定义颜色 3** (color)
- **自定义颜色 4** (color)
- **色斑数量** (number)
- **色斑布局** (select)
- **随机种子** (number)
- **衰减（透明终止 %）** (number)
- **混合模式** (select)
- **添加角向渐变底层** (checkbox)
- **角向起始角（度）** (number)
- **添加胶片颗粒** (checkbox)

## 适用场景

- 需要为 SaaS 落地页或 Hero 区域快速制作流行的高质感流体渐变背景时。
- 希望通过纯 CSS 和 8 位同色透明色值实现无灰圈、轻量化网格渐变效果时。
- 需要为 Tailwind CSS 项目生成包含多层渐变与胶片颗粒的单行任意值背景类时。

## 工作原理

- 选择预设调色板或自定义色值，配置色斑数量与布局方式（四角、环形、散点或网格）。
- 调整随机种子以变换点位，设定衰减百分比、图层混合模式以及是否开启角向底层与 SVG 胶片颗粒。
- 实时预览生成效果，并一键复制标准 CSS 代码或经过下划线转义的 Tailwind 任意值类名。

## 使用案例

- SaaS 官网与 Web3 应用的暗色/亮色 Hero 区域动态主视觉背景制作。
- UI 设计中卡片组件、模态框或营销横幅的质感磨砂背景装饰。
- 前端原型开发中免图片资产的轻量纯 CSS 视觉渲染方案。

## 常见问题

### 为什么渐变边缘不会出现发灰的色圈？

工具采用 8 位十六进制同色衰减（#RRGGBB00）代替 transparent 关键字，避免了浏览器插值到透明黑产生的灰圈瑕疵。

### 胶片颗粒效果是如何实现的？

通过内联 SVG 的 feTurbulence 滤镜 data-URI 结合 overlay 混合模式实现，无需额外引入外部图片文件。

### 相同随机种子生成的布局是否固定？

是的，内部采用确定性算法（mulberry32），只要种子数值相同，散点坐标与渐变分布即可完全复现。

### 如何在 Tailwind CSS 中直接使用生成的代码？

复制导出的 bg-[...] 单行任意值类名，它已将空格转换为下划线，直接贴入 HTML 元素的 class 属性即可。

### 角向渐变底层的作用是什么？

在径向色斑下方提供 360 度旋转的色彩过渡，与上层混合后能呈现出极光或流动光晕的视觉深度。

## 相关工具

- [SVG Sprite Sheet 生成器](https://elysiatools.com/zh/tools/svg-sprite-generator): 上传最多 30 个 SVG 图标，合并为单个 sprite sheet： 模式用于页面内联 ， 模式用于外部文件片段引用。自动补全 viewBox（由 width/height 推导）、去除重复图标、可选剥离 fill/stroke 以配合 currentColor、始终清理 与 on\* 事件属性，并生成 HTML / React / Vue / CSS 使用代码片段与每个图标的实时预览。</x-turndown>
- [玻璃拟态 / 新拟态 CSS 片段生成器](https://elysiatools.com/zh/tools/glassmorphism-css-snippet-builder): 端到端生成磨砂玻璃（glassmorphism）或新拟态（neumorphism）的完整 CSS 片段：调节模糊、饱和度、色调不透明度、圆角、边框、外阴影与顶部高光；可选 SVG feTurbulence 颗粒噪点叠加与 @supports 不支持降级；自动附带 -webkit-backdrop-filter 前缀（Safari 18 以下必需）与 Tailwind 类映射（含 v3/v4 差异提示），并在渐变背景上实时预览成品卡片。
- [SVG Favicon 生成器](https://elysiatools.com/zh/tools/svg-favicon-generator): 将 SVG 或位图 Logo 生成完整的 favicon 套件，包括 ICO、多个 PNG 尺寸、Apple Touch Icon 和 site.webmanifest
- [图片对角水印工具](https://elysiatools.com/zh/tools/image-watermark-diagonal): 为图片添加对角水印，可自定义角度、大小、透明度和沿对角线位置
- [图片平铺水印工具](https://elysiatools.com/zh/tools/image-watermark-tile): 为图片添加平铺水印，可自定义大小、透明度、间距和图案样式
- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [生物量金字塔与能量流动（10% 定律）](https://elysiatools.com/zh/tools/biomass-pyramid): 按 Lindeman 能量传递定律生成营养级金字塔：输入生产者能量/生物量 E₁、传递效率（默认 10%，可调 0.1–40%）与营养级数（3–6），得到每一级的能量/生物量、占生产者百分比与每次传递的损耗（呼吸散热、排泄、未被捕食）。渲染彩色 SVG 金字塔（条宽按 √E 缩放保证可见，数值始终为真实值）与逐级数据表，并解释为何能量金字塔永远正立而数量/生物量金字塔可能倒置（如海洋生态系统）。典型实测传递效率为 5–20%。
- [汉字笔顺拆解器](https://elysiatools.com/zh/tools/chinese-stroke-order-decomposition): 把汉字拆解为笔画序列与偏旁部首结构，并渲染带组件着色的 SVG 笔顺演示。

## 示例

- [SVG示例](https://elysiatools.com/zh/samples/svg-samples): 可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
- [Tailwind CSS 示例](https://elysiatools.com/zh/samples/tailwind-css): Tailwind CSS示例 - 实用优先的CSS框架，具有响应式设计、组件和自定义配置
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式

## 相关内容

- [SVG、Favicon 与图标资产工作流工具](https://elysiatools.com/zh/hubs/svg-favicon-icon-workflows): 在一个专题中完成 favicon 套件生成、SVG 优化、ICO/PNG/JPG/WebP/SVG 之间的图标转换，以及面向网页交付的图像资产准备。
- [音频编码与格式转换工具](https://elysiatools.com/zh/hubs/audio-convert): 在一个专题里比较音频格式转换、码率调整、采样率转换、编码切换和导出工具，适合交付与归档工作流。
- [图片格式转换与动画导出工具](https://elysiatools.com/zh/hubs/image-convert): 在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
- [JSON 交换与格式翻译工具](https://elysiatools.com/zh/hubs/json-convert): 在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。