文章目录
前言
从头开始创建高级形状需要一些高级 CSS 和 SVG 知识，之后您可能仍会调整值。我建议使用一些 GUI 工具，它们为您提供了一个用户界面来调整参数。
一、SVG 波浪图片生成器
二、背景图片生成器
三、布局/形状分隔线
四、Neumorphism
Neumorphism
它创造了一种全新的 UI 风格。来自世界各地的设计师已经在 Dribbble 和 Behance 上看到了引人注目的中性设计。该工具支持在线调试 UI 风格，并可以直接生成对应的 CSS 代码。
五、动画按钮
六、开发工具
开发工具提供了针对程序员的工具集合，是开发、编码、在线测试的辅助工具，如：在线正则表达式测试工具、代码格式化、代码压缩工具、JSON 校验工具、JavaScript 工具、XML 工具、代码截图工具等。可直接在线运行，是各类编程技术人员必备的工具。
七、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，用于创建背景非常方便。
二十、font-awesome（字体图标）
Font Awesome 是互联网的图标库和工具包，被数百万设计师、开发人员和内容创建者使用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
