在這篇短文中，我將向大家介紹 6 款在搭建網站時為我節省了許多時間的免費工具。希望這些工具也能夠幫到你們。

1. Type Scale[1]

你是否經常為了如何設定頁面元素的字體大小而倍感糾結？如果你有這種煩惱，這款軟件絕對能幫到你。

只需在網頁中輸入你的基準字體大小，它就會展示出不同的元素（H1、H2、H3 等等）的字體尺寸。

此外，你還可以從谷歌字體庫中挑選不同的字體，并嘗試不同的字體大小。

這款工具最棒的點在于，在選擇你想要的效果后，它會自動生成對應的 CSS 樣式代碼，你可以直接把它拷貝到 CSS 文件中。同時，它還會自動導入你所選擇的字體庫并為 html 設置好 font-family 屬性，這樣你就不用花時間在不同的文件中定義字體大小了！

2. Happy Hues[2]

如果你不知道怎樣為你的網站進行配色設計的話，這款工具會是你學習的起點。

它不僅展示了多種絢麗的配色方案，還為不同的配色設計了真實的范例，教你如何把不同的顏色運用到你的項目設計中。

這款工具告訴大家應該如何為不同的元素選擇對應的顏色，同時還展示了如何為網頁插圖選擇配色方案，讓插圖和網頁整體的風格更加匹配。

3. Fontjoy[3]

這款工具可以快速生成對應不同元素的一套字體，供你在網頁設計中應用。你可以選擇你想要的對比度，單擊生成就可以得到想要的那套字體了。

4. CSS Peeper[4]

CSS Peeper 是一款 Chrome 拓展程序，有著優秀的用戶體驗。它能幫助你快速檢查不同網頁的樣式信息，展示網站所使用的顏色和字體。此外，如果你對網站上的某一個特定元素感興趣，它能夠幫助你快速檢查出創建對應元素所需的所有 CSS 樣式。

5. avataaars generator[5]

Alt Text

這款工具可以幫助你生成有趣的擬人化頭像。有非常多不同的樣式和風格可供你選擇，在完成設計后，你還可以快速地將頭像素材以多種格式導出。工具現在支持 PNG 與 SVG，還支持直接生成 React 代碼或者圖片鏈接。最重要的是，這款工具是完全免費的！

6. brumm.af[6]

Alt Text

通過使用這款工具，你可以創造出驚人的 box-shadow 陰影效果。你可以添加多個層級的陰影，并且對每個圖層進行調整，從而創造出最自然、最擬真的陰影效果。