CSS 阴影代码生成器

在线可视化生成 box-shadow 与 text-shadow CSS 代码,实时预览调节,一键复制,数据仅在浏览器本地运算

阴影层数
第 1 层
水平偏移 X10px
垂直偏移 Y10px
模糊 blur20px
扩散 spread0px
颜色30%
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
快捷预设
阴影语法说明
box-shadow 语法:box-shadow: X偏移 Y偏移 模糊 扩散 颜色 [inset];
text-shadow 语法:text-shadow: X偏移 Y偏移 模糊 颜色;(无扩散和 inset)

多层阴影用逗号分隔,先写的层在上层。正值偏移向右/向下,负值向左/向上。 内阴影(inset)常用于按钮按下效果与输入框凹陷感。