CSS 生成器

阴影、clip-path、贝塞尔缓动和毛玻璃效果，实时预览

方块颜色

背景

圆角16px

CSS

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);

Tailwind（任意值）

shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]

如何使用CSS 生成器

可视化生成 CSS 并实时预览：盒阴影、裁剪路径、贝塞尔缓动曲线、毛玻璃、不规则圆角和文字阴影。每种都同时给出普通 CSS 和 Tailwind 任意值写法，直接复制即可。

选择生成器：「盒阴影」「裁剪路径」「贝塞尔曲线」「毛玻璃」「不规则圆角」或「文字阴影」。

从预设开始，或拖动滑块、调整颜色。

部分生成器可以直接在预览上拖动：裁剪路径的控制点、贝塞尔曲线的两个手柄、不规则圆角的手柄。

从下方复制 CSS 或 Tailwind 类名。

常见问题

能。在「盒阴影」里点「添加图层」，每层都可以单独设置偏移、模糊、扩散、颜色、不透明度和内阴影。

双击形状边缘添加点，选中点后按 Delete 删除。「圆形」「椭圆」「内缩矩形」则改用滑块调整。

backdrop-filter 只会模糊元素后面的内容，背景需要有颜色或图案才看得出来。输出里已包含给 Safari 用的 -webkit- 前缀。

Y 值大于 1 或小于 0 会让动画冲过头，产生回弹或预备动作的效果。点「播放」可以和线性动画对比。

不需要。用的是 Tailwind 自带的任意值语法，比如 rounded-[…] 或 [clip-path:…]。