CSS 工具
大约 2 分钟
提示
导航数据完善中,欢迎 👏👏 通过 PR 或者下方评论的形式提供其他未收集的站点。 站点图标可以放到 websites 目录下
CSS 工具
Sass
Sass 是成熟、稳定、强大的 CSS 扩展语言。
Less
Less(Leaner Style Sheets 的缩写)是一门向后兼容的 CSS 扩展语言。
Stylus
富于表现力、动态的、健壮的 CSS。
CSS-Tricks
一个关于运用CSS技术进行网络开发和设计的小技巧的交流网站。
CSS三角形生成器
定义几个参数很方便的生成纯css代码的各种三角形。
Customize Border
自定义 CSS Border 边框。
FANCY-BORDER-RADIUS
生成花里胡哨的Border圆角样式。
贝塞尔曲线
拖拽方式生成贝塞尔曲线参数。
缓动函数速查表
缓动函数速查表。
Grabient
CSS 代码渐变颜色生成工具。
Fresh Background Gradients
CSS 个性渐变背景集合。
Fresh Background Gradients
创建各样的 CSS 加载动画。
Codemyui
非常酷的网站,有一堆很酷的 CSS、HTML 和 Javascript 片段。
Smooth Shadow
一款设置漂亮阴影的工具。
Box Shadow
提供各种阴影样式。
Color Hunt
非常受欢迎的配色网站,提供了大量的精选颜色方案。
Glass Morphism
在线CSS毛玻璃风格工具。
Keyframes
在线动画、阴影和颜色。
BGJar
一个免费的在线背景生成器,提供了各种类型和风格的背景图像。
SVG Chart Generator
一款设计精美的图表生成器,生成基于 SVG 的折线或条形格式的图表。
Ribbon Shapes
一个纯 CSS 丝带的在线画廊。
CSS Generators
CSS 生成器的一个小集合。
Accessible Color Palette Generator
一款调色板生成器。
- icon: '@websites/sass.jpg'
name: Sass
desc: Sass 是成熟、稳定、强大的 CSS 扩展语言。
link: https://sass.bootcss.com/documentation
- icon: '@websites/less.ico'
name: Less
desc: Less(Leaner Style Sheets 的缩写)是一门向后兼容的 CSS 扩展语言。
link: https://less.bootcss.com/
- icon: '@websites/stylus.png'
name: Stylus
desc: 富于表现力、动态的、健壮的 CSS。
link: https://stylus-lang.com/
- icon: '@websites/css-tricks.png'
name: CSS-Tricks
desc: 一个关于运用CSS技术进行网络开发和设计的小技巧的交流网站。
link: https://css-tricks.com/
- icon: '@websites/css-triangle-generator.gif'
name: CSS三角形生成器
desc: 定义几个参数很方便的生成纯css代码的各种三角形。
link: http://apps.eky.hk/css-triangle-generator/zh-hant
- icon: '@websites/dashed-border-generator.ico'
name: Customize Border
desc: 自定义 CSS Border 边框。
link: https://kovart.github.io/dashed-border-generator/
- icon: '@websites/fancy-border-radius.png'
name: FANCY-BORDER-RADIUS
desc: 生成花里胡哨的Border圆角样式。
link: https://9elements.github.io/fancy-border-radius/
- icon: '@websites/cubic-bezier.png'
name: 贝塞尔曲线
desc: 拖拽方式生成贝塞尔曲线参数。
link: https://cubic-bezier.com/
- icon: '@websites/easings.png'
name: 缓动函数速查表
desc: 缓动函数速查表。
link: https://easings.net/zh-cn
- icon: '@websites/grabient.ico'
name: Grabient
desc: CSS 代码渐变颜色生成工具。
link: https://www.grabient.com/
- icon: '@websites/webgradients.png'
name: Fresh Background Gradients
desc: CSS 个性渐变背景集合。
link: https://webgradients.com/
- icon: '@websites/whirl.ico'
name: Fresh Background Gradients
desc: 创建各样的 CSS 加载动画。
link: https://whirl.netlify.app/
- icon: '@websites/codemyui.webp'
name: Codemyui
desc: 非常酷的网站,有一堆很酷的 CSS、HTML 和 Javascript 片段。
link: https://codemyui.com/
- icon: '@websites/shadows.brumm.af.svg'
name: Smooth Shadow
desc: 一款设置漂亮阴影的工具。
link: https://shadows.brumm.af/
- icon: '@websites/box-shadow.art.png'
name: Box Shadow
desc: 提供各种阴影样式。
link: https://box-shadow.art/
- icon: '@websites/colorhunt.svg'
name: Color Hunt
desc: 非常受欢迎的配色网站,提供了大量的精选颜色方案。
link: https://colorhunt.co/
- icon: '@websites/glassgenerator.png'
name: Glass Morphism
desc: 在线CSS毛玻璃风格工具。
link: https://glassgenerator.netlify.app/
- icon: '@websites/keyframes.png'
name: Keyframes
desc: 在线动画、阴影和颜色。
link: https://keyframes.app/
- icon: '@websites/bgjar.png'
name: BGJar
desc: 一个免费的在线背景生成器,提供了各种类型和风格的背景图像。
link: https://bgjar.com/
- icon: '@websites/magicpattern.png'
name: SVG Chart Generator
desc: 一款设计精美的图表生成器,生成基于 SVG 的折线或条形格式的图表。
link: https://www.magicpattern.design/tools/svg-chart-generator
- icon: '@websites/ribbon-shapes.png'
name: Ribbon Shapes
desc: 一个纯 CSS 丝带的在线画廊。
link: https://css-generators.com/ribbon-shapes/
- icon: '@websites/ribbon-shapes.png'
name: CSS Generators
desc: CSS 生成器的一个小集合。
link: https://css-generators.com/
- icon: '@websites/venngage.png'
name: Accessible Color Palette Generator
desc: 一款调色板生成器。
link: https://venngage.com/tools/accessible-color-palette-generator
Loading/动画
Animista
一个可自定义的 CSS 动画库工具
CSS Load
纯 CSS 生成各种 Loading 加载动画。
CSS Loaders
包含 30 多个类别下的 600 多个 CSS 加载动画。
- icon: '@websites/animista.jpg'
name: Animista
desc: 一个可自定义的 CSS 动画库工具
link: https://animista.net/
- icon: '@websites/cssload.ico'
name: CSS Load
desc: 纯 CSS 生成各种 Loading 加载动画。
link: https://cssload.net/
- icon: '@websites/css-loaders.png'
name: CSS Loaders
desc: 包含 30 多个类别下的 600 多个 CSS 加载动画。
link: https://css-loaders.com/