原文 | https://javascript.plainenglish.io/7-awesome-css-tools-for-all-web-developers-390ceced6f83

原译 | 小爱

CSS 是每个Web 开发人员都必须知道的样式表语言。它能够使网页对用户更具吸引力。没有CSS的网页就像没有衣服的人。

CSS 有很多很酷的特性，让我们能够在网络上创造出惊人的体验。通过使用CSS样式表语言，你可以在所有设备上使网页美观且响应迅速。你还可以利用 flexbox 和 grid 的强大功能创建漂亮的布局。

与 CSS 有很多关系，它对 Web 开发非常有用。然而，编写和管理好的 CSS 代码并不容易。特别是如果你正在处理大型项目并且你没有使用 CSS 框架。这就是为什么在网络上使用一些可用的 CSS 工具来让你的生活更轻松的原因。

在本文中，我将向你列出一些很棒的 CSS 工具，以提高你的生产力并使生活更轻松。让我们开始吧。

1、Get Waves

网址：https://getwaves.io/

Get Waves 是一个了不起的工具，它可以让你轻松创建 SVG 波形。使用 CSS 创建波浪并不是那么容易，这就是为什么这个工具非常有用的原因。

你创建 SVG 波形并获取它们的代码。如果需要，你还可以下载 SVG 波形。

2、PurgeCSS

网址：https://purgecss.com/

PurgeCSS 工具，可让你删除 CSS 中未使用的代码。这有助于减小 CSS 文件的大小并提高性能。

这个工具非常有用，尤其是当你使用 CSS 框架时。因为大多数时候框架都带有很多我们实际上并没有使用的代码。

3、CSS Scan

网址：https://getcssscan.com/

CSS Scan 是一种高级工具，可让你获取悬停在网页上的任何元素的完整 CSS 代码。

4、 CSS Grid Generator

网址：https://cssgrid-generator.netlify.app/

该工具能够为你的项目生成 CSS 网格代码。你设置列、行和单位，然后根据需要获得 CSS 甚至 HTML 代码。

5、CSS clip-path maker

网址：https://bennettfeely.com/clippy/

CSS 中的 clip-path属性允许你制作复杂的形状（圆形、椭圆形、多边形和所有其他复杂形状）。如果你不熟悉此属性，你可以使用 CSS 路径制作工具轻松创建你想要的形状并获取其 CSS 代码。

6、Animista

网址：https://animista.net/

Animista 是一个很棒的工具，它为你提供了一组可以使用的预制 CSS 动画。你可以选择任何类型的动画并获取其 CSS 代码。

7、Smooth Shadows

网址：https://shadows.brumm.af/

Smooth shadows 是一个很棒的工具，可让你轻松创建平滑的 CSS 阴影。该工具为你提供了更多的自由，你可以自定义阴影的图层、透明度、垂直距离等。

创建所需的阴影后，你可以复制 CSS 代码并将其用于你的项目。

结论

正如你在上面的列表中看到的那样，这些都是非常有用的 CSS 工具，可以在编写 CSS 时为你节省大量时间。它们让你的生活更轻松，并帮助你专注于发展的其他重要任务。

感谢你阅读这篇文章。希望你觉得它有用。

学习更多技能

请点击下方公众号