CSS Box Shadow 生成器
可视化构建多层 CSS 盒阴影，支持实时预览——一键复制 CSS 代码
Preview
Shadow Layers
(1/8)CSS Output
box-shadow: 0px 8px 24px -4px rgba(99, 102, 241, 0.5);
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity for each layer, then copy the ready CSS.
FAQ
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1).
How do I add multiple shadows?
Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.05).
What is an inset shadow?
Adding the 'inset' keyword makes the shadow appear inside the element rather than outside — useful for pressed button states.
继续探索
您可能喜欢的其他 开发者工具…
JSON格式化工具
使用语法高亮和错误检测格式化、验证和压缩JSON
Base64编码/解码
将文本或文件编码为Base64，并将Base64字符串解码为可读文本
URL编码/解码
编码和解码URL组件和查询字符串参数
UUID生成器
生成随机UUID（v1、v4）或批量生成多个UUID
哈希生成器
从文本或文件生成MD5、SHA-1、SHA-256、SHA-512哈希
正则表达式测试器
实时匹配高亮测试正则表达式并提取分组
JWT解码器
解码和检查JSON Web Token — 查看header、payload并验证签名
HTML格式化工具
使用正确缩进和语法高亮格式化和美化HTML代码