10個(gè)可視化 CSS 工具， 快速生成 CSS 片段！！

今天繼續(xù)推薦提高我們摸魚時(shí)間的幾個(gè)神器，相信我，你會(huì)愛上他們的。

1. Neumorphism

地址：https://neumorphism.io/#e0e0e0

這個(gè)網(wǎng)站為 section 或 div 生成對(duì)應(yīng)UI，它也可以自定義border-radius, box-shadow 等。

2. Shadows Brumm

地址：https://shadows.brumm.af/

它可以為我們生成多個(gè)分層陰影，一種非?？岬男Ч部梢詮那€中自定義顏色。

3. CSS Clip-path Maker

地址：https://bennettfeely.com/clippy/

這個(gè)算是我用的最多的，早期錄的CSS視頻，很多復(fù)雜點(diǎn)的效果都是用這個(gè)工具幫我生成，前列推薦。

4. Fancy Border Shape Generator

地址：https://9elements.github.io/fancy-border-radius/#30.36.29.30--.

它通過操作 border-radius 生成很 awesome 形狀，我們可以在項(xiàng)目中盡情的使用的，通過微調(diào)來達(dá)到我們想要的形狀。

5. Cubic Curve

地址：https://cubic-bezier.com/

為 CSS 動(dòng)畫生成cubic-bezier。

6. CSS Gradient

地址：https://cssgradient.io/

如果你的項(xiàng)目經(jīng)常需要使用漸變，那么，你會(huì)愛上這個(gè)網(wǎng)站。我用了很長時(shí)間，它非常完美。在這里你也可以使用一些工具，比如漸變按鈕等等。

7. CSS Waves Generator

下面這三個(gè)波浪生成器可以生成任何類型的波浪，還在為畫破浪而苦惱的小伙伴可以用起來了。

CSS Waves

地址：https://getwaves.io/

它能生成簡單的波浪，并有一些自定義功能。

Gradient Multiple Waves

地址：https://www.softr.io/tools/svg-wave-generator

它可以產(chǎn)生多個(gè)漸變波，非常棒。

Multiple Animated Waves

地址：https://svgwave.in/

它可以生成多個(gè)漸變波浪，但主要特點(diǎn)是它還可以為此生成實(shí)時(shí)動(dòng)畫。

8. CSS Grid Generator

CSS grid

地址：https://cssgrid-generator.netlify.app/

它為網(wǎng)格生成了很棒的css，你可以用div來定制它，它還會(huì)為它創(chuàng)建子元素。

CSS Grid Area

它可以生成網(wǎng)格區(qū)域。我們可以根據(jù)具體需要來命名和定制區(qū)域。

9. Loading Animated GIFs/SVGs

地址：https://loading.io/

這個(gè)網(wǎng)站可以生成多個(gè)加載動(dòng)畫，并以SVG、GIF、PNG和其他格式下載，但它

的最大特點(diǎn)是你可以將這些動(dòng)畫定制到新的水平。

10. Free Icon Library

Flaticons

地址：https://www.flaticon.com/

這個(gè)庫有5.7M+矢量圖標(biāo)。可以在這里找到任何可能的圖標(biāo)，你可以使用它。

icons8

地址：https://icons8.com/

這個(gè)庫也有大量的圖標(biāo)，你可以定制它們，也可以直接使用圖標(biāo)，而無需下載它。

總結(jié)

希望你從這篇文章中學(xué)到了一些東西，如果有的話，請(qǐng)來波贊。

~~完，我是刷碗，勵(lì)志等退休后，要回家擺地?cái)偟娜耍覀兿缕谝姡?/span>

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~