CSS Box Shadow Generator

通过实时预览、滑块、颜色选择器和预设，可视化设计分层CSS阴影。即时复制干净的纯CSS。

预设
生成的CSS 
 
 
 
    
 
 
 Zoom  100%  
  
 
 
 
 
 
 
 
       工具工作室 
 
 
想把这个工具添加到你的网站吗？
 
为 WordPress、Notion 或你自己的网站自定义配色和深色模式。
 
 
 
  立即开始        
 
 
 
 
 
 
 
常见问题
 
 
  可以在一个元素上使用多个阴影吗？        
 
可以。CSS支持逗号分隔的box-shadow值。此工具可让您堆叠最多5个图层，每个图层有独立控件。
 
 
  负的spread值有什么作用？        
 
负spread在模糊之前将阴影向内收缩。适用于微妙的悬浮效果。
 
 
  inset选项有什么用途？        
 
inset阴影渲染在元素边框内部，创建凹陷外观。非常适合表单输入和按下的卡片。
 
 
  生成的CSS有框架依赖吗？        
 
没有。结果是纯原生CSS。可在任何使用标准CSS的项目中使用。
 
 
 
 
 
 
 
 
 # 可视化设计CSS阴影，无需猜测数值
手动调整box-shadow很繁琐。这个可视化生成器让您可以堆叠多个阴影，实时查看并复制生产就绪的CSS。
 
 
        
 
 5 每个元素的阴影图层 
 
 
        
 
 实时 每次更改时预览更新 
 
 
        
 
 5 快速预设 
 
 
 # 堆叠多个阴影实现逼真深度
真实阴影很少是均匀模糊的。将紧贴元素的紧密阴影与更柔和、更宽的阴影堆叠在一起，创造自然深度。使用+添加图层。
 # 理解每个 CSS 控件
 
  
  控件  CSS值  效果  
   
 X偏移第一个长度水平位移。 
 Y偏移第二个长度垂直位移。 
 模糊第三个长度模糊半径。 
 扩散第四个长度扩大或缩小阴影。 
 颜色和不透明度rgba()带独立不透明度的阴影颜色。 
 内阴影inset在元素边框内渲染阴影。 
  
 
 
使用低调的背景网格
 预览区域显示点状网格，便于观察阴影的延伸范围。使用负 spread 可以让阴影更贴近元素。 
 
 
 
       
 
 
推荐工作流程
 
 
 
 
 
 
 
       
 
 从预设开始。 
 
 
       
 
 添加图层实现逼真深度。 
 
 
       
 
 使用负spread实现悬浮卡片效果。 
 
 
       
 
 复制生成的CSS并粘贴。 
 
 
 
 
 
 
 
 
 
 
       
参考文献
 
  
 
 
 
 
同类更多工具 网页开发
 
 
       
 
 像素宽高比计算器。在线比例换算 
 
 计算新的图像、视频和网页设计分辨率，同时保持精确的比例，避免图形失真。支持 16:9、4:3、21:9 和自定义格式。 
  
 使用工具       
 
  
 
       
 
 数据时间计算器：网页速度的影响 
 
 了解您的用户在 3G、4G 和 5G 连接下等待网站加载时损失了多少寿命。计算网站权重的真实影响。 
  
 使用工具       
 
  
 
       
 
 在线颜色转换器 RGB HEX 和 HSL 
 
 立即在 RGB、HEX 和 HSL 之间转换颜色。生成互补色和谐方案并分析 WCAG 对比度。100% 客户端运行，保护隐私。 
  
 使用工具       
 
  
 
       
 
 Excel 和 CSV 转 HTML 表格转换器代码生成器 
 
 立即将您的 Excel 或 CSV 数据转换为干净、语义化的 HTML 表格。面向开发者和内容创作者的免费工具。 
  
 使用工具       
 
  
 
       
 
 在线 Cron 表达式生成器：翻译与可视化 
 
 免费的 Linux Cron 表达式生成工具。将 * * * * * 翻译成人类语言，并实时显示接下来的 5 次执行时间。 
  
 使用工具       
 
  
 
       
 
 CSS优先级计算器 在线。选择器权重可视化 
 
 计算任何CSS选择器的优先级和确切权重。可视工具，用于理解哪个CSS规则赢得级联并避免使用!important。 
  
 使用工具       
 
  
 
       
 
 CSS 转为内联 HTML。电子邮件内联处理器 
 
 将样式表和 CSS 类自动转换为 HTML 中的内联样式。非常适合电子报、交易邮件和安全的网页布局。 
  
 使用工具       
 
  
 
       
 
 在线去除重复CSS工具。整合并清理您的样式表 
 
 免费工具，用于清理和删除重复的CSS代码。合并冗余选择器，遵循层叠规则，直接在浏览器中即时缩减文件大小。 
  
 使用工具       
 
  
 
       
 
 Security.txt生成器 RFC 9116 
 
 创建专业的security.txt文件，方便漏洞报告并遵守国际网络安全标准。 
  
 使用工具       
 
  
 
       
 
 在线安全哈希生成器 
 
 立即计算 MD5、SHA-1、SHA-256 和 SHA-512 哈希值。为开发者提供的免费、私密且极其快速的安全工具。100% 客户端处理。 
  
 使用工具       
 
  
 
       
 
 在线SSL/TLS证书检查器 查看PEM和CRT文件 
 
 在线分析SSL证书文件(.pem、.crt、.der)。检查到期日期、颁发者、主体和SHA-256指纹，无需您的数据离开浏览器。 
  
 使用工具       
 
  
 
       
 
 免费在线 JSON 格式化与校验工具 
 
 免费在线工具，用于格式化、校验和修复 JSON 代码。美化并排版 JSON。自动检测语法错误并提高代码可读性。 
  
 使用工具       
 
  
 
       
 
 在线键盘按键代码可视化工具。按键代码检查器 
 
 免费在线工具，可实时查看任何键盘按键的event.key、event.code、event.which和位置。生成即用的JavaScript代码片段。 
  
 使用工具       
 
  
 
       
 
 LLM 成本计算器。AI 模型定价估算工具 
 
 用于估算 LLM API 调用成本的免费在线工具。使用实际百万代币价格比较 GPT-4o、Claude、Gemini、Llama 等。 
  
 使用工具       
 
  
 
       
 
 移动演示图生成器。iPhone 和 Google Pixel 
 
 为 App Store 和 Google Play 创建专业演示。带有自定义背景、全景布局和批量高分辨率导出的 iPhone 和 Pixel 演示图。 
  
 使用工具       
 
  
 
       
 
 音乐性排版秤。模块化秤计算器 
 
 免费在线工具，使用基于音乐比例的模块化秤创建和谐的视觉层级。为您的网页设计生成现成的CSS变量。 
  
 使用工具       
 
  
 
       
 
 占位图生成器。快速网页效果图在线生成 
 
 为网页设计创建自定义占位图。调整分辨率、背景、文字，立即导出为 PNG、WebP 或 JPEG。 
  
 使用工具       
 
  
 
       
 
 私人 AI 提示库 
 
 私密地组织、标记和保存您的 ChatGPT、Midjourney 和 Claude 提示。您在 localStorage 中的专属提示库。 
  
 使用工具       
 
  
 
       
 
 视觉可读性计算器 WCAG 和 APCA 
 
 使用 APCA (WCAG 3.0) 检查设计的真实对比度。分析字体粗细和大小如何影响实际可读性。 
  
 使用工具       
 
  
 
       
 
 在线SVG清理工具 
 
 优化和清理从Figma、Adobe Illustrator或Inkscape导出的SVG。删除元数据、不必要的属性和空组，获得生产就绪的SVG。 
  
 使用工具       
 
  
 
       
 
 免费在线 SVG 转 CSS 和 Data URI 转换器 
 
 将您的 SVG 图标和矢量图转换为 CSS 代码（背景或遮罩）或压缩的 Data URI。通过消除外部 HTTP 请求来优化您的网站性能。 
  
 使用工具       
 
  
 
       
 
 URL 追踪清理器：移除 UTM、FBCLID 和 GCLID 
 
 自动从 URL 中移除追踪和广告参数。分享干净的链接并立即保护您的数字隐私。 
  
 使用工具       
 
  
 
       
 
 在线 URL 编码器和解码器 
 
 将任何链接中的特殊字符转换为安全格式（百分比编码），或立即在本地将其恢复为原始的可读状态。 
  
 使用工具       
 
  
 
       
 
 Google Analytics UTM 参数生成器平衡 
 
 为您的数字营销活动创建精确的追踪链接。针对 Google Analytics 和其他分析工具进行了优化。 
  
 使用工具       
 
  
 
       
 
 SERP模拟器和SEO像素计数器 
 
 实时预览Google风格的搜索结果摘要，以像素为单位测量标题和元描述的宽度，并准确查看文本将在何处被截断。 
  
 使用工具       
 
  
 
       
 
 JWT Decoder, Parser and Claims Inspector 
 
 粘贴 JSON Web Token，即时解码其头部和载荷，检查注册声明，发现过期令牌，并复制干净的 JSON 以调试认证流程。 
  
 使用工具       
 
  
 
       
 
 可视化CSS Grid与Flexbox布局生成器 
 
 通过移动可视化区块、调整容器大小、调整对齐方式并使用预设来设计响应式布局  -  然后即时复制干净的纯CSS。 
  
 使用工具       
 
  
 
       
 
 推广这个网站 
 
 为西班牙语 jjlmoya.es 和国际版 GameBob.dev 准备的内部宣传台。在 Bob 觉得信息流很丢脸之前，把自己页面的截图变成社交媒体图片。 
  
 使用工具