CSS工具

使用这些免费工具可视化地生成简洁、可复制粘贴的 CSS——盒子阴影、渐变、border-radius、flexbox、grid、动画、clip-path 和滤镜——在您调整每个数值时提供实时预览。

阴影、滤镜与细节修饰

⬛

CSS 盒子阴影生成器

可视化设计 box-shadow，实时预览并复制 CSS。

CSS 文字阴影生成器

设计 text-shadow，实时预览并复制 CSS。

◳

新拟态生成器

创建带实时预览的柔性 UI 新拟态阴影并复制。

▢

毛玻璃效果生成器

生成带有模糊、透明度、饱和度和着色的毛玻璃卡片 CSS。

☼

CSS 滤镜生成器

用滑块和实时预览组合 CSS 滤镜，然后复制。

T○

CSS 文字描边

为文字添加轮廓或描边并复制 CSS。

▌

CSS 滚动条样式生成器

自定义滚动条样式并复制 ::-webkit-scrollbar CSS。

形状、渐变与背景

⬭

CSS 圆角生成器

分别调整每个角的圆角半径，实时预览并复制 CSS。

◇

CSS clip-path 生成器

将元素裁剪成常见形状并复制 clip-path CSS。

▲

CSS 三角形生成器

生成任意方向的纯 CSS 三角形并复制 CSS。

▤

CSS 渐变生成器

创建线性或径向渐变，实时预览并复制 CSS。

▩

CSS 背景图案

用两种颜色生成 CSS 背景图案并复制。

布局与响应式设计

⬓

CSS Flexbox 布局演练场

在实时预览中调试 flexbox 属性，并复制生成的 CSS。

▦

CSS Grid 生成器

生成可调列数、行数和间距的 CSS 网格布局，并提供实时预览。

CSS 媒体查询构建器

用预设构建响应式 @media 查询并复制。

▭

CSS 宽高比容器

生成带 padding 回退方案的响应式宽高比容器。

‖

CSS 多列布局

生成带分隔线的 CSS 多列文本布局。

动效、变换与动画

⤢

CSS Transform 生成器

将 translate、rotate、scale 和 skew 组合为单条 CSS transform，并提供实时预览。

⤿

CSS 动画生成器

构建关键帧动画，实时预览并复制 CSS。

⌒

CSS 缓动曲线生成器

选择或自定义 cubic-bezier 缓动曲线，并在动画预览圆点上重放效果。

◜

CSS 加载动画生成器

生成纯 CSS 加载动画并复制 CSS。

没有匹配的工具。