🌈掌握CSS：超级有用的CSS资源汇总

这是一个包含 70+ 个精心挑选的基于 Web 的工具的集合，这些工具实际上非常有用。每一个工具都会生成纯 CSS，无需 JS 或任何外部库。感谢每一个应用程序背后的作者。

# Property Generators

# 1. Neumorphismopen in new window

使用内阴影生成 Soft-UI CSS 样式。

# 2. Shaddows Brummopen in new window

制作并预览优美流畅的阴影。

# 3. Fancy Border Radiusopen in new window

使用边框半径生成炫酷的形状对象。

# 4. Glow Generatoropen in new window

生成纯 CSS 跨浏览器的发光效果。

# 5. Clothoid Cornersopen in new window

通过 CSS 剪辑路径生成布料圆角。

# 6. Glassmorphismopen in new window

构建半透明、模糊的玻璃状背景。

# 7. Clipyopen in new window

使用剪辑路径生成复杂形状的对象。

# 8. CSS Filtersopen in new window

生成和预览纯 CSS Instagram 风格的照片滤镜。

# 9. Base64 Imageopen in new window

直接在 CSS 中以 Base64 编码图像。

# 10. Quantity Queriesopen in new window

生成基于数量的 CSS 查询。

# Animations

# 11. Animistaopen in new window

CSS动画游乐场和生成器。

# 12. Cubic-Bezieropen in new window

预览并生成高级三次贝塞尔动画。

# 13. Keyframesopen in new window

高级关键帧动画制作器。

open in new window

# 14. Wait Animateopen in new window

使用动画延迟来模拟延迟。

open in new window

# 15. Transition.Styleopen in new window

复制粘贴过渡动画。

# Backgrounds

# 16. Hero Patternsopen in new window

查找和自定义简单的纯 CSS 图案背景。

# 17. Haikeiopen in new window

生成独特的有机SVG横幅和背景（类似于形状分隔线）。

# 18. Pattern Generatoropen in new window

高级模式生成器。

# 19. CSS Patternopen in new window

预制纯 CSS 图案背景的集合。

# 20. Patternizeropen in new window

构建条纹背景。

open in new window

# 21. Patternifyopen in new window

构建自己的老式模式。

# 22. Animated BGopen in new window

生成模糊的动画纯 CSS 背景。

# 23. Trianglifyopen in new window

几何背景设计器。

# 24. Animated Backgroundsopen in new window

纯 CSS 背景动画的集合。

open in new window

# 25. Magic Pattern CSS Backgroundsopen in new window

可重用的基于 SVG 或纯 CSS 背景模式的集合，带有可视化资源管理器。

# Colors

# 26. CSS Gradientopen in new window

高级 CSS 渐变生成器。

open in new window

# 27. Parametric Mixeropen in new window

基于均衡器的 CSS 颜色编辑器。

# 28. Palettteopen in new window

开发和调整配色方案。

# 29. Palettonopen in new window

使用相反或吸引颜色的调色板生成器。

open in new window

# 30. Grabientopen in new window

类似于 CoolHueopen in new window、WebGradientsopen in new window、 GradientHuntopen in new window、 GradientButtonsopen in new window 和 UI gradientsopen in new window UI 渐变。

open in new window

# 31. Color Huntopen in new window

另一位调色板设计师。

open in new window

# 32. Easing Gradientsopen in new window

三次贝塞尔风格纯 CSS 渐变。

open in new window

# 33. Flat UI Colorsopen in new window

平面风格的精心挑选的调色板。

open in new window

# 34. Color Toolsopen in new window

混合、提取、转换和生成颜色

open in new window

# 35. ColorPalettes.Earthopen in new window

来自大自然的天然色托盘。

open in new window

# Typography

# 36. Font Joyopen in new window

发现和预览各种字体配对。

open in new window

# 37. Type set With Meopen in new window

版式和易读性沙箱。

open in new window

# 38. Type Scaleopen in new window

生成标题/正文字体大小。

open in new window

# 39. Glyphteropen in new window

从 SVG 图形创建图标字体。

open in new window

# 40. Font-Libraryopen in new window

标记的谷歌字体库。

open in new window

# 41. Glitteropen in new window

导出 90 年代风格的闪光文本。

open in new window

# Loaders

# 42. Spin Kitopen in new window

选择干净的 CSS 加载动画。

# 43. Whirlopen in new window

100+ CSS加载动画，用于复制粘贴。

# 44. Loader Generatoropen in new window

预构建和自定义的纯 CSS 加载器。

# 45. lukehaas - CSS-Loadersopen in new window

简单的纯 CSS 加载动画。

# 46. CSSLoadersopen in new window

复杂的纯 CSS 加载器。

# 47. loading.io/cssopen in new window

常见加载器的 CSS 实现。

# Layouts

# 48. CSS Grid Gardenopen in new window

用于学习CSS网格的交互式游戏。

open in new window

# 49. FlexboxFroggyopen in new window

用于学习弹性盒的互动游戏。

open in new window

# 50. Flexploreropen in new window

视觉 Flexbox 演示。

open in new window

# 51. Flexulatoropen in new window

交互式 CSS Flexbox 空间分布计算器。

open in new window

# 52. Grid Generatoropen in new window

使用 CSS 网格模板属性制作网格。

open in new window

# 53. Layout Generatoropen in new window

现代 CSS 布局制作工具。

open in new window

# 54. Box Model Diagramopen in new window

一个可视化框模型演示。

open in new window

# Informative

# 55. CSS Timelineopen in new window

CSS 的历史。

open in new window

# 56. Screen Size Mapopen in new window

查看响应式设计的常用屏幕尺寸。

open in new window

# 57. CSS Ruleropen in new window

预览各种 CSS 单位之间的相对关系。

open in new window

# 58. bada55open in new window

非常有趣的CSS十六进制颜色代码列表。 另请参阅colors.lolopen in new window，了解一些过度描述性的调色板。

open in new window

# 59. Who can use?open in new window

检查给定颜色组合的辅助功能等级，类似于Colorableopen in new window。

open in new window

# 60. Can I use?open in new window

各种CSS、JS、HTML和Web功能的浏览器兼容性检查。

open in new window

# 61. Can I email?open in new window

类似于 Can I use?open in new window，但检查给定的 CSS 属性（或 HTML Elem）是否与电子邮件客户端兼容。

open in new window

# 62. CSS Processing Toolsopen in new window

与任何其他 CSS 语言相互转换。

open in new window

# 63. Unused CSSopen in new window

在您的网站中搜索未使用的 CSS，并显示统计信息。

open in new window

# 64. Component.Galleryopen in new window

全局组件搜索。

open in new window

# 65. Design System Galleryopen in new window

一系列开放式设计系统，寻找灵感。

# 66. Checklist.designopen in new window

以清单形式组织的设计最佳实践集合。

# 67. Glyphsopen in new window

CSS 字形字符代码列表(另请参阅 GlyphSearchopen in new window)。

# 68. CSS-Tricks.comopen in new window

最好的CSS博客。

# 69. Curated Design Toolsopen in new window

令人敬畏的设计工具的精选列表。

# 70. Awesome-CSS-Frameworksopen in new window

开源 CSS 框架列表。

# 71. CSS Referenceopen in new window

CSS 属性的可视化指南 (类似于 htmlreference.ioopen in new window)。

# 72. MDN CSS Docsopen in new window

所有可用 CSS 属性的出色文档。

# 结论

这些 CSS 工具和生成器可以帮助您更轻松地创建和优化 CSS 代码，从而实现各种令人惊叹的效果和样式。无论您是一名前端开发人员、设计师还是只是对 CSS 感兴趣，这些工具都可以提高您的工作效率并帮助您实现您的创意。

无论您需要创建渐变、阴影、动画、按钮、文本效果还是其他任何 CSS 样式，这些工具都能够满足您的需求。希望这些工具对您的项目和学习过程有所帮助！

如果您知道其他有用的 CSS 工具或生成器，也欢迎在评论中分享。愿您的 CSS 之旅愉快！