UD5工具箱
SVG转Base64编码 - 内嵌CSS背景
将SVG代码转换为Base64 Data URL，便于直接内嵌入CSS background-image中。
SVG背景图案集 - 点线/网格/波纹等
✅ 已复制到剪贴板
图案设置
📐 图案类型
🎨 颜色设置
💡 预设配色
📏 图案大小
🔍 细节大小
💧 不透明度
实时预览
50×50px
常见问题与知识点
📘 什么是SVG背景图案？它有什么优势？
SVG背景图案是使用SVG（可缩放矢量图形）格式定义的平铺背景图案。相比传统的PNG/JPG背景图，SVG背景图案具有无限缩放不失真、文件体积极小、可通过代码直接修改颜色和尺寸等优势。通过CSS的
background-image属性配合data URI，可以将SVG图案直接内嵌在样式表中，无需额外HTTP请求，提升页面加载性能。
📗 如何在CSS中使用生成的SVG背景图案？
使用本工具生成的CSS代码，直接复制到你的样式表中即可。核心原理是使用
background-image: url("data:image/svg+xml;charset=utf-8,...")将SVG数据内嵌，配合background-size控制图案单元大小，background-repeat: repeat实现无缝平铺。所有现代浏览器（Chrome、Firefox、Safari、Edge）均完美支持。
📙 SVG背景图案对网页性能有影响吗？
影响极小且通常是正面的。内嵌的SVG data URI不需要额外的网络请求，减少了HTTP连接数。SVG代码经过精简后通常只有几百字节，远小于同等尺寸的PNG图片。浏览器对SVG的渲染也经过高度优化。对于复杂图案，建议保持图案单元尺寸在20-160px之间，以平衡视觉效果和渲染性能。
📕 如何让背景图案无缝平铺？
无缝平铺的关键在于图案单元的边缘能够完美衔接。本工具生成的所有图案都经过精心设计，确保图案单元的四边在重复时自然衔接。SVG的
<pattern>元素本身就支持无缝平铺机制。在CSS中使用时，设置background-repeat: repeat即可实现。
📓 支持哪些图案类型？各适合什么场景？
本工具支持圆点、交错圆点、方形点、网格、点阵网格、斜条纹、交叉斜线、六边形、波纹、菱形共10种图案类型。圆点和网格适合清爽的商务风格页面；斜条纹富有动感适合创意设计；六边形和菱形具有科技感适合技术类产品；波纹柔和自然适合生活类应用。你可以自由搭配颜色来匹配品牌风格。
📔 生成的SVG文件可以在哪些软件中使用？
下载的SVG文件可以在Figma、Sketch、Adobe Illustrator、Inkscape等设计软件中打开和编辑，也可以直接在浏览器中查看。SVG作为开放标准格式，兼容性极广。你还可以将SVG图案用于PPT背景、海报设计、网页背景、应用界面等多种场景。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
渐变网格着色器 - 多点自由色渐变
在画布上放置多个色点，颜色平滑插值形成类似矢量网格渐变的梦幻背景。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
现代平滑阴影生成器 - 多层阴影叠加
通过叠加多个阴影创建柔和且真实的UI投影，导出CSS。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
3D多层阴影生成器 - 拟物化立体感
通过堆叠多层text-shadow或box-shadow创造浮雕或厚重立体文字效果，复制代码。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框，实时预览毛玻璃UI卡片，生成兼容CSS backdrop-filter代码。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。
布局网格覆盖层 - 可拖调栅格参考线
在任意网页上投射可拖拽调整的栅格覆盖线，用来测量和对齐设计稿。
新拟态UI元素生成器 - 柔和阴影与凸起凹陷
调节背景色、亮阴影与暗阴影距离，生成新拟态风格按钮/卡片样式并导出代码。
CSS Clip-Path生成器 - 在线裁剪形状代码
拖拽顶点或选择预定义形状，可视生成CSS clip-path多边形、圆形、椭圆等，实时预览并复制代码。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
霍夫线变换演示 - 检测图片中的直线
在绘图板画几条直线，算法自动利用霍夫变换检测并高亮出这些线段。
范围滑块预设集 - 复制各种风格range CSS
展示多种风格的<input type=range>样式，一键复制定制代码。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
自定义下拉选择框美化 - 取代原生select
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
Web App Manifest 图标预览 - 模拟主屏图标效果
上传图标文件并设置背景色，模拟在 Android/iOS 主屏幕上的添加效果，检查视觉适配。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
字距与字偶距预览器 - 实时调节CSS letter-spacing
输入文本，滑块调节letter-spacing和word-spacing，实时显示效果并复制CSS。
ASCII STL查看器 - 3D模型线框显示
加载文本格式的STL模型文件，以线框形式旋转查看它的三维结构。