1、Transition  生成器

在 CSS 屬性中，過渡屬性具有多種可能性，因此很難從頭到尾記住所有屬性。

當你不確定自己想要什么樣的轉場效果，或者只是想嘗試多種轉場效果時，這個工具就非常有用。通過該工具，我們可以輕松混合不同的轉場效果，如持續時間和延遲時間。這樣，就能清楚地看到每種不同的過渡效果是如何工作的。

地址：https://webcode.tools/generators/css/transition

2、Transfonter

地址：https://transfonter.org/

Transfonter 是一款用于轉換字體的工具，這樣你就可以在網絡上使用它們了。它支持多種不同格式，如 TTF、EOT、WOFF、WOFF2 和 SVG。

3、Flip Switch Generator

地址：https://www.cssportal.com/css3-flip-switch/

每隔一段時間，我們可能需要為正在構建的新應用程序實現一個 switch  開關。與其一遍又一遍地重新發明輪子，我們可以使用此工具生成代碼。

4、Flexbox.help

地址：https://flexbox.help/

Flexbox.help 是一款出色的工具，只要我償需要有關柔性方框的幫助，就可以使用它。如果對柔性方框還比較陌生，這將是一個很好的結果。使用該工具，可以嘗試所有可用的柔性選項。CSS 會根據您選擇的選項為我們生成，因此我們不必親自鍵入所有代碼。

5、SASS to CSS

地址：https://jsonformatter.org/sass-to-css

使用該工具，你可以將 SASS 代碼轉換回 CSS。當您需要將編寫的 SASS 代碼用于網絡時，這將非常有用。

6、純 CSS 圖像效果

地址：https://angrytools.com/css-generator/filter/

通過 CSS 過濾器屬性，可以在元素顯示前在元素渲染中使用模糊或顏色偏移等效果。本工具可讓你嘗試濾鏡屬性提供的所有可能性。

7、生成配色方案

地址：https://coolors.co/

有時，你在為某個設計或網站尋找最佳色彩時會缺乏靈感。每當你缺乏靈感時，你就應該使用這個工具。它是一款非常優雅且易于使用的工具，能為你提供最漂亮的配色方案。

8、風格指南生成器

地址：https://atomicdocs.io/

如果你在一個團隊中工作，有多人負責前端工作，那么這個工具就非常受歡迎。它可以讓你生成風格指南，這樣就不會對某些元素的風格產生誤解。

9、變暗或變亮某種顏色

地址：https://www.cssfontstack.com/oldsites/hexcolortool/

最后一個工具可以讓你加深或減淡任何顏色。在很多情況下，當你得到一種顏色時，你會想讓它變得更深或更淺一些。例如，在為按鈕尋找背景色時。