這幾年有不少背景圖案製作工具，都可以在線上預覽、客制化圖形細節，最終產生 CSS 和 SVG 格式，甚至在不用下載任何檔案的情況下直接複製程式碼，加入網頁就會獲得非常好的效果，兼具品質和效能，也不會拖慢網頁速度。例如之前我厭過的 Hero Patterns 快速產生重複圖案 CSS 背景；CSS Background Patterns 也能製作各種純色彩背景圖，如果需要背景圖也能試試看接下來要介紹的服務。
CSS
HTML.cafe 線上即時 HTML 編輯器，修改原始碼立即查看效果變化
現在比較少有機會從頭到尾、以原始碼編寫一個網頁，記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站，最早的網頁就是直接用 HTML 文字編輯器寫出來，後來有了所見即所得編輯器，很多事情變得很方便，也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容，看看呈現出來的結果是否正確，可試試接下來的免費工具。
Tailwind.ink 以神經網路產生色彩調色盤，在主色彩延伸 100 種相關顏色
如果平常的工作和設計有關，對於色彩應該也會有一定的敏感度，若對顏色沒那麼熟悉，其實網路上有不少配色工具可以使用，通常會以不同方式產生調色盤，讓使用者在各種顏色裡快速選擇取用色碼，有助於降低色彩選擇的難度和時間。之前推薦過一些以特定主題收錄的色碼表，像是 NIPPON COLORS 就有代表日本傳統的 250 種顏色，BrandColors 收錄世界知名品牌使用的顏色資訊。
CSS Background Patterns 免費背景圖產生器，可建立純 CSS 背景素材
想想後來的網頁比較少有背景圖需求，多半都是以單色為主，如果覺得略顯單調，也能使用紋理材質或漸層色做為背景，例如 Paper-co 就有許多日系的紙張紋理材質可用做背景，不僅看起來可以提升質感，也不會影響閱讀造成負擔，另一個之前推薦過的 Subtle Patterns 也有超過 500 種紋理素材可供下載；若喜歡重複背景圖 Hero Patterns 可以在不下載任何檔案情況下產生好看的平鋪式背景圖，或是使用 ColorSpark、Gradient Backgrounds 製作漸層色背景，需要背景圖的朋友可以試試看這些服務。
Basicons 用於產品設計和介面開發免費圖示集，186 個基本線條圖案下載
Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果（Chrome 擴充功能）
對中文網頁來說，CSS 字型設定一直是個麻煩的問題，想直接載入字型檔案容量太大，拖慢網頁速度、耗費過多流量，通常會使用網頁字型解決，像是 Google Fonts 和 Adobe Fonts（以前叫作 Typekit）就有提供思源黑體和思源宋體等中文網頁字型，只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用，讓網頁的中文部分更易於閱讀，設計看起來也更有質感。
Taiwan Icon Font 屬於台灣的免費圖示，收錄台北101、珍珠奶茶等圖案
Hexometer Website Analyzer 分析網站使用那些第三方服務或工具（Chrome、Firefox）
通常一個網站背後是由許多的技術和服務組成，舉例來說，使用 WordPress 做為內容管理系統，再以 Cloudflare 加速並保護網站、對圖片進行分流，透過 Google Analytics 分析流量等資訊，搭配 Google AdSense 和 Google DFP 管理廣告和營利等等，雖然可以直接從原始碼得知網站可能使用那些技術，但也有更快速的查詢工具，像是 SimilarTech 和 WhatRuns 都能立即顯示某個網站使用的第三方服務或程式庫。
Line Awesome 超過 4000 個免費線稿圖示，修改自知名 Font Awesome
如果說到最知名的免費圖示字型（Icons Font），我想大家一定聽過 Font Awesome，這套圖示最初發佈於 2012 年，現今則由 1,544 個圖案組成，主要分為免費、開放原始碼和付費 Pro 圖示兩大類型，在使用 Font Scripts 網站中佔有 20% 市佔率，可以想見我們看到的很多圖案可能都是來自它。若要使用這套圖示，除了直接從官方網站或 GitHub 下載整套圖示集，亦可透過開放式內容傳遞網路提供的鏈結載入相關圖案。
