---

前言

从头开始创建高级形状需要一些高级 CSS 和 SVG 知识，之后您可能仍会调整值。我建议使用一些 GUI 工具，它们为您提供了一个用户界面来调整参数。

更多好用的可移步 Boss设计查看
ai-girl

---

一、SVG 波浪图片生成器

dute

二、背景图片生成器

magicpattern

三、布局/形状分隔线

shapedivider

四、Neumorphism

Neumorphism
它创造了一种全新的 UI 风格。来自世界各地的设计师已经在 Dribbble 和 Behance 上看到了引人注目的中性设计。该工具支持在线调试 UI 风格，并可以直接生成对应的 CSS 代码。

五、动画按钮

动画按钮

六、开发工具

dute

开发工具提供了针对程序员的工具集合，是开发、编码、在线测试的辅助工具，如：在线正则表达式测试工具、代码格式化、代码压缩工具、JSON 校验工具、JavaScript 工具、XML 工具、代码截图工具等。可直接在线运行，是各类编程技术人员必备的工具。

七、Interactions（图片轮播）

Interactions

八、CSS Gradient （渐变属性）

CSS Gradient 是一个非常好用的工具，可以为项目创建渐变背景。

只需选择和编辑想要的颜色，该工具就会帮你构建你想要的渐变背景，并生成 CSS 代码。

九、获取波浪

Get Waves 可以为你的项目和网站设计生成漂亮的 SVG 波形。

十、平滑阴影

Shadow Brum 可以让你使用 CSS 快速地创建平滑的阴影。

十一、CSS Clip-path Maker

CSS clip-path maker 可以轻松生成各种复杂的形状，并生成 CSS 代码。

这个工具使用 CSS 的 clip-path 特性，可以创建复杂的形状 (多边形、圆形、椭圆等)。

十二、PurgeCSS

PurgeCSS 可以帮助你减少 CSS 文件的大小，提高网站或应用程序性能。
如果你想删除未使用的 CSS 代码，可以使用 PurgeCSS。

十三、CSS Scan

CSS Scan 可以查看所有网页的 CSS 代码，只需将鼠标悬停在网页上的某个元素上，该工具就会为你显示该元素用到的 CSS 代码。

十四、花式边界半径生成器

如果你想使用 CSS 特性 border-radius 创建漂亮的复杂形状，必须使用八个值来指定该属性的值。

而 Fancy Border Radius 可以快速帮你生成复杂的形状和 CSS 代码。

十五、CSS 网格生成器

CSS 网格是在网页上创建响应式网格布局的好方法。为网站或应用程序创建网格布局时，许多 CSS 网格属性和功能可以使用。

十六、Blobmaker.app

Blobmaker 是一款免费的生成式设计工具，可帮助您快速创建随机且独特的 SVG 形状。

十七、Shapedivider.app

Shapedivider.app一个免费工具，让设计师和开发人员更容易导出漂亮的 SVG

十八、Shapedividers

Shapedividers
在 X 或 Y 轴上创建形状分隔线。创建动画效果的选项也是如此。

十九、Trianglify.io

Trianglify.io
生成低多边形背景、纹理和矢量的工具，它基于一个开源库 Trianglify，用于创建背景非常方便。

---

如有启发，可点赞收藏哟~