十個(gè)可視化 CSS 工具， 快速生成 CSS 片段
今天繼續(xù)推薦提高我們摸魚時(shí)間的幾個(gè)神器，相信我，你會(huì)愛上他們的。
1. Neumorphism
地址：https://neumorphism.io/
這個(gè)網(wǎng)站為 section 或 div 生成對應(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é)到了一些東西。
作者：Jatin Sharma 譯者：前端小智
來源：dev 原文：https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6
