CSS阴影生成器

在线生成CSS box-shadow属性，支持单个和多个阴影效果，可视化调整参数，实时预览和代码生成

阴影参数设置
阴影 #1
5px
5px
10px
0px
#333333
50%
CSS代码

实时预览

示例
快速预设
常见阴影效果

使用说明

功能介绍：
  • 可视化调整：通过滑块实时调整阴影的各个参数
  • 多阴影支持：可以添加多个阴影效果，用逗号分隔
  • 实时预览：即时查看阴影效果
  • 快速预设：提供常见的阴影效果预设
  • 代码生成：自动生成可用的CSS代码

CSS box-shadow 属性说明

box-shadow 属性用于向框添加一个或多个阴影效果。

参数 描述 取值
h-offset 水平偏移量 正数向右，负数向左
v-offset 垂直偏移量 正数向下，负数向上
blur 模糊半径 值越大越模糊，不能为负值
spread 扩展半径 正数扩大阴影，负数缩小阴影
color 阴影颜色 可以使用颜色名、十六进制、RGB等
inset 内阴影 添加此关键字表示内阴影

常见例子

// 示例1: 基础阴影 水平偏移: 5px 垂直偏移: 5px 模糊半径: 10px 结果: box-shadow: 5px 5px 10px #333; // 示例2: 卡片悬浮效果 水平偏移: 0px 垂直偏移: 4px 模糊半径: 8px 扩展半径: 0px 颜色: rgba(0,0,0,0.1) 结果: box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); // 示例3: 多重阴影 阴影1: 0 2px 4px rgba(0,0,0,0.1) 阴影2: 0 8px 16px rgba(0,0,0,0.1) 结果: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); // 示例4: 内阴影 水平偏移: inset 0 0 10px #ff0000 结果: box-shadow: inset 0 0 10px #ff0000;