Shadow — CSS阴影效果生成器

一款强大的命令行工具，用于生成、预览和管理CSS阴影效果。支持盒阴影、文本阴影、投影、内阴影、多层效果、预设、随机生成、动画关键帧以及导出为CSS/JSON格式。

前置条件

• - Python 3.8+
• Bash shell

数据存储

所有保存的阴影预设和配置均持久化存储在~/.shadow/data.jsonl中。每行是一个JSON对象，代表一个包含其参数的阴影定义。

命令

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

box

生成CSS盒阴影值。 bash 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文本阴影值。 bash bash scripts/script.sh text [--x 1] [--y 1] [--blur 2] [--color #333] [--name heading-shadow] [--save]

drop

生成CSS投影滤镜值。 bash bash scripts/script.sh drop [--x 0] [--y 4] [--blur 8] [--color rgba(0,0,0,0.3)] [--name drop1] [--save]

inset

生成内阴影盒阴影值。 bash 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 bash scripts/script.sh layer <阴影名称1> <阴影名称2> [阴影名称3...] [--name layered] [--save]

preset

列出或应用内置阴影预设（material、neumorphism、flat、elevated等）。 bash bash scripts/script.sh preset [list|apply] [--name material-1] [--save]

random

生成带有可选约束的随机阴影效果。 bash bash scripts/script.sh random [--type box|text|drop] [--layers 1-3] [--save] [--name random1]

animate

为阴影过渡生成CSS动画关键帧。 bash bash scripts/script.sh animate <起始阴影名称> <目标阴影名称> [--duration 0.3s] [--name hover-effect]

export

将保存的阴影导出为CSS、JSON或SCSS格式。 bash bash scripts/script.sh export [--format css|json|scss] [--name specific-shadow] [--all]

preview

以ASCII艺术形式预览阴影，或生成HTML预览文件。 bash bash scripts/script.sh preview <阴影名称> [--html] [--output preview.html]

help

显示使用信息和可用命令。 bash bash scripts/script.sh help

version

显示阴影工具的当前版本。 bash bash scripts/script.sh version

工作流程示例

bash

生成盒阴影

bash scripts/script.sh box --x 0 --y 4 --blur 12 --color rgba(0,0,0,0.15) --name card --save

生成内阴影

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自定义属性格式，适用于设计系统。
• 动画关键帧适用于任何已保存的阴影对。

---

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