CSS 阴影生成器 (box-shadow)
调节偏移、模糊、扩散、颜色和不透明度生成 CSS box-shadow 代码，并实时预览效果。支持 inset 内阴影。所有处理均在浏览器中完成。
输入
结果
- CSS
- box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
常见问题
각 값은 무엇을 의미하나요?
가로/세로 오프셋은 그림자의 위치, 블러는 흐림 정도, 확산(spread)은 그림자의 크기 확대/축소입니다. 확산에 음수를 주면 그림자가 요소보다 작아져 자연스러운 카드 그림자를 만들 수 있습니다.
여러 겹 그림자는 어떻게 만드나요?
box-shadow는 쉼표로 여러 그림자를 나열할 수 있습니다. 이 도구로 각 겹을 만들어 '0 1px 2px …, 0 8px 24px …'처럼 이어 붙이면 더 입체적인 그림자가 됩니다.
inset은 언제 쓰나요?
inset은 그림자를 요소 안쪽에 그립니다. 눌린 버튼, 오목한 입력창, 내부 하이라이트 표현에 사용합니다.
相关工具
颜色对比度检查器
计算文字与背景颜色的对比度，并判定是否符合 WCAG 2.x AA/AAA 无障碍标准。所有计算均在浏览器中完成。
颜色明暗生成器
从基准色生成由浅到深的 HEX 调色板，适合制作设计系统的色阶。所有处理均在浏览器中完成。
CSS 单位转换器
根据基准字体大小在 px、rem、em、pt、% 之间相互转换，适用于响应式排版。所有计算均在浏览器中完成。
颜色转换器
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
CSS clamp() 生成器
根据尺寸和视口范围生成响应式 clamp() 代码，无需媒体查询即可实现随屏宽平滑变化的流式排版。所有计算均在浏览器中完成。
CSS 压缩器
去除 CSS 中的注释和多余空白以减小体积，同时保留字符串值。所有处理均在浏览器中完成。