又到周五啦，提前祝大家周末愉快!今天來(lái)分享一些實(shí)用的前端工具!

1. Small Dev tools

Small Dev Tools 是一個(gè)前端工具網(wǎng)站，包含了很多實(shí)用的功能，比如JSON解碼器、JSON格式化程序、UTF8編碼、Base64編碼、Base64解碼、CSS格式化程序、CSS壓縮器等。

官網(wǎng)：https://smalldev.tools/

2. Carbon

Carbon 是一個(gè)在線工具，可以生成漂亮的不同風(fēng)格的代碼圖片。

官網(wǎng)：https://carbon.now.sh/

3. UI Design Daily

UI 設(shè)計(jì)日?qǐng)?bào)，提供免費(fèi)優(yōu)質(zhì)的 UI 資源。

官網(wǎng)：https://www.uidesigndaily.com/

4. Color Hunt

ColorHunt，即顏色獵人，是一個(gè)在線設(shè)計(jì)配色的網(wǎng)站，其最大的特點(diǎn)就是使用飽和度調(diào)配配色方案。每天會(huì)根據(jù)瀏覽量進(jìn)行更新排版，并可以直接使用。

官網(wǎng)：https://colorhunt.co/

5. SCHEME COLOR

SCHEME COLOR 是一個(gè)在線的配色工具網(wǎng)站，可以根據(jù)顏色、類型等查找合適的配色方案。

官網(wǎng)：https://www.schemecolor.com/

6. Keyframes

Keyframes 可以用來(lái)創(chuàng)建動(dòng)畫、陰影和使用顏色，幫助我們編寫更好的CSS。

官網(wǎng)：https://keyframes.app/

7. Design Resources

Design Resources 是一個(gè)設(shè)計(jì)資源的集合。

官網(wǎng)：https://www.designresourc.es/

8. Omatsuri

Omatsuri 是一個(gè)開源項(xiàng)目，包含12個(gè)實(shí)用的前端工具。

官網(wǎng)：https://omatsuri.app/

9. UI Snippets

UI Snippets 是一個(gè)前端動(dòng)畫合集，可以通過右鍵點(diǎn)擊想要的動(dòng)畫直接復(fù)制對(duì)應(yīng)的 CSS 或 SCSS 代碼。

官網(wǎng)：https://ui-snippets.dev/

10. Pattern CSS

Pattern CSS 可以用漂亮的圖案填充空白背景。

官網(wǎng)：https://bansal.io/pattern-css

11. Can I use

Can I use 可以用來(lái)查詢 HTML5、CSS、JS、SVG 在各種流行瀏覽器中的特性和兼容性。

官網(wǎng)：https://caniuse.com/

12. CSS Gradient

CSS Gradient 是一個(gè)用來(lái)快速方便的創(chuàng)建 CSS 漸變的網(wǎng)站。

官網(wǎng)：https://cssgradient.io/

13.CSS matic

CSS matic 是一個(gè) CSS 工具，目前包含4個(gè)很有用的工具，分別是：支持各種顏色和透明度的漸變工具，使用漸變工具，可以創(chuàng)建漸變平滑的色彩變化效果和微妙的透明膠片;邊框圓角工具可以幫助你方便的實(shí)現(xiàn)需要的圓角效果;噪聲紋理可以幫助你創(chuàng)造奇妙的背景圖案，能夠?qū)崟r(shí)預(yù)覽結(jié)果;盒陰影工具可以控制模糊半徑的變化，顏色變化，陰影大小，可以實(shí)現(xiàn)你想要的任何效果。

官網(wǎng)：https://www.cssmatic.com/

14.Am I Responsive

Am I Responsive 用來(lái)測(cè)試響應(yīng)式網(wǎng)頁(yè)。輸入鏈接即可生成預(yù)覽，Am I Responsive 能幫我們測(cè)試出頁(yè)面在手機(jī)、平板電腦、筆記本電腦和桌面端設(shè)備上的瀏覽體驗(yàn)。

官網(wǎng)：http://ami.responsivedesign.is/

15. CSS Generator

這是一個(gè)實(shí)用的 CSS 生成器，可以實(shí)時(shí)查看調(diào)試效果。

官網(wǎng)：https://html-css-js.com/css/generator/

16. My Brand New Logo

My Brand New Logo 是一個(gè)CSS 調(diào)色板生成器，用來(lái)創(chuàng)建一致的調(diào)色板方案。

官網(wǎng)：https://mybrandnewlogo.com/color-palette-generator

17. 裁剪路徑生成器

CSS cli-path 功能能夠構(gòu)建復(fù)雜的形狀，該工具讓我們可以輕松地以交互方式構(gòu)建該多邊形。

官網(wǎng)：https://bennettfeely.com/clippy/

18. CSS Grid Generator

CSS Grid Generator 是一個(gè) Grid 布局生成器，通過這個(gè)工具可以快速創(chuàng)建自定義CSS Grid布局。

官網(wǎng)：https://cssgrid-generator.netlify.app/

19. CSS Layout Generator

CSS Layout Generator 布局生成器可以為布局組件創(chuàng)建 CSS 和 HTML 的工具。

官網(wǎng)：https://layout.bradwoods.io/

20. Fluid-responsive font-size calculator

Fluid-responsive font-size calculator 即響應(yīng)式字體計(jì)算器，可以輕松創(chuàng)建流暢的排版體驗(yàn)。它有更廣泛的支持，可以用幾行 CSS 來(lái)實(shí)現(xiàn)。

官網(wǎng)：https://websemantics.uk/tools/responsive-font-calculator/

21. regex101

Regex101是學(xué)習(xí)、測(cè)試正則表達(dá)式的工具網(wǎng)站。

官網(wǎng)：https://regex101.com/

22. Regex-Vis

Regex-Vis 是一個(gè)正則表達(dá)式可視化器和編輯器。

官網(wǎng)：https://regex-vis.com/

23. Loupe

Loupe 是一個(gè)可視化工具，可幫助我們了解 JavaScript 的調(diào)用堆棧/事件循環(huán)/回調(diào)隊(duì)列是如何執(zhí)行的。

官網(wǎng)：http://latentflip.com/loupe/

24. RunJS

RunJS 是一個(gè)桌面應(yīng)用程序，可幫助我們編寫專門的 Javascript 和 Typescript 代碼。它的一些優(yōu)勢(shì)是可以快速測(cè)試代碼，輕松導(dǎo)入和測(cè)試庫(kù)代碼，并且能夠修改界面、主題和字體以適應(yīng)偏好。

官網(wǎng)：https://runjs.dev/

25. Wrap SVG Online

Wrap SVG Online 通過拖放從計(jì)算機(jī)上傳圖像，可以輕松地編輯網(wǎng)頁(yè)的 SVG 圖像。

官網(wǎng)：https://pavellaptev.github.io/warp-svg/

26. SVG Path Visualizer

SVG Path Visualizer 可以幫助我們通過輸入 SVG 路徑數(shù)據(jù)來(lái)快速直觀地查看 SVG 圖像。此外，該工具還提供了詳細(xì)的說(shuō)明，以便了解如何創(chuàng)建基本的 SVG 形狀，如直線、曲線、三角形等。

官網(wǎng)：https://svg-path-visualizer.netlify.app/

27. BGJar

BGJar 是一個(gè)在線工具，可以輕松快速地為網(wǎng)站創(chuàng)建 SVG 背景。只需編輯必要的信息，它將自動(dòng)導(dǎo)出圖像或代碼供我們應(yīng)用到網(wǎng)站。

官網(wǎng)：https://bgjar.com/

28. Wavesnippets

Wavesnippets 可以將代碼分步設(shè)置為動(dòng)畫、視頻或 GIF。

官網(wǎng)：https://www.wavesnippets.com/

29. Generate SVG Waves

Generate SVG Waves 可以用來(lái)創(chuàng)建 SVG 波形背景。

官網(wǎng)：https://svgwave.in/

30. CodeSandbox

CodeSandbox 是一個(gè)為 Web 應(yīng)用程序開發(fā)而構(gòu)建的在線編輯器，支持多種主流框架。

官網(wǎng)：https://codesandbox.io/

31. Openbase

Openbase 幫助開發(fā)人員在數(shù)以百萬(wàn)計(jì)的開源軟件包中進(jìn)行選擇和使用。

官網(wǎng)：https://openbase.com/

32. CodePen

CodePen 是一個(gè)在線的前端代碼編輯工具，可用于制作測(cè)試頁(yè)面、代碼調(diào)試，所見即所得。

官網(wǎng)：https://codepen.io/

33. JSONLint

JSONLint 是一個(gè) JSON 調(diào)試工具，如果遺漏了語(yǔ)法中的某些內(nèi)容，它會(huì)進(jìn)行檢查。JSONLint 是處理大型 JSON 格式的絕佳工具，而且很容易上手。

官網(wǎng)：https://jsonlint.com/

34. Minify

Minifier 可以對(duì) JavaScript 和 CSS 代碼進(jìn)行壓縮，通過縮小可以提高網(wǎng)站加載速度。Minifier 通過刪除 .js 和 .css 文件中的空白并重新格式化它們以減小大小。

官網(wǎng)：https://www.minifier.org/

35. Unminify

Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可讀。這兩種工具都非常容易使用。

官網(wǎng)：https://unminify.com/

36. CRADIENT.ART

CRADIENT.ART 是一個(gè)高級(jí) CSS 漸變編輯器，使用帶有分層、設(shè)計(jì)工具和免費(fèi)云存儲(chǔ)的功能豐富的編輯器設(shè)計(jì)插圖、圖案、圖標(biāo)等。

官網(wǎng)：https://gra.dient.art/

37. 3DPop

3DPop 可以使用 CSS 生成很棒的 3D 文本效果。

官網(wǎng)：https://textpop3d.web.app/

38. CSS Photo Filters

CSS Photo Filters 是一個(gè)CSS圖片濾鏡工具，提供了 36 個(gè) CSS 過濾器供我們使用。

官網(wǎng)：https://baseline.is/tools/css-photo-filters/