Shadow — CSS 阴影效果生成器

一款功能强大的命令行工具，用于生成、预览和管理 CSS 阴影效果。支持 box-shadow、text-shadow、drop-shadow、内陷阴影（inset）、多层叠加效果、预设模板、随机生成、动画关键帧（keyframes）以及导出为 CSS/JSON 格式。

前置条件

• Python 3.8+
• Bash shell

数据存储

所有保存的阴影预设与配置均持久化存储于 ~/.shadow/data.jsonl。每行均为一个 JSON 对象，表示一个带参数的阴影定义。

命令

所有命令均通过脚本 scripts/script.sh 执行。

box

生成一个 CSS box-shadow 值。

bash scripts/script.sh box [--x 0] [--y 4] [--blur 8] [--spread 0] [--color "rgba(0,0,0,0.2)"] [--name my-shadow] [--save]

text

生成一个 CSS text-shadow 值。

bash scripts/script.sh text [--x 1] [--y 1] [--blur 2] [--color "#333"] [--name heading-shadow] [--save]

drop

生成一个 CSS drop-shadow 滤镜值。

bash scripts/script.sh drop [--x 0] [--y 4] [--blur 8] [--color "rgba(0,0,0,0.3)"] [--name drop1] [--save]

inset

生成一个内陷（inset）的 box-shadow 值。

bash scripts/script.sh inset [--x 0] [--y 2] [--blur 4] [--spread 0] [--color "rgba(0,0,0,0.1)"] [--name inner] [--save]

layer

将多个阴影组合为分层效果。

bash scripts/script.sh layer   [shadow_name3...] [--name layered] [--save]

preset

列出或应用内置阴影预设（如 material、neumorphism、flat、elevated 等）。

bash scripts/script.sh preset [list|apply] [--name material-1] [--save]

random

在可选约束条件下生成随机阴影效果。

bash scripts/script.sh random [--type box|text|drop] [--layers 1-3] [--save] [--name random1]

animate

为阴影过渡生成 CSS 动画关键帧（keyframes）。

bash scripts/script.sh animate   [--duration 0.3s] [--name hover-effect]

export

将已保存的阴影导出为 CSS、JSON 或 SCSS 格式。

bash scripts/script.sh export [--format css|json|scss] [--name specific-shadow] [--all]

preview

以 ASCII 艺术形式预览阴影，或生成 HTML 预览文件。

bash scripts/script.sh preview  [--html] [--output preview.html]

help

显示使用说明及所有可用命令。

bash scripts/script.sh help

version

显示当前 Shadow 工具的版本号。

bash scripts/script.sh version

工作流示例

# 生成一个 box shadow
bash scripts/script.sh box --x 0 --y 4 --blur 12 --color "rgba(0,0,0,0.15)" --name card --save

# 生成一个 inset shadow
bash scripts/script.sh inset --x 0 --y 2 --blur 4 --color "rgba(0,0,0,0.08)" --name inner --save

# 将二者叠加
bash scripts/script.sh layer card inner --name card-combo --save

# 预览
bash scripts/script.sh preview card-combo --html --output card-preview.html

# 导出全部为 CSS
bash scripts/script.sh export --format css --all

内置预设

• material-1 至 material-5：Google Material Design 的层级阴影
• neumorphism：柔和 UI 新拟态效果
• flat：极简平面阴影
• elevated：强立体提升效果
• glow：彩色发光效果

注意事项

• 所有阴影均本地保存，便于复用与组合。
• 导出功能支持 CSS 自定义属性（custom properties）格式，适配设计系统。
• 动画关键帧可作用于任意一对已保存的阴影。

由 BytesAgain 提供支持 | bytesagain.com | hello@bytesagain.com