分类

← View All Tools

CSS 盒阴影生成器

生成 CSS 盒阴影属性

-100 -100 100
-100 4 100
0 10 100
-50 -50 50
0 0.2 1

关键信息

分类
Design
输入类型
range, color, checkbox
输出类型
text
样本覆盖
4
支持 API
Yes

概览

CSS 盒阴影生成器是一款高效的在线工具，旨在帮助开发者和设计师快速生成精确的 box-shadow CSS 代码，通过可视化调节参数即可实时预览阴影效果。

适用场景

  • •为网页元素添加具有层次感的阴影效果时
  • •需要快速获取符合设计规范的 CSS 代码片段时
  • •在调试 UI 界面阴影深度与模糊度时

工作原理

  • •通过滑动条调整水平、垂直偏移量、模糊半径及扩展半径。
  • •选择阴影颜色并设置不透明度，或勾选内阴影选项。
  • •实时查看生成的 CSS 代码并一键复制到你的项目中。

使用场景

为卡片式 UI 组件添加柔和的悬浮阴影
创建按钮的点击下沉效果（通过内阴影实现）
快速对比不同模糊半径下的视觉表现

用户案例

1. 卡片悬浮效果

前端开发者
背景原因
正在开发一个产品展示页面，需要为卡片添加轻微的悬浮感。
解决问题
手动编写阴影参数难以直观把控视觉效果。
如何使用
调整水平偏移为 0，垂直偏移为 8px，模糊半径设为 20px，不透明度设为 0.15。
示例配置
horizontal: 0, vertical: 8, blur: 20, spread: 0, color: #000000, opacity: 0.15
效果
生成了 box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);，卡片呈现出自然的立体感。

2. 按钮内阴影设计

UI 设计师
背景原因
需要为按钮设计一个按下时的内凹效果。
解决问题
内阴影的参数设置较为复杂，容易导致阴影过深或过浅。
如何使用
勾选“内阴影”，设置水平和垂直偏移为 2px，模糊半径为 4px，颜色设为深灰色。
示例配置
horizontal: 2, vertical: 2, blur: 4, spread: 0, color: #333333, opacity: 0.3, inset: true
效果
生成了 box-shadow: inset 2px 2px 4px 0 rgba(51, 51, 51, 0.3);，实现了预期的按钮按压凹陷效果。

用 Samples 测试

design
CSS选择器示例
用于提取和分析测试的CSS选择器示例集合
title token css
sample
Tailwind CSS 示例
Tailwind CSS示例 - 实用优先的CSS框架，具有响应式设计、组件和自定义配置
title token css
sample
Milligram CSS 框架示例
Milligram CSS框架示例，包括排版、表单、网格和组件
title token css
sample
Bulma CSS 框架示例
Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式
title token css
sample

相关专题

DesignGenerate工具专题
探索 19 个围绕 design 的 generate 工作流工具，快速找到相近能力。
DesignConvert工具专题
探索 98 个围绕 design 的 convert 工作流工具，快速找到相近能力。
JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
PdfGenerate工具专题
探索 10 个围绕 pdf 的 generate 工作流工具，快速找到相近能力。

常见问题

生成的代码兼容所有浏览器吗？

生成的 box-shadow 属性是标准的 CSS3 规范，在所有现代主流浏览器中均有良好支持。

可以生成内阴影吗？

可以，勾选“内阴影”选项即可在代码中添加 inset 关键字。

如何调整阴影的透明度？

使用“不透明度”滑块即可直接控制阴影颜色的 alpha 通道值。

这个工具支持生成多重阴影吗？

当前版本专注于生成单层 CSS 盒阴影属性。

生成的代码可以直接使用吗？

是的，生成的代码格式为 box-shadow: ...;，可直接粘贴到 CSS 文件中。

API 文档

请求端点

POST /zh/api/tools/box-shadow-generator

请求参数

参数名 类型 必填 描述
horizontal range 是 -
vertical range 是 -
blur range 是 -
spread range 是 -
color color 是 -
opacity range 是 -
inset checkbox 否 -

响应格式

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
文本: 文本

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-box-shadow-generator": {
      "name": "box-shadow-generator",
      "description": "生成 CSS 盒阴影属性",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=box-shadow-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]