首页 / 工具 / 阴影生成器

阴影生成器

逐层调偏移、模糊、扩散、颜色与透明度,叠加多层 box-shadow,或换成 text-shadow;改哪里都能在预览里立刻看到,CSS 直接复制。

0
8
24
0
24%

· 等待输入

阴影值
输出

实时预览

—

文字阴影预览 Shadow

阴影层

—

CSS 里先写的层画在上层:列表从上到下就是叠加顺序。点一行可以把它设为当前层。最多 6 层。

预设组合

—

预设会替换全部层,并按预设自己的类型切换 box-shadow 或 text-shadow。

当前层数值

—
阴影类型
—
层数
—
水平 / 垂直偏移
—
模糊 / 扩散
—
颜色与透明度
—
内阴影
—

说明

  • 数据不出浏览器 · 零网络请求 · 可断网可用。
  • 阴影值写法:逗号分隔的多层,每层是「x y blur spread 颜色」,spread 与颜色都可省略;颜色支持 HEX(3/4/6/8 位,可省 #)、rgb() / rgba()、hsl() / hsla(),也可以写 inset。
  • 透明度滑块控制颜色的 alpha:颜色本身带 alpha 时以滑块为准,滑块为 0% 时该层等于完全透明(仍是合法 CSS)。
  • text-shadow 只接受 x、y、blur 与颜色:切到文字阴影时扩散与内阴影两项不写进 CSS,状态栏会说明。
  • 多层是叠加出来的:列表从上到下就是 CSS 的书写顺序,先写的层画在上层;最多 6 层,至少保留 1 层。
  • 预览里的盒子与文字用的是元素内联样式,没有额外样式表;换类型时只清掉不该生效的那一条(box-shadow 或 text-shadow)。
  • 阴影很容易糊掉内容:模糊越大、透明度越高,越要确认文字与边界仍然可读。