CSS 程式碼線上生成工具，讓你少寫幾百行程式碼~

以下資源是完全免費的web應用，可用於生成圖案、漸變、甚至瀏覽器字首屬性的CSS3程式碼。如果你寫的是前端程式碼，然後這些資源可以為你節省大量的時間，併為今後的專案工作提供可重複片段。

一、 CSS3 Generator

大家最喜愛的用於程式碼生成的web應用之一就是CSS3 Generator。對於不同類別的程式碼生成器，包括RGBa，transform，flexbox等等，它有不同的頁面。另外，每個程式碼生成器還包括用於解釋哪個瀏覽器版本完全支援該屬性的圖示。

二、Enjoy CSS

為了更加動態的應用而深入瞭解 Enjoy CSS 網站。這就意味著它是一個可以為需要定製輸入框或 CSS3 按鈕的生動的專案的多功能程式碼生成器。它為普通頁面元素，例如 CSS3 Buttons 這樣的頁面提供轉變和轉換以及預構建元素的定製程式碼。

三、Patternify

除非你知道你使用的 Photoshop 很難從零開始製作一個模板。幸虧 Patternify 是一個免費的工具，這個工具可以生成任何你需要的無縫 CSS 模式。

背景是用 Base64 編碼增加到 CSS 生成的。你可以使用原始畫素繪製你自己的模式或者從以構建的模式列表中選擇。儘管 Photoshop 肯定是一個很好的選擇，但是如果你沒有 PS 或其他影象設計軟體的許可權，Patternify 是一個最好的選擇。

四、ColorZilla Gradients

CSS3 的漸變是在 CSS3 語言中最複雜的功能。他們是很容易編寫的，但是程式碼量卻是極其的冗長。ColorZilla 的漸變編輯器是一個免費的 CSS3 背景漸變生成器。

安裝非常類似 Photoshop 或其他顏色選擇器介面。你可以在一個漸變中設定多個不同顏色的斷點。你也可以從 HEX ， HSL ， RGBa 中選擇輸出選項。

五、CSSmatic

另一個免費的多功能WebApp是 CSSmatic。我叫它為“多功能”App是因為它生存4種不同的 CSS 特性：漸變，圓形邊框，盒子陰影和噪音背景，網站上所有的功能都是完全免費的，並在未來很有可能新增更多的 CSS 特性。

六、CSS Type Set

當設計介面的時候很容易就忘記了對於任何網站來說的最重要的一個方面——排版。重新設定又得關注型別，但是有時你先希望它們能自己處理。CSS Type Set 可以通過實時預覽文字屬性準確的做到這點，並且你可以將 CSS 程式碼拷貝到自己的站點。

七、Prefixr

每個開發者都有這樣的一個痛點，就是通過自定義字首來適應所有的網頁瀏覽器。幸運的是，這些標準已經執行了很長時間了並且不是所有的字首都需要寫，但是仍然很多。Prefixr 是一個免費的工具，可以更新你的 CSS 程式碼去包含所有需要的字首屬性。

八、Pleeease Play

這是 Prefixr 之外的另外一個選擇，是另一款 CSS 字首生成器，同時可以執行其他高階 CSS3 更新。最值得關注的是可以向後相容 CSS3 透明度，過濾器，偽元素和其他效果的更新。此外，介面非常容易使用，對於想重複確認程式碼的開發者來說是非常有趣的選擇。

九、CSS3 Button Generator

傳統的按鈕和輸入元素總是限制於作業系統的預設樣式。現在可以簡單的自定義獨特的按鈕 —— 最大的問題是把你的設計從 Photoshop/Sketch 轉換成 CSS3。

一旦你學會了所有 CSS 屬性，一切都變得簡單，但是你還需要編寫很多的程式碼才能完成。CSS Button Generator 是個免費的工具，可以幫你定製按鈕的樣式和標籤文字。當你修改任何一個設定的時候會自動生成程式碼，然後更新。

十、Best CSS 按鈕生成器

Best CSS 按鈕生成器可供生成按鈕程式碼。這是一個完全免費使用的產品，它還有簡單的介面。更棒的是你可以從預製的按鈕中選擇和使用那些作為你設計的模板。如果你是 Chrome 使用者可以檢驗一下免費的瀏覽器擴充套件，它可以被用來訪問外部的網站。

十一、 Ribbon builder

Ribbon builder 是絲帶製作工具。

十二、CSS ARROW PLEASE

CSS ARROW PLEASE是對話方塊製作工具。

十三、CSS Load

CSS Load 是載入圖示的製作工具。

十四、Randomized CSS3 Gradient Generator

Randomized CSS3 Gradient Generator 是隨機生成漸變的生成器。