CSS 阴影生成
CSS 阴影生成工具是一款可在 GUI 中为元素创建阴影 CSS 代码的免费 box-shadow 生成器。只需用滑块调整偏移（水平、垂直位置）、模糊、扩展（spread）、颜色和不透明度，即可实时生成 box-shadow 与 filter: drop-shadow() 的 CSS。
输出类型
阴影图层设置
- 1
预设
CSS 代码
.shadow {
box-shadow: 0px 10px 20px -4px rgba(15, 23, 42, 0.25);
}
阴影的生成全部在您的浏览器中完成，输入的内容不会发送到外部服务器。
预览
示例元素设置
相关工具
取色器
从图片中提取颜色并获取颜色代码的免费取色器，可用放大镜按像素精确拾取，支持 HEX / RGB / HSL 切换与调色板导出。免费、无需注册。
- 设计/配色
- 效率
图片配色提取
在线图片取色工具，上传图片即可自动提取主色调与代表色，生成可用的调色板。支持 HEX/RGB/HSL 切换、显示各颜色占比、自由调整 4–12 种颜色，并可一键导出为 CSS 变量、SCSS、Tailwind 配置或 JSON。图片不上传服务器，全程在浏览器中完成，免费使用、无需注册。
- 提取
- 设计/配色
配色生成器
只需选择一种基础色，即可基于配色理论自动生成互补色、类似色、三角配色等配色方案的免费在线配色工具。可导出为 CSS 变量、Tailwind、SCSS、JSON 格式，并能查看对比度参考，全程在浏览器中完成。
- 生成器
- 设计/配色
颜色代码转换
在 HEX、RGB、HSL、HSV、OKLCH 颜色代码之间相互转换的免费工具，支持透明度（RGBA、8 位 HEX）与 CMYK 参考值，一键复制任意格式，全程在浏览器中完成。
- 转换
- 设计/配色
对比度检查器
实时计算前景色与背景色对比度的免费颜色对比度检查器，判定 WCAG 2.1/2.2 AA、AAA 是否达标，并支持达标色建议、色盲（色觉）模拟与 APCA，全程在浏览器中完成。
- 检查
- 设计/配色
- 无障碍
CSS 渐变生成
通过可视化界面调整颜色、方向和色标，即可自动生成 CSS 渐变代码的免费在线工具。支持线性、径向、圆锥（conic）渐变，可调整不透明度，并能导出为 CSS 变量、Tailwind、SCSS 格式，还支持分享 URL。复制即用，全程在浏览器中完成。
- 生成器
- 开发
- 设计/配色
CSS 阴影生成是什么?
CSS 阴影生成工具是一款可在 GUI 中为元素创建阴影 CSS 代码的免费 box-shadow 生成器。只需用滑块调整偏移（水平、垂直位置）、模糊、扩展（spread）、颜色和不透明度，即可实时生成 box-shadow 与 filter: drop-shadow() 的 CSS。
阴影可叠加多个图层，从自然柔和的阴影到富有立体感的丰富阴影都能自由呈现。每个图层都能切换为内阴影（inset），并可拖动调整叠放顺序。颜色除了 HEX 之外，还支持粘贴 rgb() / hsl()。
阴影图层与新拟态是通过页面顶部切换的两个独立模式，各自生成独立的输出。在阴影图层模式下，柔和阴影、Material 风格的高度阴影、悬浮、硬朗阴影、长阴影、发光等预设均可一键应用；切换到新拟态模式后，则可通过调整基础色、距离、强度等滑块实时生成凹凸感的新拟态（Neumorphism UI）阴影。你可以一边改变预览的背景色、元素颜色、形状（圆角、圆形、方形），一边确认实际效果进行调整。
创建好的阴影可一键复制为 CSS（box-shadow / filter）、CSS 变量、Tailwind 配置、SCSS 变量等多种格式，直接粘贴到项目中即可。点击「复制 URL」可获得能还原当前设置的分享 URL，便于团队共享和收藏。阴影的生成全部在你的浏览器中进行，输入的内容不会发送到外部服务器，全程在浏览器中完成。
使用方法
- 选择输出类型（box-shadow / drop-shadow）。box-shadow 支持 spread（扩展）和 inset（内阴影），drop-shadow 可生成贴合元素形状的阴影。
- 添加图层，用滑块调整水平、垂直位置、模糊、扩展、颜色和不透明度。多个图层可拖动调整叠放顺序，也可用 inset 切换为内阴影。
- 在「阴影图层」模式下一键应用预设（柔和、Material、悬浮、硬朗、长阴影、发光）；要制作凹凸阴影则切换到「新拟态」模式，用基础色、距离、强度等滑块实时生成。同时可改变预览的背景色、元素颜色、形状来确认成品效果。
- 在「CSS 代码」中切换 CSS、CSS 变量、Tailwind、SCSS 标签页，用「复制 CSS 代码」获取代码并粘贴到项目中。点击「复制 URL」可分享设置。
使用场景
- 想给按钮、卡片、模态框等添加柔和阴影的设计师和前端，直接复制 box-shadow 的 CSS 即可快速使用。
- 需要组合多图层和 inset，做出富有立体感的精致阴影或内阴影的前端工程师。
- 想根据基础色快速生成新拟态（Neumorphism UI）凹凸阴影的用户。
- 想把阴影直接写入代码、生成 Tailwind 的 boxShadow 配置或 CSS 变量、SCSS 变量的开发者。
- 想通过分享 URL 把确定好的阴影发给团队，或日后还原相同设置的用户。
注意事项
- 阴影的生成全部在浏览器中进行，输入的内容不会发送到外部。
- drop-shadow（`filter: drop-shadow()`）不支持 spread（扩展）和 inset（内阴影），这些仅在选择 box-shadow 时生效。
- 叠加多个 drop-shadow 时，后一个阴影会作用在前一个阴影的结果上（与逗号分隔的 box-shadow 显示效果不同）。
- 分享 URL 中包含输出类型、各图层（位置、模糊、扩展、颜色、不透明度、inset）和预览设置。打开该 URL 即可用相同设置还原阴影。