CSS 渐变与阴影生成器 使用方法
- 1
选择渐变或盒子阴影
用预览上方的标签页在两个编辑器之间切换。
- 2
从预设开始
点击预设方块即可载入，也可以保持默认值，再在此基础上调整。
- 3
可视化调整
拖动色标并设置角度，或添加阴影图层，再调节偏移、模糊和扩展。
- 4
复制代码
复制 CSS 声明或 Tailwind 类名，粘贴到你的项目中。
限制与 Pro
免费且无需注册：色标和阴影图层数量不限，提供 3 种渐变类型、3 种颜色混合空间和 24 个预设。
Pro 可去除广告；所有套餐都能使用完整的两个编辑器。 了解 Pro
关于 CSS 渐变与阴影生成器
渐变和阴影是最常在浏览器开发者工具里反复试错的两种 CSS 效果。这个生成器为它们分别提供可视化编辑器和大尺寸实时预览，并输出准确的 CSS 声明，以及对应的 Tailwind 任意值类名，例如 bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]，可以直接粘贴到样式表或 className 中。
渐变编辑器支持线性、径向和锥形渐变。点击色标条，就能在点击处添加颜色；拖动色标可以移动位置，也可以用方向键精确调整，每个色标还有单独的不透明度。线性和锥形渐变可以设置角度，径向和锥形渐变可以设置中心点，径向渐变可以选择圆形或椭圆，任何一种都能开启重复，做出条纹和圆环。你还可以选择颜色混合所用的色彩空间：OKLab 和 OKLCH 能避免传统 sRGB 在高饱和颜色之间混合时出现的灰暗中段，当前所有主流浏览器都支持。
盒子阴影编辑器可以叠加任意多个图层。每一层都有 X 和 Y 偏移、模糊、扩展、带不透明度的颜色、内阴影开关和显示开关，图层顺序可以调整，因为第一层绘制在最上面。预览盒子的尺寸、圆角和颜色都可调，还能在浅色或深色背景上查看效果。
每个编辑器都有十二个预设：日落、色轮、条纹，以及 Material 层级、多层柔和阴影、拟物风格和硬偏移，方便你快速起步。本工具只生成渐变和盒子阴影，不生成 text-shadow、filter: drop-shadow 和 SVG 渐变。
隐私
所有操作都在页面中完成：颜色和设置不会离开你的浏览器，也不会上传任何图片。当前的渐变和阴影会保存在本地存储中，下次回来时仍然保留。
功能
线性、径向和锥形
可拖动的色标，支持不透明度、角度、中心、形状和重复模式。
多层阴影
可叠加、排序、隐藏阴影图层并设为内阴影，营造真实的层次感。
CSS 和 Tailwind
复制现成的声明，或 Tailwind 任意值类名。