合集工具箱
前端导航
前端导航 | 专为前端开发、设计、产品、自媒体人员打造,最全面的网址导航! (poetries.top)
常用布局/组件的写法
A collection of popular layouts and patterns made with CSS - CSS Layout
css画各种图形
57 CSS shapes examples - CSS Scan (getcssscan.com)
快速布局
用于Flex布局:Interactive CSS Flexbox Generator · Loading.io
用于Grid布局:
cssgr.id | An interactive CSS Grid code tool and generator
Interactive CSS Grid Generator | Layoutit Grid
CSS Grid Layout generator (vue-grid-generator.netlify.app)
用于生成渐变颜色
Fresh Background Gradients | WebGradients.com 💎 这里有很多预设渐变色
用于生成阴影
93 Beautiful CSS box-shadow examples - CSS Scan (getcssscan.com) 这里有一堆预定义的阴影效果,可供选择
在线创建可视化CSS阴影效果神器 (lingdaima.com)
CSS Shadow Palette Generator (joshwcomeau.com)
Neumorphism/Soft UI CSS shadow generator
CSS3 Box Shadow(阴影)效果在线调试工具 - 站长辅助工具 - 脚本之家在线工具 (jb51.net)
CSS3 框阴影(box-shadow)效果在线生成器 | 踏得网 (techbrood.com)
按钮效果
88 Beautiful CSS buttons examples - CSS Scan (getcssscan.com)
Buttons Generator - Marko Denic - Web Developer
毛玻璃效果
对图片进行几何裁切
Clippy — CSS clip-path maker (bennettfeely.com)
Easings - Generate Cubic Bezier Easing Curves 可用于测试缓动效果
Animista - CSS Animations on Demand 可用于测试缓动效果
贝塞尔曲线生成
cubic-bezier(.17,.67,1,.5) ✿ cubic-bezier.com
how stuff works: cubic Bézier curve with SVG (codepen.io)
生成波浪的svg代码
Get Waves – Create SVG waves for your next design
Svg Wave - A free & beautiful gradient SVG wave Generator.