100% 浏览器内运行
CSS工具
使用这些免费工具可视化地生成简洁、可复制粘贴的 CSS——盒子阴影、渐变、border-radius、flexbox、grid、动画、clip-path 和滤镜——在您调整每个数值时提供实时预览。
⬛
CSS 盒子阴影生成器
可视化设计 box-shadow，实时预览并复制 CSS。
⬭CSS 圆角生成器
分别调整每个角的圆角半径，实时预览并复制 CSS。
▤CSS 渐变生成器
创建线性或径向渐变，实时预览并复制 CSS。
TCSS 文字阴影生成器
设计 text-shadow，实时预览并复制 CSS。
▲CSS 三角形生成器
生成任意方向的纯 CSS 三角形并复制 CSS。
⬓CSS Flexbox 布局演练场
在实时预览中调试 flexbox 属性，并复制生成的 CSS。
▦CSS Grid 生成器
生成可调列数、行数和间距的 CSS 网格布局，并提供实时预览。
⤢CSS Transform 生成器
将 translate、rotate、scale 和 skew 组合为单条 CSS transform，并提供实时预览。
⌒CSS 缓动曲线生成器
选择或自定义 cubic-bezier 缓动曲线，并在动画预览圆点上重放效果。
▢毛玻璃效果生成器
生成带有模糊、透明度、饱和度和着色的毛玻璃卡片 CSS。
◇CSS clip-path 生成器
将元素裁剪成常见形状并复制 clip-path CSS。
☼CSS 滤镜生成器
用滑块和实时预览组合 CSS 滤镜，然后复制。
⤿CSS 动画生成器
构建关键帧动画，实时预览并复制 CSS。
◜CSS 加载动画生成器
生成纯 CSS 加载动画并复制 CSS。
▩CSS 背景图案
用两种颜色生成 CSS 背景图案并复制。
◳新拟态生成器
创建带实时预览的柔性 UI 新拟态阴影并复制。
@CSS 媒体查询构建器
用预设构建响应式 @media 查询并复制。
▌CSS 滚动条样式生成器
自定义滚动条样式并复制 ::-webkit-scrollbar CSS。
▭CSS 宽高比容器
生成带 padding 回退方案的响应式宽高比容器。
‖CSS 多列布局
生成带分隔线的 CSS 多列文本布局。
T○CSS 文字描边
为文字添加轮廓或描边并复制 CSS。